Atrium - Centro Criativo de Faro

Atrium---Centro-Criativo-de-Faro.markdown

Atrium - Centro Criativo de Faro

Small logo animation done with canvas. Trying to animate a logo using canvas and GSAP - TweenMax and TimelineMax.

A Pen by Ignacio Correia on CodePen.

License.

index.html

<canvas id="canvas" width="600" height="600"></canvas>
<footer><a id="ins" href="https://www.facebook.com/video.php?v=731615166918232&set=vb.725711180841964&type=2&theater" target="_blank">Inspiration here</a><a id="pen" href="https://www.behance.net/unykvis" target="_blank"> - Pen by Unykvis -</a></footer>
<header>
<input type="button" id="clear" value="Clear">
<input type="button" id="refresh" value="Refresh">
<input type="button" id="but01" value="1">
<input type="button" id="but02" value="2">
<input type="button" id="but03" value="3">
<!--<input type="button" id="but04" value="4">
<input type="button" id="but05" value="5">
<input type="button" id="but06" value="6">-->
</header>

script.js

var  canvas = document.getElementById("canvas")
		,ctx = canvas.getContext("2d")
		,center      = {x:300,y:240,s:2}
		,nLines      = 30     	
		,wLine       = 0.5    	
		,mColor      = '#111' 
		,lSpaces     =[ 
      						 1.85,4.55,
      						-2.55,4.25,
                      -3.1 ,3.75,
                      -5   ,-1,
                      -2.23,-3.1,
                      -1.8 ,-5,
                       3.1 ,-4.4,
                       4.5 ,-3,
                       5.2 ,2,
                       3.05,1.8
    						]
		,orgPos      ={
                      a:242,b:100,
                      c:378,d:109,
                      e:397,f:128,
                      g:453,h:272,
                      i:370,j:337,
                      k:357,l:394,
                      m:204,n:375,
                      o:162,p:332,
                      q:141,r:228,
                      s:206,r:182
                    }
		,finalPos    = []
		,newPos      = []
		,variation   = 0
		,textTitle   = {x:60,y:465}
		,subTitle    = {x:56,y:510}
		,velocity    = 1
		,sShifter    = 0
		,easing      = Power2.easeOut;
    

function calculateRainbow(){
  
  finalPos    = [];
  newPos      = [];
  
  for(var i=0;i<nLines;i++){ 
		newPos = [];
     newProp = [];
     a=sShifter;
    for(prop in orgPos){
			newProp[prop] = (orgPos[prop] + (lSpaces[a] * i));
			newPos.push(newProp[prop]);
			a++;
     }
      finalPos.push(newPos); 
    
    }
}

function specialRect(ctx, esp, color, vertice){  
  //console.log(vertice);
  ctx.beginPath();
  ctx.moveTo(vertice[0],vertice[1]);
  ctx.lineTo(vertice[2],vertice[3]);
  ctx.lineTo(vertice[4],vertice[5]);
  ctx.lineTo(vertice[6],vertice[7]);
  ctx.lineTo(vertice[8],vertice[9]);
  ctx.lineTo(vertice[10],vertice[11]);
  ctx.lineTo(vertice[12],vertice[13]);
  ctx.lineTo(vertice[14],vertice[15]);
  ctx.lineTo(vertice[16],vertice[17]);
  ctx.lineTo(vertice[18],vertice[19]);
  ctx.lineTo(vertice[20],vertice[21]);
  ctx.closePath();
  ctx.lineWidth = wLine; 
  ctx.strokeStyle = color;
  ctx.stroke();	
}
function normalText(ctx,title,font,left,top){  
  ctx.beginPath();
  ctx.fillStyle = "#000";
  ctx.font = font;
  ctx.fillText(title,left,top);
}
function normalCircle(ctx,left,top,radius,open,color){
	ctx.beginPath();
	ctx.arc(left,top,radius,open,2*Math.PI);
	ctx.fillStyle = color;
	ctx.fill();
}

function draw() {
  
  calculateRainbow();
   
	ctx.fillStyle = "rgba(255,255,255,0.75)";  //Canvas
	ctx.fillRect(0, 0, canvas.width, canvas.height);//Draw Cicular Center
   
   normalCircle(ctx,center.x,center.y,center.s,0,mColor);//Draw Title
   rainbow();
   normalText(ctx,'A  T  R  I  U  M','Bold 72px Arial ', textTitle.x, textTitle.y);//Draw SubTitle
   normalText(ctx,'CENTRO CREATIVO DA BAIXA DE FARO','Bold 25px Arial', subTitle.x, subTitle.y);
}


function rainbow(){
  //Print Raibow
  for(b=0;b<nLines;b++){ 
    specialRect(ctx,b,mColor,finalPos[b]);
  }
 
}

//instantiate a TimelineLite     onComplete:animRain
var tl = new TimelineLite({onUpdate:draw});
 	tl.from(center,velocity,    {x:300, y:300,s:600, ease:easing},'first')
      .from(textTitle,velocity, {x:60, y:700, ease:easing},'first')
      .from(subTitle, velocity, {x:56, y:745, ease:easing},'first');


// bind event handler to clear button
document.getElementById('clear').addEventListener('click', function() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
}, false);

// bind event handler to clear button
document.getElementById('refresh').addEventListener('click', function() {
  sShifter=0;
	tl.restart();
}, false);

// bind event handler to clear button
document.getElementById('but01').addEventListener('click', function() {
  sShifter=1;
	tl.restart();
}, false);

// bind event handler to clear button
document.getElementById('but02').addEventListener('click', function() {
  sShifter=2;
	tl.restart();
}, false);

// bind event handler to clear button
document.getElementById('but03').addEventListener('click', function() {
  sShifter=3;
	tl.restart();
}, false);

// bind event handler to clear button
document.getElementById('but04').addEventListener('click', function() {
  sShifter=4;
	tl.restart();
}, false);

// bind event handler to clear button
document.getElementById('but05').addEventListener('click', function() {
  sShifter=5;
	tl.restart();
}, false);

// bind event handler to clear button
document.getElementById('but06').addEventListener('click', function() {
  sShifter=6;
	tl.restart();
}, false);
// By Ignacio Correia

style.css

html{margin: 0;padding: 0;overflow:hidden;font-family:Arial;}
body{background:#e3e3e3;min-height: 100%;height: 100%;width: 100%;}
canvas{position:absolute; top:50%; left:50%;margin:-330px 0 0 -300px}
footer{position:fixed; bottom:10px;width:100%;text-align:left;cursor:default;}
header{position:fixed; top:10px;width:100%;text-align:left;cursor:default;}
a{text-decoration:none; color:#777;font-weight:bold;font-size:10px;cursor:pointer;}
#pen{}
input{border:1px solid #efefef;background:transparent;cursor:pointer;}