【p5.js】楕円と直線:ellipse(),line()

ellipse()で楕円、line()で直線を描画します。パラメータの数はいくつなのか、パラメータにはどんな値を指定するのかを確認します。おまけで円のアニメーションのサンプルコードを書きました。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

ellipse()

楕円を描画する。楕円にもellipseMode()がある。

• ellipse(cx, cy, w, h):中央のxy座標、幅、高さ
• ellipseMode(CENTER):デフォルト値
• ellipseMode(RADIUS)
• ellipseMode(CORNER)
• ellipseMode(CORNERS)

function setup(){
  createCanvas(200, 200);
  background(127);

  //描画領域の中央に楕円を描画
  ellipse(width/2, height/2, 100, 50);
}

line()

直線を描画する。

• line(x1, y1, x2, y2):始点のxy座標、終点のxy座標

function setup(){
  createCanvas(200, 200);
  background(127);

  //左上から描画領域の中央まで直線を描画
  line(0, 0, width/2, height/2);
}

円のアニメーション

円を描画領域いっぱいになるまで拡大する。その後、幅と高さを0にして、再び円を拡大表示させる。

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

let w = 0, h = 0;

function draw(){
  ellipse(width/2, height/2, w, h);
  w++;
  h++;
  //楕円の幅と高さを0に戻す
  if(width < w && height < h){
    w = 0;
    h = 0;
    background(127);
  }
}

まとめ

• ellipse():楕円の描画
• 楕円にはellipseMode()がある
• line():直線の描画

参考サイト

• p5.js入門 (全14回) - プログラミングならドットインストール