名称未設定_1

魔法が使えたらと思ってProcessingを始めました

こんにちは、普段はIT企業に勤めつつ、やってることはデザイン系のことだったりマネジメント系のことだったりするぼくなんですが、趣味というか人生の嗜みにプログラミングを始めました。
まだまだスキルもないですがAdventカレンダーを書くことで、初学者の自分が一つの区切りにできたらと思って参加しました。

まだまだスキルもございませんので、初学者は初学者なりに、初級者〜上級者まで共通する「初めて取り組むことのお勉強を取り掛かれる環境ってこんな感じ」の参考にしてもらえたら幸甚です。

※この記事はProcessing Advent Calendar 2019に関する記事です
https://qiita.com/advent-calendar/2019/processing

大まかにやったこと全体像

●きっかけ
冒頭にも書いてあるように、趣味を増やそう!の一環です。それと、本当は魔法を使いたかったのですが、いかんせんチャクラも氣もエーテルも感じることができないので、プログラミングで表現したろと思ったわけです。
それと、腐ってもデザイナーなので手元に美しいものを置いておきたかった・表現したかったということもありました。

●やるまで
Twitterで著名の方のツイートとnoteを観ました。
滾る思いででっけぇ本を書いました。それを写しました。
が、見よう見真似ではわからないのでYouTubeを観ました
だがしかし、英語がさらにわからなかったので、ググったりTwitterを眺めてたら良さげな本を見つけました。

良さげな本を元に、ProcessingのIDEをインストールしてコーディングをしました。
ちなみに良さげな本は60%くらいまでをざざざっとやったくらいです。一旦ね!一旦!

●やってから
ある程度、本の通りに繰り返したりコーディングしたりすると、だんだん飽きてきます。飽きます。断言します。飽きます。
人間は継続するのが苦手な生き物なんだとつくづく感じます。
そこで、モチベーション維持のために創作用のアカウントを作りました。makirunoki/まきるのき で活動しているわたしこと、ぼくです。

創作用のアカウントを作成したら、綺麗な表現をしてたりジェネラティブアート系でいろんな表現をしている人をフォローしていきました。
・Pinterest
・Twitter
・Open Processing

の三つくらいで綺麗なものをキャッチアップしたり、自分がこんな表現ができたら・・・と思いを馳せたりしつつモチベーションにしていったりもそうなんですが、これと同時に目標として1週間の内、平均1日30分以上はprocessingのことを考えるorコーディングする目標を立てました。(できなかったときは、1万円で買った本が無駄になるプレッシャーがありました。ひぃ)

ある程度、本の写経ができてきて、何も見ずにfor文や基本的なオブジェクトの描き方ができるようになってから、自分なりに課題を設けることにしました。

●課題を設定して、クリアするまで

設定した課題はこちら

自分で作ったやつがこれ

●課題を設定する中で自分が決めたルール
・お題はPinterest(画像)から見つける
・簡単そう、かつ自分が描写するには少しハードル高そうなやつ
・画面中央に綺麗に表示させる
・アドベントカレンダーの期日までに終わらせる(重要)

お題を見つけてからやったこと

●毎日(平均して)30分以上、課題のことを考える
●実現できそうなメソッドやルールを考える
・配列、変数
・関数(dist、map、translate、rotate、自作関数 など)
・構文(ループ文、sin、cos、PI)
写経してた時にネットのチュートリアルや本に書かれてたのをうっすら覚えてたので、それらを読み返しつつ試行錯誤

●ひとつずつ処理を整理して分解して考えて、再構築する
こう書くとそれっぽいけど、↑で大体1〜2週間くらい試してたからある程度知識技術として蓄積されただけのような気もする

●公の場で宣言する(重要)

処理の整理(訳:解決する問題の整理)
下記は、お題の画像を見ながら考えていたことで、「→」の意味は「ってことは・・?」と同じです

●線で描画する
線ってのは点が連続してるのか、それとも始点から終点に続く線形なのか。今回は線形。でも円(弧)を描いて描画されるので気をつける。
●線の数
数えたわけじゃないけど百個くらい?ループ文で描画するのかな
●描画の方向はどうなのか
線形で描画するなら、始点と終点が必要。今回は放射状にパァっと。
●円の形で始点と終点を制御する
→始点は固定、終点だけ、円の形にする
●円の形 とは
→プレグナンツの法則で線の集合体が円に見えるだけ(デザイナー脳なので認知が歪んでました)なので線の終点を意識すればOK
→円として形づくる処理にはrotate、sin、cosが必要
●終点の座標はどうするか
→そもそも何個、座標が必要なのか
→その座標は保存する必要があるのか(matrix関数や配列が必要か)
→この課題の場合は座標がすぐ描画される処理でも問題はない
→線形の始点は固定、線形の終点は円周上を辿る
→ループ文で百個の線を描画する時に、終点だけ少しずつ座標をずらしていけば完成しそう

あと色々考えたけど忘れてしまった。ただ、思いついたら手当たり次第に試行錯誤しました。


試行錯誤&やったこととやりたいことの紐付け

・弧を描きながら線を書く

スクリーンショット 2019-12-15 23.41.23

→見るに耐えない


●配列を用意して、その中に座標を保存しといて線の始まりと終わりをあれこれするのは?

int RA = 100; //100個 変数の個数
int[] PosA = new int[RA];  //100 個 ふやす
int RB = 100; //100個 変数の個数
int[] PosB = new int[RB];  //100 個 ふやす
float j =0;
int A,B,P = 0;

void setup() {
 size(800, 800);
 colorMode(RGB);
 background(255);
}

void draw() {
 translate(width/2, height/2);
 for (int num = 0; num < 100; num++) {
   num++;
   P = 120;
   j = P / 100 * num ;
   int s = ceil(j);
   PosA[num] = s;
   PosB[num] = -s;
   println(P, s);
   println( PosA[1], PosA[2], PosA[3], PosA[4], PosA[5]);
   println( PosB[1], PosB[2], PosB[3], PosB[4], PosB[5]);
 }

 B++;
 rotate(radians(PosA[B])); 
 line(0, 0, 0+PosA[B], PosA[B]);  
 rotate(radians(PosB[B])); 
 line(0, 0, PosB[B], PosB[B]);
 println(B);
}


void Maru() {
 noStroke();
 fill(100, 200, 100);
 ellipse(100, 0, 5, 5);
}

実行結果

スクリーンショット 2019-12-15 23.47.15

何がどうなってやがる!!(難しく考えすぎてたし、エラーを起こす)


回転させながら線を書く

→結果的にこれが正解に近かったんだけど、引数を使うのと構文の構造がうまく理解できないまま、違うやり方をやろうとしてた。
具体的には、rotateは使ってたけどsin一つだけでの制御でやろうとしてたりとか、for文はいらないけど意味もなく使ってたりとか、map関数でなんかやろうとしてたりとか。

他にも細かいことでつまずいたりなんやかんやありまして・・・
・・・
・・

そして冒頭のあれに戻る

float Xpos = 0; 
float Ypos = 0;
float RA = 0;
float pe = 0;

void setup() {
 size(600, 600);
 frameRate(60);
 background(255);
 pe =  height/3;
}

void draw() {
 fill(200);
 translate(width/2, height/2); //描画の始点をsizeの中心に置く
 rotate(radians(360));
 Xpos = cos(radians(RA)) * pe; 
 Ypos = sin(radians(RA)) * pe;

 line(0, -200, Xpos, Ypos); //始点は固定、終点だけ、カンバスの中心点から円周上を動いていく
 RA += 3;

 if (RA>359) {
   noLoop();
 } //2週以上しないようにする
}

まとめ

今回、processingで「初学者が勉強してた内容を振り返った」というような内容となりましたが、勉強していくうえで、やっていくことは他の学術とそんなに変わらないと思っています。
ただ、人間なので「継続して何かをやり遂げることを続ける」のは言葉ほど容易じゃないと痛感しました。

自分の興味を持ったものに対しては一通りやってみてから良いも悪いも判断するべきだなと思います。
今回を通して感じたのは、継続することもそうですが、色々初めてのことをやっていた自分の技術力や表現力の立ち振る舞いがあまりわからないことでした。自分なりに課題を作ってみたはいいですが、今の自分にとって本当にちょうどいい課題なのかもわからないし、なんとなくの表現のイメージは付いているけどことごとく失敗していきました。

にもかかわらず続けられたのは、自分なりに課題を設定し、それを解決して自分に表現力や技術力が付いてきたと実感して、それはやっぱり自分なりに目標として定めた場所へ試行錯誤してたどり着いた瞬間があるからだと思います。
その時感じた充実感は大事にしておきたいと思いますし、そこ以外でも充実感のあるタイミングがわかれば、次の一歩にも進めやすくなるというのが一番の収穫だったかもしれません。
試行錯誤したはいいものの実際に使われることのなかった関数や構文なども、遠回りをしたことで身についたことだと思うので目には見えない部分でレベルアップができたかなと思います。

ぼくは魔法を使いたくてProcessingを始めましたが、この世の自然現象と科学を結びつけて表現できるすばらしいプログラミング言語だと思いますので、迷っている方がいたらレッツトライ!

Processing チュートリアル 
https://p5codeschool.net/tutorial/


この記事が気に入ったらサポートをしてみませんか?