Quick question about fading over time.

edited December 2013 in Questions about Code

Hi, I'm fairly new to processing,

How do I set this up so that 1 is subtracted from 255 every second?

After 255 seconds r should equal 0.

Thanks,

      if (millis() - timer >= 1000){
      r = 255-1;
      timer = millis();
      }
Tagged:

Answers

  • Why are you setting r equal to 254 each time?

    Here is how you change a variable over time: http://staticvoidgames.com/tutorials/basicConcepts/Animation.jsp

  • Thanks for the suggestion, however I not sure if I can use this to get the effect I want.

    What I want is for the user to press space bar and have a single rhombus appear and then over 10 seconds fade to transparency.

    At the moment my sketch has them fade in and out every second or so which isn't ideal as I'm trying to represent a 10 second life time, I don't want them to resurrect after another 10 seconds.

    Anyway, here's my code as it stands:

    class Walker { //class
    
      float x, y;
      float tx, ty;
      float r;
      int timer;
    
      // constructor
      Walker(  ) {
        x = random(width);
        y = random(height);
    
        tx = random (110);
        ty = random (10000);
    
        r = 255;
      } // constructor
    
      void display() {
    
        //Cross 1
        pushMatrix();
        translate (x, y);
        stroke (255,255,255,r);
        strokeWeight ( 5 );
        line ( 10, 10, 20, 20 );
        strokeWeight ( 5 );
        line ( 20, 10, 10, 20 );
        popMatrix();
    
      }
    
      void step() {
        x = map( noise(tx), 0, 1, 0, width ); // x- & y-location mapped from noise
        y = map( noise(ty), 0, 1, 0, height );
    
        tx += 0.01; //move forward through "time."
        ty += 0.01;
    
        if (millis() - timer >= 10000){
          r = random(255);
          timer = millis();
        }
      }
    } // class
    
    class Diamond {
    
      float x, y;
      float tx, ty;
      float r;
    
      int timer;
    
      // constructor
      Diamond() {
        x = random(width);
        y = random(height);
    
        tx = random (110);
        ty = random (10000);
    
        r = 255;
    
      } // constructor
    
      void display() {
    
    
       //Diamond
        pushMatrix();
        noStroke();
        fill (255,255,255,r);
        translate (x,y);
        //rotate (random (10,180) );
        beginShape();
        vertex(50,50);
        vertex(100,75);
        vertex(50,100);
        vertex(0,75);
        endShape(CLOSE);
        popMatrix();
    
      }
    
      void step() {
        x = map( noise(tx), 0, 1, 0, width ); // x- & y-location mapped from noise
        y = map( noise(ty), 0, 1, 0, height );
    
        tx += 0.005; //move forward through "time."
        ty += 0.005;
    
          if (millis() - timer >= 1000){
          r = r /- 1;
          timer = millis();
          }
      }
    } //class
    
    //
    
    // Walker w;
    ArrayList<Walker> listW = new ArrayList();
    
    //Diamond d;
    ArrayList<Diamond> listD = new ArrayList();
    
    void mousePressed(){
      listW.add ( new Walker () );
    }
    void keyPressed(){
      listD.add ( new Diamond () );
    }
    
    void setup() {
      size (1200, 700);
    
    
      background(0);
    } // func
    
    void draw() {
    
      fill(255);
      text ("please press mouse to spawn crosses, spacebar to spawn Rhombuses", 20, 13);
    
    
      // w = new Walker();
    for (int i = 0; i <listW.size(); i++) {
        Walker w = listW.get(i);
        w.step();
        w.display();
      }
    
    
       // d = new Diamond(); 
    for (int d = 0; d <listD.size(); d++) {
      Diamond o = listD.get(d);
      o.step();
      o.display();
    }
    
      //background fade effect
      pushMatrix();
      fill(0, 0, 0, 55);
      strokeWeight( 0 );
      stroke (0);
      translate( 0, 0 );
      rect (0, 0, width, height);
      popMatrix();
    
    
    } // func
    //
    
  • I guarantee you can use my suggestion (which is just incrementing or decrementing a variable) to get the effect you want. I'm not sure what you're saying doesn't work, but if you provided the smallest example that demonstrated exactly what you're trying to do, I'd be happy to help.

  • Here's an example of something disappearing over time, the balls in this sketch somehow have a set lifetime, they shrink to nothingness.

    I want the rhombuses in my sketch to similarly fade out of existence using the opacity of their fill.

    Example: http://www.openprocessing.org/sketch/8822

    Thanks very much for your help.

  • Okay, and can you put together a little sketch showing your approach? Your first post was pretty close, except you were only ever setting r to 254 and you didn't show the code where you used r to draw something.

  • Here's a simplified sketch showing my approach.

    -Thanks

    // class

    class Diamond {
    
      float x, y;
      float tx, ty;
      float r;
    
      int timer;
    
      // constructor
      Diamond() {
        x = random(width);
        y = random(height);
    
        tx = random (110);
        ty = random (10000);
    
        r = 255; //r set to 255, maximum value for opacity
    
      } // constructor
    
      void display() {
    
    
       //Diamond
        pushMatrix();
        noStroke();
        fill (255,255,255,r); //r is opacity
        translate (x,y);
        //rotate (random (10,180) );
        beginShape();
        vertex(50,50);
        vertex(100,75);
        vertex(50,100);
        vertex(0,75);
        endShape(CLOSE);
        popMatrix();
    
      }
    
      void step() {
        x = map( noise(tx), 0, 1, 0, width ); // x- & y-location mapped from noise
        y = map( noise(ty), 0, 1, 0, height );
    
        tx += 0.005; //move forward through "time."
        ty += 0.005;
    
          if (millis() - timer >= 1000){ //opacity is set to fade in and then out every second
          r = r *- 1;
          timer = millis();
          }
      }
    } //class
    
    
    //Diamond d;
    ArrayList<Diamond> listD = new ArrayList();
    
    
    void keyPressed(){
      listD.add ( new Diamond () );
    }
    
    void setup() {
      size (1200, 700);
    
    
      background(0);
    } // func
    
    void draw() {
    
       // d = new Diamond(); 
    for (int d = 0; d <listD.size(); d++) {
      Diamond o = listD.get(d);
      o.step();
      o.display();
    }
    
      //background fade effect
      pushMatrix();
      fill(0, 0, 0, 55);
      strokeWeight( 0 );
      stroke (0);
      translate( 0, 0 );
      rect (0, 0, width, height);
      popMatrix();
    
    
    } // func
    //
    
  • there's nothing in there that's incrementing or decrementing r. you are setting it and every second you are dividing it by -1 (which is odd in itself).

    i'd expect to see it go from 0 to 255 over the course of 5 seconds and back to 0 over the next five. or maybe something like

    r = map(abs(5000 - (t % 10000)), 5000, 0, 0, 255);
    

    (t % 10000) goes from 0 to 10000 every 10 seconds

    5000 - (t % 10000) goes from 5000 to -5000 every 10 seconds

    abs(5000 - (t % 10000)) goes from 5000 to 0 to 5000

    map(all that) goes from 0 to 255 to 0

    (um, could be neater, i think, but i can't test it here)

  • That doesn't get me quite where I want to be but thanks. I realise how foolish the dividing by -1 was now, I'm a design student I'm afraid, maths is not my forte.

    The user experience should be thus:

    1) User presses key once or several times.

    2) One rhombus appears on screen on each button press.

    3) Rhombuses walk around screen for 10 seconds during which their opacity fades from 255 to 0.

    4) Each rhombus should have its own separate lifetime, it will fade individually of all other rhombuses.

    5) Rhombuses which have faded do not reappear.

  • Answer ✓

    sorry, got the wrong end of the stick somehow. maybe even the wrong stick.

    what you describe is even simpler, it's a particle system basically. i normally give each particle a lifetime and decrement it with each loop but if you want exactly 10 seconds then storing the creation time in the particle would work (set timer = millis() in your Diamond constructor). then the transparency r at any given time is

    r = map(10000 - (millis() - timer), 0, 10000, 0, 255);

    (millis() - timer) is age, starts at 0, increases

    10000 - (millis() - timer) starts at 10000 and decreases to 0

    map(10000 - (millis() - timer), 0, 10000, 0, 255) maps to 255-0 over lifetime of particle.

    disable Diamond when millis() >= timer + 10000 (remove it from list?)

  • Spot on perfect! Thanks so much! :D

Sign In or Register to comment.