クリエイティブプログラミング入門

p5jsでより複雑な図形を描画する方法を説明します。複数の頂点を持つ図形を描画する方法です。begeinShape(),endShape(),vertex()を使います。beginShape()で図形描画を開始しendShape()で終了します。beginShape()からendShape()までに呼び出したvertex()が頂点の指定となります。beginShape()とendShape()のパラメータで図形の形状を指定することができます。stroke(),fill()で線色、塗り潰しの指定ができます。

構文

beginShape([kind])

kind：POINTS、LINES、TRIANGLES、TRIANGLE_FAN、TRIANGLE_STRIP、QUADS、またはQUAD_STRIPのいずれか

構文

endShape([mode])

mode：図形を閉じるにはCLOSEを使います

構文

vertex(x, y)

x：頂点のx座標
y：頂点のy座標

サンプル

endShape(CLOSE)で図形を閉じた時

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

function draw() {  
  beginShape();
  vertex(30, 20);
  vertex(85, 20);
  vertex(85, 75);
  vertex(30, 75);
  endShape(CLOSE);
}

beginShape(POINTS)で頂点を点で描画

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

function draw() {  
  strokeWeight(5);
  beginShape(POINTS);
  vertex(30, 20);
  vertex(85, 20);
  vertex(85, 75);
  vertex(30, 75);
  endShape();
}

beginShape(LINES)で描画。２点を直線でつなぐ

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

function draw() {  
  beginShape(LINES);
  vertex(30, 20);
  vertex(85, 20);
  vertex(85, 75);
  vertex(30, 75);
  endShape();
}

noFill、endShape()引数なし。四角形は閉じられない

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

function draw() {  
  noFill();
  beginShape();
  vertex(30, 20);
  vertex(85, 20);
  vertex(85, 75);
  vertex(30, 75);
  endShape();
}

noFill(),endShape()でCLOSE指定。図形が閉じる

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

function draw() {  
  noFill();
  beginShape();
  vertex(30, 20);
  vertex(85, 20);
  vertex(85, 75);
  vertex(30, 75);
  endShape(CLOSE);
}

beginShape()でTRIANGLES指定。３点で三角形を描画

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

function draw() {    
  beginShape(TRIANGLES);
  vertex(30, 75);
  vertex(40, 20);
  vertex(50, 75);
  vertex(60, 20);
  vertex(70, 75);
  vertex(80, 20);
  endShape();  
}

beginShape()でTRIANGLE_STRIP指定。３点で毎に連続した三角形を描画

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

function draw() {    
    beginShape(TRIANGLE_STRIP);
    vertex(30, 75);
    vertex(40, 20);
    vertex(50, 75);
    vertex(60, 20);
    vertex(70, 75);
    vertex(80, 20);
    vertex(90, 75);
    endShape();
}

beginShape()でTRIANGLE_FAN指定。三角形を回転させて描画

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

function draw() {    
    beginShape(TRIANGLE_FAN);
    vertex(57.5, 50);
    vertex(57.5, 15);
    vertex(92, 50);
    vertex(57.5, 85);
    vertex(22, 50);
    vertex(57.5, 15);
    endShape();
}

beginShape()でQUADS指定。4点毎に四角形を描画

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

function draw() {    
    beginShape(QUADS);
    vertex(30, 20);
    vertex(30, 75);
    vertex(50, 75);
    vertex(50, 20);
    vertex(65, 20);
    vertex(65, 75);
    vertex(85, 75);
    vertex(85, 20);
    endShape();
}

beginShape()でQUAD_STRIP指定。4点毎に四角形を描画、四角形をつなげる

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

function draw() {    
    beginShape(QUAD_STRIP);
    vertex(30, 20);
    vertex(30, 75);
    vertex(50, 20);
    vertex(50, 75);
    vertex(65, 20);
    vertex(65, 75);
    vertex(85, 20);
    vertex(85, 75);
    endShape();
}

頂点を６つ描画

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

function draw() {    
    beginShape();
    vertex(20, 20);
    vertex(40, 20);
    vertex(40, 40);
    vertex(60, 40);
    vertex(60, 60);
    vertex(20, 60);
    endShape(CLOSE);
}

まとめ

今回はp5jsで複雑な図形を描画する方法を説明しました。

p5jsで三角形と四辺形を描画する方法の説明です。

三角形

三角形の描画はtriangle()を使います。三角形は３点の座標を指定して描画します。塗り潰しの色はfill,線色はstrokeで指定します。

構文

triangle(x1, y1, x2, y2, x3, y3)

x1：最初の点のx座標
y1：最初の点のy座標
x2：2点目のx座標
y2：2点目のy座標
x3：3点目のx座標
y3：3点目のy座標

サンプル

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

function draw() {  
  triangle(50, 10, 90, 90, 10, 90);
}

四辺形の描画

四辺形は４つ頂点をもつ多角形ですが、長方形と違って角度が９０度に固定されていません。４点の座標を指定して描画します。

構文

quad(x1, y1, x2, y2, x3, y3, x4, y4)

x1：最初の点のx座標
y1：最初の点のy座標
x2：2点目のx座標
y2：2点目のy座標
x3：3番目の点のX座標
y3：3番目の点のy座標
x4：4番目の点のx座標
y4：4番目の点のy座標

サンプル

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

function draw() {  
  quad(50, 10, 90, 90, 10, 90,20,30);
}

まとめ

今回は三角形と四辺形の描画方法を説明しました。塗りつぶしや線の描画についての詳しい説明はこちらでしてますので御覧ください。

• 線をかいてみよう
• 色を塗ってみよう
• 色を扱ういろいろ

p5jsで四角形を描画する方法の説明です。正方形と長方形を描画する方法が用意されています。

正方形の描画

正方形の描画はsquare()を使います。各角の半径を指定して角を丸める事ができます。塗り潰しの色はfill,線色はstrokeで指定します。
デフォルトでは四角の左上を起点として描画位置を指定しますがrecetMode()で起点の位置を変更することができます。

構文

square(x, y, s, [tl], [tr], [br], [bl])

x：正方形のx座標
y：正方形のy座標
s：正方形の一辺の大きさ。
tl：左上隅の半径（オプション）
tr：右上隅の半径（オプション）
br：右下隅の半径（オプション）
bl：左下隅の半径（オプション）

サンプル

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

function draw() {  
  fill('white');
  stroke('red');

  square(10, 10, 80, 20, 15, 10, 5);
}

長方形の描画

長方形の描画はrect()を使用します。各角の半径を指定して角を丸める事ができます。塗り潰しの色はfill,線色はstrokeで指定します。
デフォルトでは四角の左上を起点として描画位置を指定しますがrecetMode()で起点の位置を変更することができます。

構文

rect(x, y, w, h, [tl], [tr], [br], [bl])

x：長方形のx座標
y：長方形のy座標
w：長方形の幅。
h：長方形の高さ。
tl：左上隅の半径（オプション）
tr：右上隅の半径（オプション）
br：右下隅の半径（オプション）
bl：左下隅の半径（オプション）

サンプル

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

function draw() {  
  rect(30, 20, 155, 55, 20, 15, 10, 5);
}

四角形描画モード指定

四角形を描画する位置の指定方法を変更します。四角形描画モードはCORNER、CORNERS、CENTER、RADIUSの４種類あります。

デフォルトのモードはrectMode（CORNER）で、これはx,y座標を四角形の左上隅として解釈します。
rectMode（CORNERS）は、rect（）の最初の2つのパラメータを1つの角の位置として、3番目と4番目のパラメータを反対側の角の位置として解釈します。
rectMode（CENTER）は、rect（）の最初の2つのパラメータを形状の中心点として解釈し、3番目と4番目のパラメータはその幅と高さです。
rectMode（RADIUS）も、形状の中心点としてrect（）の最初の2つのパラメータを使用しますが、3番目と4番目のパラメータを使用して、形状の幅と高さの半分を指定します。

構文

rectMode(mode)

mode：CORNER、CORNERS、CENTER、またはRADIUSのいずれか

サンプル

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

function draw() {  
  rectMode(CORNER); 
  fill(255); 
  rect(25, 25, 50, 50); 

  rectMode(CORNERS); // Set rectMode to CORNERS
  fill(100); // Set fill to gray
  rect(25, 25, 50, 50);

  rectMode(RADIUS); 
  fill(255); 
  rect(150, 50, 30, 30); 

  rectMode(CENTER); 
  fill(100); 
  rect(150, 50, 30, 30); 

}

まとめ

今回は四角形の描画方法を説明しました。塗りつぶしや線の描画についての詳しい説明はこちらでしてますので御覧ください。

• 線をかいてみよう
• 色を塗ってみよう
• 色を扱ういろいろ

円、楕円、円弧の描画についての説明です。それぞれcircle(),ellipse(),arc()を使って描画します

円の描画

円の描画はcircle()を使います。circle()は指定位置に閉じた真円を描きます。storoke()で枠線の色、fill()で塗りつぶしの色を指定できます。

構文

circle(x, y, d)

x:円の中心位置X座標
y:円の中心位置Y座標
d:円の直径

サンプル

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

function draw() {  
    stroke('red');
    strokeWeight(3);
    fill('white');

    circle(50,50,80);
}

楕円

楕円の描画はellipse()を使います。ellipse()は描画位置と幅、高さを指定します。幅、高さが同じであれば真円になります。storoke()で枠線の色、fill()で塗りつぶしの色を指定できます。ellipseMode()を使うと原点を指定できます。

構文

ellipse(x, y, w, [h])

x:楕円のX座標
y:楕円のY座標
w:楕円の幅
h:楕円の高さ（省略するとwと同じになります）

ellipseMode(mode)

mode: CENTER、RADIUS、CORNER、またはCORNERSのいずれか

ellipseMode()で楕円の原点を指定できます。
デフォルトのモードはellipseMode（CENTER）で、これはellipse（）のx,yで指定した値が楕円の中心点として動作します。
ellipseMode（RADIUS）は、ellipse（）のx,yの値が楕円の中心点となりますが、w,hが楕円の幅と高さの半分と解釈されます
ellipseMode（CORNER）は、ellipse（）のx,yの値が楕円の左上隅として解釈され、w,hが楕円の幅と高さとなります。
ellipseMode（CORNERS）は、ellipse（）のx,yの値が楕円を囲むボックスの1つの角の位置として、w,hが反対側の角の位置として解釈されます。

サンプル

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

function draw() {  
    fill('white');

    ellipseMode(RADIUS);
    ellipse(50,50,40,40);

    ellipseMode(CENTER);
    fill(0);
    ellipse(50,50,40,40);

    ellipseMode(CORNER);
    fill(125);
    ellipse(90,10,40,40);

    ellipseMode(CORNERS);
    fill(125,125,125,80);
    ellipse(100,10,180,90);
}

円弧の描画

円弧の描画はarc()を使います。円弧は楕円に描画開始位置、終了位置を加えて描画します。描画モードにより円弧を閉じたり、円グラフのように描画することができます。描画開始位置と終了位置は常に右回りで描画され、開始と終了が同じ位置の場合は普通の楕円となります。

構文

arc(x, y, w, h, start, stop, [mode])

x：円弧の楕円のx座標
y：円弧の楕円のy座標
w：デフォルトで円弧の楕円の幅
h：デフォルトで円弧の楕円の高さ
start：ラジアンで指定された円弧を開始する角度
stop：ラジアンで指定された円弧を止める角度
mode：円弧の描画方法を決定するためのオプションのパラメータ。CHORD、PIE、またはOPENのいずれか

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

function draw() {  
    fill('white');

    arc(50,50,80,80,0, PI + QUARTER_PI);  
    arc(150,50,80,80,0, PI + QUARTER_PI,OPEN);  
    arc(250,50,80,80,0, PI + QUARTER_PI,CHORD);  
    arc(350,50,80,80,0, PI + QUARTER_PI,PIE);  
}

まとめ

今回は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()を使ってサインカーブを描くように変化させています。

ラインの描画

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に割り当てています。

p5jsで色を扱う方法です。stroke(),fill()等で色を指定する方法として何パターンか用意されています。また、Colorオブジェクトを使って色を管理することができます。

カラーモード

色指定をRGB、HSBのどちらで行うか指定できます。カラーモードの指定はcolorMode()関数を使います。デフォルトではRGBカラーモードになっています。

構文

colorMode(mode,[max])
colorMode(mode,max1,max2,max3,[maxA])

mode:RGB,HSBの定数を指定できます。max:指定値の範囲を指定します。デフォルトは255です

• max1:カラーモードに応じて赤または色相の範囲を指定します。
• max2:カラーモードに応じて緑または彩度の範囲を指定します。
• max3:カラーモードに応じて青または明度の範囲を指定します。
• maxA:アルファ値の範囲を指定します。

サンプル

function draw() {
  colorMode(RGB,255);
  fill(color(100,0,0));
  rect(20,20,60,60);

  colorMode(RGB,100);
  fill(color(100,0,0));
  rect(90,20,60,60);
}

Colorオブジェクトと色指定

p5jsでは色情報を管理するColorオブジェクトが用意されています。Colorオブジェクトは構築時のカラーモードと範囲を格納しています。saturation()等の色情報を取得する関数が呼ばれた時に現在のカラーモードに合わせた値を返します。

Colorオブジェクトの作成

Colorオブジェクトの作成するにはcolor()を呼び出します。パラメータは現在のcolorMode()に応じたRGBまたはHSB値として解釈されます。デフォルトのモードは0から255までのRGB値です。1つの値しか与えられていない場合、それはグレースケール値として解釈されます。2番目の値を追加すると、アルファ透明度として扱います。3つの値が指定されると、それらはRGBまたはHSB値として解釈されます。
4番目の値を追加すると、アルファ透明度が適用されます。
単一の文字列引数を指定すると、RGB、RGBA、およびHex CSSカラー文字列とすべての名前付きカラー文字列がサポートされます。この場合、2番目の引数としての英数字値はサポートされていません。RGBA形式を使用する必要があります。

ここで使用される色指定はstroke(),fill()等の色情報を引数にとる関数でも同様の記述ができます。

RGB値指定

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

構文

let c = color(R,G,B,[alpha]);

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

サンプル

function draw() {
  let c=color(255,0,0);
  fill(c)
  rect(20,20,60,60);
}

HSB値指定

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

構文

color(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);
  let c=color(255,204,100);
  fill(c);
  rect(20,20,60,60);
}

文字列指定

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

CSSの色名文字列で指定する

color(‘red’)

3文字の16進数値で指定する

color (‘#f00’)

6文字の16進数値で指定する

color (‘#FF0000’)

10進数値のRGB値で指定する

color (‘rgb(255,0,0)’)

10進数値のRGBA値で指定する

color (‘rgba(255,0,0,100)’)

パーセント指定のRGB値で指定する

color (‘rgb(100%,0%,0%)’)

パーセント指定のRGBA値で指定する

color (‘rgba(100%,0%,0%、20%)’)

グレースケール指定

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

構文

color(G)

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

色情報の取得

色情報の各要素を取得する関数が用意されています

赤色情報の取得

red(color)

青色情報の取得

blue(color)

緑色情報の取得

green(color)

アルファ透過度の取得

alpha(color)

色相の取得

hue(color)

彩度の取得

saturation(color)

明るさの取得

lightness(color)

輝度の取得

brightness(color)

中間色の計算

p5jsでは２つの色を混ぜ合わせた色を計算することができます。lerpColor()を使います。

 lerpColor(c1,c2,amt)

c1に一つ目の色、c2に二つ目の色を指定します。amtにc1とc2の間の補完量を指定します。0から1の間の数値を指定し、0.1がc1に一番近く0.5はちょうど中間の色になります

サンプル

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

function draw() {
  colorMode(RGB,255);
  let c1 = color(255,255,255);
  let c2 = color(0,0,0);
  let c3 = lerpColor(c1,c2,0.5);

  fill(c1);
  rect(20,20,60,60);

  fill(c3);
  rect(160,20,60,60);

  fill(c2);
  rect(90,20,60,60);

}

まとめ

今回は色に関することを説明しました

• カラーモードについて
• Colorオブジェクトの生成方法
• 色の各要素を取得する方法について
• 中間色を計算する方法について
   

p5jsでの塗りつぶしについての説明です。背景全体を塗りつぶす方法と図形を塗りつぶす方法を説明します。

背景を塗りつぶす

背景を塗りつぶすにはbackground()を使います。デフォルトの背景は透明です。draw()関数の先頭でbackground()を呼び出すとフレーム毎に表示内容がクリアされます。逆にsetup()関数でしかbackground()を呼び出していないとフレーム毎の描画が消されずに残っていきます。背景に画像を指定することもできます。

background()の構文は複数あります。

RGB値指定

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

構文

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

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

サンプル

function draw() {
  background(255,0,0);
}

HSB値指定

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

構文

background(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);
   background(255, 204, 100);
}

文字列指定

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

CSSの色名文字列で指定する

background('red')

3文字の16進数値で指定する

background(‘#f00’)

6文字の16進数値で指定する

background('#FF0000')

10進数値のRGB値で指定する

background('rgb(255,0,0)')

10進数値のRGBA値で指定する

backgound('rgba(255,0,0,100)')

パーセント指定のRGB値で指定する

background('rgb(100%,0%,0%)')

パーセント指定のRGBA値で指定する

background('rgba(100%,0%,0%、20%)')

グレースケール指定

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

構文

background(G)

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

Colorオブジェクト指定

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

構文

background(C)

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

サンプル

function draw() {
  let c= color(255,0,0);
  background(c);
}

画像指定

背景に画像を描画する方法です。

構文

background(image)

imageはImageオブジェクトです。loadImage()またはcreateImage()で作成されたImageオブジェクトを指定します。

図形を塗りつぶす

図形を描画するときの塗りつぶしを指定する方法です。

塗りつぶしの色を指定するにはfill()を呼び出します。塗りつぶし無しにしたい場合はnoFill()を呼び出します。fill(),noFill()は一度呼び出すと別の状態が設定されるまで継続されます。draw()関数が継続して呼び出される場合、一回の処理が終了した後も状態が保持されています。

塗りつぶし無しの指定

塗りつぶし無しの指定はnoFill()を使います。noFill()とnoStroke()を指定すると画面に何も表示されません。

構文

noFill()

サンプル

function setup() {
  createCanvas(100, 100);
  background(220);
  noLoop();
}
function draw() {
  rect(10,10,60,60);
  noFill();
  rect(20,20,60,60);
}

塗りつぶし色の指定

塗りつぶし色の指定はfill()を使います。

fill()の引数として色を指定します。色の指定方法は複数の種類があります。

RGB値指定

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

構文

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

R,G,Bのそれぞれ赤、緑、青の色要素を0から255の数値で指定します。

alphaは透明度の指定で省略可能です。0から255の範囲で指定可能で0に近いほど透明になります。0を指定すると表示されなくなります。

サンプル

function draw() {
  fill(255,0,0);
  rect(20,20,60,60);
}

HSB値指定

HSB値で色を指定します。

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

構文

fill(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);
  fill(255,204,100);
 rect(20,20,60,60);
}

文字列指定

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

CSSの色名文字列で指定する

fill(‘red’)

3文字の16進数値で指定する

fill(‘#f00’)

6文字の16進数値で指定する

fill(‘#FF0000’)

10進数値のRGB値で指定する

fill(‘rgb(255,0,0)’)

10進数値のRGBA値で指定する

fill(‘rgba(255,0,0,100)’)

パーセント指定のRGB値で指定する

fill(‘rgb(100%,0%,0%)’)

パーセント指定のRGBA値で指定する

fill(‘rgba(100%,0%,0%、20%)’)

グレースケール指定

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

構文

fill(G)

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

Colorオブジェクト指定

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

構文

fill(C)

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

サンプル

function draw() {
  let c=color(255,0,0);
  fill(c);
  rect(20,20,60,60);
}

まとめ

今回は背景色の指定方法と図形の塗りつぶし方法を説明しました。