🍵

p5.jsで和柄をつくろう

2022/02/02に公開

Processing

p5.js

dailycoding

tech

去年の年末くらいから、会社のメンバーで「WeeklyCodingしてみよう & p5jsさわってみよう」という、ゆるい取り組みがはじまりました。
それがきっかけで個人的にデイリーコーディングをし始めたので、備忘も兼ねてソースを載せていきたいと思います！
(デイリーコーディング続けられたよ、という記事も書いたのでぜひ・・・)

この1ヶ月は、1日1つを目標に「和柄」をかいてみました。

パターン(繰り返す)ときのアイデアメモ✏️

作ってる途中で気づいたのですが、私はこう作ってたようです。
というのを先にメモしておきます。

「１」とする単位(柄)を決めて作る

この柄を1として、それが繰り返してるな〜をさがします。
それを1つのfunctionにまとめて書きます。
さらにその柄の中でも繰り返してる部分があれば、細分化をしていきます。

パターン以外でも、絵を分解する意識するとコードに落とし込むのが捗る気がします🧐

for文を縦横に繰り返す

今回のソースコードのほぼ全部に以下のfor文がはいっています。
キャンバスを上下にグリッドに分けているイメージです。

let r = 40; // 1つの柄の大きさ
for (let j = 0; j < height; j = j + r) {
  for (let i = 0; i < width; i = i + r) {
    // 1とする柄をかく
    drawBlock();
  }
}

このfor文の中で、さっきの「1」とした柄を描けばOK。
rは柄によって調整。

繰り返す中で何か変化をつける

慣れてくると、柄の中にアクセントつけるとかわいいです。
さっきのfor文のなかで、ifをつかって、亜種をかきわけます。

let r = 40; // 1つの柄の大きさ
let c = 0; // たとえば色とか
for (let j = 0; j < height; j = j + r) {
  for (let i = 0; i < width; i = i + r) {
    if(j % 2) {
      // 亜種用の記述
      c = 100;
    }
    
    // 1とする柄をかく
    drawBlock(c);
  }
}