Better color change, naive mouse velocity

js/stuff.js

@@ -28,12 +28,41 @@ Stuff.prototype.getDocumentDimensions = function () {
     return {"height": height, "width": width};
 };
 
-/* Choose a random RGB color to begin the color gradient with */
+/* Choose a random RGB color */
 Stuff.prototype.pickRandomColor = function() {
     var normal = {"r": Math.floor(Math.random() * (255 + 1)),
                   "g": Math.floor(Math.random() * (255 + 1)),
                   "b": Math.floor(Math.random() * (255 + 1))};
-    var inverse_color = (normal.r + normal.g + normal.b) / 3 > 0.5 ? 20 : 235;
+    var gamma = 2.2;
+    var L = 0.2126 * Math.pow(normal.r / 255, gamma) + 0.7152 * Math.pow(normal.g / 255, gamma) +
+            0.0722 * Math.pow(normal.b / 255, gamma);
+    var inverse = 'black';
+    if (L < 0.5) {
+        inverse = 'white';
+    }
+    return {'normal': normal, 'inverse': inverse};
+};
+
+Stuff.prototype.changeColorValue = function(color_value) {
+    if (color_value === 255) {
+        return color_value - this.getRandomInRange(5, 50);
+    } else if (color_value === 0) {
+        return color_value + this.getRandomInRange(5, 50);
+    }
+    var new_color_value = color_value + this.getRandomInRange(5, 100, true);
+    if (new_color_value > 255) {
+        return 255;
+    } else if (new_color_value < 0) {
+        return 0;
+    }
+    return new_color_value;
+};
+
+/* Mutate RGB color by random increment */
+Stuff.prototype.changeColor = function(color) {
+    var normal = {"r": this.changeColorValue(color.normal.r),
+                  "g": this.changeColorValue(color.normal.g),
+                  "b": this.changeColorValue(color.normal.b)};
     var gamma = 2.2;
     var L = 0.2126 * Math.pow(normal.r / 255, gamma) + 0.7152 * Math.pow(normal.g / 255, gamma) +
             0.0722 * Math.pow(normal.b / 255, gamma);
@@ -116,24 +145,29 @@ Stuff.prototype.drawPolygon = function(context) {
             } else {
                 this.points[i].y = this.points[i].y + pull_amount;
             }
-        } else if (this.counter % 10 === 0) {
+        } else if ((this.mouse_position) && (this.old_mouse_position) && (this.distance(this.mouse_position, this.points[i]) < 50)) {
+            // var push_amount = this.getRandomInRange(this.mouse_velocity * 0.75, this.mouse_velocity, false);
+            // if (this.points[i].x >= this.mouse_position.x) {
+                // this.points[i].x = this.points[i].x + push_amount;
+            // } else {
+                // this.points[i].x = this.points[i].x - push_amount;
+            // }
+            // if (this.points[i].y >= this.mouse_position.y) {
+                // this.points[i].y = this.points[i].y + push_amount;
+            // } else {
+                // this.points[i].y = this.points[i].y - push_amount;
+            // }
+            var push_amount_x = this.old_mouse_position.x - this.mouse_position.x;
+            var push_amount_y = this.old_mouse_position.y - this.mouse_position.y;
+            this.points[i].x = this.points[i].x - this.getRandomInRange(push_amount_x * 0.5, push_amount_x * 1.5);
+            this.points[i].y = this.points[i].y - this.getRandomInRange(push_amount_y * 0.5, push_amount_y * 1.5);
+        }
+        if (this.counter % 10 === 0) {
             if (Math.random() < 0.5) {
                 this.points[i].y = this.points[i].y - this.getRandomInRange(3, 6, false);
             } else {
                 this.points[i].y = this.points[i].y + this.getRandomInRange(3, 6, false);
             }
-        } else if ((this.mouse_position) && (this.distance(this.mouse_position, this.points[i]) < 50)) {
-            var push_amount = this.getRandomInRange(2, 7, false);
-            if (this.points[i].x >= this.mouse_position.x) {
-                this.points[i].x = this.points[i].x + push_amount;
-            } else {
-                this.points[i].x = this.points[i].x - push_amount;
-            }
-            if (this.points[i].y >= this.mouse_position.y) {
-                this.points[i].y = this.points[i].y + push_amount;
-            } else {
-                this.points[i].y = this.points[i].y - push_amount;
-            }
         } else {
             this.points[i].x = this.points[i].x + this.getRandomInRange(0, 2, true);
             this.points[i].y = this.points[i].y + this.getRandomInRange(0, 2, true);
@@ -159,10 +193,7 @@ Stuff.prototype.drawPolygon = function(context) {
  Stuff.prototype.drawThing = function(context, sort, prune, chain) {
     var AnimationFrame = window.AnimationFrame;
     AnimationFrame.shim();
-    var animationFrame = new AnimationFrame(30),
-        timeCounter = 0,
-        color,
-        gradient;
+    var animationFrame = new AnimationFrame(30);
     context.lineWidth = 0.5;
     
     var self = this;
@@ -195,15 +226,25 @@ Stuff.prototype.canvasClickHandler = function(event) {
     var x = event.pageX;
     var y = event.pageY;
     this.converge_point = {'x': x, 'y': y};
-    color = this.pickRandomColor();
-    this.canvas.style.backgroundColor = "rgb(" + color.normal.r + "," + color.normal.g + "," + color.normal.b + ")";
-    this.context.strokeStyle = color.inverse;
+    if (this.color) {
+        this.color = this.changeColor(this.color);
+    } else {
+        this.color = this.pickRandomColor();
+    }
+    this.canvas.style.backgroundColor = "rgb(" + this.color.normal.r + "," + this.color.normal.g + "," + this.color.normal.b + ")";
+    this.context.strokeStyle = this.color.inverse;
 };
 
 Stuff.prototype.canvasMouseMoveHandler = function(event) {
     var x = event.pageX;
     var y = event.pageY;
+    this.old_mouse_position = this.mouse_position;
     this.mouse_position = {'x': x, 'y': y};
+    if (this.old_mouse_position) {
+        this.mouse_velocity = this.distance(this.mouse_position, this.old_mouse_position);
+    } else {
+        this.mouse_velocity = 0.0;
+    }
 };
 
 Stuff.prototype.draw = function() {