Instance mode namespace

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

Answers

  • edited May 2016
    // 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();
      };
    });
    
  • 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!

  • edited May 2016

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

  • edited June 2016

    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();
      };
    });
    
Sign In or Register to comment.