Help changing square colours after time

teeny13 · January 4, 2022, 3:28pm

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 = minim.loadFile("Documents/Processing/Music/groove.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();
}

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

teeny13 · January 4, 2022, 3:30pm

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.

teeny13 · January 4, 2022, 4:12pm

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

Chrisir · January 4, 2022, 4:28pm

I think you need to store 4 colors in separate variables

MiguelSanches · January 4, 2022, 4:34pm

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!

teeny13 · January 4, 2022, 4:34pm

Hey! Thanks so much for your reply!

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!

teeny13 · January 4, 2022, 4:41pm

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?

MiguelSanches · January 4, 2022, 4:45pm

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!

teeny13 · January 4, 2022, 4:52pm

Thank you so much! Reading this now!!

Chrisir · January 4, 2022, 10:16pm

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

Chrisir · January 4, 2022, 10:19pm

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

teeny13 · January 5, 2022, 9:15pm

Hi again!

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

Please see below:

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

  
tiles.add(d1);
tiles.add(d2);
tiles.add(d3);
tiles.add(d4);

}



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…

teeny13 · January 5, 2022, 10:56pm

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

Chrisir · January 5, 2022, 11:45pm

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

jafal · January 5, 2022, 11:49pm

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

Chrisir · January 6, 2022, 9:52am

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

  tiles.add(d1);
  tiles.add(d2);
  tiles.add(d3);
  tiles.add(d4);
}

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

Topic		Replies	Views
Change the colour of squares after different lengths of time Libraries	1	286	January 12, 2022
Changing colours Coding Questions	4	470	July 2, 2019
How do I change the color of a rectangle once clicked? Coding Questions	3	2650	December 1, 2020
I want to create a pattern where i have 4 different squares in different colours that directly change color as a code. This is what i have, but i dont know how to change the color of the sqaures and then turn them back to normal in one time. Please help Coding Questions	1	569	November 2, 2021
How to I make something darker? Coding Questions	5	540	August 3, 2018

Help changing square colours after time

Related topics