【p5.js】直線を描画する

line関数でCanvasに直線を描画する。

let board_w, board_h, space_w, space_h;

function setup() {
  createCanvas(640, 480);
  board_w = 450;
  board_h = 450;
  space_w = (width-board_h)/2;
  space_h = (height-board_h)/2;
}

function draw() {
  background("black");
  noFill();
  stroke("white");
  rect(space_w, space_h, board_w, board_h);
  for (let y = 1; y < 3; ++y) {
    line(space_w, y*(board_h/3)+space_h, width-space_w, y*(board_h/3)+space_h);
  }
  for (let x = 1; x < 3; ++x) {
    line(x*(board_w/3)+space_w, space_h, x*(board_w/3)+space_w, height-space_h);
  }
}

今回は、以下のように出力される。

line by inoha_naito -p5.js Web Editor

A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators,...

editor.p5js.org

参考

Reference

Find easy explanations for every piece of p5.js code.

p5js.org