1. /
  2. 2019年 6月

2019年 6月 の投稿一覧

p5js:複雑な図形の描画

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入門 SKETCH:CODING ことのはのあゆみ

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入門 SKETCH:CODING ことのはのあゆみ

p5js:四角形を描画する

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); 

}
rectModeサンプル

まとめ

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

p5js入門 SKETCH:CODING ことのはのあゆみ

p5js:円、楕円、円弧の描画

円、楕円、円弧の描画についての説明です。それぞれ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入門 SKETCH:CODING ことのはのあゆみ

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入門 SKETCH:CODING ことのはのあゆみ

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()を使用します。こちらで説明していますのでご覧ください。

p5js:線をかいてみよう

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

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

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入門 SKETCH:CODING ことのはのあゆみ

p5js:色を扱ういろいろ

p5js入門

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入門 SKETCH:CODING ことのはのあゆみ

p5js:色を塗ってみよう

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);
}

まとめ

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

p5js入門 SKETCH:CODING ことのはのあゆみ

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();
}
結合サンプル

まとめ

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

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

p5js入門 SKETCH:CODING ことのはのあゆみ

p5js:最低限この２つが必要(setupとdrawの話）

setupとdraw関数

setupとdraw関数はp5jsの基本となる関数です。最低限この２つの関数を記述します。WEBエディタでも初期状態でsetupとdraw関数が用意されています。それぞれの動きと役割を見ていきましょう

setup関数

setup関数はプログラムの起動時に一度だけ呼び出されます。ここでは描画エリアのサイズ、背景色等の初期環境を設定します。また、フォントや画像等の外部メディアを読み込む必要がある場合にsetup関数で読み込み処理を記述したりします。setup関数は全体で１つだけ記述し、最初の実行後に再度呼び出す事は推奨されていません。

draw関数

draw関数はsetup関数が呼ばれた後に呼び出されます。明示的に止めるまで自動的に何回も呼び出されます。draw関数がp5jsでのメイン処理となりますのでここで様々な描画処理を記述していきます。draw関数はp5jsが自動的に呼び出しますので明示的に呼び出すことは推奨されていません。

draw関数の呼び出しを制御する

draw関数はp5jsにより自動的に呼び出されます。初期設定では継続的に何度も呼び出されます。この自動呼び出しの動きや、呼び出される間隔を制御することができます。

自動呼び出し制御

draw関数の自動呼び出しを制御する方法です。noLoop()、loop()関数を使います。noLoop()関数を呼び出すと自動呼び出しが停止します。loop()関数を呼び出すと自動呼び出しが再開します。

呼び出し間隔制御

draw関数が呼び出される間隔を制御する方法です。frameRate()関数を使用します。frameRate関数にフレームレートを指定します。フレームレートは毎秒表示するフレーム数になります。１秒間に30回描画の更新を行う場合はframeRate(30);と指定します。基本のフレームレートはディスプレイのリフレッシュレートに基づいており通常は60フレーム/秒になります。フレームレートはハードウェアの影響をうけますのでお使いのパソコンのハードウェアが十分な性能が無い場合、指定したフレーム数を達成できない事があります。映画などでは毎秒24フレームが一般的なのでフレームレートが24あればスムーズなアニメーションが可能です。frameRate関数を引数無しで呼び出すと現在のフレームレートが返されます。

サンプル

ここでp5jsのサンプルを使って今回出てきた内容を確認してみましょう。まずはWEBエディタを開いてください。https://editor.p5js.org/
WEBエディタの使い方は下のページから

WEBエディタを使ってp5jsをはじめてみよう

WEBエディタが表示されたら次のコードを入力してみましょう

let x = 0;

function setup() {
  createCanvas(400, 400);
  frameRate(30);
  background(220);
}

function draw() {
  background(220);
  fill(color(255,0,0));
  ellipse(x,200,100);
  x +=10;
  if ( x > width){
    x = 0;
  }
}
function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}

入力が終わったら「Play」ボタンを押して実行してみます。赤い円が動きだしましたね

次に画面上でマウスをクリックしてみてください。
マウスのボタンを押している間、円の動きが止まります。ボタンを離すとまた円が動き出します。
これは次の部分で制御しています。

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}

mousePressed mouseReleasedはマウスのボタン操作に合わせて呼ばれる関数です。mousePressedはマウスのボタンが押されたとき、 mouseReleasedはボタンが離された時に呼ばれます。今回はマウスのボタンが押された時にnoLoop()、話された時にloopを呼び出しています。マウスのボタンが押されるとnoLoop()が呼ばれてdraw関数が自動的に呼び出されなくなるので円が止まってしまうのです。

次にframeRateの動きを確認してみます。５行目のframeRate(30);の部分をframeRate(10);に変更して「Play」ボタンを押してみましょう。円の動きがカクカクした動きになりましたね。これはフレームレートが１０になったので１秒間に１０回、draw関数が呼ばれています。それまでは１秒間に３０回だったので描画回数が減ったためにカクカクした動きになっています。

もう一つ確認してみましょう。10行目のbackground(220);をコメントにしてみましょう。コメントは行の先頭に//をつけます

//background(220);

「Play」ボタンを押してみましょう。円が重なって残像のように表示されてしまいますね。draw関数は継続的に呼ばれますが、前回描画した内容は保持されています。background(220);を入れることで一旦画面を塗りつぶしてから円を描画していたので１つの円が移動しているように見えていました。「消す→描く→消す→描く」を繰り返していたんですね。この行をコメントにしたことで「描く→描く→描く」になったので前回の描画が残って、残像のような表示になったのです。

円の残像

まとめ

今回はp5jsの基本関数であるsetup,draw関数についてdraw関数の動作を制御するnoLoop,loop,frameRateについての説明でした

p5js入門 SKETCH:CODING ことのはのあゆみ