Alpha Mask Example

danielpferreira

I just checked this Alpha Mash Example: http://p5js.org/examples/image-alpha-mask.html

It doesn't seem to be working properly. Or am I missing something?

(This is my first post in this forum, so sorry for any confusion)

Lord_of_the_Galaxy

What about it won't work? Does it open at all? Are you talking about it working in your mobile device?

danielpferreira

Sorry for that. I wasn't more specific because I'm not sure what the issue might be.

There are a couple of things I noticed. First, it seems that the moonwalk image is supposed to be centered (since the code specifies a CENTER imageMode, and the x and y positions are defined as half the width and height - which should correctly center the image). Second, the code uses mouseX and mouseY, which suggests an intention to have user input (maybe the mouse should control where the mask is positioned) - though I'm not sure.

I'm not sure if this is an issue with the code or with the way the page is running it, since even if I edit the code for a much simpler example, it still doesn't work. For example, shouldn't this result in the image moving along with the mouse?

var img; function preload() { img = loadImage("assets/moonwalk.jpg"); } function setup() { createCanvas(720, 400); } function draw() { background(0, 102, 153); image(img, mouseX, mouseY); }

Again, sorry if I'm mistaken about any of this. I'm beginning to learn about p5.

Edit: I tested in Chrome and Firefox

Lord_of_the_Galaxy

I don't really use p5 either, so I'm quite stumped.

GoToLoop

https://forum.Processing.org/two/discussion/19579/how-do-i-display-an-svg-image#Item_37

danielpferreira

Great thanks GoToLoop!