Painting a canvas

Processing Coding Questions
1

Hi!

I hope you could help me here. (@CodeMasterX , I’m mentioning you cause you’ve helped me before.)

The code should create a 500x500 canvas and fills it in with a solid color (try maroon) using a 25px brush in 20 seconds. The brush goes from left to right for a layer/level/row, then starts again on the next layer/level/row.

so far, this is my code:

float x = 0;
float y = 0;

void setup(){
size(500,500)
frameRate(25)
}

void draw (){
if(x<...) // I'm stuck here
()
color(123,17,19);
rect(x,y,25,25);
x=...25; // I don't know what I'm gonna put here

}

void display(
x=(...){; 
y=(...){;

}
}
1 Like
2

I think the trick here is to realize that you’re drawing 400 squares, each being 25x25 pixels big, in 20 seconds. That means at time 0, you have 0 drawn, and at time 20000 you have 400 drawn. So you can work out, each frame, how many squares should be colored. Then draw all 400 squares, except don’t - only draw a square if it’s got a number that is less than how many should be drawn.

void setup() {
  size(500, 500);
  noStroke();
}

void draw() {
  background(0);
  fill(0,200,0);
  int t = 0;
  float z = map(millis(), 0, 20000, 0, 400);
  for ( int i = 0; i < 20; i++) {
    for ( int j=0; j<20; j++) {
      if ( t < z ) {
        rect(25*j, 25*i, 25, 25);
      }
      t++;
    }
  }
}

Notice the two loops that draw the squares, and the if statement that determines if the current square (#t) should appear, because it is less than the number of squares that should appear (#z) at the current time.

2 Likes
3

so I don’t need a third void (e.g. void display)?

1 Like
4

here is my take on the project (based on frameCount, using PGraphics)

Code 
PGraphics bg;
float s = 5, w = 500/s;
void setup() {
  size(500, 500);
  bg = createGraphics(width, height);
  bg.beginDraw();
  bg.background(0);
  bg.endDraw();
}
void draw() {
  noStroke();
  bg.beginDraw();
  bg.noStroke();
  for (int i = 0; i < 10; i++) {
    float fc = (frameCount-1)*10+i;
    float y = floor(fc/w), x = map(fc % w, 0, w, 0, width);
    bg.square(x, y*s, s);
  }  
  background(bg);
  bg.endDraw();
}
5

No. You only need the setup() and draw() functions. As you probably know, setup() only runs once, to set the size of the sketch and to make it so no outlines are drawn for the rectangles.

Then draw() runs over and over again. It draws more squares over time because the value of millis() (the time in milliseconds since the sketch started) keeps increasing.

2 Likes
6

with “void display()”:

Here is the result of me playing around

Version 1 - based on frameCount

Version 1 
float s = 5, w = 500/s;
void setup() {
  size(500, 500);
}
void draw() {
  background(0);
  display((frameCount-1)*10,w,s);
}
void display(int fc,float w, float s) {
  noStroke();
  rect(0,0,width,(floor(fc/w))*s);
  for(int i = 0; i < fc % w; i++) {
    square(i*s,floor(fc/w)*s,s);
  }
}

Version 2 - based on millis(): (takes 20 sec for the whole screen)
Version 2 
int totalTime = 20000; //20 seconds
float s = 5, w = 500/s;
void setup() {
  size(500, 500);
}
void draw() {
  background(0);
  display((     map(millis()*0.5,0,totalTime,0,(width/s)*(height/s))     ),w,s);
}
void display(float fc,float w, float s) {
  noStroke();
  rect(0,0,width,(floor(fc/w))*s);
  for(int i = 0; i < fc % w; i++) {
    square(i*s,floor(fc/w)*s,s);
  }
}
void mousePressed() { println(millis()); }

version 3: (smooth, not square by square)
Version 3 
int totalTime = 20000; //20 seconds
float s = 50, w = 500/s;
void setup() {
  size(500, 500);
}
void draw() {
  background(0);
  display((     map(millis(),0,totalTime,0,(width/s)*(height/s))     ),w,s);
}
void display(float fc,float w, float s) {
  noStroke();
  rect(0,0,width,(floor(fc/w))*s);
  rect(0,floor(fc/w)*s,s*(fc%w),s);
}
void mousePressed() { println(millis()); }

version 4: (smooth on x AND y axis)
Version 4 
int totalTime = 20000; //20 seconds
float s = 50, w = 500/s;
void setup() {
  size(500, 500);
}
void draw() {
  background(0);
  display((     map(millis(),0,totalTime,0,(width/s)*(height/s))     ),w,s);
}
void display(float fc,float w, float s) {
  noStroke();
  rect(0,0,width,((fc/w))*s);
  rect(0,floor(fc/w)*s,s*(fc%w),s);
}
void mousePressed() { println(millis()); }
2 Likes
7

wow, that’s a lot of versions! Thank you very much!

Does that mean that the frameRate(25) is not that necessary (just random thought, i thought i need that)?

8

If you use millis(), the frameCount/Rate doesn’t matter

9

what if, for instance, the command frameRate is necessary? How would the code look?

I saw your version 1 and noticed it didn’t use that command.

1 Like
10

frameRate([int]) sets the frame rate cap. If you set it to 20 (frameRate(20);) it will just play slower. To change the pace with different frameRates you can just play with the varriables

2 Likes