var easingVariables;
var circles;
function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB, 360, 100, 100, 100);
frameRate(30);
easingVariables = [];
circles = [];
for (var i = 0; i < 250; i++) {
circles.push(new Circle());
}
}
function draw() {
background(0, 0, 100);
var mouse = createVector(mouseX, mouseY);
for (var i = 0; i < circles.length; i++) {
var circle = circles[i];
circle.render();
circle.update(mouse);
}
updateEasingVariables();
}
function updateEasingVariables() {
for (var i = 0; i < easingVariables.length; i++) {
easingVariables[i].update();
}
}
function isOverlapping(circle) {
for (var i = 0; i < circles.length; i++) {
var other = circles[i];
var d = circle.loc.dist(other.loc);
if (d < circle.maxRadius + other.maxRadius) {
return true;
}
}
return false;
}
function EasingVariable() {
this.value = 0;
this.step = 0.04;
this.isIncreasing = true;
this.isDecreasing = false;
easingVariables.push(this);
}
EasingVariable.prototype = {
update: function() {
if (this.isIncreasing) {
this.value += this.step;
if (this.value >= 1) {
this.value = 1;
this.isIncreasing = false;
}
}
if (this.isDecreasing) {
this.value -= this.step;
if (this.value <= 0) {
this.value = 0;
this.isDecreasing = false;
}
}
},
startIncrement: function() {
this.isIncreasing = true;
this.isDecreasing = false;
},
startDecrement: function() {
this.isIncreasing = false;
this.isDecreasing = true;
}
}
function Circle() {
this.loc = createVector(random(windowWidth), random(windowHeight));
this.ev = new EasingVariable();
this.maxRadius = random(10, 100);
this.c = color(random(360), 100, 100);
}
Circle.prototype = {
resetLoc: function() {
this.loc = createVector(random(windowWidth), random(windowHeight));
},
getRadius: function() {
var v = this.ev.value;
return map(v, 0, 1, 0, this.maxRadius);
},
render: function() {
var r = this.getRadius();
fill(hue(this.c), saturation(this.c), brightness(this.c), 30);
stroke(hue(this.c), saturation(this.c), brightness(this.c), 60);
ellipse(this.loc.x, this.loc.y, r * 2, r * 2);
},
update: function(mouse) {
var d = this.loc.dist(mouse);
if (!this.ev.isDecreasing && d < this.getRadius()) {
this.ev.startDecrement();
}
if (!this.ev.isIncreasing && !this.ev.isDecreasing && this.ev.value == 0) {
this.resetLoc();
this.ev.startIncrement();
}
}
}