Light Pack Logo Animation
Code borrowed from getlightpack.com. STUDY THIS! Figure out how it works and get it working inside of here.
by Travis
HTML
<script src="http://d1ros97qkrwjf5.cloudfront.net/42/eum/rum.js"></script>
<section class="section logo">
<div class="logo__container">
<canvas id="logo__invisible" width="64" height="64"></canvas>
<canvas id="logo__back" width="200" height="200"></canvas>
<div class="logo__image"></div>
</div>
</section>
CSS
body {background:#333;}
#logo__invisible {display:none;}
JavaScript
function calcDistance(x1,y1,x2,y2) {
var dx = x2 - x1;
var dy = y2 - y1;
return Math.sqrt(dx * dx + dy * dy);
}
function calcLenght(dx,dy) {
var dx = x2 - x1;
var dy = y2 - y1;
return Math.sqrt(dx * dx + dy * dy);
}
function Vector(x,y) {
this.x = x;
this.y = y;
this.len = function() {
var x = this.x;
var y = this.y;
return Math.sqrt(x*x+y*y);
};
this.cosA = function(v) {
var sMul = this.x * v.x + this.y * v.y;
return sMul / (this.len() * v.len());
};
}
function Rectangle(x1,y1,x2,y2) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.getDistance = function(x, y) {
if ( x < this.x1 ) {
if ( y < this.y1) {
return calcDistance(x, y, this.x1, this.y1);
} else if ( y < this.y2) {
return this.x1 - x;
} else {
return calcDistance(x, y, this.x1, this.y2);
}
} else if ( x < this.x2) {
if ( y < this.y1) {
return this.y1-y;
} else if ( y < this.y2) {
return 0;
} else {
return y - this.y2;
}
} else {
if ( y < this.y1) {
return calcDistance(x, y, this.x2, this.y1);
} else if ( y < this.y2) {
return x - this.x2;
} else {
return calcDistance(x, y, this.x2, this.y2);
}
}
};
}
var c;
var scaledCanvas;
var ctx, scaledCtx;
var imgData;
var gTime = 0;
var gWidth=64;
var gHeight=64;
var scaleFactor=200/64;
var gHalfWidth=Math.round(gWidth/2);
var gHalfHeight=Math.round(gHeight/2);
var mouseEasing={ "x": -30000,
"y": -30000,
"lastX": -30000,
"lastY": -30000,
"inited": false,
"amount": 0};
var backRect = new Rectangle(20, 20 , 43,...