More than 1 year has passed since last update.

p5.js で様々なパターンを描画してみた #2

Last updated at 2022-10-12Posted at 2021-01-27

1. はじめに

以下Qiita記事の続きになります。

Qiita：p5.js で様々なパターンを描画してみた
https://qiita.com/Haruka-Ogawa/items/8ecb8692bf7455e7f124

今回は p5.js を使用して、ハート柄・星柄を描画します。

2. 準備

p5.jsを使用するにあたって、
以下Qiita記事の第２項を参考に準備します。

Qiita：p5.js で様々なパターンを描画してみた > [2. 準備]
https://qiita.com/Haruka-Ogawa/items/8ecb8692bf7455e7f124#2-%E6%BA%96%E5%82%99

3. コーディング

3-6. ハート柄

p5.js を使用して、ハート柄を描きます。

3-6-1. サンプル

See the Pen p5.js_Heart pattern by Haruka Ogawa (@haruka0121) on CodePen.

3-6-2. 解説

以下に、ハート柄を描くための sketch.jsの内容を示します。

sketch.js

function setup() {
  createCanvas(800, 500);  //サイズ
  background('#191970');   //背景色： 藍色（#191970)
}

function draw() {
  noStroke();  //ストローク無効化

  let size = 25;  //ハートのサイズ
  let space =40;  //ハートの間隔
  
  for (x = 0; x <= width; x += space) {
    for (y = 0; y <= height; y += space) {
      fill('#B6FF01');    //図形の塗り潰し:黄緑色(#B6FF01)
      heart(x, y, size);  //ハート描画
    }
  }
}

function heart(x, y, size) {
  beginShape();     //ハート描画開始
  vertex(x, y);     //頂点座標
  bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);  //ベジェ曲線 描画
  bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);  //ベジェ曲線 描画
  endShape(CLOSE);  //ハート描画終了
}

・ setup関数内記述

**setup()**には、サイズ 800px × 500px、背景色青紫（#191970）の描画領域を設定します。

function setup() {
  createCanvas(800, 500);  //サイズ
  background('#191970');   //背景色： 藍色（#191970)
}

・ draw関数内記述

**draw()**には、ハート柄を描くための処理を記述します。


function draw() {
  noStroke();  //ストローク無効化

  let size = 25;  //ハートのサイズ
  let space =40;  //ハートの間隔
  
  for (x = 0; x <= width; x += space) {
    for (y = 0; y <= height; y += space) {
      fill('#B6FF01');    //図形の塗り潰し:黄緑色(#B6FF01)
      heart(x, y, size);  //ハート描画
    }
  }
}

使用した関数は、以下の通りです。

関数	説明
noStroke()	ストロークの描画を無効にする。
fill()	図形を塗りつぶす色を設定する。
heart()	ハートを描画する。draw()の後でheart()の処理内容を記述する。

noStroke()

**noStroke()**でストロークの描画を無効にすることができます。 

**noStroke()**の構文は以下の通りです。

noStroke()

p5.js Reference： noStroke() 
https://p5js.org/reference/#/p5/noStroke

fill()

**fill()で図形を塗りつぶす色を設定することができます。
 fill()**の構文は以下の通りです。


fill(value)

p5.js Reference： fill()
https://p5js.org/reference/#/p5/fill

heart()

ハートを描画する**heart()**を、この後作成します。

- heart関数内記述

**heart()**には、ハートを描くための処理を記述します。

p5.js Web Editor： Heart shape 
https://editor.p5js.org/Mithru/sketches/Hk1N1mMQg

function heart(x, y, size) {
  beginShape();     //ハート描画開始
  vertex(x, y);     //頂点座標
  bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);  //ベジェ曲線 描画
  bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);  //ベジェ曲線 描画
  endShape(CLOSE);  //ハート描画終了
}

使用した関数は、以下の通りです。

関数	説明
beginShape()	複雑な図形描画の開始。
vertex()	図形の頂点座標を指定する。beginShape()およびendShape()内で使用できる。
bezierVertex()	ベジェ曲線の頂点座標を指定する。
endShape()	複雑な図形描画の終了。

beginShape()

beginShape() と endShape() を使用して、複雑な図形を描画することができます。
beginShape() は図形の頂点の記録を開始します。

 **beginShape()**の構文は以下の通りです。

beginShape()

p5.js Reference： beginShape() 
https://p5js.org/reference/#/p5/beginShape

vertex()

**vertex()**は、
**beginShape()およびendShape()**関数内で、図形の頂点座標を指定します。 
**vertex()**の構文は以下の通りです。

vertex(x, y)

xに頂点のx座標、yに頂点のy座標を指定します。

p5.js Reference： vertex()
 https://p5js.org/reference/#/p5/vertex

bezierVertex()

**bezierVertex()**でベジェ曲線の頂点座標を指定します。

 **bezierVertex()**の構文は以下の通りです。

bezierVertex(x2, y2, x3, y3, x4, y4)

x2, y2に最初の制御点のx,y座標、 x3, y3に２つ目の制御点のx,y座標、 x4, y4に最後の制御点のx,y座標 を指定します。

p5.js Reference： bezierVertex() 
https://p5js.org/reference/#/p5/bezierVertex

endShape()

**endShape()**で複雑な図形を描画を終了します。
**endShape()**で、**beginShape()**の呼び出し以降に定義された図形が画像バッファーに書き込まれ、形状を閉じます。

**endShape()**の構文は以下の通りです。

endShape([mode])

modeに CLOSE を使用して形状を閉じます。

p5.js Reference： endShape() 
https://p5js.org/reference/#/p5/endShape

3-7. 星柄

p5.jsを使用して、星柄を描きます。

3-7-1. サンプル

See the Pen p5.js_Star Pattern by Haruka Ogawa (@haruka0121) on CodePen.

3-7-2. 解説

以下に、星柄を描くための sketch.jsの内容を示します。

sketch.js

function setup() {
  createCanvas(800, 500);  //サイズ
  background('#0000FF');   //背景色： 青色（#0000FF)
}

function draw() {
  let size=2;    //星のサイズ
  let space=24;  //星の間隔
  
  for(let x=0;x <= width;x+=space*size){
    for(let y=0;y <= height;y+=space*size){
      noStroke();  //ストローク無効化
      fill('#FFFF00');  //図形の塗り潰し:黄色(#FFFF00)
      star(x, y, 3*size, 8*size, 5);  //星描画・・・,角の数：５
    }  
  }
}

function star(x, y, radius1, radius2, points) {
  let angle = TWO_PI / points; //points: 5
  let halfAngle = angle / 2.0;
  let n = 175;

  beginShape();  //星描画開始
  for (let a = -n; a < TWO_PI-n; a += angle) {
    let sx1 = x + cos(a) * radius2;
    let sy1 = y + sin(a) * radius2;
    vertex(sx1, sy1);  //星の頂点座標:(sx1,sy1)

    let sx2 = x + cos(a + halfAngle) * radius1;
    let sy2 = y + sin(a + halfAngle) * radius1;
    vertex(sx2, sy2); //星の頂点座標:(sx2,sy2)
  }
  endShape(CLOSE);  //星描画終了
}

・setup関数内記述

setup()には、サイズ 800px × 500px、背景色青（#0000FF）の描画領域を設定します。

function setup() {
  createCanvas(800, 500);  //サイズ
  background('#0000FF');   //背景色： 青色（#0000FF)
}

・ draw関数内記述

**draw()**には、星柄を描くための処理を記述します。

function draw() {
  let size=2;    //星のサイズ
  let space=24;  //星の間隔
  
  for(let x=0;x <= width;x+=space*size){
    for(let y=0;y <= height;y+=space*size){
      noStroke();  //ストローク無効化
      fill('#FFFF00');  //図形の塗り潰し:黄色(#FFFF00)
      star(x, y, 3*size, 8*size, 5);  //星描画・・・,角の数：５
    }  
  }
}

使用した関数は、以下の通りです。

関数	説明
noStroke()	ストロークの描画を無効にする。
fill()	図形を塗りつぶす色を設定する。
star()	星を描画する。draw() の後で star() の処理内容を記述する。

noStroke()

noStroke()でストロークの描画を無効にすることができます。

noStroke()の構文は以下の通りです。

noStroke()

p5.js Reference： noStroke() 
https://p5js.org/reference/#/p5/noStroke

fill()

fill()で図形を塗りつぶす色を設定することができます。 

fill()の構文は以下の通りです。

fill(value)

p5.js Reference： fill() 
https://p5js.org/reference/#/p5/fill

star()

星を描画するstar()を、この後作成します。

・ star関数内記述

star()には、星を描くための処理を記述します。

p5.js examples: Star 
https://p5js.org/examples/form-star.html

function star(x, y, radius1, radius2, points) {
  let angle = TWO_PI / points; //points: 5
  let halfAngle = angle / 2.0;
  let n = 175;

  beginShape();  //星描画開始
  for (let a = -n; a < TWO_PI-n; a += angle) {
    let sx1 = x + cos(a) * radius2;
    let sy1 = y + sin(a) * radius2;
    vertex(sx1, sy1);  //頂点座標

    let sx2 = x + cos(a + halfAngle) * radius1;
    let sy2 = y + sin(a + halfAngle) * radius1;
    vertex(sx2, sy2);  //頂点座標
  }
  endShape(CLOSE);  //星描画終了
}

使用した関数は、以下の通りです。

関数	説明
beginShape()	複雑な図形描画の開始。
vertex()	図形の頂点座標を指定する。beginShape()およびendShape()関数内で使用できる。
endShape()	複雑な図形描画の終了。

beginShape()

beginShape() と endShape() を使用して、複雑な図形を描画することができます。
beginShape() は図形の頂点の記録を開始します。

**beginShape()**の構文は以下の通りです。


beginShape()

p5.js Reference： beginShape() 
https://p5js.org/reference/#/p5/beginShape

vertex()

vertex()は、beginShape()およびendShape()関数内で、図形の頂点座標を指定することができます。

 vertex()の構文は以下の通りです。

vertex(x, y)

xに頂点のx座標、yに頂点のy座標を指定します。

p5.js Reference： vertex()
 https://p5js.org/reference/#/p5/vertex

endShape()

endShape()で複雑な図形を描画を終了します。
endShape()で、beginShape()の呼び出し以降に定義された図形が画像バッファーに書き込まれ、形状を閉じます。

 endShape()の構文は以下の通りです。

endShape([mode])

modeにCLOSEを使用して形状を閉じます。

p5.js Reference： endShape() 
https://p5js.org/reference/#/p5/endShape

4. おわりに

今回は p5.js を使用してハート柄・星柄を描画しました。

前回より少し複雑な描画となりましたが、
使い方次第で様々な図形を描画できて、自由度の高さを感じました。

参考情報

p5.js 公式サイト
https://p5js.org/

p5.js Web Editor： Heart shape 
https://editor.p5js.org/Mithru/sketches/Hk1N1mMQg

p5.js examples: Star 
https://p5js.org/examples/form-star.html

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

p5.js で様々なパターンを描画してみた #2

1. はじめに

2. 準備

3. コーディング

3-6. ハート柄

3-6-1. サンプル

3-6-2. 解説

・ setup関数内 記述

・ draw関数内 記述

- heart関数内 記述

3-7. 星柄

3-7-1. サンプル

3-7-2. 解説

・setup関数内 記述

・ draw関数内 記述

・ star関数内 記述

4. おわりに

参考情報

・ setup関数内記述

・ draw関数内記述

- heart関数内記述

・setup関数内記述

・ draw関数内記述

・ star関数内記述