<script type="application/processing">
// Adapted from Daniel Shiffman's Simple Particle example
// for Processing.js by John Keston
// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles
class ParticleSystem {
ArrayList particles; // An arraylist for all the particles
PVector origin; // An origin point for where particles are born
ParticleSystem(int num, PVector v) {
particles = new ArrayList(); // Initialize the arraylist
origin = v.get(); // Store the origin point
for (int i = 0; i < num; i++) {
particles.add(new Particle(origin)); // Add "num" amount of particles to the arraylist
}
}
void run() {
// Cycle through the ArrayList backwards b/c we are deleting
for (int i = particles.size()-1; i >= 0; i--) {
Particle p = (Particle) particles.get(i);
p.run();
if (p.dead()) {
particles.remove(i);
}
}
}
void addParticle(float x, float y) {
particles.add(new Particle(new PVector(x,y)));
}
// A method to test if the particle system still has particles
boolean dead() {
if (particles.isEmpty()) {
return true;
}
else {
return false;
}
}
}
// A simple Particle class
class Particle {
PVector loc;
PVector vel;
PVector acc;
float r;
float timer;
int cr; // red channel value
int cg; // green channel value
int cb; // blue channel value
// Another constructor (the one we are using here)
Particle(PVector l) {
acc = new PVector(0,0.05,0);
vel = new PVector(random(-1,1),random(-1,0),0);
loc = l.get();
r = rad;
timer = (float)document.getElementById('timer').value;
//console.log("timer: "+timer);
setStrokeFill();
}
// method to set the color of the stroke and fill
void setStrokeFill() {
switch(colorB) {
case "random":
cr = floor(random(0,255));
cg = floor(random(0,255));
cb = floor(random(0,255));
break;
case "cycle": // cycle the color from red to green and back
cr = ++red;
if (red > 255) {
red = 0;
}
cg = --green;
if (green < 0) {
green = 255;
}
cb = 0;
console.log("rgb: "+cr+"|"+cg+"|"+cb);
break;
case "white":
cr = 255;
cg = 255;
cb = 255;
break;
case "red":
cr = 255;
cg = 0;
cb = 0;
break;
case "black":
cr = 0;
cg = 0;
cb = 0;
break;
case "green":
cr = 0;
cg = 255;
cb = 0;
break;
case "blue":
cr = 0;
cg = 0;
cb = 255;
break;
default:
break;
}
}
void run() {
update();
//setStrokeFill();
render();
}
// Method to update location
void update() {
vel.add(acc);
loc.add(vel);
if ( bounce == 'on' ) {
if (loc.y > height) {
vel.y *= -0.8;
}
if (loc.x > width || loc.x < 0) {
vel.x *= -0.8;
}
timer -= 1.0;
}
}
// Method to display
void render() {
//colorMode(RGB,100);
if (colorB == 'black') {
stroke(255,255,255,timer);
}
else {
stroke(cr,cg,cb,timer);
}
if (fillOn == "on") {
fill(cr,cg,cb,timer);
}
else {
noFill();
}
ellipseMode(CENTER);
ellipse(loc.x,loc.y,r,r);
}
// Is the particle still useful?
boolean dead() {
if (timer <= 0.0) {
return true;
}
else {
return false;
}
}
}
ParticleSystem ps;
float minRad = document.getElementById('minrad').value;
float maxRad = document.getElementById('maxrad').value;
float trails = document.getElementById('trails').value;
console.log("minRad: "+minRad+" maxRad: "+maxRad);
float rad = minRad*1.0;
float dir = 1.0;
string colorB = "white";
int hue = 0;
int red = 255;
int blue = 255;
int green = 255;
string fillOn = "";
string bounce = "";
// BEGIN: JavaScript form interaction
document.onkeyup = setInteractionValues;
document.onmouseup = setInteractionValues;
function setInteractionValues() {
minRad = document.getElementById('minrad').value;
maxRad = document.getElementById('maxrad').value;
trails = document.getElementById('trails').value;
// invert the trails value for slider
trails = 120 - trails;
rad = minRad - 1;
dir = 1;
}
document.p_form.colorb.onchange = setColorBehavior;
function setColorBehavior() {
colorB = document.getElementById('colorb').value;
}
document.p_form.fillon.onchange = setFillOnOff;
function setFillOnOff() {
fillOn = document.getElementById('fillon').value;
}
document.p_form.bounce.onchange = setBounceOnOff;
function setBounceOnOff() {
bounce = document.getElementById('bounce').value;
}
// END: JavaScript form ineraction
void setup() {
frameRate(30);
background(0);
size(800, 360);
colorMode(RGB, 255, 255, 255, 100);
ps = new ParticleSystem(1, new PVector(mouseX/2,mouseY/2,0));
smooth();
}
void draw() {
fill(0,trails);
rect(0,0,width,height);
rad += dir;
if (rad > maxRad || rad < minRad) {
dir *= -1.0;
}
ps.run();
ps.addParticle(mouseX,mouseY);
}
</script>
<script language="JavaScript">
function onlyNumbers(evt)
{
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
else {
return true;
}
}
</script>
[top]