p5.js 覚え書き

公開:2020/11/16
更新:2020/11/24
2 min読了の目安(約1800字TECH技術記事

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のメモ