Odd issue where adding a preload of 2 images causes glitch to no longer instantiate

[ashleyjamesbrown]

TypeError: Cannot read properties of undefined (reading 'instance') at undefined:7:21

Using the webcam demo, add in a preload and load 2 images and then try and display them in the draw function and glitch will no longer connect and instantiate.

Repeated this several times. I can have one image (use the demo fish) and then it all goes broken. Delete the code and now the entire sketch no longer functions...

Any thoughts ?

[ashleyjamesbrown]

p5.glitch.js:7 Uncaught TypeError: Cannot read properties of undefined (reading 'instance') at new Glitch (p5.glitch.js:7:21) at setupGlitch (c42037bf-4fed-4ae7-8611-a07dea7077f3:13:14) at setup (c42037bf-4fed-4ae7-8611-a07dea7077f3:24:5) at _setup (p5.js:51481:27) at _runIfPreloadsAreDone (p5.js:51418:29) at p5._decrementPreload (p5.js:51428:27) at img.onload (p5.js:68582:24)

[ffd8]

@ashleyjamesbrown feel free to add some code either embedded or via pastebin. I'm guessing there's an issue with your loaded image path breaking...

One thing about p5.glitch – that should be updated in the examples.. within P5LIVE (if you're using it there?) one usually as to write glitch = new Glitch(this) (putting 'this' so it knows the instance of p5 that it's added to) – however the following demo works for me without that too:

// p5.glitch-webcam
// cc teddavis.org 2020

let libs = ["includes/libs/p5.glitch.js"];

let glitch, capture, w = 320, h = 240, img;

function preload(){
    img = loadImage('includes/demos-data/images/fish.png')
}

function setup() {
    capture = createCapture(VIDEO);
    capture.size(w, h);
    capture.hide();
    createCanvas(windowWidth, windowHeight);

    background(0);
    imageMode(CENTER);

    glitch = new Glitch(); 
    // glitch = new Glitch(this); 
}

function draw() {
    if(frameCount % 3 === 0) {
        if(!mouseIsPressed){
            glitch.loadImage(capture);
        }
        glitch.randomBytes(1);
        glitch.buildImage();
    }

    image(glitch.image, width / 2, height / 2, glitch.width, glitch.height)

    image(img, mouseX, mouseY)
}

[ashleyjamesbrown]

Literally adding (this) worked

glitch = new Glitch(this);

Im in the p5js web editor testing something out before downloading and adding to my own server.

Appreciate the swift response