ワタタククリエイティブコーディングと詩を組み合わせた表現。
画像と詩とコードを載せています。
目次
【作品と詩】流るる星のごとく
動きのある画像
重いのでXの投稿を載せています。
詩 流るる星のごとく
流るる星のごとく
君との日々は過ぎ去った
知らない街を共に歩き
美しい景色に言葉を失くし
愛し合い
空を見上げ 思い返すあの頃は
時が経てども輝いている
流るる星のごとく
君との日々は過ぎ去った
松任谷由実さんの「春よ来い」という曲の歌詞から、思い浮かんだ詩のタイトル。
好きな人と過ごしていると、一瞬で過ぎていく。
コード
// 参考にさせていただいた作品URL
// [p5.js勉強会]Flow Fieldをライブコーディング
// https://www.youtube.com/watch?v=UrgvjFTjsdg
let posYellow1 = []; // 黄色の点1の位置
let posYellow2 = []; // 黄色の点2の位置
function setup() {
createCanvas(w = 500, w); // 500x500ピクセルのキャンバスを作成
background(252, 200, 0); // 背景を黄色に設定
// 黄色の点の位置を初期化
for (let i = 0; i < 70; i++) { // 各色の点の数を増やす
// 黄色の点1の位置をランダムに設定
posYellow1[i] = {x: random(w), y: random(w)};
// 黄色の点2の位置をランダムに設定
posYellow2[i] = {x: random(w), y: random(w)};
}
}
function draw() {
background(252, 200, 0); // 背景を黄色で塗りつぶす
stroke(248, 181, 0); // 線の色を濃い黄色に設定
fill(248, 181, 0); // 濃い黄色で塗りつぶす
// 参照型の配列を使用
for (let i = 0; i < posYellow1.length; i++) {
drawStar(posYellow1[i].x, posYellow1[i].y, 10, 30, 5); // 黄色の星を描く（半径を大きく）
// ノイズ値に基づいて位置を更新
let dx = noise(posYellow1[i].x / w * 15, posYellow1[i].y / w * 15, 0.1); // ノイズに基づくxオフセット
let dy = noise(posYellow1[i].x / w * 15, posYellow1[i].y / w * 15, 8.5); // ノイズに基づくyオフセット
posYellow1[i].x += dx; // xオフセットをx座標に加える
posYellow1[i].y += dy; // yオフセットをy座標に加える
}
stroke(252, 220, 0); // 線の色を薄い黄色に設定
fill(252, 220, 0); // 薄い黄色で塗りつぶす
for (let i = 0; i < posYellow2.length; i++) {
drawStar(posYellow2[i].x, posYellow2[i].y, 10, 30, 5); // 薄い黄色の星を描く（半径を大きく）
// ノイズ値に基づいて位置を更新
let dx = noise(posYellow2[i].x / w * 15, posYellow2[i].y / w * 15, 0.1); // ノイズに基づくxオフセット
let dy = noise(posYellow2[i].x / w * 15, posYellow2[i].y / w * 15, 8.5); // ノイズに基づくyオフセット
posYellow2[i].x += dx; // xオフセットをx座標に加える
posYellow2[i].y += dy; // yオフセットをy座標に加える
}
}
// 星を描く関数
function drawStar(x, y, radius1, radius2, npoints) {
let angle = TWO_PI / npoints;
let halfAngle = angle / 2.0;
beginShape();
for (let a = 0; a < TWO_PI; a += angle) {
let sx = x + cos(a) * radius2;
let sy = y + sin(a) * radius2;
vertex(sx, sy);
sx = x + cos(a + halfAngle) * radius1;
sy = y + sin(a + halfAngle) * radius1;
vertex(sx, sy);
}
endShape(CLOSE);
}挑戦して良かったこと
- 作った作品から詩を書いてみたかったので、試せて良かった
- 星の部分のコードを時間をかけて何をしているのか理解することができた
- 星は内側と外側に頂点があるという視点
- 呼び出し元と呼び出しの部分の理解が進む。紙に印刷しマーカーで色分けをすることで、分かりやすくなった。印刷するメリットでもある
- 角度に関することは、ラジアンで考える
- コードを印刷して貼るときは、100均一の無地のルーズリーフに貼るようになった。方眼用紙を少し節約できる
- A5コピー紙→ルーズリーフの穴をあける→ちょっと切る→B5のルーズリーフバインダーにいれることができると気づく
反省点
以下の部分の理解に頭を使い、次の勉強に行くまでに時間がかかった。
// 星を描く関数
function drawStar(x, y, radius1, radius2, npoints) {
let angle = TWO_PI / npoints;
let halfAngle = angle / 2.0;
beginShape();
for (let a = 0; a < TWO_PI; a += angle) {
let sx = x + cos(a) * radius2;
let sy = y + sin(a) * radius2;
vertex(sx, sy);
sx = x + cos(a + halfAngle) * radius1;
sy = y + sin(a + halfAngle) * radius1;
vertex(sx, sy);
}
endShape(CLOSE);
}次にやること
1つ1つの作品を「何に活かせるか」「どう応用するか」などしっかり考えながらつくり、考える力もつけていく。
ワタタクそれでは今日もレッツワクワクコーディング。