# Change the colour of squares after different lengths of time

**URL:** <https://discourse.processing.org/t/change-the-colour-of-squares-after-different-lengths-of-time/34464>\
**Category:** Libraries\
**Created:** [January 4, 2022, 2:56pm UTC](https://discourse.processing.org/t/change-the-colour-of-squares-after-different-lengths-of-time/34464 "2022-01-04T14:56:56Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![teeny13](https://avatars.discourse-cdn.com/v4/letter/t/f14d63/32.png) [@teeny13](https://discourse.processing.org/u/teeny13)\
**Post date:** [January 4, 2022, 2:56pm UTC](https://discourse.processing.org/t/change-the-colour-of-squares-after-different-lengths-of-time/34464/1 "2022-01-04T14:56:56Z")

</div>

Hi everyone,

I am trying to write code so that my four squares will change colour after different lengths of time with music in the background.

Currently, I have created the four squares but they change colour on click and not by themselves.

How can I make the code work so that they change on click and also by themselves.

I’m trying to create a kind of dance mat where as a square colour changes, the player must then step on the corresponding square. (I will be using an arduino)

This is what I have so far:

```auto
import ddf.minim.*;

AudioPlayer player;
Minim minim;//audio context

void setup()
{
  size (640, 640);
  minim = new Minim(this);
  player = minim.loadFile("Documents/Processing/Music/Missy Elliott - Lose Control (feat. Ciara & Fat Man Scoop) (Edited Album Version).mp3", 2048);
  player.play();
}

void draw()
{
  square(80, 80, 220);
  square(80, 320, 220);
  square(320, 80, 220);
  square(320, 320, 220);
 
 if (keyPressed) {
    if (key == 'b' || key == 'B') {
      fill(255);
    }
  } else {
    fill(0);
  }
 square(80, 80, 220);
 
 if (keyPressed) {
    if (key == 'a' || key == 'A') {
      fill(255);
    }
  } else {
    fill(0);
    square(80, 320, 220);
  }
  

 if (keyPressed) {
    if (key == 'c' || key == 'C') {
      fill(255);
    }
  } else {
    fill(0);
  }
  square(320, 80, 220);
  

 if (keyPressed) {
    if (key == 'd' || key == 'D') {
      fill(255);
    }
  } else {
    fill(0);
  }
  square(320, 320, 220);
}

void stop()
{
  player.close();
  minim.stop();
  super.stop();
}

```

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [January 12, 2022, 6:36pm UTC](https://discourse.processing.org/t/change-the-colour-of-squares-after-different-lengths-of-time/34464/2 "2022-01-12T18:36:54Z")

</div>

I think you need to implement timer functions.