Processing simple attractor
2015-12-14
by schrodingers
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.13/processing.min.js"></script>
<canvas></canvas>
CSS
</style> <script type="text/javascript"> window.addEventListener('load', function() {
var scripts=document.body.getElementsByTagName('script');
var canvases=document.body.getElementsByTagName('canvas');
new Processing(canvases[0], scripts[0].text);
}
, false);
// Here prevent javascript in body from throwing error </script> <style>
JavaScript
/*
title: simple attractor
date: 2015-12-14
*/
color[] spring = {#ff6699, #ff9900, #ffcc00, #9adb1b, #00cc66, #00cccc, #00ccff, #6633cc, #ff66cc
};
PGraphics pg;
ArrayList <Part> ps = new ArrayList();
void setup() {
size(800, 600);
// for (int i = 0; i < 50; i++) {
// ps.add(new Part());
// }
}
void draw() {
fill(44, 98);
rect(0, 0, width, height);
//loadPixels();
//pixels[width * height * 4];
//updatePixels();
ps.add(new Part());
for (int i=ps.size()-1; i>1; i--){
Particle p = ps.get(i);
if (p.life <= 1){
ps.remove(p);}
p.display();
p.update();
}
}
class Part {
float x, y; // rest position
float vx, vy; // velocity
float mass, drag, dt, forceStr;
float rad; // radius
int col;
float life;
Part() {
x = mouseX + 10 * random(-TAU, TAU);
y = mouseY + 10 * random(0, TAU);
vx = 0;
vy = random(0,-1.9);
mass = random(0.3, 1.0);
dt = 0.09;
drag = 0.041;
forceStr = 0.05;
rad = randomGaussian() * 10 ; // radius
life = 300;
col = spring[(int) random(0, spring.length - 1)];
}
void display() {
noStroke();
fill(col, life);
ellipse(x, y, rad, rad);
}
void update() {
dx = mouseX - x;
dy = mouseY - y;
float fx = (dx * forceStr) - (drag*vx); float fy = (dy * forceStr) - (drag*vy);
vx += fx * dt/mass;
vy += fy * dt/mass;
x+=vx*dt;
y+=vy*dt;
life--;
}
}