p5js:ライン

ラインの描画

p5jsでラインを描画する方法です。
ラインの描画はline()を使います。線に色をつけるにはstorke()を使用します。線の幅はデフォルトで1pxでstrokeWeight()を使って変更できます。塗りつぶしはできませんのでfill()の影響をうけません。

構文

line(x1,y1,x2,y2)

x1:始点のX座標を指定します
y1:始点のY座標を指定します
x2:終点のX座標を指定します
y2:終点のY座標を指定します

サンプル

function setup() {
  createCanvas(100, 100);
  background(220);
  noLoop();
}

function draw() {

  stroke(255,0,0);
  line(20,20,60,20);

  strokeWeight(5);
  line(20,50,60,50);
}

ラインのスタイル

ラインのスタイルとして先端の形状、線幅を指定することができます。それぞれstrokeCap()、strokeWeight()を使用します。こちらで説明していますのでご覧ください。

ラインを使って背景を塗る

ラインを使ったサンプルです。色を変えながらラインを背景全体に描画する事で背景全体にグラデーションをかけています。

function setup() {
  createCanvas(100, 100);
  background(220);
  noLoop();
}

function draw() {
  for(let i=0;i<100;i++) {
    stroke(map(i,0,100,0,255));
    line(0, i, 100, i);
  }
}

map(i,0,100,0,255)が色を決定している箇所です。0から100まで変化するiの値をグレースケールの0から255に割り当てています。