View difference between Paste ID: XmTCG5V1 and 246rbTZP

-var circles = [];
+var circles = [];
-
+
-function setup() {
+function setup() {
-  createCanvas(400, 400);
+  createCanvas(400, 400);
-  var count = 0;
+  var count = 0;
-  while (count < 20) {
+  while (count < 20) {
-    circles.push({
+    circles.push({
-      x: random(width),
+      x: random(width),
-      y: height,
+      y: height,
-      vx: 0,
+      vx: 0,
-      vy: random(4),
+      vy: random(4),
-      r: random(4,10),
+      r: random(4,10),
-      h: random(360)
+      h: random(360)
-    });
+    });
-    count = count + 1;
+    count = count + 1;
-  }
+  }
 }
-
+
-function mouseDragged() {
+function mouseDragged() {
-  circles.push({
+  circles.push({
-      x: mouseX,
+      x: mouseX,
-      y: mouseY,
+      y: mouseY,
-      vx: 0,
+      vx: 0,
-      vy: -random(4),
+      vy: -random(4),
-      r: random(4,10),
+      r: random(4,10),
-      h: random(360)
+      h: random(360)
-    });
+    });
 }
-
+
-function draw() {
+function draw() {
-  background(255);
+  background(255);
-  noStroke();
+  noStroke();
-
+
-  circles.forEach(paint);
+  circles.forEach(paint);
-  circles.forEach(move);
+  circles.forEach(move);
-  circles.forEach(bounce);
+  circles.forEach(bounce);
 }
-
+
-function isClickedOn(circle) {
+function isClickedOn(circle) {
-  if (dist(mouseX, mouseY, circle.x, circle.y) < circle.r) {
+  if (dist(mouseX, mouseY, circle.x, circle.y) < circle.r) {
-    circle.r = 0;
+    circle.r = 0;
-  }
+  }
 }
-
+
-function mousePressed() {
+function mousePressed() {
-  circles.forEach(isClickedOn);
+  circles.forEach(isClickedOn);
 }
-
+
-function paint(circle) {
+function paint(circle) {
-  colorMode(HSB);
+  colorMode(HSB);
-  fill(circle.h, 100, 100);
+  fill(circle.h, 100, 100);
-  ellipse(circle.x, circle.y, circle.r*2, circle.r*2);
+  ellipse(circle.x, circle.y, circle.r*2, circle.r*2);
 }
-
+
-function move(circle) {
+function move(circle) {
-  circle.x += random(-2, 2); // vibration
+  circle.x += random(-2, 2); // vibration
-  circle.x += circle.vx; // circle.x = circle.x + circle.vx
+  circle.x += circle.vx; // circle.x = circle.x + circle.vx
-  circle.y += circle.vy;
+  circle.y += circle.vy;
 }
-
+
-function bounce(circle) {
+function bounce(circle) {
-  if (circle.x > width || circle.x < 0) {
+  if (circle.x > width || circle.x < 0) {
-    circle.vx = - circle.vx;
+    circle.vx = - circle.vx;
-  }
+  }
-  if (circle.y > height || circle.y < 0) {
+  if (circle.y > height || circle.y < 0) {
-    circle.vy = - circle.vy;
+    circle.vy = - circle.vy;
-  }
+  }
 }