How to change fill rects in time?

edited February 2015 in How To...

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

Comments

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

  • @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.

  • thanks @akenaton, I'm gonna try :)

  • 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

  • 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..? :/

  • 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);
    }
    
  • @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();
          }
    
         }
    
  • edited February 2015

    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);
      }
    }
    
Sign In or Register to comment.