P5.js Study 013

Generative Design with p5.js / Sketch P_2_1_1_01 を試しながらアレンジ。
元ネタ:https://editor.p5js.org/generative-design/sketches/P_2_1_1_01

新たに覚えたコマンドなど

clear()
// Clears the pixels within a buffer.
// This function only clears the canvas. 

キャンバスを仮想的な正方形のタイルに分割し、各々に左上から右下か、左下から右上、どちらかの直線をランダムで引くと、このような複雑な図形が現れる。

カーソルのX座標を左傾きの直線の太さ、Y座標を右傾きの直線の太さに連動させている。

キー1〜3で線端の形状を変更できる。

Chromeで表示させるとCPU負荷が結構高い。回避するためにフレームレートを下げてみた。

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です