More than 1 year has passed since last update.

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

Last updated at 2022-10-12Posted at 2020-09-07

1. はじめに

p5.jsとは、ProcessingをJavaScriptに移植したもので、
ビジュアルコーディングに特化したJavaScriptライブラリです。

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

今回は p5.jsを使用して、様々な模様を描いてみます。

2. 準備

まず最初に、p5.jsを使用するための準備をします。

2-1. p5.js 取得

p5.jsを使用するにあたって、htmlファイルに p5.jsを読み込ませる必要があります。

以下リンク先からp5.jsをダウンロードして読み込ませるか、CDNのリンクを貼り付けるか、どちらかの方法で、p5.jsを使用することができます。

p5.js： Download
https://p5js.org/download/

以下の画面で、p5.jsをローカルにダウンロードする場合は[p5.js]を、CDNのリンクを取得する場合は[CDN]をクリックします。

今回はCDNリンクを使用して、p5.jsを読み込ませます。

※ 以下リンク先のテンプレートを使用することもできます。

CodePen： p5.jsテンプレート
https://codepen.io/p5js/pen/wreBKy

2-2. htmlファイル作成

以下のような内容の htmlファイル（index.html)を作成します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Creative Coding</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
    <script src="./js/sketch.js"></script>
</body>
</html>

p5.jsを使用するにあたって、
前の手順[2-1. p5.js 取得]で取得したp5.jsと sketch.js を読み込ませます。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
    <script src="./js/sketch.js"></script>

p5.jsの読み込みにはCDNリンク(https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js) を使用します。

sketch.jsは、後の手順[2-3.jsファイル作成] で配置します。

2-3. jsファイル作成

描画処理を記述するjsファイル sketch.js を作成します。

下記に sketch.js の雛形を示します。

sketch.js

function setup(){
  // 描画領域のセットアップ
  createCanvas(800, 500);  //サイズ: 800px × 500px
  background(0);           //背景色: 黒
}

function draw(){
  // 描画
}

jsファイルは大まかに、setup関数 と draw関数の2つで構成されます。

関数	説明
setup()	最初に1回実行される。主に描画領域のセットアップに使用される。
draw()	setup関数の後、繰り返し実行される。

今回は、p5.jsを使用して模様を作成するために、
setup関数に描画領域を設定し、
draw関数に模様を描画する処理を記述します。

・ setup関数

まずsetup関数にて、
createCanvas関数で描画領域（キャンバス要素）を作成します。

また、画面に描画領域をわかりやすく表示するため、
background関数で描画領域の背景色を設定します。

関数	説明
createCanvas()	キャンバス要素を作成する。サイズはピクセル単位で設定する。
background()	キャンバスの背景に使用される色を設定する。デフォルトの背景は透明。

・ draw関数

draw関数には、後ほど様々な模様を描く処理を記述します。

・ブラウザ表示

index.htmlをWebブラウザで開くと、以下のような画面が表示されます。

setup関数で設定した通り、サイズ:800px × 500px、背景色:黒の描画領域が表示されます。

3. コーディング

3-1. ボーダー

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

###3-1-1. サンプル

See the Pen p5.js_Stripe1-1 by Haruka Ogawa (@haruka0121) on CodePen.

3-1-2. 解説

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

sketch.js

function setup() {
  createCanvas(800, 500); //サイズ: 800px × 500px
  background(0);          //背景色: 黒
}

function draw(){ 
  let border_width = 30;  //ボーダーの間隔
  for(let i=0; i<height; i+=border_width*2){
    strokeWeight(border_width); //ストローク幅: ボーダーの間隔（stripe_width)
    stroke('#66CDAA');          //ストローク色: グリーン
    line(0, i, width, i);
  }
}

・ setup関数内記述

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

function setup() {
  createCanvas(800, 500); //サイズ: 800px × 500px
  background(0);          //背景色: 黒
}

・ draw関数内記述

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

function draw(){ 
  let border_width = 30;
  for(let i=0; i<height; i+=border_width*2){
    strokeWeight(border_width);
    stroke('#66CDAA');
    line(0, i, width, i);
  }
}

ループ処理を使って、線を一定間隔で描画することで、ボーダー柄を作ります。

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

関数	説明
strokeWeight()	図形のストローク幅を設定する。
stroke()	図形のストロークに使用する色を設定する。
line()	線（2点間の直接パス）を描画する。

strokeWeight()

**strokeWeight()**でストロークの幅を設定することができます。
**strokeWeight()**の構文は以下の通りです。

strokeWeight(weight)

weightはストロークの太さで、ピクセル単位で指定します。

[参考]
p5.js Reference： strokeWeight()
https://p5js.org/reference/#/p5/strokeWeight

stroke()

**stroke()**でストロークの色を設定することができます。
**stroke()**の構文は以下の通りです。

stroke(value)

valueはストロークの色で、ここではカラーコードで指定します。

[参考]
p5.js Reference： stroke()
https://p5js.org/reference/#/p5/stroke

line()

**line()**で始点・終点を指定し、線を描画することができます。
**line()**の構文は以下の通りです。

line(x1, y1, x2, y2)

x1, y1は始点のx, y座標、x2, y2は終点のx, y座標を指定します。

[参考]
p5.js Reference： line()
https://p5js.org/reference/#/p5/line

3-2. ストライプ

p5.jsを使用して、ストライプ柄を描きます。

3-2-1. サンプル

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

3-2-2. 解説

以下に、ストライプ柄を描くための sketch.jsの内容を示します。

skech.js

function setup() {
  createCanvas(800, 500);  //サイズ: 800px × 500px
  background('#6666FF');   //背景色: ブルー（#6666FF）
}

function draw(){
  let stripe_width = 3;  //ストライプの間隔
  for(let i=0; i<width; i+=stripe_width*5){
    noStroke(); //ストローク無効化
    fill(250);  //図形の塗り潰し: 白
    rect(i, 0, stripe_width, height);
  }
}

・ setup関数内記述

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

function setup() {
  createCanvas(800, 500);  //サイズ: 800px × 500px
  background('#6666FF');   //背景色: ブルー（#6666FF）
}

・ draw関数内記述

**draw()**には、ストライプ柄を描くための処理を記述します。

function draw(){
  let stripe_width = 3;  //ストライプの間隔
  for(let i=0; i<width; i+=stripe_width*5){
    noStroke();  //ストローク無効化
    fill(250);   //図形の塗り潰し: 白
    rect(i, 0, stripe_width, height);
  }
}

ループ処理を使って、長方形を一定間隔で描画することで、ストライプ柄を作ります。

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

関数	説明
noStroke()	ストロークの描画を無効にする。
fill()	図形を塗りつぶす色を設定する。
rect()	長方形を描画する。

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

rect()

**rect()**で長方形を描画することができます。
**rect()**の構文は以下の通りです。

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

x,yは長方形のx,y 座標、
wは長方形の幅、
h （オプション）は長方形の高さ
を指定します。

[参考]
p5.js Reference： rect()
https://p5js.org/reference/#/p5/rect

3-3. 市松模様

p5.jsを使用して、市松模様を描きます。

3-3-1. サンプル

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

3-3-2. 解説

以下に、市松模様を描くための sketch.jsの内容を示します。

sketch.js

function setup() {
    createCanvas(800, 500); //サイズ: 800px × 500px
    background(0);          //背景色： 黒  
}

function draw(){             
  const step = 30; //各ブロックの間隔
    
  for (let y = 0; y <= height; y += step) {
    if(y % (step*2) == 0){  // y の値が (step*2) で割り切れる時
      for (let x = step ; x <= width; x += step*2) {
        noStroke();              //ストローク無効化
        fill(255,0,0);           //図形塗り潰し: 赤
        rect(x, y, step, step);  //四角形描画
      }
    }else{　 // y の値が (step*2) で割り切れない時
      for (let x = 0; x <= width; x += step*2) {
        noStroke();              //ストローク無効化
        fill(255,0,0);           //図形塗り潰し: 赤
        rect(x, y, step, step);  //四角形描画
      }
    }
  }
}

・ setup関数内記述

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

function setup() {
    createCanvas(800, 500); //サイズ: 800px × 500px
    background(0);          //背景色： 黒  
}

・ draw関数内記述

**draw()**には、市松模様描くための処理を記述します。

function draw(){             
  const step = 30; //各ブロックの間隔
    
  for (let y = 0; y <= height; y += step) {
    if(y % (step*2) == 0){  // y の値が (step*2) で割り切れる時
      for (let x = step ; x <= width; x += step*2) {
        noStroke();              //ストローク無効化
        fill(255,0,0);           //図形塗り潰し: 赤
        rect(x, y, step, step);  //四角形描画
      }
    }else{  // y の値が (step*2) で割り切れない時
      for (let x = 0; x <= width; x += step*2) {
        noStroke();              //ストローク無効化 
        fill(255,0,0);           //図形塗り潰し: 赤
        rect(x, y, step, step);  //四角形描画
      }
    }
  }
}

ここでもループ処理を使って、正方形を一定間隔を開けて描画します。
市松模様にするために、間隔のあけ方を２パターン作り、
それぞれ交互に実行されるように条件文で制御します。

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

関数	説明
noStroke()	ストロークの描画を無効にする。
fill()	図形を塗りつぶす色を設定する。
rect()	長方形を描画する。

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

rect()

**rect()**で長方形を描画することができます。
**rect()**の構文は以下の通りです。

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

x,yは長方形のx,y 座標、
wは長方形の幅、
h （オプション）は長方形の高さ
を指定します。

[参考]
p5.js Reference： rect()
https://p5js.org/reference/#/p5/rect

3-4. ギンガムチェック

p5.jsを使用して、ギンガムチェックを描きます。

3-4-1. サンプル

See the Pen p5.js_Gingham check by Haruka Ogawa (@haruka0121) on CodePen.

3-4-2. 解説

以下に、ギンガムチェックを描くための sketch.jsの内容を示します。

sketch.js

function setup() {
  createCanvas(800, 500); //サイズ
}

function draw(){ 
  background(255);  //背景色：白
  noStroke();       //ストロークの描画 無効化

  const step = 15;　//チェック柄の間隔
    
  for (let y = 0; y <= height; y += step) {
    if(y % (step*2) == 0){
      for (let x = 0 ; x <= width; x += step) {
        if(x % (step*2) == 0){ 
          // 四角形(a) の描画
          fill('rgba(153,204,255,1)');     //図形の塗り潰し: 水色・不透明
          rect(x, y, step, step);          //四角形描画
        }else{ 
          // 四角形(b) の描画
          fill('rgba(153,204,255,0.65)');  //図形の塗り潰し: 水色・半透明
          rect(x, y, step, step);          //四角形描画
        }
      }
    }else{
      for (let x = 0; x <= width; x += step*2) {
        // 四角形(c) の描画
        fill('rgba(153,204,255,0.65)');    //図形の塗り潰し: 水色・半透明
        rect(x, y, step, step);            //四角形描画
      }
    }
  }
}

・ setup関数内記述

**setup()**には、サイズ 800px × 500px の描画領域を設定します。

function setup() {
    createCanvas(800, 500); //サイズ
}

・ draw関数内記述

**draw()**には、ギンガムチェックを描くための処理を記述します。

function draw(){ 
  background(255);  //背景色：白
  noStroke();       //ストロークの描画 無効化

  const step = 15;　//チェック柄の間隔
    
  for (let y = 0; y <= height; y += step) {
    if(y % (step*2) == 0){
      for (let x = 0 ; x <= width; x += step) {
        if(x % (step*2) == 0){ 
          // 四角形(a) の描画
          fill('rgba(153,204,255,1)');     //図形の塗り潰し: 水色・不透明
          rect(x, y, step, step);          //四角形描画
        }else{ 
          // 四角形(b) の描画
          fill('rgba(153,204,255,0.65)');  //図形の塗り潰し: 水色・半透明
          rect(x, y, step, step);          //四角形描画
        }
      }
    }else{
      for (let x = 0; x <= width; x += step*2) {
        // 四角形(c) の描画
        fill('rgba(153,204,255,0.65)');    //図形の塗り潰し: 水色・半透明
        rect(x, y, step, step);            //四角形描画
      }
    }
  }
}

ここでは setup関数ではなく、draw関数内で背景色を設定（background関数）します。

ループ処理を使って、正方形を一定間隔を開けて描画します。
正方形の色は３色使用し、
条件文を使って、一定のルールでそれぞれ描画するように制御します。

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

関数	説明
noStroke()	ストロークの描画を無効にする。
fill()	図形を塗りつぶす色を設定する。
rect()	長方形を描画する。

noStroke()

**noStroke()**でストロークの描画を無効にすることができます。
**noStroke()**の構文は以下の通りです。

noStroke()

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

fill()

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

fill(v1, v2, v3, [alpha])

v1・v2・v3はRGB値、
alphaは透明度
を指定します。

[参考]
p5.js Reference： fill()
https://p5js.org/reference/#/p5/fill

rect()

**rect()**で長方形を描画することができます。
**rect()**の構文は以下の通りです。

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

x,yは長方形のx,y 座標、
wは長方形の幅、
h （オプション）は長方形の高さ
を指定します。

[参考]
p5.js Reference： rect()
https://p5js.org/reference/#/p5/rect

3-5. ドット

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

3-5-1. サンプル

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

3-5-2. 解説

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

sketch.js

function setup() {
    createCanvas(800, 500); //サイズ
    background('red');      //背景色: レッド
}

function draw(){
    noStroke();       //ストローク無効化        
    
    const step = 50; 
    
    for (let y = 0; y <= height; y += step) {
        if(y % (step*2) == 0){
            for (let x = step/2 ; x <= width; x += step) {
                const size = step/2;        //円のサイズ: step/2
                fill(255);                  //図形の塗り潰し: 白
                ellipse(x, y, size, size);  //楕円描画： 中心(x, y), 幅size, 高さsize
            }
        }else{
            for (let x = 0; x <= width; x += step) {
                const size = step/2;        //円のサイズ: step/2
                fill(255);                  //図形の塗り潰し: 白
                ellipse(x, y, size, size);  //楕円描画： 中心(x, y), 幅size, 高さsize
            }
        }
    }
}

・ setup関数内記述

**setup()**には、サイズ 800px × 500px、背景色レッド（'red'）の描画領域を設定します。

function setup() {
    createCanvas(800, 500); //サイズ
    background('red');      //背景色: レッド
}

・ draw関数内記述

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

function draw(){
    noStroke();       //ストローク無効化            
    
    const step = 50;
    
    for (let y = 0; y <= height; y += step) {
        if(y % (step*2) == 0){
            for (let x = step/2 ; x <= width; x += step) {
                const size = step/2;        //円のサイズ: step/2
                fill(255);                  //図形の塗り潰し: 白
                ellipse(x, y, size, size);  //楕円描画： 中心(x, y), 幅size, 高さsize
            }
        }else{
            for (let x = 0; x <= width; x += step) {
                const size = step/2;        //円のサイズ: step/2
                fill(255);                  //図形の塗り潰し: 白
                ellipse(x, y, size, size);  //楕円描画： 中心(x, y), 幅size, 高さsize
            }
        }
    }
}

ループ処理を使って、正方形を一定間隔を開けて描画します。
市松模様にするために、間隔の開け方を２パターン作り、
それぞれ交互に実行されるように条件文で制御します。

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

関数	説明
noStroke()	ストロークの描画を無効にする。
fill()	図形を塗りつぶす色を設定する。
ellipse()	楕円を描画する。

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

ellipse()

**ellipse()**で楕円を描画することができます。
**ellipse()**の構文は以下の通りです。

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

x, yは楕円の中心のx, y座標、
wは楕円の幅、
h（オプション）は楕円の高さ
を指定します。

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

4. おわりに

今回は、p5.jsを使用して様々な模様を描いてみました。

ここではボーダー柄はline()、ストライプ柄はrect()を使って描画していますが、
逆にボーダー柄をrect()、ストライプ柄をline()で描画することも可能ですし、
同じ模様でもパターンの作成方法はたくさんあると思います。

p5.js 公式サイトを見ると、線・四角形・円形以外にも様々な図形が描けるようですので、
組み合わせ次第でいろんなパターンが作成できると思います。

参考情報

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

p5.js overview
https://github.com/processing/p5.js/wiki/p5.js-overview

p5.js：Examples
https://p5js.org/examples/

ホームページ　作成、運営管理ガイド：カラーコード一覧表
http://www.netyasun.com/home/color.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 で様々なパターンを描画してみた

1. はじめに

2. 準備

2-1. p5.js 取得

2-2. htmlファイル 作成

2-3. jsファイル 作成

・ setup関数

・ draw関数

・ ブラウザ表示

3. コーディング

3-1. ボーダー

3-1-2. 解説

・ setup関数内 記述

・ draw関数内 記述

3-2. ストライプ

3-2-1. サンプル

3-2-2. 解説

・ setup関数内 記述

・ draw関数内 記述

3-3. 市松模様

3-3-1. サンプル

3-3-2. 解説

・ setup関数内 記述

・ draw関数内 記述

3-4. ギンガムチェック

3-4-1. サンプル

3-4-2. 解説

・ setup関数内 記述

・ draw関数内 記述

3-5. ドット

3-5-1. サンプル

3-5-2. 解説

・ setup関数内 記述

・ draw関数内 記述

4. おわりに

参考情報

2-2. htmlファイル作成

2-3. jsファイル作成

・ブラウザ表示

・ setup関数内記述

・ draw関数内記述

・ setup関数内記述

・ draw関数内記述

・ setup関数内記述

・ draw関数内記述

・ setup関数内記述

・ draw関数内記述

・ setup関数内記述

・ draw関数内記述