ワタタク「Flow Field（ベクトル場）」を参考に作品をつくりました。
コード、コード内に参考にしたページのURL(Flow FieldについてのYoutube動画)、良かったこと、反省点、次にどうするかをまとめています。
この記事を書いた人
上達の研究家 / アーティスト
「才能」ではなく「発見」で描く。文系・36歳からの上達ハック。
- ゼロから独学でクリエイティブコーディングに挑戦し、以下の実績を達成
- 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
- KITTE大阪の18メートルあるAxCROSS大型スクリーン
- 虎ノ門ヒルズステーションタワーB2F TOKYO NODE エントランスサイネージで展示
- UN:O（東京大手町）にある会員限定のサテライトオフィスにて2作品常設展示
- 開始1年9ヶ月目に、虎ノ門ヒルズ49階、地上250mのインフィニティプールへ作品提供・展示
- 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
- 【上達の秘密】
- 起源の物語：未経験から虎ノ門ヒルズ展示までの全記録（Genesis）
- 思考の技術：「上達」をシステム化する、モレスキン6冊の運用設計図
- ※虎ノ門ヒルズでの実績を出した「思考」と「経験」を、再現可能な形に体系化
目次
作品：「沈む夕日」とコード
動きのある画像。
// 参考にさせていただいた作品URL
// [p5.js勉強会]Flow Fieldをライブコーディング
// https://www.youtube.com/watch?v=UrgvjFTjsdg
let posOrange1 = []; // orange1の点
let posOrange2 = []; // orange2の点
function setup() {
createCanvas(w = 500, w); // 500x500ピクセルのキャンバスを作成
background(255); // 背景を白色に設定
strokeWeight(1); // 点の太さを1に設定
// orange1とorange2の点の位置を初期化
for (let i = 0; i < 500; i++) { // 各色の点の数を増やす
posOrange1[i] = {x: random(w), y: random(w)}; // orange1の点の位置をランダムに設定
posOrange2[i] = {x: random(w), y: random(w)}; // orange2の点の位置をランダムに設定
}
}
function draw() {
stroke(240, 131, 0, 15); // 線の色をorange1に設定
fill(240, 131, 0, 15); // orange1で塗りつぶす
for (let i = 0; i < posOrange1.length; i++) {
ellipse(posOrange1[i].x, posOrange1[i].y, 5, 5); // orange1の円を描く
// ノイズ値に基づいて位置を更新
let dx = sin(0.5 - noise(posOrange1[i].x / w * 5, posOrange1[i].y / w * 15, 0.1)); // ノイズに基づくxオフセット
let dy = cos(0.5 - noise(posOrange1[i].x / w * 15, posOrange1[i].y / w * 15, 8.5)); // ノイズに基づくyオフセット
posOrange1[i].x += dx; // xオフセットをx座標に加える
posOrange1[i].y += dy; // yオフセットをy座標に加える
}
stroke(246, 173, 72, 15); // 線の色をorange2に設定
fill(246, 173, 72, 15, 15); // orange2で塗りつぶす
for (let i = 0; i < posOrange2.length; i++) {
ellipse(posOrange2[i].x, posOrange2[i].y, 5, 5); // orange2の円を描く
// ノイズ値に基づいて位置を更新
let dx = sin(0.5 - noise(posOrange2[i].x / w * 5, posOrange2[i].y / w * 15, 0.1)); // ノイズに基づくxオフセット
let dy = cos(0.5 - noise(posOrange2[i].x / w * 15, posOrange2[i].y / w * 15, 8.5)); // ノイズに基づくyオフセット
posOrange2[i].x += dx; // xオフセットをx座標に加える
posOrange2[i].y += dy + dx; // yオフセットをy座標に加える
}
}流れを横にしたい場合のメモ
sin(0.5 - noise(posOrange2[i].x / w * 5, posOrange2[i].y / w * 15, 0.1));の部分を以下のように変える。
let dx = sin(PI * noise(posOrange1[i].x / w * 5, posOrange1[i].y / w * 15, 0.1)); // ノイズに基づくxオフセット
let dy = cos(PI * noise(posOrange1[i].x / w * 15, posOrange1[i].y / w * 15, 8.5)); // ノイズに基づくyオフセットこの作品をつくって良かったこと
- Flow Fieldの流れを縦と横にして、どんな感じになるのか分かった
- 1つの動画から多くを学ぶコツをつかんだ
- B5のルーズリーフにFlow Fieldというインデックスを貼った
インデックスを貼ることによって、ここからここまでがFlow Fieldだって分かりやすくなって検索性が上がった
反省点
- 4作品目？かな。まだまだアイデアは出てこない
- ルーズリーフ使い切ったら、B5のノートにしようかな。今のところ、ルーズリーフを並び替える必要性がない
次はどうするか？
- やってない参考書をちょっと進める
縦にすることで、雨のような表現もできるようになった。
他の表現と組み合わせていけるように頑張りたい。
ワタタクそれでは今日もレッツワクワクコーディング。
