p5.js四角で模様を描いてみる

p5.jsの四角をつかって模様を作ってみます。

今日参考にしたのはこれ「p5.js API rect()」

実装

p5.js web editorを使っています。

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

sketch.js

function setup() {
  createCanvas(200, 200);
}

function draw() {
  background('#a34');
  
  for (i=0; i<25; i++) {
    let x = int(i % 5) * 40;
    let y = int(i / 5) * 40;
    let n = (i % 2) == 0 ? 0 : 12;
    let l = 40 - n; 
    strokeWeight(n)
    fill(100, 20, 20)
    rect(x, y, l, l)
    
  }
}

動かすと

こんな感じの模様ができます。