# Painting a canvas

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

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

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

1 Like

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();
}

``````

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

### 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

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)?

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

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

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