p5.js 覚え書き

p5.js とは

ProcessingのJavaScript版

Webブラウザ上で動くので便利。

home | p5.js

p5.js Web Editor

Processing.js（昔の名前です）
Processing.js - Wikipedia

じゃあ、そもそも Processing って何？

すまない。よく知らないんだ。
Java言語べース

Processing.org
Processing - Wikipedia

インストール方法

ぐぐれ

Hello World

 function setup() {
  alert("Hello World!!");
  createCanvas(600,200); // キャンバス（描画エリア）の作成
  background(255, 127, 127);　// キャンバス（背景）の色 R, G, B
  noStroke();
 }
 
 function draw() {
   console.log("hello world");
   let s = 'hello world. ハローワールド';
   fill(0,0,127); // 文字列の色 R, G, B
   textSize(40); // 文字の大きさ（サイズ）
   text(s, 5, 5, width - 5, height - 5 );   
 }

インスタンスモードとグローバルモード

グローバルモード（global mode）

• すべてのP5.js関数と変数がグローバル名前空間に追加される。（いわゆるグローバル汚染）
• 書きやすい
• インターネットに転がっているサンプルは、大抵この書き方

function setup(){
  createElement('h2', 'ランダムに円を描く');
  createCanvas(600,600);
  background(255);
  noStroke();
}
function draw(){
  //オブジェクトの色をランダム（透明度70）
  fill(random(255),random(255),random(255),70);
  circle(random(width),random(height),random(100));
}

インスタンスモード（instance mode）

• P5.jsのインスタンスを生成するためグローバルの名前空間を汚さないモード
• すこし書きにくい

const sketch = p => {
  p.setup = () => {
    p.createElement('h2', 'ランダムに円を描く');
    p.createCanvas(600,600);
    p.background(255);
    p.noStroke();
　}
　p.draw = () => {
    //オブジェクトの色をランダム（透明度70）
    p.fill(p.random(255),p.random(255),p.random(255),70);
    p.circle(p.random(p.width),p.random(p.height),p.random(100));
  }  
}
new p5(sketch, 'id'); 

ダラダラ書くのが性に合っているみたいなので、続きはスクラップでやります。

p5.jsのメモ
suto3の大福帳/p5.js