Session 1: Today we will review your HTML5 and Processing.js OOP exercise. Here’s the example I presented in class last week.

Primary Squares

Here’s a second example that we will look at as a precursor to experimenting with particle systems. In this example the particles are expanding rings that grow and intersect as they are added by the user, either by clicking or dragging on the canvas.

Intersecting Rings

// Define the Ring class. Notice that no constructor is
// needed because the start method is used to initiate
// the objects behavior.
class Ring {
    float x,y,diameter;
    boolean on = false;
    void start(float xpos, float ypos) {
        x = xpos;
        y = ypos;
        on = true;
        diameter = 1;
    }
    void grow() {
        if (on) {
            diameter += 0.5;
            if (diameter > 600) {
                on = false;
            }
        }
    }
    void display() {
        if (on) {
            noFill();
            strokeWeight(4);
            stroke(255,153);
            ellipse(x,y,diameter,diameter);
        }
    }
}

Ring[] rings;
int numRings = 100;
int currentRing = 0;

void setup() {
    background(0);
    size(800,400);
    smooth();rings = new Ring[numRings];
    for (int i=0; i < numRings; i++) {
        rings[i] = new Ring();
    }
}

void draw() {
    fill(0,5);
    rect(0,0,width,height);
    for (int i=0; i < numRings; i++) {
        rings[i].grow();
        rings[i].display();
    }
}

void mousePressed() {
    rings[currentRing].start(mouseX,mouseY);
    currentRing++;
    if (currentRing >= numRings) {
        currentRing = 0;
    }
}

void mouseDragged() {
    if (frameCount % 5 == 0) {
        rings[currentRing].start(mouseX,mouseY);
        currentRing++;
        if (currentRing >= numRings) {
            currentRing = 0;
        }
    }
}

Session 2: Today we will be looking closely at particle system examples such as Daniel Shiffmans Simple Particle System hosted on processing.org. Other examples include a smoke particle system, and

Assignment 4: HTML5 and Processing.js Particle System (20 Points)
Due: Session 2, Week 7 (Beginning of Class)
Use HTML5, and Processing.js to create a dynamic particle system. Your application must allow the user to enter the number of particles that they would like to render and interact with. Create several switchable modes of interaction, such as brownian motion, mouse pointer attraction / repulsion, and speed adjustments.

Requirements:
1. Setup your HTML5 and Processing.js environment
2. Create a class with a constructor and methods to build and animate the particles
3. Use HTML forms and JavaScript to dynamically adjust the number particles
4. Use HTML forms and JavaScript to dynamically adjust the behavior of the particles
5. Consider constraining the particles to the canvas by changing direction at the borders
6. Try creating trails on the particles that can be enabled or disabled
7. Add one or more of your own features, such as color manipulation, etc. to make your project unique