この記事を書いた人
- クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
- コンセプトは「クリエイティブコーディング1万時間の歩き方」
- 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）
目次
作品の画像とコード
アニメーション。
function setup() {
createCanvas(800, 800);
noFill();
textSize(300);
textAlign(CENTER, CENTER);
}
function draw() {
background(255);
fill(0);
text("OP", width / 2, height / 2 - 140);
text("ART", width / 2, height / 2 + 140);
translate(width / 2, height / 2);
strokeWeight(3);
drawPattern();
}
function drawPattern() {
var w = width - 100;
var h = height - 100;
for (var i = -w / 2; i < w / 2; i += 10) {
for (var j = -h / 2; j < h / 2; j += 10) {
strokeWeight(2 + (i + j) % 4);
stroke(random(255), random(255), random(255));
line(i, j, i + 5, j + 5);
}
}
}剰余演算子を使用
太さが変わる理由は、strokeWeight(2 + (i + j) % 4); という行にあります。この行では、線の太さを 2 + (i + j) % 4 で設定しています。具体的には、以下のように計算されます：
iとjの値を足し合わせます。- その合計に対して
4を割った余り（%は剰余演算子）を求めます。 - その結果に
2を足して、線の太さとして設定します。
例えば、i = 10 と j = 20 の場合：
i + j = 3030 % 4 = 22 + 2 = 4
このようにして、線の太さが 2 から 5 まで変化。線がランダムに太くなったり細くなったりする効果が生まれます。
この処理により、視覚的に興味深いパターンが作られ、Op Artの特徴である動きや振動感を表現している。
作った感想
OP ARTのことを知りました。
いろんな表現があるんですね。
ワタタクそれでは今日もレッツワクワクコーディング。