🍵

p5.jsで和柄をつくろう

2022/02/02に公開約3,400字

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

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

https://editor.p5js.org/misako-baba/collections/yCfp16zVe

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

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

「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);
  }
}

色でも向きでも動きでも・・・変数にしてそれをいれてしまいます。
よく「%」を使っていました。割り算の余り、だったと思う。
これを使うと、「1行ごとに上向きにする」とか「3こ飛ばしで赤にする」ことができます。

上のソースは、1行ごと交互に色が変わるイメージです。

和柄ソース🍘

さて、そろそろ作ったものを。
和柄自体に詳しいわけではないので、画像検索して自分なりに書きました・・・ご容赦を・・・

千鳥格子


https://editor.p5js.org/misako-baba/full/f0DYH4fGl

青海波


https://editor.p5js.org/misako-baba/full/hwm8TbeVL

七宝


https://editor.p5js.org/misako-baba/full/FVMzd8YqC

亀甲


https://editor.p5js.org/misako-baba/full/9hLPqqdvl

籠目


https://editor.p5js.org/misako-baba/full/bB2hEehGz

麻の葉


https://editor.p5js.org/misako-baba/full/_-sKqM_SP

捻り梅


https://editor.p5js.org/misako-baba/full/ZA7n3s2xS

三崩し


https://editor.p5js.org/misako-baba/full/Vwj1pW7JX

矢絣


https://editor.p5js.org/misako-baba/full/Wnmf1lWxOZ

分銅


https://editor.p5js.org/misako-baba/full/DOYrACh31

入子菱


https://editor.p5js.org/misako-baba/full/6szOjzObC


https://editor.p5js.org/misako-baba/full/RhP4UIxTF

千鳥卍


https://editor.p5js.org/misako-baba/full/WAw4vFj2W

立沸


https://editor.p5js.org/misako-baba/full/eahKJscxQ

参考文献🤲

https://gin-graphic.hatenablog.com/entry/2021/04/27/113000
かきはじめてから、この記事を教えてもらったのですが、できるだけ見ないで頑張ろうと思い、
心のお守りとしてリンクを保存し、そっと目をつむっていました・・・ちゃんと読みます。
この記事のおかげで仲間がいる気がして、「やってやるぜ!」の拍車がかかったです。
感謝です🙏🥺

Discussion

ログインするとコメントできます