From ac2dc8efa89dfd0d666f6385efa86ad492d8eed3 Mon Sep 17 00:00:00 2001 From: Tyler Hallada Date: Sat, 2 Apr 2016 19:28:27 -0400 Subject: [PATCH] Better color change, naive mouse velocity --- js/stuff.js | 85 +++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 63 insertions(+), 22 deletions(-) diff --git a/js/stuff.js b/js/stuff.js index f1973b9..93f4a7a 100644 --- a/js/stuff.js +++ b/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() {