【p5.js】楕円を描画する

ellipse関数でCanvasに楕円を描画する。

let board_w, board_h, space_w, space_h, cell_space;

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

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);
  }
  fill("white");
  ellipse(width/2, height/2, (board_w/3)-(cell_space*2),(board_h/3)-(cell_space*2));
}

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

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

参考

reference | p5.js
p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Process...

タイトルとURLをコピーしました