How to get a color of a pixel in the image using p5.js and use it as a fill color?

Question

I'm learning p5.js. I've tried the following code to draw a circle each time I move the mouse with fill color that changes according to color of an image.

let img;

function setup() {
  createCanvas(400, 400);
loadImage('https://upload.wikimedia.org/wikipedia/commons/e/ef/Hayao_Miyazaki.jpg', img => {
    image(img, 0, 0);
  });
  noStroke();
}

function draw() {
  let c = get(mouseX, mouseY);
  fill(c);
  circle(mouseX, mouseY, 30);
}

But it seems to take the color from the canvas, not from an image. Because of that, if you don't move your mouse fast enough the color doesn't change at all, and even if you do, the amount of color is much more limited, in other words it's not what I intended.

I can get the colors right if I put the loadImage() part inside of a draw function, but then only one circle at a time is visible.

May be I should store every pixel of an image in the array and get the values from an array, without using get()? Is it possible?

I think I'm missing something simple, please help.

I've figured it out. Should have been `img.get(mouseX, mouseY)`, not just `get()`. As simple as I thought! — , Aug 01 '21 at 16:49

score 3 · Answer 1 · answered Aug 01 '21 at 16:50

3

img.get(mouseX, mouseY) to get values from image, not a whole canvas

answered Aug 01 '21 at 16:50

score 0 · Answer 2 · answered Sep 01 '21 at 07:07

0

I too though that img.get(mouseX, mouseY); would work and @mevfy-y also said it so it might work?!

answered Sep 01 '21 at 07:07

Zayaan

169
1
8

How to get a color of a pixel in the image using p5.js and use it as a fill color?

2 Answers2