Assigning mouseOver to object in instance mode

p5.js Coding Questions
1

Hello peeps!

I don’t really see how I can assign a mouseOver listener to generated objects in instance mode. This doesn’t work for obvious reasons (looking for the function in the object). I tried
p.glyphs_to_show[n].mouseOver(p.displayGlyphLarge) but that also didn’t work. Any help or pointers much appreciated! I somehow need to reference the p5js mouseover but also the object.

“Uncaught TypeError: Cannot read property ‘mouseOver’ of undefined”

	p.createGlyphList = function() {

		for (var n=0; n<p.glyphs_to_show.length; n++) {
			ng = new Glyph();
			ng.x = p.random(p.canvaswidth)
			ng.y = p.random(p.canvasheight)
			ng.w = p.glyph_width
			ng.h = p.glyph_height
			ng.col = p.random(100,255)
			ng.txt = p.glyphs_to_show[n];
			
			ng.mouseOver(p.displayGlyphLarge);
			p.allglyphs.push(ng);
		}

	}
2

mouseOver() is a method from class p5.Element:

You’re assigning an instance of class Glyph to variable ng: ng = new Glyph();

And later on you attempt to invoke method mouseOver() over that ng:
ng.mouseOver(p.displayGlyphLarge);

Is Glyph somehow a subclass of p5.Element?

3

Well, I guess not looking at it. ng in my mind is just temporary naming. The question that’s turning me inside out is how to call that method when ng is not within p5.

I thought it might be ng.p.mouseOver(p.displayGlyphLarge); with p being set in the class constructor (this.p = p;), but alas no.

I also thought this may be it…

		for (var n=0; n<p.glyphs_to_show.length; n++) {
			p.ng = new Glyph();
			p.ng.x = p.random(p.canvaswidth)
			p.ng.y = p.random(p.canvasheight)
			p.ng.w = p.glyph_width
			p.ng.h = p.glyph_height
			p.ng.col = p.random(100,255)
			p.ng.txt = p.glyphs_to_show[n];
			
			p.ng.mouseOver(p.displayGlyphLarge);
			//p.glyphs_to_show[n].p.mouseOver(p.displayGlyphLarge);
			//p.sketchCanvas.mouseOver(p.displayGlyphLarge);
			//p.sketchCanvas.mouseClicked(p.canvasClicked);
			p.allglyphs.push(p.ng);
		}
4

Giving mouseOver() is a method of class p5.Element, we access it via an instance of it, regardless we’re using the global or instance mode approach.

It seems to me that property p from your class Glyph is of datatype p5; which obviously isn’t a p5.Element!

1 Like
5

Aye aye aye. Now I see! Thanks for your patience.

So talking out loud I need to check canvas mouse position relative to all objects, if within bounds do something else back to default.

Aye caramba!

1 Like