How to make things happen at different times - across multiple shapes.

sjon

I'm wondering what the process is behind creating 'waves' of things.

For example this piece

The fades / arc changes happen one after another in a spiral, but I'm not too sure how to go about making that happen, unless it was a massive chain of if conditions?

I had a little attempt at creating flat colors with the previous logic but it didn't really work out, here's an image of that and here's the code:

    void setup() {
      size(500, 500);
      noStroke();
    }
    int num = 8;
    float radius = 100;
    float t;
    int frames = 500;

    void draw() {
      t = (frameCount%frames)/(float)frames;
      background(0);
      translate(width/2, height/2);  
      for (int i=0; i < num; i++) {
        float r = map(i, 0, num, 0, TWO_PI);
        if ((r > PI) && (r < TWO_PI)) {
          fill(255, 100, 100);
        } else {
          fill(20, 255, 255);
        }
        rotate(r);

        ellipse(radius, 0, 50, 50);
      }
    }

Or say that I had a grid of squares and wanted to make them grow in a 'wave' across the screen, I'm not how one would go about this. Or change color or whatever.

If I do something like

fill(255, 255, mouseX);

That will make it so the colour is gradually changing from white to yellow, but (a) it doesn't do it only at the mouse location (b) I don't really want these kinds of effects to be dependent on mouse moving.

Here are a couple more examples of 'things happening in waves' (not sure the correct term for this)

one

two

thanks

---

EDIT :

I thought that I'd add another example, this time from myself that might help convey where I'm at with this and maybe more light on what I'm talking about.

in this code the color is set to change each quarter, a quarter being represented by frameCount%frames == 0. It's not done across the board so it's patchy, but you get the idea.

Currently this changes the color of all of the shapes each time that frameCount % frames == 0 is true. But what if instead of them ALL changing like a light switch the intention was that they changed one after another in a sequence, or that the change happened incrementally across each one in a continuous flow around the circle. Or that the ebb and flow of the shapes themselves occurred one after the other, rather than the sync that they're currently in. I've no idea what tools or methods are required for this kind of process. Thanks :)

sjon

not sure if we bump things here or just let them die...

Chrisir

no, bump them!

more so since we can't easily jump back to the old pages in the forum as it used to be....

;-)

sjon

CLEAR threads alive!

Cheers @Chrisir, I guess this post was more a question of the logic behind creating these kinds of effects and techniques, if anyone has any info that's ace. Sos if it's a bit vague, I don't really know what I'm talking about ;)

Chrisir

I guess it mostly has to do with math.

you set up a value e.g. an expanding and deflating cirlce as in my sketch below.

or an rotating angle like in one of your examples.

Then you take this invisible (no entity on the screen uses it directly) value and let the swarm / Particles / colors react to it. Using dist() e.g.

;-)

ArrayList <Ellipse>  ellipses  = new ArrayList();  

// this makes the wave
int currentWave = 20;
int currentWaveAdd = 1; 

void setup() {
  size(600, 600);
  background(0);

  //circle
  int circleSize = 1;

  // we add a lot of ellipses
  for (int i=1;i<32;i++) {
    Ellipse ellipseTest = 
          new Ellipse(width/2, height/2, circleSize, color( 220, 0, 0 ));
    ellipses.add (ellipseTest);
    circleSize +=11;
  } // for 

  currentWave=0;
} // func

void draw() {
  background(0);

  // we show ellipses 
  Ellipse ellipseCurrent;

  for (int i=1;i<ellipses.size();i++) {
    ellipseCurrent = ellipses.get(i);
    ellipseCurrent.draw();
  } // for
  currentWave+=currentWaveAdd; 
  if (currentWave>11*32+111) 
    currentWaveAdd=abs(currentWaveAdd)*-1;
  else if (currentWave<-22) 
    currentWaveAdd=abs(currentWaveAdd);
} // func 

// ============
class Ellipse {

  float x;
  float y;
  float size;
  color col;

  Ellipse(float x, float y, float size, color col) {
    this.x=x;
    this.y=y;
    this.size=size;
    this.col=col;
  }

  void draw() {
    float SW = map ( abs( size - currentWave), 0, 150, 0, 5) ;
    strokeWeight(SW);

    stroke(col);
    noFill();   
    ellipse(x, y, size, size);
  }
} // class
// 

sjon

ace cheers Chrisir I'll go through what you've done now, was just making an edit to the OP when you posted

Chrisir

see

http://forum.processing.org/two/discussion/7860/spiral-flow-field/p1

// make a moving spiral of particles. 
// Those particles are supposed to be the attractors for 
// a swarm. 

Particle[] pars = new Particle[360];

final int densityAttractors = 1;  // 1 close to, 9 far from each other 
final int steepnesSpiral    = 4;  // 4 is good, 14 would be very dense spiral

void setup() {

  size(800, 800);
  stroke(255);

  int j=0; // j is needed when densityAttractors!=1 

  for (int i=pars.length; i>0;i--) { 
    if (i%densityAttractors == 0) {
      pars[j] = new Particle( (i*steepnesSpiral)%360, i );
      j++;
    } // if
  } // for
  println ("End of setup().");
} // func

void draw() {
  if (!mousePressed) {
    background(0);
  }
  for (int i=0;i<pars.length;i++) {
    // if (pars[i]!=null)
    pars[i].draw();
  } // for
} // func 

// ========================================

class Particle {

  float r;      // radius  // changing 
  float angle;  // angle   // const 

  // constr 
  Particle(float angle_, float r_) {
    angle = angle_;
    r     = r_;
  }// constr 

  void draw() {

    // draw and change here 

    // strokeWeight(map ((1/r)*100, 0, 100, 1, 7));

    // paint it 
    if (r>=0) {
      point(width/2+r*cos(radians(angle)), height/2+r*sin(radians(angle)));
    }
    if (mousePressed) {
      stroke(255, 0, 0); // red 
      point(width/2+r*cos(radians(angle)), height/2+r*sin(radians(angle)));
      stroke(255); // white
    }

    // change it 
    r++; // fly outwards
    if (r > 360) {  
      r=0;
    } // if
  } // method
} // class 

// ==================================

sjon

cheers Chrisir - going to take me a bit to go through the first example you gave, I'll no doubt have a few questions on that :)

Chrisir

here is an example

all circles do the same, but they are in a different phase / stage of doing that (because the 1st circle started at 0, the second at 12, the 3rd at 24 etc.)

the human eye sees that as a wave

[EDITED]

Particle[] pars = new Particle[30];

void setup() {

  size(800, 800);
  stroke(255);

  int j=0;  

  for (int i=pars.length; i>0; i-=1) { 
    pars[j] = new Particle( i*12, i*12 );
    j++;
  } // for
  println ("End of setup().");
} // func

void draw() {

  background(0);

  for (int i=0;i<pars.length;i++) {
    pars[i].draw();
  } // for
} // func 

// ========================================

class Particle {

  float r;             // radius for moon phase  // changing 
  float rAdd = 1; 

  float r_fix = 300;   // radius position // fix 
  float angle;         // angle   // const 
  float x, y;          // pos  // const 

  // constr 
  Particle(float angle_, float r_) {
    angle = angle_;
    r     = r_;

    x=width/2  + r_fix*cos(radians(angle));
    y=height/2 + r_fix*sin(radians(angle));
  }// constr 

  void draw() {
    // draw and change here 

    // paint it 
    if (r>=0) {
      arc(x, y, 60, 60, 0, radians(r), CHORD);
    }

    // change it 
    r+=rAdd; // 
    if (r > 360||r<0) {  
      rAdd=rAdd*-1;
    } // if
  } // method
  //
} // class 

// ===================================