元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事とブログのカスタマイズについてアウトプットしています。

 menu

【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);
}
f:id:shiroyuki2020:20210422182214p:plain

line()

直線を描画する。

  • line(x1, y1, x2, y2):始点のxy座標、終点のxy座標
function setup(){
  createCanvas(200, 200);
  background(127);

  //左上から描画領域の中央まで直線を描画
  line(0, 0, width/2, height/2);
}
f:id:shiroyuki2020:20210422182217p:plain

円のアニメーション

円を描画領域いっぱいになるまで拡大する。その後、幅と高さを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);
  }
}
f:id:shiroyuki2020:20210422182221g:plain

まとめ

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

参考サイト