Copy// 参考にさせていただいた作品URL
// [p5.js勉強会]Flow Fieldをライブコーディング
// https://www.youtube.com/watch?v=UrgvjFTjsdg
let posBlue = []; // 青色の点
let posCyan = []; // 水色の点
function setup() {
createCanvas(w = 500, w); // 500x500ピクセルのキャンバスを作成
background(255); // 背景を白色に設定
strokeWeight(1); // 点の太さを1に設定
// 青色と水色の点の位置を初期化
for (let i = 0; i < 130; i++) { // 各色の点の数を増やす
posBlue[i] = {x: random(w), y: random(w)}; // 青色の点の位置をランダムに設定
posCyan[i] = {x: random(w), y: random(w)}; // 水色の点の位置をランダムに設定
}
}
function draw() {
stroke(43, 123, 202); // 線の色を青色に設定
fill(43, 123, 202); // 青色で塗りつぶす
for (let i = 0; i < posBlue.length; i++) {
ellipse(posBlue[i].x, posBlue[i].y, 5, 5); // 青色の円を描く
// ノイズ値に基づいて位置を更新
let dx = noise(posBlue[i].x / w * 15, posBlue[i].y / w * 15, 0.1); // ノイズに基づくxオフセット
let dy = noise(posBlue[i].x / w * 15, posBlue[i].y / w * 15, 8.5); // ノイズに基づくyオフセット
posBlue[i].x += dx; // xオフセットをx座標に加える
posBlue[i].y += dy; // yオフセットをy座標に加える
}
stroke(0, 191, 255); // 線の色を水色に設定
fill(0, 191, 255); // 水色で塗りつぶす
for (let i = 0; i < posCyan.length; i++) {
ellipse(posCyan[i].x, posCyan[i].y, 5, 5); // 水色の円を描く
// ノイズ値に基づいて位置を更新
let dx = noise(posCyan[i].x / w * 15, posCyan[i].y / w * 15, 0.1); // ノイズに基づくxオフセット
let dy = noise(posCyan[i].x / w * 15, posCyan[i].y / w * 15, 8.5); // ノイズに基づくyオフセット
posCyan[i].x += dx; // xオフセットをx座標に加える
posCyan[i].y += dy; // yオフセットをy座標に加える
}
}
ワタタク