Instance mode namespace

geo

Hi guys, i have a file called main.js that is written in instance mode and, in the same folder, a mandelbrot.js file that contains a function object in wich i use the color() function. The problem is that i cant access the p5 namespace from the mandelbrot.js file so i get an error.

http://pastebin.com/PMjJw31t

GoToLoop

// forum.Processing.org/two/discussion/16496/instance-mode-namespace
// CodePen.io/anon/pen/mPvpOq?editors=1010

// GoToLoop (2016-May-08)

"use strict";

class Mandelbrot {
  constructor (p, img) {
    this.p = p, this.img = img;
  }

  display() {
    const x = this.p.width  - this.img.width  >> 1,
          y = this.p.height - this.img.height >> 1;

    this.p.image(this.img, x, y);
  }

  fillImg(aBGR) {
    this.img.loadPixels();
    const pix = new Int32Array(this.img.pixels.buffer), len = pix.length;
    for (let i = 0; i < len; pix[i++] = aBGR);
    this.img.updatePixels();
  }
}

new p5(p => {
  let m;

  p.setup = () => {
    p.createCanvas(768, 512);
    p.noLoop();

    m = new Mandelbrot(p, p.createImage(p.width>>1, p.height>>1));
    m.fillImg(0xff0040FF);
  };

  p.draw = () => {
    p.background('yellow');
    m.display();
  };
});

blindfish

Pretty sure I posted a demo of how to address this recently. This uses the alternate, less verbose instance mode code:

// use something more unique/meaningful than 's' here!
// deliberately make $p5 a global variable:
var $p5 = new p5(function (p) {
// or if you wish you can explicitly attach to the window object
// (same effect but passes "use strict"):
//window['$p5'] = new p5(function (p) {

    p.setup = function() {
        p.createCanvas(768, 512);
        var foo = new Bar();
    };

    p.draw = function() {

    };
}, "targetElementID");


// in your separate class file
function Bar() {
   // to access p5 methods you need a reference to p5 just as you do 
   // in your instance mode sketch code...
   var c = $p5.color(56);
   console.info(c);
} 

Also I noticed this line in your code:

p.m = new mandelbrot(p.createImage(p.height, p.width));

where p is the reference to the p5 instance. It's bad practice to arbitrarily attach properties to a library object instance like this: you might inadvertently override an internal property which could cause you all kind of very hard to trace bugs... Create your own global object to store your variables!

GoToLoop

Made an online CodePen demo for it as well. Check out the link below: :bz http://CodePen.io/anon/pen/mPvpOq?editors=1010

GoToLoop

Alternative w/ DataView and RGBa order for color:
http://CodePen.io/anon/pen/YWWRaO?editors=0010

// forum.Processing.org/two/discussion/16496/instance-mode-namespace
// CodePen.io/anon/pen/YWWRaO?editors=0010

// GoToLoop (2016-May-08)

"use strict";

class Mandelbrot {
  constructor (p, img) {
    this.p = p, this.img = img;
  }

  display() {
    const x = this.p.width  - this.img.width  >> 1,
          y = this.p.height - this.img.height >> 1;

    this.p.image(this.img, x, y);
  }

  fillImg(RGBa) {
    this.img.loadPixels();
    const pix = new DataView(this.img.pixels.buffer), len = pix.byteLength;
    for (let i = 0; i < len; i += 4)  pix.setInt32(i, RGBa);
    this.img.updatePixels();
  }
}

new p5(p => {
  let m;

  p.setup = () => {
    p.createCanvas(768, 512);
    p.noLoop();

    m = new Mandelbrot(p, p.createImage(p.width>>1, p.height>>1));
    m.fillImg(0xFF4000ff);
  };

  p.draw = () => {
    p.background('yellow');
    m.display();
  };
});