Using the HTML5 canvas tag and the processing.js library, up to 100 intersecting rings are drawn on the canvas where the user clicks the or drags the mouse pointer. This example was adapted for Processing.js from an example by Casey Reas and Ben Fry in their book, Processing (A Programming Handbook for Visual Artists and Designers).


View Source
Back to IM2490 Week 5
[ Processing.js Experiments ]

// 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;
    	}
	}
}

[top]