Everything init
This commit is contained in:
Tyler Hallada
8
js/AnimationFrame.min.js
vendored
Normal file
8
js/AnimationFrame.min.js
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* An even better animation frame.
|
||||
*
|
||||
* @copyright Oleg Slobodskoi 2013
|
||||
* @website https://github.com/kof/animationFrame
|
||||
* @license MIT
|
||||
*/
|
||||
(function(window){"use strict";var nativeRequestAnimationFrame,nativeCancelAnimationFrame;(function(){var i,vendors=["webkit","moz","ms","o"],top;try{window.top.name;top=window.top}catch(e){top=window}nativeRequestAnimationFrame=top.requestAnimationFrame;nativeCancelAnimationFrame=top.cancelAnimationFrame||top.cancelRequestAnimationFrame;for(i=0;i<vendors.length&&!nativeRequestAnimationFrame;i++){nativeRequestAnimationFrame=top[vendors[i]+"RequestAnimationFrame"];nativeCancelAnimationFrame=top[vendors[i]+"CancelAnimationFrame"]||top[vendors[i]+"CancelRequestAnimationFrame"]}nativeRequestAnimationFrame&&nativeRequestAnimationFrame(function(){AnimationFrame.hasNative=true})})();function AnimationFrame(options){if(!(this instanceof AnimationFrame))return new AnimationFrame(options);options||(options={});if(typeof options=="number")options={frameRate:options};options.useNative!=null||(options.useNative=true);this.options=options;this.frameRate=options.frameRate||AnimationFrame.FRAME_RATE;this._frameLength=1e3/this.frameRate;this._isCustomFrameRate=this.frameRate!==AnimationFrame.FRAME_RATE;this._timeoutId=null;this._callbacks={};this._lastTickTime=0;this._tickCounter=0}AnimationFrame.FRAME_RATE=60;AnimationFrame.shim=function(options){var animationFrame=new AnimationFrame(options);window.requestAnimationFrame=function(callback){return animationFrame.request(callback)};window.cancelAnimationFrame=function(id){return animationFrame.cancel(id)};return animationFrame};AnimationFrame.now=Date.now||function(){return(new Date).getTime()};AnimationFrame.navigationStart=AnimationFrame.now();AnimationFrame.perfNow=function(){if(window.performance&&window.performance.now)return window.performance.now();return AnimationFrame.now()-AnimationFrame.navigationStart};AnimationFrame.hasNative=false;AnimationFrame.prototype.request=function(callback){var self=this,delay;++this._tickCounter;if(AnimationFrame.hasNative&&self.options.useNative&&!this._isCustomFrameRate){return nativeRequestAnimationFrame(callback)}if(!callback)throw new TypeError("Not enough arguments");if(this._timeoutId==null){delay=this._frameLength+this._lastTickTime-AnimationFrame.now();if(delay<0)delay=0;this._timeoutId=window.setTimeout(function(){var id;self._lastTickTime=AnimationFrame.now();self._timeoutId=null;++self._tickCounter;for(id in self._callbacks){if(self._callbacks[id]){if(AnimationFrame.hasNative&&self.options.useNative){nativeRequestAnimationFrame(self._callbacks[id])}else{self._callbacks[id](AnimationFrame.perfNow())}delete self._callbacks[id]}}},delay)}this._callbacks[this._tickCounter]=callback;return this._tickCounter};AnimationFrame.prototype.cancel=function(id){if(AnimationFrame.hasNative&&this.options.useNative)nativeCancelAnimationFrame(id);delete this._callbacks[id]};if(typeof exports=="object"&&typeof module=="object"){module.exports=AnimationFrame}else if(typeof define=="function"&&define.amd){define(function(){return AnimationFrame})}else{window.AnimationFrame=AnimationFrame}})(window);
|
||||
217
js/stuff.js
Normal file
217
js/stuff.js
Normal file
@@ -0,0 +1,217 @@
|
||||
var Stuff = function (options) {
|
||||
options = options || {};
|
||||
this.paused = false;
|
||||
|
||||
// Save this query here now that the page is loaded
|
||||
this.canvas = document.getElementById("magic");
|
||||
|
||||
this.counter = 0;
|
||||
};
|
||||
|
||||
|
||||
/* Get the height and width of full document. To avoid browser
|
||||
* incompatibility issues, choose the maximum of all height/width values.
|
||||
*
|
||||
* Method from http://stackoverflow.com/a/1147768 */
|
||||
Stuff.prototype.getDocumentDimensions = function () {
|
||||
var body = document.body,
|
||||
html = document.documentElement;
|
||||
|
||||
var height = Math.max(body.scrollHeight, body.offsetHeight,
|
||||
html.clientHeight, html.scrollHeight,
|
||||
html.offsetHeight);
|
||||
|
||||
var width = Math.max(body.scrollWidth, body.offsetWidth,
|
||||
html.clientWidth, html.scrollWidth,
|
||||
html.offsetWidth);
|
||||
|
||||
return {"height": height, "width": width};
|
||||
};
|
||||
|
||||
/* Choose a random RGB color to begin the color gradient with */
|
||||
Stuff.prototype.pickRandomColor = function() {
|
||||
return {"r": Math.floor(Math.random() * (255 + 1)),
|
||||
"g": Math.floor(Math.random() * (255 + 1)),
|
||||
"b": Math.floor(Math.random() * (255 + 1))};
|
||||
};
|
||||
|
||||
Stuff.prototype.clear = function() {
|
||||
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
};
|
||||
|
||||
Stuff.prototype.getRandomInRange = function(min, max, negative) {
|
||||
rand = Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
if (negative) {
|
||||
if (Math.random() < 0.5) {
|
||||
rand = rand * -1;
|
||||
}
|
||||
}
|
||||
return rand;
|
||||
};
|
||||
|
||||
Stuff.prototype.sortedInsert = function(ordered_array, value, to_insert) {
|
||||
for (i = 0; i < ordered_array.length; i++) {
|
||||
if (ordered_array[i] >= value) {
|
||||
ordered_array.splice(i, 0, to_insert);
|
||||
return;
|
||||
}
|
||||
}
|
||||
ordered_array.push(to_insert);
|
||||
};
|
||||
|
||||
Stuff.prototype.lineToNearestPoints = function(context, ordered_array) {
|
||||
for (i = 0; i < ordered_array.length; i++) {
|
||||
point = ordered_array[i];
|
||||
context.beginPath();
|
||||
context.strokeStyle = 'black';
|
||||
context.moveTo(point.x, point.y);
|
||||
if (i !== 0) {
|
||||
point_before = ordered_array[i-1];
|
||||
context.lineTo(point_before.x, point_before.y);
|
||||
}
|
||||
context.moveTo(point.x, point.y);
|
||||
if (i !== (ordered_array.length - 1)) {
|
||||
point_after = ordered_array[i+1];
|
||||
context.lineTo(point_after.x, point_after.y);
|
||||
}
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
}
|
||||
};
|
||||
|
||||
Stuff.prototype.initPoints = function(width, height, num_points) {
|
||||
this.points = [];
|
||||
for (i = 0; i < num_points; i++) {
|
||||
random_x = Math.floor(Math.random() * (width + 1));
|
||||
random_y = Math.floor(Math.random() * (height + 1));
|
||||
point = {'x': random_x, 'y': random_y};
|
||||
this.points.push(point);
|
||||
}
|
||||
};
|
||||
|
||||
Stuff.prototype.distance = function(point1, point2) {
|
||||
return Math.sqrt(Math.pow((point1.x - point2.x), 2) + Math.pow((point1.y - point2.y), 2));
|
||||
};
|
||||
|
||||
Stuff.prototype.drawPolygon = function(context) {
|
||||
for (i = 0; i < this.points.length; i++) {
|
||||
if (this.converge_point) {
|
||||
if (this.points[i].x >= this.converge_point.x) {
|
||||
this.points[i].x = this.points[i].x - 3;
|
||||
} else {
|
||||
this.points[i].x = this.points[i].x + 3;
|
||||
}
|
||||
if (this.points[i].y >= this.converge_point.y) {
|
||||
this.points[i].y = this.points[i].y - 3;
|
||||
} else {
|
||||
this.points[i].y = this.points[i].y + 3;
|
||||
}
|
||||
} else if (this.counter % 10 === 0) {
|
||||
if (Math.random() < 0.5) {
|
||||
this.points[i].y = this.points[i].y - 10;
|
||||
} else {
|
||||
this.points[i].y = this.points[i].y + 10;
|
||||
}
|
||||
} else if ((this.mouse_position) && (this.distance(this.mouse_position, this.points[i]) < 50)) {
|
||||
if (this.points[i].x >= this.mouse_position.x) {
|
||||
this.points[i].x = this.points[i].x + 3;
|
||||
} else {
|
||||
this.points[i].x = this.points[i].x - 3;
|
||||
}
|
||||
if (this.points[i].y >= this.mouse_position.y) {
|
||||
this.points[i].y = this.points[i].y + 3;
|
||||
} else {
|
||||
this.points[i].y = this.points[i].y - 3;
|
||||
}
|
||||
} 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);
|
||||
}
|
||||
// this.x_sorted = [];
|
||||
// this.y_sorted = [];
|
||||
// this.sortedInsert(this.x_sorted, this.points[i].x, point);
|
||||
// this.sortedInsert(this.y_sorted, this.points[i].y, point);
|
||||
|
||||
context.beginPath();
|
||||
context.strokeStyle = 'black';
|
||||
context.arc(this.points[i].x, this.points[i].y, 1, 0, 2*Math.PI);
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
}
|
||||
|
||||
this.converge_point = null;
|
||||
// this.lineToNearestPoints(context, this.x_sorted);
|
||||
// this.lineToNearestPoints(context, this.y_sorted);
|
||||
};
|
||||
|
||||
/* Most of this funtion is provided by Maissan Inc. in their tutorial:
|
||||
http://www.maissan.net/articles/simulating-vines */
|
||||
Stuff.prototype.drawThing = function(context, sort, prune, chain) {
|
||||
var AnimationFrame = window.AnimationFrame;
|
||||
AnimationFrame.shim();
|
||||
var animationFrame = new AnimationFrame(30),
|
||||
timeCounter = 0,
|
||||
color,
|
||||
gradient;
|
||||
context.lineWidth = 0.5;
|
||||
|
||||
var self = this;
|
||||
function animate(time) {
|
||||
// resize canvas if document size changed
|
||||
dimensions = self.getDocumentDimensions();
|
||||
if ((dimensions.height !== self.canvas.height) ||
|
||||
(dimensions.width !== self.canvas.width)) {
|
||||
self.canvas.height = dimensions.height;
|
||||
self.canvas.width = dimensions.width;
|
||||
}
|
||||
if (self.points === undefined) {
|
||||
self.initPoints(self.canvas.width, self.canvas.height, 5000);
|
||||
}
|
||||
|
||||
if (!self.paused) {
|
||||
self.clear();
|
||||
self.drawPolygon(context);
|
||||
self.counter = self.counter + 1;
|
||||
}
|
||||
frameId = animationFrame.request(animate);
|
||||
}
|
||||
|
||||
// Drawing interval
|
||||
var frameId = animationFrame.request(animate);
|
||||
return frameId;
|
||||
};
|
||||
|
||||
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.r + "," + color.g + "," + color.b + ")";
|
||||
};
|
||||
|
||||
Stuff.prototype.canvasMouseMoveHandler = function(event) {
|
||||
var x = event.pageX;
|
||||
var y = event.pageY;
|
||||
this.mouse_position = {'x': x, 'y': y};
|
||||
};
|
||||
|
||||
Stuff.prototype.draw = function() {
|
||||
var interval_time = 2000;
|
||||
|
||||
// Initialize canvas
|
||||
var dimensions = this.getDocumentDimensions();
|
||||
this.canvas.height = dimensions.height;
|
||||
this.canvas.width = dimensions.width;
|
||||
|
||||
// Check for canvas support, bind click event, and get context
|
||||
if (this.canvas.getContext){
|
||||
var self = this;
|
||||
this.canvas.addEventListener("click", function () { self.canvasClickHandler.apply(self, arguments); });
|
||||
this.canvas.addEventListener("mousemove", function () { self.canvasMouseMoveHandler.apply(self, arguments); });
|
||||
|
||||
this.context = this.canvas.getContext("2d");
|
||||
|
||||
// Draw stuff
|
||||
var frameId = this.drawThing(this.context, false, true, true);
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user