Instantiation / インスタンス化

p5インスタンスを作成します。これにより、すべての変数がページのグローバルスコープから外れます。

instance mode p5 scope closure
Instance Mode Structure

View Source Code

/*
 * @name Instantiation
 * @arialabel White square in the upper left quadrant on black background 
 * @description Create a p5 instance, which keeps all variables
 * out of the global scope of your page.
 */
let sketch = function(p) {
  let x = 100;
  let y = 100;

  p.setup = function() {
    p.createCanvas(700, 410);
  };

  p.draw = function() {
    p.background(0);
    p.fill(255);
    p.rect(x, y, 50, 50);
  };
};

let myp5 = new p5(sketch);

// Compare to "global mode"
// let x = 100;
// let y = 100;

// function setup() {
//   createCanvas(200,200);
// }

// function draw() {
//   background(0);
//   fill(255);
//   ellipse(x,y,50,50);
// }

License

Source code is available on GitHub p5.js website legacy.

All examples are licensed under CC BY-NC-SA 4.0.