Displaying an image in a cascade of pixels

Processing Coding Questions
1

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);
soleil = loadImage("img1.JPG");
background(0);
frameRate(100000);

}

void draw() {

int loc= x+y*soleil.width;

soleil.loadPixels();
   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

2

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
3

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);
  //load the image
  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