# Help changing square colours after time

Hey everyone,

I’m trying to make the squares I’ve created change their colour randomly.

Instead my code is only working on click.

The reason I am doing this is so that when a square changes the colour, the person playing the game has to click that corresponding box, so I need the ‘on click’ to work as well as the colours changing by themselves.

It’s a very basic dance mat.

This is my code so far:

``````import ddf.minim.*;

AudioPlayer player;
Minim minim;//audio context

void setup()
{
size (640, 640);
minim = new Minim(this);
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();
}
``````

What do you think? Is there a way to have the squares change their colour at certain times?
I’m trying to use:
int timer=0;
int timeSpan=333;

Thanks so much

1 Like

Also, should I use a for loop so that the keyPress will connect with each specific box?
For some reason at the moment, the key press is working on all of the boxes.

1 Like

I’ve started to use millis()

and the first square now changes colour but I don’t know how to use this in conjunction with the keyPress

``````void draw()
{

square(80, 320, 220);
square(320, 80, 220);
square(320, 320, 220);

int m = millis();
noStroke();
fill(m % 1000);
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();
}

``````

I think you need to store 4 colors in separate variables

1 Like

Hi @teeny13,

Welcome to the community

Are you familiar with OOP (object oriented programming) ? If so, you could create a simple class with a square structure and then assign a color to each square individually at some point or interval.

Do you want to change the color at a specific rate? or should the rate vary? You can use either millis() or use frameCount.
If using millis() then you can calculate the elapsed time since the last color update.
if using frameCount then you can use the module to change it. So that frameCount % yourFrameCountRate == 0

I simple example is below. I set the frame rate to 60, so I have 60 fps. And at each second the color of the square changes

``````void setup(){
size(640, 640);

//set frame rate
frameRate(60);
}

color active = color(0);
void draw(){
background(220);

if(frameCount % 60 == 0){
active = color(random(0,255), random(0,255), random(0,255));
}
fill(active);
square(80,80,320);
}
``````

Hope it helps!

I was thinking maybe I should make the squares themselves variables! I will try with the colours now and see how it goes!

Thanks again for your response, I’m going to keep working away!

Hey Miguel,

Thank you so much for getting back to me! This is really helpful!

I now have my four squares changing colour which is brilliant!

Is it possible to change the frame rate for each square? Even though I’ve changed it, it’s using the same frame rate for each square:

``````void setup(){
size(640, 640);

//set frame rate
frameRate(100);
}

color active = color(0);
void draw(){
background(220);

if(frameCount % 100 == 0){
active = color(255, 68, 204);
}
fill(active);
square(80, 80, 220);

if(frameCount % 90 == 0){
active = color(255, 68, 204);
}
fill(active);
square(80, 320, 220);

if(frameCount % 80 == 0){
active = color(255, 68, 204);
}
fill(active);
square(320, 80, 220);

if(frameCount % 70 == 0){
active = color(255, 68, 204);
}
fill(active);
square(320, 320, 220);
}
``````

I’m trying to have random squares change colour so that the player of the game has to click that square when the colour changes, if that makes any sense?

Hey!

Yes is possible! If you are not familiar with OOP, I really advise you to have a look and search a bit more on the topic:

If you use a class for your squares you can make a matrix of a lot of squares, position them where you want and make them change color at different rates!
Let me know if you need help on this!

1 Like

Thank you so much! Reading this now!!

1 Like

Aside from “OOP”: use 4 different color variables such as active1, active2 and use them separate for each rectangle

Then: frameCount % 50 or 111 - use different values here, so the speed for each rectangle is different

1 Like

You can also use mouse here

Check reference for void mousePressed (){

}

and use

``````if(mouseX> .... &&  // (insert x position here)
mouseX<... &&    // (insert x position plus width of the rectangle here)
mouseY> ...&&    // (insert y position here)
mouseY < ....)       // (insert y position plus height of the rectangle here)
active1=color (random (255),random (255),random (255)); // change the color var for this rect
``````

to check whether you are within a rectangle and change its color

Remark

Since you have four rectangles you can make parallel arrays (think of a list with entries) for x, y position and for color (colRects). The data for rectangle #1 would be in the arrays at position 0: x[0], y[0] and colRects[0]

Then you can use a for-loop to loop over the lists and display them thus (doing the same stuff with each entry of the list basically). Then you can easily make 100 rectangles without the code getting longer. Good.

So there are 3 approaches:

• variables for each rectangle (as you have it now)
• parallel arrays (like I explained)
• OOP (see above), which means you have an array (or ArrayList) of objects. This is even more comfy, but a bigger change in your code imho

Chrisir

2 Likes

Hi again!

I have created code which is making the squares change at random which is great

``````class Box {
float xpos, ypos, tilewidth;
color fillcolor;
Box (float x, float y, float t, color c1) {
xpos = x;
ypos = y;
tilewidth = t;
fillcolor = c1;
}

void drawtile(){
square(xpos, ypos, tilewidth);
}

void lightup(){
fill(fillcolor);
square(xpos, ypos, tilewidth);

}
void turnoff(){
fill(255, 255, 255);
square(xpos, ypos, tilewidth);
}
void onclick(){
stroke(255,255,0);
square(xpos, ypos, tilewidth);
}
}

color c1 = color(255, 30, 272);

Box d1 = new Box(80, 80, 220, c1);
Box d2 = new Box(320, 80, 220, c1);
Box d3 = new Box(320, 320, 220, c1);
Box d4 = new Box(80, 320, 220, c1);

ArrayList<Box> tiles = new ArrayList<Box>();

void setup(){
size(640,640);
background(0);

}

void draw(){
if(frameCount % 60 == 0){
float x = random(3);
int rx = round(x);
print(rx);
print(' ');

if (keyPressed) {
if (key == 'a' || key == 'A') {
stroke(255,255,0);
strokeWeight(10);
}
} else {
stroke(0);
d1.lightup();
}

d1.turnoff();
d2.turnoff();
d3.turnoff();
d4.turnoff();

Box tile = tiles.get(rx);
tile.lightup();

}
}
``````

My latest issue is that I’m trying to use key press to add a stroke on click to each box
When I add the keypress, it’s rewriting the full box, which is the wrong color… eek…

2 Likes

Another quick question, is it possible to change the frame rate per function?? Thanks

Try to put the frameCount section in the class and male the actual %100 individually different - see above

1 Like

hi

rect with frameCount

``````
void  setup() {
size (600, 600);
}
void draw() {
background (0,255,0);
noFill();
stroke(0,0,255);
strokeWeight(12);
rect(0, 200, (frameCount % 60)*10, 50);
}
``````

Also, you put d1 etc. into tiles list.

Please try working only with the list and not with d1,d2 etc.

Try using a for loop where possible

Here is my version

• Using background in draw() so we have to draw all rectangles in draw() throughout.

• Color change in the class at individual speed.

• Yellow frame for Box 1 when you click “a”

• d1, d2 … are now local objects in setup(), only the list is global

``````
class Box {

float xpos, ypos, tilewidth;
color fillcolor=color(random(255), random(255), random(255));
int mySpeed=int(random(11, 120));

Box (float x, float y, float t, color c1) {
xpos = x;
ypos = y;
tilewidth = t;
fillcolor = c1;
}

void drawtile() {
fill(fillcolor);
rect(xpos, ypos, tilewidth, tilewidth);

if (frameCount % mySpeed == 0) {
fillcolor=color(random(255), random(255), random(255));
}
}

void lightup() {
fill(fillcolor);
rect(xpos, ypos, tilewidth, tilewidth);
}
void turnoff() {
fill(255, 255, 255);
rect(xpos, ypos, tilewidth, tilewidth);
}
void onclick() {
stroke(255, 255, 0);
rect(xpos, ypos, tilewidth, tilewidth);
}
}//class

// *************************************************************

ArrayList<Box> tiles = new ArrayList<Box>();

void setup() {
size(640, 640);
background(0);

color c1 = color(255, 30, 272);

Box d1 = new Box(80, 80, 220, c1);
Box d2 = new Box(320, 80, 220, c1);
Box d3 = new Box(320, 320, 220, c1);
Box d4 = new Box(80, 320, 220, c1);

}

void draw() {
background(0);

fill(255);
text("Press 'a' for Box 1", 17, 17);

float x = random(3);
int rx = round(x);
print(rx);
print(' ');

stroke(0);
strokeWeight(1);

tiles.get(0).drawtile();
tiles.get(1).drawtile();
tiles.get(2).drawtile();
tiles.get(3).drawtile();

if (keyPressed) {
if (key == 'a' || key == 'A') {
stroke(255, 255, 0);
strokeWeight(10);
tiles.get(0).lightup();
}//if
}//if

if (frameCount % 60 == 0) {
Box tile = tiles.get(rx);
tile.lightup();
}//if
//
}//draw
//

``````