『Processing クリエイティブ・コーディング入門』をp5.jsで進める Vol.01
この記事は、
『Processing クリエイティブ・コーディング入門 - コードが生み出す創造表現』
のサンプルを、p5.jsで実装していくというものです。
そのまま実装している訳では無く、多少サンプルとは異なっています。
リスト3-2
完成図
ある程度時間経過させて、綺麗だと思った時点をキャプチャしました。
ポイント
- 時間経過によって円が描画されていく。
- 内側から外側へ、円が小さくなっていく。
- 青を基調としたランダムな色を生成する。
コード
<script type="text/javascript"> function setup() { list3_2.setup(); } function draw() { list3_2.draw(); } const fn = { "randomColorRGB": () => { return random(0, 255); }, }; // 点描画で中心に円を描く const list3_2 = { "setup": () => { createCanvas(800, 600); background(0); noStroke(); fill(255); }, "draw": () => { frameRate(60); let x = random(0, width); let y = random(0, height); let d = dist(x, y, width / 2, height / 2); let diameter = 30 - d / 10.0; if (diameter > 0) { list3_2.dot(); fill(fn.randomColorRGB(), fn.randomColorRGB(), 200); ellipse(x, y, diameter, diameter); } }, "drawDotRandom2": (num) => { for (let i of [...Array(num).keys()]) { let x = random(0, width); let y = random(0, height); let d = dist(x, y, width / 2, height / 2); if (d < height / 2) { list3_2.dot(); } else { list3_2.dotFrame(); } ellipse(x, y, 10, 10); } }, "dot": () => { noStroke(); fill(63, 127, 255); }, "dotFrame": () => { noFill(); stroke(31, 127, 255); } }; </script>
list3_2オブジェクトに処理をまとめているのは、
サンプルのコーディングを進めて行くと、ごちゃごちゃとしてきそうなのを回避するためです。
反省点
- コードが全然整理できていない。
- 完成図とコードそれぞれを綺麗なモノにしていきたい。