I'm trying to make something where an image is gradually revealed by the path of a spiral. I've gotten to the point where I can make it have the colors of the image I'm using, I can get it to spiral, but I can't figure out how to make it do both. Here is the code I'm using:
var img;
var ct = 0;
var pixColor;
function preload() {
img = loadImage("test_image.png")
}
function draw() {
//this makes it use the colors of the image
for (var x = 0; x <= width; x++) {
for (var y = 0; y <= height; y++) {
pixColor = img.get(x,y);
}
}
fill(pixColor[0],pixColor[1],pixColor(2));
//this makes the image spiral
ellipse(125+cos(ct)*frameCount/10,175+sin(ct)*frameCount/10,5)
ct+=0.1;
}
Any help would be appreciated. Thank you!
I recommend that you break your problem down into smaller pieces. Start with a sketch that just shows the path of a spiral. Get that working perfectly. Then start over with a new sketch that just reveals an image at hard-coded point values, or wherever the mouse is. Get those working perfectly before you think about combining them.
But taking a look at your code, this section doesn't make a ton of sense:
for (var x = 0; x <= width; x++) {
for (var y = 0; y <= height; y++) {
pixColor = img.get(x,y);
}
}
fill(pixColor[0],pixColor[1],pixColor[2]);
Here you're using a nested for loop to get the color of each pixel. But you never actually do anything with that color until after the for loops complete. In other words, pixColor will only ever have the last color it saw. That's not what you want.
Instead, you probably want to get the color that's "under" the current spiral position. You don't need a for loop for that at all.
var x = 125 + cos(ct) * frameCount / 10;
var y= 175 + sin(ct) * frameCount / 10;
pixColor = img.get(x, y);
ellipse(x, y, 5);
Also note that since you're calling background() every frame, you'll only ever see one circle. If that's not what you want (if you want the spiral to remain on the screen as it's drawn), then consider moving the call to background() to be inside the setup() function.