p5.js

p5.jsとは、デザイン/アートのためのプログラミング言語 Processingを JavaScript に移植したライブラリです。

はじめに
プログラムの基本構造
- function setup( ){・・・}
- function draw( ){・・・}
プロジェクトの構成１
プロジェクトの構成２
描画の基本事項
文法確認

はじめに

p5.js は Processing による描画プログラムを HTMLのCANVAS要素上で動作させるための JavaScript ライブラリーです。したがって、通常のWebサイトと同様に HTMLファイルを用意するとともに、描画プログラムを JavaScriptで記述するという方法で、コンテンツを実装することになります。

↑

準備するもの

開発に必要なものは、コードを記述するためのテキストエディタと動作環境としてのブラウザだけです。

p5.js のライブラリは、ダウンロードしてローカルに置いて利用する方法と、CDNを利用する方法があります。

ライブラリをダウンロードして利用する場合
- ダウンロードページ：https://p5js.org/download/
- フルパッケージ（p5.js Complete）＞ p5.zip をダウンロード
- 基本ライブラリ（p5.js Single）＞ p5.min.js をダウンロード
  基本的な描画プログラムであればこれだけでもOKです。
- HTMLの <head> には以下のように記載します。
```
<script src="p5.min.js"></script> 
```

CDNを利用する場合
- 最新のCDN情報：https://cdnjs.com/libraries/p5.js
- HTMLの <head> には以下のように記載します。
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
```

↑

p5.js プロジェクトのはじめ方

1) はじめにプロジェクトフォルダを作成します。

2) 以下のファイルを準備してプロジェクトフォルダに投入します。
- index.html（必須：Webページとして表示するための基盤）
- style.css（任意：Webページとしてのスタイル定義が必要な場合）
- script.js（必須：ここに Processing と同様のスクリプトを記述）
- p5.min.js（必須：基本ライブラリ）

3) index.html をブラウザで表示することで、描画プログラムが動作します。

↑

即試したい方は・・

以下、公式サイトのエディタを使えば、スクリプトを直接書いて動きを試すことが可能です。

https://editor.p5js.org/

初期サンプルをご覧いただくとわかるとおり、プログラムは setup( ) と draw( ) という２つの関数で構成されます。

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

function draw() {
  background(220);
}

↑

サンプル

授業用サンプルプログラム
ページを独立させました。＞ p5.js/Sample

公式サンプル
以下に公式のサンプルが多数用意されています。これらを参考にして、プログラムの拡張を試みることで、効果的な学習が可能です。
http://p5js.org/examples/

↑

プログラムの基本構造

p5.js（Processing）の描画プログラムは、setup( ) と draw( ) という２つの関数から構成されます。

↑

function setup( ){・・・}

描画に関わる初期設定を行う部分です。
setup は、ページ表示の際、一回だけ実行されます。
描画領域の設定、フレームレートの設定などはここに書きます。
アニメーションのない静止画の描画はここだけで完結します。

↑

function draw( ){・・・}

ページが表示されている間、繰り返し実行されます。
アニメーションさせたい内容をここに書きます。

↑

プロジェクトの構成１

CANVAS が <body> 直下に埋め込まれるシンプルな事例です。

↑

index.html

index.html には、ライブラリとしての p5.min.js と描画プログラムである script .js の２つを読み込みます。描画領域（CANVAS）は、p5.js が自動的に生成して挿入してくれるので、<body> には何も書く必要はありません。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
      <script src="p5.min.js"></script>
      <script src="script.js"></script>
      <title>Sample Site</title>
  </head>
  <body>
  </body>
</html>

↑

script.js

setup() と draw() の枠組みのみ記載しています。実際のコーディングでは、冒頭に外部変数の宣言・定義、またその他の関数を追記することになります。

function setup() {
  // CANVASを生成して <body> へ埋め込み
  createCanvas(640, 480); 

   //   ここにその他の初期設定

}

function draw() {

    // ここに描画のコード

}

↑

サンプル

具体的なコードの事例は、以下をご覧下さい。

p5.js/Sample#patternA

↑

プロジェクトの構成２

CANVAS を特定の要素内に埋め込む事例です（こちらが実用的です）。

↑

index.html

以下のように、<body> 内に <div> 領域を用意しするとともに、任意のIDを設定（ここでは container）して、p5.js のCANVASを割り当てる準備をします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <script src="p5.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" >
   <title>Sample Page</title>
  </head>
  <body>
    <h1>SAMPLE</h1>
    <div id="container"></div>
  </body>
</html>

↑

style.css

CANVAS を埋め込む要素に関する CSS が必要です。

　：
#container {
  width: 1280px;
  margin: auto;
}
　：

↑

script.js

function setup() {
  // CANVASオブジェクトを取得
  var cv = createCanvas(1280, 400);
  // CANVASの親要素として container を指定
  cv.parent("container");

  //   ここにその他の初期設定

}

function draw() {

    //ここに描画プログラム
 
}

↑

サンプル

具体的なコードの事例は、以下をご覧下さい。

p5.js/Sample#patternB

↑

描画の基本事項

↑

座標

画面上のｘ座標は画面左から、y 座標は画面上からの値です。
- windowWidth, windowHeight はブラウザのウインドウの幅と高さを意味します。CANVASをブラウザのサイズに合わせる場合に使います。
- width, height はCANVASの幅と高さを意味します。

↑

色モード

colorMode
RGBモードとHSBモードで、意味が変わります。
- colorMode(RGB, R最大値, G最大値, B最大値, 不透明度最大値);
```
colorMode(RGB, 255, 255, 255,100);
```
- colorMode(HSB, 色相最大値, 彩度最大値, 明度最大値, 不透明度最大値);
```
colorMode(HSB, 360, 100, 100, 100);
```

↑

塗りと線

fill()：塗り色の設定
描画命令の直前に fill(R, G, B, α); などと書くことで図形に適用します。
```
fill(255,255,0,100);　←　黄色になります。
```

noFill()：塗りなし設定

stroke()：線色の設定
描画命令の直前に stroke(R, G, B, α); などと書くことで図形に適用します。
```
stroke(0,255,0,100);　←　緑になります。
```

strokeWeight()：線の太さの設定

strokeWeight(4);　←　4pxの太さの線。

noStroke()：線なし設定

↑

図形の描画

矩形　rect( x, y, 幅, 高さ);
楕円　ellipse( x, y, 幅, 高さ);

↑

文法確認

↑

代入

一般に = を用いて記述した式は「右辺の計算結果を左辺に代入せよ」
という意味になります。
xという変数に100という数値を代入するには・・
```
x = 100;
```
現在の x に、別の値を足した（掛けた）結果を、再び x に代入するには・・
```
x = x+10; （ x = x*10; ）
```
以下のような書き方でも同じ結果になります。
```
x += 10; （ x *= 10; ）　
```
ひとつ増やす（減らす）には・・ ※ x = x+1（ x = x-1 ）と同じです。
```
x++;　（　x--;　）
```

↑

配列変数

同じ種類のデータを複数セットで扱う場合には、配列を用います。
以下のように、宣言して利用します。

d = new Array(7);  　// 配列オブジェクトを new
d[0] = "Sun";　　// 要素の格納
d[1] = "Mon";
  :
d[6] = "Sat";

上の例では、いずれも d[0] ～ d[6]までの7個の値を扱うことができます。
このとき、0や6といった [ ] 内の数字を「添字」といいます。
d[ i ] などの表記で、添字を変数化すると連続的な処理が可能になります。

↑

条件判断 if

if：条件によって分岐します。

if( 条件 ) {
   処理;
} else if( 条件 ) {
   処理;
} else {
   処理;
}

関係演算子（条件部分の記載に使用）

== (equality)
> (greater than)
>= (greater than or equal to)
!= (inequality)
< (less than)
<= (less than or equal to)

論理演算子（条件部分の記載に使用）

&& (logical AND)
! (logical NOT)
|| (logical OR)

例：もし x が負の数であれば円を描く、そうでない時は正方形を描く

if( x<0 ){
    ellipse( PX, PY, S, S );
}else{
    rect( PX, PY, S, S );
}

↑

ループ制御 for, while

for：条件が満たされている間、値を更新しながら処理を繰り返します。

for (初期値; ループ条件; 更新) {
   処理;
}

例

for (var i = 0; i < 80; i = i+5) {
   処理;
}

while：条件が満たされている間、処理を繰り返します。

while (条件) {
  処理;
}

例

var i=0;
while(i<80) {
  処理;
  i = i + 5;
}

↑

関数

はじめに
関数とは処理機能の集合体で、一連の処理を一括実行します。
中学の数学では・・
```
 y = f(x)  　（ 例えば　 y = 2x + 1 ） 
```
と書きましたが、これは、入力データ x に対して、処理 f、つまり２倍して１加えるという一連の処理を施し、結果を y に渡す事を意味します。

関数の定義
実際のプログラムでは、以下のように書いて準備します。
```
function f( x ){
    var y = 2*x + 1;
    return y;
}
```
この関数が存在すれば、プログラム中で、以下のように書くだけで、入力データの値を2倍して1加えた値、すなわち11が y にセットされます。
```
y = f(5);
```

例：２つの値を足し算して、結果を返す関数
```
function add(x, y) {
    var z = x + y;
    return z;
}
```
「親」プログラムの中に以下のように書くと、ans には５が代入されます。
```
var  ans = add(3,2);
```

例えて言うと・・
システム全体が親会社だとすると、個々の関数は、親会社からデータを受け取って、それを処理・加工して、親会社へ戻す「子会社」の役割を担うもの、と言うことができます。

↑

インタラクション

マウスの座標を検知する
- mouseX, mouseY で座標を取得できます。
乱数をつかう
- random(100);：0 -99の値がランダムに得られます。
- random(50,100); ：50 -99の値がランダムに得られます。

イベントプロシージャ
p5.jsのプログラムは、基本的に setup() と draw() の２つの関数からなりますが、マウスがクリックされたときの処理、キーボードが押されたときの処理を記述するための関数も用意されています。以下例です。
- マウスクリック時の動作を記述するには　
```
function mousePressed() {
  ellipse(mouseX, mouseY, 5, 5);
}
```
  　
- キーボードが押された時の動作を記述するには
```
function keyTyped() {
  if (key === 'x') {
     ( 押されたキーが [ x ] の場合の処理 )
  } 
}
```

↑

注意事項：無限ループについて

プログラミングでは、処理手順に間違いがあると、PCに大きな負荷がかかってフリーズすることもあります。例えば以下のような「無限ループ」などは、ブラウザを固まらせる原因になるので注意が必要です。
以下は説明用の記述です。試さないでください。

while (1) {
  console.log("Hello, world");
}

そこで、PCの動作状況をモニタリングする方法を紹介します。

Mac の場合：アクティビティーモニター

メニュー＞移動＞ユーティリティー＞アクティビティーモニター

Windows の場合：タスクマネージャー

CTRL + ALT + DELETE 　・・で起動します。

ちなみに、Macでフリーズした特定のソフトウエアを強制終了するには・・

Command + Option + ESC

これで、稼働中の一覧が表示されるので、終了したいものを選びます。

p5.js

p5.js

CONTENTS

はじめに

準備するもの

p5.js プロジェクトのはじめ方

即試したい方は・・

サンプル

プログラムの基本構造

function setup( ){・・・}

function draw( ){・・・}

プロジェクトの構成１

index.html

script.js

サンプル

プロジェクトの構成２

index.html

style.css

script.js

サンプル

描画の基本事項

座標

色モード

塗りと線

図形の描画

文法確認

代入

配列変数

条件判断 if

ループ制御 for, while

関数

インタラクション

注意事項：無限ループについて

PAGES

GUIDE

DATA