LogoMark.png

p5.js

p5.js

http://p5js.org/

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

CONTENTS




はじめに

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

準備するもの

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

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


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

即試したい方は・・

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

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

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

function draw() {
  background(220);
}


サンプル




プログラムの基本構造

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

function setup( ){・・・}

function draw( ){・・・}

プロジェクトの構成1

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

index.html

index.html には、ライブラリとしての p5.min.js と 描画プログラムである script .js の2つを読み込みます。描画領域(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() {

    // ここに描画のコード

}


サンプル

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

プロジェクトの構成2

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

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

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

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

}

function draw() {

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


サンプル

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

描画の基本事項

座標

色モード

塗りと線

図形の描画




文法確認

代入

配列変数

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

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

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

条件判断 if

ループ制御 for, while


関数

インタラクション

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

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

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

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

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

Command + Option + ESC 

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



PAGES

GUIDE

TOOL

DATA

Last-modified: 2021-06-05 (土) 18:24:02