クリエイティブコーディング#2

前回の記事に引き続きprocessingの話です。

複雑なことはまだ難しいので
とりあえず出来そうなところから。

前回は、入力した文字をランダムな色でランダムに配置できたので。今回は「文字（数字）＋三角形」をランダムに出そうとしました。

・・・しました。

なんか…思ってたんと違う。

まず、三角形が簡単に書けると思っていたのが間違いでした。

三角形を表示するために使うコードはこんな感じ↓

//三角形を表示
triangle(x1, y1, x2, y2, x3, y3); 

//x,yはそれぞれ数字にする(かランダム設定に)

この「x1、y1…」みたいなのが
全然理解できなくて／(^o^)＼ナンテコッタ

最初、三ヵ所数値を設定すればいいと思っていて、xとyの関係を無視。何回も「数値が足りません！数値が足りません！」と、エラーを出しまくりました。

三点の座標(x,y)…のことを全然わかっておらず。きれいな三角形？にするのにも時間がかりました。

size(300, 300);
triangle(150, 20, 250, 280, 50, 280);

//300 X 300　のウィンドウを作る指示
//150,20の点、250,280の点、50,280の点を結んだ三角形を表示させる

なんとなくわかってから書いてみたのが▲

そのコードを実行したのが▼

これを出すまでに、すごく頭が混乱しました。しかし…（できた三角形自体は、ペイントとかで一瞬で描けてしまうレベル(;^ω^)悲しい）

長くなってしまいましたが、記事の最初に張り付けた動画のコードです。

void setup() {
 size(800, 450);
 frameRate(10);
 background(255);
}

void draw() {
 saveFrame("frames/####.png");
 triangle(random(200),random(450),random(800),random(200),random(450),random(800));
 translate(20,50);
 noStroke();//sankaku_no_waku_wo_kesu
 fill(random(240),random(240),random(240));
 textSize(random(10, 50));
 text(random(20), random(width), random(height));
}

小さな三角形が、数字と同じように、画面のいろんなところに散らばるイメージでしたが。できてないです（悲）
突き詰めればなんとかなりそうな気もするんですが、他のことに支障が出そうなので…とりあえず、今回はここまでで書き出しました（言い訳）

triangle（三角形）の記述で、三点の座標を指定の範囲内でランダムに設定するようにして実行したので、細すぎる三角形や、画面いっぱいになりそうなドデカいものまで出現する形になりました。

出現する数字が整数になっていないのはintがないからだと思います…（どこに入れたらいいかわからぬ）ただ、なんとなく小数点以下が出ているのもデジタル～って感じがしてカッコイイなと。

ひたすらrandomに頼りすぎているので、そのあたりを思うような形で出力できるよう理解を深めたいです。

なかなか思い通りに動かすのは難しいですが
とりあえず。こんなの作った！という記録でした。

次回の更新時には、もうちょっと想像してるのと近い？ものが作れてますように。。。

参考にしたサイト：
Processing学習ノート　様
（https://www.d-improvement.jp/learning/processing/）

yoppa.org　様
（https://yoppa.org/）