Better color change, naive mouse velocity

This commit is contained in:
Tyler Hallada 2016-04-02 19:28:27 -04:00
parent 7abf73c5f7
commit ac2dc8efa8

View File

@ -28,12 +28,41 @@ Stuff.prototype.getDocumentDimensions = function () {
return {"height": height, "width": width}; 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() { Stuff.prototype.pickRandomColor = function() {
var normal = {"r": Math.floor(Math.random() * (255 + 1)), var normal = {"r": Math.floor(Math.random() * (255 + 1)),
"g": Math.floor(Math.random() * (255 + 1)), "g": Math.floor(Math.random() * (255 + 1)),
"b": 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 gamma = 2.2;
var L = 0.2126 * Math.pow(normal.r / 255, gamma) + 0.7152 * Math.pow(normal.g / 255, gamma) + 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); 0.0722 * Math.pow(normal.b / 255, gamma);
@ -116,24 +145,29 @@ Stuff.prototype.drawPolygon = function(context) {
} else { } else {
this.points[i].y = this.points[i].y + pull_amount; 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) { if (Math.random() < 0.5) {
this.points[i].y = this.points[i].y - this.getRandomInRange(3, 6, false); this.points[i].y = this.points[i].y - this.getRandomInRange(3, 6, false);
} else { } else {
this.points[i].y = this.points[i].y + this.getRandomInRange(3, 6, false); 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 { } else {
this.points[i].x = this.points[i].x + this.getRandomInRange(0, 2, true); 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); 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) { Stuff.prototype.drawThing = function(context, sort, prune, chain) {
var AnimationFrame = window.AnimationFrame; var AnimationFrame = window.AnimationFrame;
AnimationFrame.shim(); AnimationFrame.shim();
var animationFrame = new AnimationFrame(30), var animationFrame = new AnimationFrame(30);
timeCounter = 0,
color,
gradient;
context.lineWidth = 0.5; context.lineWidth = 0.5;
var self = this; var self = this;
@ -195,15 +226,25 @@ Stuff.prototype.canvasClickHandler = function(event) {
var x = event.pageX; var x = event.pageX;
var y = event.pageY; var y = event.pageY;
this.converge_point = {'x': x, 'y': y}; this.converge_point = {'x': x, 'y': y};
color = this.pickRandomColor(); if (this.color) {
this.canvas.style.backgroundColor = "rgb(" + color.normal.r + "," + color.normal.g + "," + color.normal.b + ")"; this.color = this.changeColor(this.color);
this.context.strokeStyle = color.inverse; } 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) { Stuff.prototype.canvasMouseMoveHandler = function(event) {
var x = event.pageX; var x = event.pageX;
var y = event.pageY; var y = event.pageY;
this.old_mouse_position = this.mouse_position;
this.mouse_position = {'x': x, 'y': y}; 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() { Stuff.prototype.draw = function() {