thallada/bouncing-dots
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More progress, more colors

Browse Source
This commit is contained in:
Tyler Hallada 2016-04-02 18:48:41 -04:00
parent 8a6ac5db2c
commit 7abf73c5f7
1 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
js/stuff.js
View File

@ -30,9 +30,18 @@ Stuff.prototype.getDocumentDimensions = function () {
/* Choose a random RGB color to begin the color gradient with */ /* Choose a random RGB color to begin the color gradient with */
Stuff.prototype.pickRandomColor = function() { Stuff.prototype.pickRandomColor = function() {
return {"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.clear = function() { Stuff.prototype.clear = function() {
@ -96,32 +105,34 @@ Stuff.prototype.distance = function(point1, point2) {
Stuff.prototype.drawPolygon = function(context) { Stuff.prototype.drawPolygon = function(context) {
for (i = 0; i < this.points.length; i++) { for (i = 0; i < this.points.length; i++) {
if (this.converge_point) { if (this.converge_point) {
var pull_amount = this.getRandomInRange(2, 7, false);
if (this.points[i].x >= this.converge_point.x) { if (this.points[i].x >= this.converge_point.x) {
this.points[i].x = this.points[i].x - 3; this.points[i].x = this.points[i].x - pull_amount;
} else { } else {
this.points[i].x = this.points[i].x + 3; this.points[i].x = this.points[i].x + pull_amount;
} }
if (this.points[i].y >= this.converge_point.y) { if (this.points[i].y >= this.converge_point.y) {
this.points[i].y = this.points[i].y - 3; this.points[i].y = this.points[i].y - pull_amount;
} else { } else {
this.points[i].y = this.points[i].y + 3; this.points[i].y = this.points[i].y + pull_amount;
} }
} else if (this.counter % 10 === 0) { } else if (this.counter % 10 === 0) {
if (Math.random() < 0.5) { if (Math.random() < 0.5) {
this.points[i].y = this.points[i].y - 10; this.points[i].y = this.points[i].y - this.getRandomInRange(3, 6, false);
} else { } else {
this.points[i].y = this.points[i].y + 10; 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)) { } 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) { if (this.points[i].x >= this.mouse_position.x) {
this.points[i].x = this.points[i].x + 3; this.points[i].x = this.points[i].x + push_amount;
} else { } else {
this.points[i].x = this.points[i].x - 3; this.points[i].x = this.points[i].x - push_amount;
} }
if (this.points[i].y >= this.mouse_position.y) { if (this.points[i].y >= this.mouse_position.y) {
this.points[i].y = this.points[i].y + 3; this.points[i].y = this.points[i].y + push_amount;
} else { } else {
this.points[i].y = this.points[i].y - 3; 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);
@ -133,7 +144,6 @@ Stuff.prototype.drawPolygon = function(context) {
// this.sortedInsert(this.y_sorted, this.points[i].y, point); // this.sortedInsert(this.y_sorted, this.points[i].y, point);
context.beginPath(); context.beginPath();
context.strokeStyle = 'black';
context.arc(this.points[i].x, this.points[i].y, 1, 0, 2*Math.PI); context.arc(this.points[i].x, this.points[i].y, 1, 0, 2*Math.PI);
context.stroke(); context.stroke();
context.closePath(); context.closePath();
@ -186,7 +196,8 @@ Stuff.prototype.canvasClickHandler = function(event) {
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(); color = this.pickRandomColor();
this.canvas.style.backgroundColor = "rgb(" + color.r + "," + color.g + "," + color.b + ")"; this.canvas.style.backgroundColor = "rgb(" + color.normal.r + "," + color.normal.g + "," + color.normal.b + ")";
this.context.strokeStyle = color.inverse;
}; };
Stuff.prototype.canvasMouseMoveHandler = function(event) { Stuff.prototype.canvasMouseMoveHandler = function(event) {