Processing ArrayList Spring motion
2015-08-06 Processing spring motion
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: Spring motion
date: 2015-08-05
*/
color[] spring = {
#ff6699, #ff9900, #ffcc00, #9adb1b, #00cc66, #00cccc, #00ccff, #6633cc, #ff66cc,
#ff6699, #ff9900, #ffcc00, #9adb1b, #00cc66, #00cccc, #00ccff, #6633cc, #ff66cc,
#ff6699, #ff9900, #ffcc00, #9adb1b, #00cc66, #00cccc, #00ccff, #6633cc, #ff66cc
};
color violet = color(58, 48, 66);
color yellow = color(237, 230, 35);
color cyan = color(5, 190, 255);
ArrayList bubbles;
float t = 0;
float radius = 200;
int num = 8; // numimum number of elements
float[] posX = new float[num];
float[] posY = new float[num];
int next = 0; // counter from the first value (next value)
void setup() {
size(800, 600);
smooth(6);
noStroke();
bubbles = new ArrayList();
}
void draw() {
fill(violet, 10);
rect(0, 0, width, height);
next = (next + 1) % num; /* next slot to display;
must be in array.len+1 range */
float x = map(sin(t), -1, 1, 0, radius);
float y = map(cos(t), -1, 1, 0, radius);
x = x + 0.05;
y = y + 0.05;
t = t + 0.03;
for (int i = 0; i < bubbles.size(); i++) {
Bubble bubble;
bubble = (Bubble) bubbles.get(i);
fill(spring[i]);
if (i > spring.length) {
fill(spring[next]);
}
bubble.pulse();
}
}
void mousePressed() {
Bubble bubble;
bubble = new Bubble(new PVector(mouseX, mouseY), random(10, 60));
bubbles.add(bubble); // Add object 'bubble' : Bubble to ArrayList bubbles;
}
class Bubble {
PVector loc;
float rad;
float t;
Bubble(PVector _loc, float _rad) {
loc = _loc;
rad = _rad;
ellipse(loc.x, loc.y, rad, rad);
}
void pulse() { //ANIMATION
ellipseMode(CENTER);
ellipse(loc.x, loc.y, cos(t) * rad, sin(t) * rad);
t = t + 0.1;
if (t > TAU) {
t = 0.00;
}
}
}