# Displaying an image in a cascade of pixels

Hello,
I’m new to processing and working with Daniel Shiffman’s book.
I fisrt wanted to display an image pixel by pixel, from top left to bottom right.I think I succeded in what I wanted (making appear an image pixel by pixel or square by square). Now I want to do something more complex but I can’t figure out wich loop to use.
I want this (like a cascade)

First turn: `x = 0 and y = 0` pixel appears
Second turn: (x=0 and y=1) and `(x = 1 and y = 0` )
Third turn: (x = 0 and y = 2) `and (x = 1 and y = 1) and (x=2 and y=0) 4th turn : (x = 0 and y = 3)` and (x = 1 and y = 2) and (x=2 and y=1) and (x=3 and y=0)
And so on…

That’s the code I have when it’s appearing square by square :

``````PImage soleil;
int x=0;
int y=0;
void setup() {
size(1228,1818);
background(0);
frameRate(100000);

}

void draw() {

int loc= x+y*soleil.width;

int c = soleil.pixels[loc];
fill(c);
noStroke();
rect(y,x,10,10);

updatePixels();
x=x+10;
if(x>soleil.width-1){

y=y+10;
x=0;
}

}
``````

I suppose I need a dobble loop, but I tried several things with no success.
Thank’s a lot!

Ilalande

I took a stab at it. Neat effect!

``````void setup() {
size(600, 400);
background(0);
stroke(200,0,0);
}

void draw() {
for (int m=0; m<frameCount; m++) {
// TODO: Check if (m, frameCount-m) is a valid position in the image.
// Only do this if it is:
point(m, frameCount-m);
// TODO: Replace the above with drawing the color from the image at this point.
}
}
``````
2 Likes

You might want to scale everything up by a factor of roughly 5so you can really see what’s going on. However, you would probably also want to slow it down. The reason I am using `rect` instead of `point` is because `point` shows up as a small circle, whereas `rect` shows up as a rectangle / square. This is what the `scale` method does. Here’s the finished code:

``````PImage i;

void setup() {
size(600, 400);
noSmooth();  //improves performance
}

void draw() {
scale(10);
background(0);
noStroke();
int fc = frameCount/5;
if (fc < min(i.width, i.height)) {
int x = fc ;
int y = 0;
for (int a=0; a<=fc; a++) {
fill(i.pixels[y*i.width+x]);
rect(x, y, 1, 1);
x --;
y ++;
}
}
}
``````
1 Like