p5js:線をかいてみよう

p5jsで図形を描画するときの線についての説明です。線には直線、曲線のような線分の描画と図形の外周に描画されるアウトラインがあります。どちらの場合も同様に線の状態を指定することができます。
指定できる内容は下記になります。

• 表示・非表示
• 色
• 幅
• 先端の形状
• 結合部分の形状

これらを詳しく見ていきます

表示・非表示の切替

デフォルトでは図形を描画したときにアウトラインが表示されます。noStroke()を呼び出す事でアウトラインが表示されなくなります。一度noStroke()を呼び出すとそれ以降に描画される図形はすべてアウトラインが表示されません。noStroke()以外もそうですが１度アウトラインの状態を変えると別の状態が設定されるまで継続されます。draw()関数が継続して呼び出される場合、一回の処理が終了した後も状態が保持されています。

noStroke()を呼び出した後、再度アウトラインを表示するには下記で説明します色の指定をしてあげます。

サンプル

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(220);
  rect(35,100,150,150);  
  noStroke();
  rect(210,100,150,150);
}

右側の四角はnoStroke()が呼ばれた後に描画されているのでアウトラインが表示されていません。

色の指定

線の色を指定する方法です。色を指定するにはstroke()を呼び出します。stroke()の引数として色を指定します。色の指定方法は複数の種類があります。

RGB値指定

RGB値で指定します。オプションとしてアルファ値を指定することもできます。

構文

stroke(R,G,B,[alpha]);

R,G,Bのそれぞれ赤、緑、青の色要素を0から255の数値で指定します。alphaは透明度の指定で省略可能です。0から255の範囲で指定可能で0に近いほど透明になります。0を指定すると表示されなくなります。

サンプル

function draw() {
  background(220);
  stroke(255,0,0);
  rect(35,100,150,150);  
}

HSB値指定

HSB値で色を指定します。HSB値の指定は事前にカラーモードをHSBにしてからstroke()を呼び出します

構文

stroke(H,S,B,[alpha]);

H,S,Bのそれぞれ色相（Hue）、彩度(Saturation)、明度(Brightness)の色要素を0から255の数値で指定します。alpha値についてはRGB指定と同じです。事前にcolorMode(HSB)を呼び出してカラーモードをHSBにしておきます。一度カラーモードをHSBにすると以降の色指定はHSBになるのでRGB指定に戻したい場合はcolorMode(RGB)を呼び出します。

サンプル

function draw() {
  colorMode(HSB);
  stroke(255, 204, 100);
  rect(35,100,150,150);  
}

文字列指定

文字列を使って色を指定する方法です。文字列の記述方法が複数あります

• CSSの色名文字列で指定する
  • stroke(‘red’)
• 3文字の16進数値で指定する
  • stroke(‘#f00’)
• 6文字の16進数値で指定する
  • stroke(‘#FF0000’)
• 10進数値のRGB値で指定する
  • stroke(‘rgb(255,0,0)’)
• パーセント指定のRGB値で指定する
  • stroke(‘rgb(100%,0%,0%)’)
• パーセント指定のRGBA値で指定する
  • stroke(‘rgba(100%,0%,0%、20%)’)

グレースケール指定

グレースケールで指定します。

構文

stroke(G)

Gに0～255の数値を一つ指定します。0に近づくほど黒くなり、255に近づくほど白くなっていきます。

Colorオブジェクト指定

p5jsのColorオブジェクトで指定する方法です

構文

stroke(C)

CにColorオブジェクトを指定します

サンプル

function draw() {
  let c= color(255,0,0);
  stroke(c);
  rect(35,100,150,150);  
}

幅

線の幅を指定する方法です。strokeWeight()を使用します

構文

strokeWeight(weight)

weightに線幅を指定します。単位はピクセルです。

サンプル

function draw() {
  strokeWeight(1); 
  line(20, 20, 80, 20);
  strokeWeight(4); 
  line(20, 40, 80, 40);
  strokeWeight(10); 
  line(20, 70, 80, 70);  
}

先端の形状

線の先端の形状を指定する事ができます。strokeCap()を使います

構文

strokeCap(cap)

capには定数を指定します。定数はSQUARE,PROJECT,ROUNDがあります。デフォルトではROUNDが指定されています。ROUNDは先端が丸まった状態になります。SQUARE,PROJECTともに先端が直線になりますがPROJECTのほうが線幅分多めに描画されます。

サンプル

function draw() {
  strokeWeight(10); 
  strokeCap(ROUND);
  line(20, 20, 80, 20);
  strokeCap(SQUARE);
  line(20, 40, 80, 40);
  strokeCap(PROJECT);
  line(20, 70, 80, 70);  
}

結合部分の形状

線の結合部分の形状を指定する事ができます。strokeJoin()を使います。

構文

strokeJoin(join)

サンプル

function draw() {
  noFill();
  strokeWeight(10.0);
  strokeJoin(MITER);
  beginShape();
  vertex(35, 20);
  vertex(65, 50);
  vertex(35, 80);
  endShape();

  strokeJoin(BEVEL);
  beginShape();
  vertex(85, 20);
  vertex(125, 50);
  vertex(85, 80);
  endShape();

  strokeJoin(ROUND);
  beginShape();
  vertex(135, 20);
  vertex(175, 50);
  vertex(135, 80);
  endShape();
}

まとめ

今回は線の形状を指定する方法を説明しました。線は次の要素を指定できることを憶えましょう

• 表示・非表示
• 色
• 幅
• 先端の形状
• 結合部分の形状