この記事を書いた人
- クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
- コンセプトは「クリエイティブコーディング1万時間の歩き方」
- 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）
目次
作品の画像とコード
アニメーション。
// 参考にさせていただいたYoutube動画とURL
// [p5.js勉強会]縦横ランダムウォークをライブコーディング
// https://www.youtube.com/watch?v=bME_MM32pKE
const color_pat = ["#083d77", "#ebebd3", "#f4d35e", "#ee964b", "#f95738"];
function setup() {
createCanvas(w = 500, w);
obj = [];
for (let i = 0; i < 100; i++) {
obj.push({
x: random(w),
y: random(w),
mode: random([0, 1]),
color: random(color_pat),
size: 15
});
}
background("#083d77");
frameRate(10);
}
function draw() {
for (let i = 0; i < obj.length; i++) {
let x_next, y_next;
if (obj[i].mode == 0) {
x_next = obj[i].x + random(-1, 1) * obj[i].size;
y_next = obj[i].y;
} else {
x_next = obj[i].x;
y_next = obj[i].y + random(-1, 1) * obj[i].size;
}
noStroke();
fill(obj[i].color);
triangle(
x_next, y_next - obj[i].size / 2,
x_next - obj[i].size / 2, y_next + obj[i].size / 2,
x_next + obj[i].size / 2, y_next + obj[i].size / 2
);
obj[i].x = x_next;
obj[i].y = y_next;
if (random() < 0.5) {
obj[i].mode = random([0, 1]);
}
}
}
作った感想
- 矢印が動くみたいね
- 可愛らしさもある
- 芝生にみえるか
ワタタクそれでは今日もレッツワクワクコーディング。