Ti Vídeo Tutoriais: javaScript: movimento, canvas, seno, cosseno e transformada de fourie

domingo, 1 de novembro de 2015

javaScript: movimento, canvas, seno, cosseno e transformada de fourie

//========================================================================================
// Autor: Luiz Augusto S. Prado - 2015
// Site: www.codigorapido.com.br
// javaScript: Movimento, Canvas, Seno, Cosseno, Ciclos
//========================================================================================

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  window_width = window.innerWidth,
  window_height = window.innerHeight;

canvas.width = window_width;
canvas.height = window_height;

//Create an object for the circle first
var circle = {
 // Basic attributes
 x: 150,
 y: 150,
 radius: 5,
 color: "#000",
 
 // Function to draw the circle
 draw : function() {
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
  ctx.closePath();
  ctx.fill();
 }
};

function posCirc(ang , numero_ciclos , raio )
{
 numero_ciclos+=1;
 x = raio * Math.sin( numero_ciclos*ang*Math.PI/180)  
 y = raio * Math.cos( numero_ciclos*ang*Math.PI/180)  
 return [x,y]
}

function elipse2( canvas , numero_ciclos, raio1, raio2, raio3, cor , w , h )
{ 
 var k=0.01;
 var ctx=document.getElementById(canvas).getContext("2d");
 ctx.beginPath() ; 
 ctx.lineWidth=1 ; 
 ctx.strokeStyle = cor ;

array1 = posCirc(0 , 0, raio1);   
 array2 = posCirc(0 , numero_ciclos, raio2); 
 array3 = posCirc(0 , numero_ciclos*numero_ciclos, raio3);

x=array1[0]+array2[0] +array3[0]
 y=array1[1]+array2[1] +array3[1]

ctx.moveTo( x+ w , y + h); 
 for(var ang=0; ang<=360; ang+=k)  
 { 
  array1 = posCirc(ang , 0, raio1);   
  array2 = posCirc(ang , numero_ciclos, raio2); 
  array3 = posCirc(ang , numero_ciclos*numero_ciclos, raio3);

x=array1[0]+array2[0] +array3[0]
  y=array1[1]+array2[1] +array3[1]

ctx.lineTo(  x + w , y + h); 
 }  
 ctx.stroke() ;  
}

function elipseT( ang0, canvas , numero_ciclos, raio1, raio2, raio3, cor , w , h )
{ 
 var k=0.01;
 var ctx=document.getElementById(canvas).getContext("2d");
 ctx.beginPath() ; 
 ctx.lineWidth=1 ; 
 ctx.strokeStyle = cor ;

array1 = posCirc(360+ang0 , 0, raio1);   
 array2 = posCirc(360+ang0 , numero_ciclos, raio2); 
 array3 = posCirc(360+ang0 , numero_ciclos*numero_ciclos, raio3);

x=array1[0]+array2[0] +array3[0]
 y=array1[1]+array2[1] +array3[1]

ctx.moveTo( x+ w , y + h); 
 for(var ang=360+ang0; ang>ang0; ang-=k)  
 { 
  array1 = posCirc(ang , 0, raio1);   
  array2 = posCirc(ang , numero_ciclos, raio2); 
  array3 = posCirc(ang , numero_ciclos*numero_ciclos, raio3);

x=array1[0]+array2[0] +array3[0]
  y=array1[1]+array2[1] +array3[1]

ctx.lineTo(  80+ang-ang0 , y + h); 
 }  
 ctx.stroke() ;  
}

ang = 0;
numero_ciclos = 6
raio1=180
raio2=60
raio3=20
function move() 
{
 ctx.clearRect(0, 0, window_width, window_height);
 var c = circle;
 elipse2( "canvas" , numero_ciclos, raio1, raio2, raio3, "#f00", window_width/2+200, window_height/2)
 c.draw();
 ang += 1;

array1 = posCirc(ang , 0,  raio1  );   
 array2 = posCirc(ang ,numero_ciclos ,  raio2  );  
 array3 = posCirc(ang ,numero_ciclos*numero_ciclos ,  raio3  );

x=array1[0]+array2[0] +array3[0]
 y=array1[1]+array2[1] +array3[1]

c.x = x + window_width/2 +200;
 c.y = y + window_height/2 ;

elipseT( ang, "canvas" , numero_ciclos, raio1, raio2, raio3, "#00F", window_width/2+200, window_height/2)

if(ang  > 360 ) ang =0
}

var animloop = function() 
{
 requestAnimationFrame(animloop);
 move();
}
animloop();

</script>

Nenhum comentário:

Postar um comentário