Entries:
Posts:

Something went wrong getting user information from Channel 9

Latest Achievement:

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Something went wrong getting the Visual Studio Achievements

# Drawing with Emitters

Right click “Save as…”

• MP3 (Audio only)
• MP4 (iPhone, Android)
• Mid Quality WMV (Lo-band, Mobile)
• High Quality MP4 (iPad, PC, Xbox)
• Mid Quality MP4 (Windows Phone, HTML5, iPhone)
• High Quality WMV (PC)

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.

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

• Oops, something didn't work.

Getting "follow" information
Start following these comments
Setting up your "follow"
• 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.

• 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.
• 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 :)

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

close