Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Drawing with Emitters

Download

Right click “Save as…”

See emitters sketch in action 

We build upon the principles learned so far and create an interactive particle emitter you can use to draw on the stage. We also look at reusing a fixed collection of elements and dynamically managing their life cycle. 

To follow along in Visual Studio, please download the Processing Sketchbook projection.

The finished sketch for this lesson can be found below:

int totalParticles = 100;
Particle[] particles = new Particle[totalParticles];
float targetX = 0.0;
float targetY = 0.0;
int particleIndex = 0;
int width, height;
 
void setup() {
    width = 500;
    height = 550;
    size(width, height);
    noStroke();
    smooth();
    background(0);
    for (int i = 0; i < totalParticles; i++) {
        Particle particle = new Particle();
        particles[i] = particle;
    }
};
 
void draw() {
    fill(color(0, 0, 0, 20));
    rect(0, 0, width, height);
    for (int i = 0; i < totalParticles; i++) {
        particles[i].update();
        particles[i].render();
    }
};
 
void pointerMove(Pointer e) {
    targetX += (e.offsetX - targetX) * .2;
    targetY += (e.offsetY - targetY) * .2;
    var nextParticle = particles[particleIndex];
    nextParticle.reset(targetX, targetY);
    if (++particleIndex >= particles.length) particleIndex = 0;
}
 
class Particle {
  float x = 0.0;
  float y = 0.0;
  float vx = 0.0;
  float vy = 0.0;
  float r = 255;
  float g = 255;
  float b = 255;
  float a = 255;
  color pColor = color(255, 255, 255, 255);
  int life = 0;
 
  void update() {
    if (this.life > 0) {
        this.life--;
        if (this.life < 50) {
            this.x += this.vx;
            this.y += this.vy;
            this.vx += random(4) - 2;
            this.vy += random(4) - 2;
            this.vx *= .9;
            this.vy *= .9;
            this.a = 255 * (this.life / 50.0);
        }
    }
  }
 
    void reset(float _x, float _y) {
      this.x = _x;
      this.y = _y;
      this.vx = random(4) - 2;
      this.vy = random(4) * 4 - 2;
      this.life = 150;
      this.g = map(_x, 0, width, 0, 255);
      this.b = map(_y, 0, height, 0, 255);
      this.a = 255;
  }
 
  void render(){
      fill(color(this.r, this.g, this.b, this.a));
      ellipse(this.x, this.y, 5, 5);
  }
}
 

Follow the Discussion

  • pColor on line 47 is not used at all. Also, I wrote lines 33-35 like this: 

    var nextParticle = particles[particleIndex++];
    particleIndex %= particles.length;
    nextParticle.reset(targetx, targety);

    %= will constrain the particleIndex to the size of the array, so once particleIndex is 100, the 100 % 100 = 0, 101 % 100 = 1, etc. I post-increment particleIndex as soon as it's used, as this is a little clearer for me here than inside an if, and it makes the line that follows simpler. The only downside that I can see to this is that it's writing to particleIndex twice at every call, whereas your implementation will only write twice every 100 calls. Considering that this is fired based on user input, though, I'd say that this becomes insignificant.Overall this was a good video, and I really enjoyed playing with the numbers and seeing the changes occur.

  • Rick Barrazarbarraza Form Follows Fiction
    Thanks for the code, zshift! I've never thought of doing it that way, but will definitely keep it in mind as well. Looks clean.
  • evanlarsenevanlarsen

    rbarraza thanks for the videos, I've watched 3 of them so far and I've been doing them in d3.js and using svg instead of canvas. All your explainations have been easy for me to follow and recreate. Thank you. I've also used jquery ui slider control and knockoutjs to create controls for the numbers so I could tweek the settings while viewing the visualizations. I've been having a lot of fun with these. Keep em coming :)

  • Rick Barrazarbarraza Form Follows Fiction

    @evan

    First - awesome manatee pic. You're already a winner. Second, that sounds really cool! If you ever put those up publicly, let me know. I'd love to check them out and help spread the word. Nice.

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.