Quick question about fading over time.

talewise

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

KevinWorkman

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

talewise

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

KevinWorkman

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.

talewise

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.

KevinWorkman

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.

talewise

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

koogs

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)

talewise

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.

koogs

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

talewise

Spot on perfect! Thanks so much! :D