基礎

🧰 p5 の道具箱 p

グローバルモードとインスタンスモードの違い。入門書の circle() を VJam の p.circle() に翻訳する。

🧰 p5 の道具箱 `p`

p5 には絵を描く道具(関数)が大量にある — circle background fill random width … これ全部が p という箱の中に入っている。だから p.circle() p.fill() と書く。

🌐 グローバルモード(入門書の書き方)

function setup() { createCanvas(400, 400); }
function draw()  { background(0); fill(255, 0, 0); circle(200, 200, 50); }

道具が机に散らばっていて、名前だけで使える。 ただし 1ページに p5 は1個しか置けない

📦 インスタンスモード(VJam の書き方)

new p5((p) => {
  p.setup = () => { p.createCanvas(400, 400); };
  p.draw  = () => { p.background(0); p.fill(255, 0, 0); p.circle(200, 200, 50); };
});

道具を箱 p に入れて持ち運ぶ。 箱を別々にすれば p5 を何個でも同居できる(= レイヤーを重ねられる)。

描いている絵は両者まったく同じ。違いは全部の頭に p. が付くことだけ。

💡 覚えることは1つ 入門書に circle(...) とあったら、VJam では p.circle(...)頭に p. を付けるだけ。 これさえ体に入れば、入門書のサンプルを片っ端から VJam プリセットに移植できる。

(p は単なる引数名なので s でも sketch でもいい。慣習で p を使っているだけ)

🤔 なぜ VJam は箱方式なのか

机に散らばる方式(グローバル)だと、1ページに p5 は1個しか置けない。 でも VJ はビジュアルをレイヤーで何枚も重ねる(最大5層)。 箱が別々なら p を何個も持てる = p5 を同時に何個も動かせる。だから VJam は箱方式。

© 2022-2025 infoHiroki. All rights reserved.