Processing 1.0 - Processing Discourse

Patric

Slow painting
Apr 20^th, 2009, 1:13am

Hello, I wrote this (first) little program to try something, but it does not work... The goal is: slow painting, so that you can see the cursor moving. I tried with 'delay' and with a for-next to slow down, but nothing works.
How can that be solved?

Code:

void setup() {
  size(300, 300);
  background(100);
}
void draw() { 
for (int i = 1; i < 255; i++) {
   for(int j = 1; j < 255; j++) {
    color c = color(255-j, 255-i, 0);   
    set(i, j, c);  
  }
 }
}

paul_pom

Re: Slow painting
Reply #1 - Apr 20^th, 2009, 2:01am

If I understood well, you have to use draw as a loop instead of using for loops.
Put your indexes i and j outside the draw and increment them.
Adjust the framRate to control the speed :

Code:


void setup() {
  size(300, 300);
  background(100);
  frameRate(120);
}

int i=1;
int j=1;

void draw() { 
if(i<255)
{
   if(j < 255)
   {
    color c = color(255-j, 255-i, 0);   
    set(i, j, c);
    j++;
   }
   else
   {
     j=1;  
     i++;
   }
}
 
}

PhiLho YaBB Moderator Offline Posts: 4190 Near Paris (France)	Re: Slow painting Reply #2 - Apr 20^th, 2009, 4:09am What paul_pom said: Processing executes the whole code in draw() before updating anything on the screen. Then it run again draw() to update the screen, and so on.

Patric YaBB Newbies Offline Posts: 7	Re: Slow painting Reply #3 - Apr 20^th, 2009, 4:39am Yes, it works, thank you! But how does it come that this does not work? I am afraid I do not understand it completely.. Code: void setup() { size(300, 300); //background(100); //frameRate(5); } int x=1; int y=1; int c=1; void draw() { while(x<255) { while(y<255) { c = color(255-y, 255-x, 0); set(x, y, c); y++; } y=1; x++; } }

paul_pom

Re: Slow painting
Reply #4 - Apr 20^th, 2009, 6:47am

As PhiLho just said, you have to understand the draw principle on which Processing is based.

The draw function will be executed at each frame wihch means at teh frequency set by frameRate() method.

If you do a FOR or WHILE loop inside the draw, this loop will be entirely executed at each frame which means your picture will be drawn entirely at each frame.

To test the idea put a background(0); before your loop.
See, doesn't change anything because the all picture is drawn by the loop on the background.

What you want is draw ONE pixel at each frame not the all picture so that you can see the progression of the drawing process.

An other way to do it for illustration purpose would be to write a method draw_next_pixel which will draw the next pixel of your picture. Then you call that method in the draw :
Code:



int xPixel=0;
int yPixel=0;

void setup()
{
  size(300,300);
  frameRate(1000);
}

void draw()
{
  drawNextPixel();
}

void drawNextPixel()
{
  //color the current pixel
  color c = color(255-yPixel, 255-xPixel, 0);   
  set(xPixel, yPixel, c); 
 
 // define next pixel 
  if(yPixel<height)
    //next line
    yPixel++;
  else
  {
    // back to first line
    yPixel=0;
    if(xPixel<width)
    // next column
	xPixel++;
    else
    {  //end of the picture >> erase and do again
	xPixel=0;
	background(0);
    } 
  }
}

Got it ?

paul_pom

Re: Slow painting
Reply #5 - Apr 20^th, 2009, 5:27am

As PhiLho just said, you have to understand the draw principle on which Processing is based.

The draw function will be executed at each frame wihch means at teh frequency set by frameRate() method.

If you do a FOR or WHILE loop inside the draw, this loop will be entirely executed at each frame which means your picture will be drawn entirely at each frame.

To test the idea put a background(0); before your loop.
See, doesn't change anything because the all picture is drawn by the loop on the background.

What you want is draw ONE pixel at each frame not the all picture so that you can see the progression of the drawing process.

An other way to do it for illustration purpose would be to write a method draw_next_pixel which will draw the next pixel of your picture. Then you call that method in the draw :
Code:



int xPixel=0;
int yPixel=0;

void setup()
{
  size(300,300);
  frameRate(1000);
}

void draw()
{
  drawNextPixel();
}

void drawNextPixel()
{
  //color the current pixel
  color c = color(255-yPixel, 255-xPixel, 0);   
  set(xPixel, yPixel, c); 
 
 // define next pixel 
  if(yPixel<height)
    //next line
    yPixel++;
  else
  {
    // back to first line
    yPixel=0;
    if(xPixel<width)
    // next column
	xPixel++;
    else
    {  //end of the picture >> erase and do again
	xPixel=0;
	background(0);
    } 
  }
}

Got it ?

Patric YaBB Newbies Offline Posts: 7	Re: Slow painting Reply #6 - Apr 20^th, 2009, 8:28am Got it! Thank you all, nice forum, nice people! To prove: best of both worlds (was a bit slow, one pixel at a time): Code: void setup() { size(300, 300); background(100); //frameRate(500); } int x=1;int y=1;int c=1; void draw(){ if(x<255) { x++; int y=0; while(y<255) { y++; c++; c = color(255-y, 255-x, 0); set(x, y, c); } } }

paul_pom YaBB Newbies Offline Posts: 17	Re: Slow painting Reply #7 - Apr 20^th, 2009, 9:16am yep I thought about that technic too. Now you understood you can decide what effect is the best for you. cheers Paul