How to change fill rects in time?

lizhubersen

Hi, I'm Irene and I'm new here, I made this code and I would like to make fill changing while time is passing, how could I do it? Thanks!

 >  void setup(){
>   size(800, 570);
> }
> 
> void draw(){
>   strokeWeight(7);
>   fill(235);
>   rect(3,3,40,100);//fila1
>   rect(43,3,310,30);
>   fill(27,11,118);
>   rect(43,33,310,70);
>   fill(235);
>   rect(353,3,360,30);
>   rect(353,33,120,70);
>   fill(27,11,118);
>   rect(473,33,240,70);
>   fill(235);
>   rect(713,3,50,280);
>   fill(246,196,21);
>   rect(757,3,40,280);
>   fill(0);
>   rect(3,103,40,245); //fila2
>   fill(235);
>   rect(43,103,115,245);
>   fill(0);
>   rect(143,103,40,400);
>   fill(235);
>   rect(183,103,130,180);
>   rect(313,103,40,180);
>   fill(240,190,15);
>   rect(353,103,120,180);
>   fill(201,7,5);
>   rect(473,103,180,180);
>   rect(653,103,60,180);
>   fill(240,190,15);
>   rect(183,283,40,65); //fila3
>   fill(201,7,5);
>   rect(223,283,130,65);
>   fill(27,11,118);
>   rect(353,283,120,65);
>   fill(235);
>   rect(473,283,180,65);
>   rect(653,283,60,65);
>   fill(0);
>   rect(713,283,84,65);
>   fill(235);
>   rect(3,349,40,154); //fila4
>   fill(201,7,5);
>   rect(43,349,100,154);
>   fill(240,190,15);
>   rect(183,349,40,219);
>   fill(235);
>   rect(223,349,210,124);
>   rect(433,349,150,124);
>   fill(27,11,118);
>   rect(583,349,70,124);
>   fill(240,190,15);
>   rect(653,349,60,124);
>   fill(235);
>   rect(713,349,85,124);
>   rect(3,505,180,62); //fila5
>   fill(201,7,5);
>   rect(223,475,120,92);
>   fill(0);
>   rect(343,475,240,92);
>   fill(235);
>   rect(583,475,213,92);
> }
>  

lizhubersen

I mean, I'd like to transform the colors red, blue and yellow to a clock: each second red becomes darkest, each minute blue becomes darkest and each hour yellow become darkest...how can I do?

akenaton

@lizhubersen== please format your code with the 'C' button after having selected it... as for your question you only have to create a timer() method.

lizhubersen

thanks @akenaton, I'm gonna try :)

lizhubersen

mh, how can I do? it's a few weeks that I use processing and since yesterday I'm trying to transform my rects into a clock...but without results, can you please post here the right method? I tried a lot of them, but I think I put them in the wrong place.. @akenaton thanks a lot

lizhubersen

void setup() {
  size(400,400);
  fill(235);
  rect(3,3,40,100);
  frameRate(60); // 60 frames per second (default)
}

void draw() {
  // frameCount 600 = 10 seconds
  if (frameCount == 600) {background(200,0,0);}
  // frameCount 1200 = 20 seconds
  if (frameCount == 1200) {background(0,200,0);}
  // frameCount 3600 = 1 minute
  if (frameCount == 3600) {background(0,0,200);}
  println(frameCount);
}

I'd like to let rectangles change color instead of background...what do I have to change? Because if I put "fill" instead of "background" it's not working, I'd like to incorporate this code with mine...how can I do..? :/

asimes

Processing has built-in functions that get the time of day:
- second(): https://processing.org/reference/second_.html
- minute(): https://processing.org/reference/minute_.html
- hour(): https://processing.org/reference/hour_.html

Calling background() fills the entire screen with some color. For example, background(0) will always make the entire screen black

To change the interior color of a rect(), call fill() before calling that rect(). For example, to make a red rect() and then a green rect() somewhere else on a black background:

background(0);
fill(255, 0, 0);
rect(0, 0, 200, 200);
fill(0, 255, 0);
rect(200, 0, 200, 200);

Below is an example of one way how to do what you were talking about the color and time. It doesn't need background() because the rect()s cover the entire screen:

void setup() {
  size(600, 200);
  noStroke();
}

void draw() {
  float secondVal = second(); // Get a value between 0 - 59
  secondVal /= 59.0; // Scale the value down to 0.0 - 1.0
  secondVal *= 255.0; // Scale the value up to 0.0 - 255.0

  fill(secondVal, 0, 0); // Red
  rect(400, 0, 200, 200);


  float minuteVal = minute(); // Get a value between 0 - 59
  minuteVal /= 59.0; // Scale the value down to 0.0 - 1.0
  minuteVal *= 255.0; // Scale the value up to 0.0 - 255.0

  fill(0, 0, minuteVal); // Blue
  rect(200, 0, 200, 200);


  float hourVal = hour(); // Get a value between 0 - 23
  hourVal /= 23.0; // Scale the value down to 0.0 - 1.0
  hourVal *= 255.0; // Scale the value up to 0.0 - 255.0

  fill(hourVal, hourVal, 0); // Yellow
  rect(0, 0, 200, 200);
}

akenaton

@lizhubersen===

see below what i have found as solution. It works but in order to make things running faster you have to work in HSB mode, so you can modify only 1 parameter (B).

    int delaiS = 1000;
    int delaiM ;
    int delaiH ;
    int start1;
    int start2;
    int start3;
    color coul1 = color(27,11,118);//blue
    color coul2 = color(246,196,21);//jaune
    color coul3 = color(201,7,5);//rouge
    float R;
    float G;
    float B;
    float R1;
    float G1;
    float B1;
    float R2;
    float G2;
    float B2;

    void setup(){
       size(800, 570);
       delaiM = delaiS*60;
       delaiH= delaiM*60;
       start1= millis();
       start2= millis();
       start3= millis();
       timer1();
       timer2();
       timer3();
       //colorMode(HSB, 360,100,100,100);//try this(of course you have to change //your values but it is easy
     }

     void draw(){
       timer1();
       timer2();
       timer3();
       strokeWeight(7);
       fill(235);
       rect(3,3,40,100);//fila1
       rect(43,3,310,30);
       fill(coul1);
       rect(43,33,310,70);
       fill(235);
       rect(353,3,360,30);
       rect(353,33,120,70);
       fill(coul1);
       rect(473,33,240,70);
       fill(235);
       rect(713,3,50,280);
       fill(coul2);
       rect(757,3,40,280);
       fill(0);

       rect(3,103,40,245); //fila2
       fill(235);
       rect(43,103,115,245);
       fill(0);
       rect(143,103,40,400);
       fill(235);
       rect(183,103,130,180);
       rect(313,103,40,180);
       fill(240,190,15);
       rect(353,103,120,180);
       fill(coul3);
       rect(473,103,180,180);
       rect(653,103,60,180);
       fill(240,190,15);
       rect(183,283,40,65); //fila3
       fill(coul3);
       rect(223,283,130,65);
       fill(coul1);
       rect(353,283,120,65);
       fill(235);
       rect(473,283,180,65);
       rect(653,283,60,65);
       fill(0);
       rect(713,283,84,65);
       fill(235);
       rect(3,349,40,154); //fila4
       fill(coul3);
       rect(43,349,100,154);
       fill(240,190,15);
       rect(183,349,40,219);
       fill(235);
       rect(223,349,210,124);
       rect(433,349,150,124);
       fill(coul1);
       rect(583,349,70,124);
       fill(240,190,15);
       rect(653,349,60,124);
       fill(235);
       rect(713,349,85,124);
       rect(3,505,180,62); //fila5
       fill(coul3);
       rect(223,475,120,92);
       fill(0);
       rect(343,475,240,92);
       fill(235);
       rect(583,475,213,92);


     }

    void timer1(){
      if(millis()> start1 + delaiS ){
        println("secondepasséeRed");
       R = red(coul3);
       G = green(coul3);
       B= blue(coul3);
       R = R-10;// or - 1, or....
       coul3 = color(R,G,B);
        start1= millis();
      }

     }

     void timer2(){

       if(millis()> start2 + delaiM ){
        println("minuteBlue");
       R1 = red(coul1);
       G1 = green(coul1);
       B1= blue(coul1);
       B1 = B1-100;//or -1, or...
       coul1 = color(R1,G1,B1);
        start2= millis();
      }

     }

     void timer3(){
       if(millis()> start1 + delaiS ){
        println("heureepasséeYellow");
        //same principle, i leave you work!
        start3= millis();
      }

     }

lizhubersen

Thank you all, I was meaning just that! :) I also did, while waiting, another sketch, that is more or less what I wanted to. Still thanks! Irene

int[] clist = {//definisco una lista di colori
 #ffffff,//bianco
 #ffcc00,//giallo
 #cc0000,//rosso
 #000066,//blu
 #000000//nero
};
PFont[] fontList = new PFont[1];

void setup() {
  size(800,570);//dimensioni finestra
  fontList[0] = createFont("Opificio-48.vlg", 24);
}


void draw() {
  int h = hour();
  int m = minute();
  int s = second();
  int hh = hour();
  int mm = minute();
  int ss = second();
  strokeWeight(7);
  // Hour
  fill(clist[floor(h/10)]);
  fill(clist[h%5]);
  rect(43,33,310,70);
  rect(473,33,240,70);
  rect(353,283,120,65);
  rect(583,349,70,124);
  // Minute
  fill(clist[floor(m/10)]);
  fill(clist[m%5]);
  rect(473,103,180,180);
  rect(653,103,60,180);
  rect(223,283,130,65);
  rect(43,349,100,154);
  rect(223,475,120,92);
  // Second
  fill(clist[floor(s/20)]);
  fill(clist[s%5]);
  rect(757,3,40,280);
  rect(183,283,40,65);
  rect(183,349,40,219);
  rect(653,349,60,124);
  rect(353,103,120,180);
  fill(0);
  rect(3,103,40,245);
  rect(143,103,40,400);
  rect(713,283,84,65);
  rect(343,475,240,92);
  fill(235);
  rect(3,3,40,100);
  rect(43,3,310,30);
  rect(353,3,360,30);
  rect(353,33,120,70);
  rect(713,3,50,280);
  rect(43,103,115,245);
  rect(183,103,130,180);
  rect(313,103,40,180);
  rect(473,283,180,65);
  rect(653,283,60,65);
  rect(3,349,40,154); 
  rect(223,349,210,124);
  rect(433,349,150,124);
  rect(713,349,85,124);
  rect(583,475,213,92);
  rect(3,505,180,62); 

      if(mousePressed){

  fill(130);
  textFont(fontList[0], 24);
  textAlign(CENTER);
  text(hh,500,90);
  text(mm,500,140);
  text(ss,430,140);
  text("h",525,90);
  text("m",530,140);
  text("s",455,140);
  }
}