Particles, Classes and Color

Download this episode

Download Video

Description

See this sketch in action

We create a colorful particle field. We learn how to define a class for our Particle object and have each particle take care of its own properties, such as position and direction. We also explore the creation of dynamic colors and some rendering tricks to make the sketch more appealing.

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

The finished sketch for this lesson can be found below:

int totalDots = 100;
Dot[] dots = new Dot[totalDots];
int width, height;
color fillColor;
float diameter = 6.0;
 
void setup() {
    // DEFINE THE STAGE
    width = 500;
    height = 550;
    size(width, height);
    // THE SAME FILL IS USED FOR ALL DOTS
    fillColor = color(255, 0, 0);
    fill(fillColor);
    noStroke();
    // CREATE A COLLECTION OF DOTS
    for (int i = 0; i < totalDots; i++) {
        Dot d = new Dot();
        d.x = random(width);
        d.y = random(height);
        d.vx = random(2.0) - 1.0;
        d.vy = random(2.0) - 1.0;
        dots[i] = d;
    }
    background(0);
};
 
void draw() {
    fill(0, 25);
    rect(0, 0, width, height);
    float r = 255;
    float g = 255;
    float b = 255;
    for (int i = 0; i < totalDots; i++) {
        r = map(dots[i].x, 0, width, 0, 255);
        g = map(dots[i].y, 0, height, 0, 255);
        fill(r, g, b);
        dots[i].update();
        ellipse(dots[i].x, dots[i].y, diameter, diameter);
    }
};
 
class Dot {
    float x = 0.0;
    float y = 0.0;
    float vx = 0.0;
    float vy = 0.0;
    void update(){
      // update the velocity
      this.vx += random(2.0) - 1.0;
      this.vx *= .96;
      this.vy += random(2.0) - 1.0;
      this.vy *= .96;
      // update the position
      this.x += this.vx;
      this.y += this.vy;
      // handle boundary collision
      if (this.x > width) { this.x = width; this.vx *= -1.0; }
      if (this.x < 0) { this.x = 0; this.vx *= -1.0; }
      if (this.y > height) { this.y = height; this.vy *= -1.0; }
      if (this.y < 0) { this.y = 0; this.vy *= -1.0; }
    }
}

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.