この記事を書いた人
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-user-profile-illustrationi-light-blue.png)
- クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
- コンセプトは「クリエイティブコーディング1万時間の歩き方」
- 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始(クリエイティブコーディングで作成した作品集)
目次
作品の画像とコード
![【作品No.26】リサジュー曲線たち【p5.js 2025年1月26日】](https://watataku-artist-katsuyaku.com/wp-content/uploads/2025/01/2lissajous-curves-collection-no26-eye-catching-image.jpg)
// 普及版 ジェネラティブ・アート Processingによる実践ガイド
// 124Pの数式を関数に投げ入れてみて(後略)という言葉を実践して作成
let a = 5;
let b = 4;
let delta = Math.PI / 4; //2の数値も好き
let noiseOffsetX = 1000; //0の数値も好き
let noiseOffsetY = 1000;
function setup() {
createCanvas(600, 600);
background(255);
stroke(0);
noFill();
let numCurves = 10;
let spacing = width / numCurves;
for (let i = 0; i < numCurves; i++) {
for (let j = 0; j < numCurves; j++) {
let xOffset = i * spacing;
let yOffset = j * spacing;
drawLissajousCurve(xOffset, yOffset, spacing / 2);
}
}
}
function drawLissajousCurve(xOffset, yOffset, size) {
push();
translate(xOffset + size, yOffset + size);
beginShape();
for (let t = 0; t <= TWO_PI; t += 0.01) {
let x = size * cos(a * t + delta) * noise(noiseOffsetX);
let y = size * sin(b * t) * noise(noiseOffsetY);
vertex(x, y);
noiseOffsetX += 0.01;
noiseOffsetY += 0.01;
}
endShape();
pop();
}
作った感想
リサジュー曲線とノイズと繰り返しを組み合わせた表現。
けっこう好きですね。
色をつけてみたりしたんですけど、最近POPな作品をつくることが多かったのでシンプルに白黒でやってみました。
今回の作品をつくるきっかけになった[普及版]ジェネラティブ・アートの本の表紙も白黒の作品でしたし、そこに合わせてもみました。
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
それでは今日もレッツワクワクコーディング。