p5js:点を描画する

点の描画

p5jsで点を描画するにはpoint()を使います。point()は指定座標に1ピクセルの点を描画します。stroke()を使って点の色を指定することができます

構文

point(x,y,[z])

x:X座標
y:Y座標
z:Z座標（WebGLモードの場合）

サンプル

let x = 0;

function setup() {
  createCanvas(600, 100);  
}

function draw() {
  background(220);

  for ( let i = 0;i<100;i++) {
    stroke(map(i,0,100,100,200));

    let xx = x - i;
    let y = 50 + sin(radians(xx)) * 20 ;
    point(xx,y);
  }


  x++;
  if ( x > width){
    x = 0;
  }
}

サンプルはX座標を移動させながら100個の点を描画しています。
Y座標はsin()を使ってサインカーブを描くように変化させています。