Skip to content

Instantly share code, notes, and snippets.

/Abstract-Canvas-Visualization.markdown

Created March 7, 2015 18:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/5f07fd79438e6c48f52a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/5f07fd79438e6c48f52a to your computer and use it in GitHub Desktop.
Download ZIP
Abstract Canvas Visualization
Raw
Abstract-Canvas-Visualization.markdown
Raw
index.html
<canvas id="canvas" width="400" height="400"></canvas>
Raw
script.js
/*=============================================================================*/
/* Smooth Trail
/*=============================================================================*/
var smoothTrail = function(c, cw, ch){
/*=============================================================================*/
/* Initialize
/*=============================================================================*/
this.init = function(){
this.loop();
};
/*=============================================================================*/
/* Variables
/*=============================================================================*/
var _this = this;
this.c = c;
this.ctx = c.getContext('2d');
this.cw = cw;
this.ch = ch;
this.mx = 0;
this.my = 0;
//trail
this.trail = [];
this.maxTrail = 200;
this.mouseDown = false;
this.ctx.lineWidth = .1;
this.ctx.lineJoin = 'round';
this.radius = 1;
this.speed = 0.4;
this.angle = 0;
this.arcx = 0;
this.arcy = 0;
this.growRadius = true;
this.seconds = 0;
this.milliseconds = 0;
/*=============================================================================*/
/* Utility Functions
/*=============================================================================*/
this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);};
this.hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};
/*=============================================================================*/
/* Create Point
/*=============================================================================*/
this.createPoint = function(x, y){
this.trail.push({
x: x,
y: y
});
};
/*=============================================================================*/
/* Update Trail
/*=============================================================================*/
this.updateTrail = function(){
if(this.trail.length < this.maxTrail){
this.createPoint(this.arcx, this.arcy);
}
if(this.trail.length >= this.maxTrail){
this.trail.splice(0, 1);
}
};
/*=============================================================================*/
/* Update Arc
/*=============================================================================*/
this.updateArc = function(){
this.arcx = (this.cw/2) + Math.sin(this.angle) * this.radius;
this.arcy = (this.ch/2) + Math.cos(this.angle) * this.radius;
var d = new Date();
this.seconds = d.getSeconds();
this.milliseconds = d.getMilliseconds();
this.angle += this.speed*(this.seconds+1+(this.milliseconds/1000));
if(this.radius <= 1){
this.growRadius = true;
}
if(this.radius >= 200){
this.growRadius = false;
}
if(this.growRadius){
this.radius += 1;
} else {
this.radius -= 1;
}
};
/*=============================================================================*/
/* Render Trail
/*=============================================================================*/
this.renderTrail = function(){
var i = this.trail.length;
this.ctx.beginPath();
while(i--){
var point = this.trail[i];
var nextPoint = (i == this.trail.length) ? this.trail[i+1] : this.trail[i];
var c = (point.x + nextPoint.x) / 2;
var d = (point.y + nextPoint.y) / 2;
this.ctx.quadraticCurveTo(Math.round(this.arcx), Math.round(this.arcy), c, d);
};
this.ctx.strokeStyle = 'hsla('+this.rand(170,300)+', 100%, '+this.rand(50, 75)+'%, 1)';
this.ctx.stroke();
this.ctx.closePath();
};
/*=============================================================================*/
/* Clear Canvas
/*=============================================================================*/
this.clearCanvas = function(){
//this.ctx.globalCompositeOperation = 'source-over';
//this.ctx.clearRect(0,0,this.cw,this.ch);
this.ctx.globalCompositeOperation = 'destination-out';
this.ctx.fillStyle = 'rgba(0,0,0,.1)';
this.ctx.fillRect(0,0,this.cw,this.ch);
this.ctx.globalCompositeOperation = 'lighter';
};
/*=============================================================================*/
/* Animation Loop
/*=============================================================================*/
this.loop = function(){
var loopIt = function(){
requestAnimationFrame(loopIt, _this.c);
_this.clearCanvas();
_this.updateArc();
_this.updateTrail();
_this.renderTrail();
};
loopIt();
};
};
/*=============================================================================*/
/* Check Canvas Support
/*=============================================================================*/
var isCanvasSupported = function(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
};
/*=============================================================================*/
/* Setup requestAnimationFrame
/*=============================================================================*/
var setupRAF = function(){
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x){
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
};
if(!window.requestAnimationFrame){
window.requestAnimationFrame = function(callback, element){
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
};
if (!window.cancelAnimationFrame){
window.cancelAnimationFrame = function(id){
clearTimeout(id);
};
};
};
/*=============================================================================*/
/* Define Canvas and Initialize
/*=============================================================================*/
if(isCanvasSupported){
var c = document.createElement('canvas');
c.width = 400;
c.height = 400;
var cw = c.width;
var ch = c.height;
document.body.appendChild(c);
var cl = new smoothTrail(c, cw, ch);
setupRAF();
cl.init();
}
Raw
style.css
body {
background: #000;
overflow: hidden;
}
canvas {
display: block;
left: 50%;
margin: -200px 0 0 -200px;
position: absolute;
top: 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment