# Painting a canvas

**URL:** <https://discourse.processing.org/t/painting-a-canvas/28273>\
**Category:** Coding Questions\
**Created:** [March 5, 2021, 1:01am UTC](https://discourse.processing.org/t/painting-a-canvas/28273 "2021-03-05T01:01:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Apollo](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@Apollo](https://discourse.processing.org/u/Apollo)\
**Post date:** [March 5, 2021, 1:01am UTC](https://discourse.processing.org/t/painting-a-canvas/28273/1 "2021-03-05T01:01:00Z")

</div>

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:

```auto
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=(...){;

}
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [March 5, 2021, 2:42am UTC](https://discourse.processing.org/t/painting-a-canvas/28273/2 "2021-03-05T02:42:16Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![Apollo](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@Apollo](https://discourse.processing.org/u/Apollo)\
**Post date:** [March 5, 2021, 6:56am UTC](https://discourse.processing.org/t/painting-a-canvas/28273/3 "2021-03-05T06:56:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [March 5, 2021, 9:18am UTC](https://discourse.processing.org/t/painting-a-canvas/28273/4 "2021-03-05T09:18:11Z")

</div>

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

> **Code**
>
> ```auto
> 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();
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [March 5, 2021, 9:18am UTC](https://discourse.processing.org/t/painting-a-canvas/28273/5 "2021-03-05T09:18:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [March 5, 2021, 9:26am UTC](https://discourse.processing.org/t/painting-a-canvas/28273/6 "2021-03-05T09:26:11Z")

</div>

### with “void display()”:

Here is the result of me playing around

Version 1 - based on frameCount

> **Version 1**
>
> ```auto
> 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**
>
> ```auto
> 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**
>
> ```auto
> 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**
>
> ```auto
> 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()); }
> 
> ```

---

<div class="post-metadata">

**Author:** ![Apollo](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@Apollo](https://discourse.processing.org/u/Apollo)\
**Post date:** [March 8, 2021, 2:08am UTC](https://discourse.processing.org/t/painting-a-canvas/28273/7 "2021-03-08T02:08:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [March 8, 2021, 7:04am UTC](https://discourse.processing.org/t/painting-a-canvas/28273/8 "2021-03-08T07:04:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Apollo](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@Apollo](https://discourse.processing.org/u/Apollo)\
**Post date:** [March 12, 2021, 3:21am UTC](https://discourse.processing.org/t/painting-a-canvas/28273/9 "2021-03-12T03:21:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [March 12, 2021, 8:31am UTC](https://discourse.processing.org/t/painting-a-canvas/28273/10 "2021-03-12T08:31:13Z")

</div>

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