Advertisement
ipsBruno

(Javascript) Espiral em Canvas!

Feb 11th, 2014
225
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2. *  Simples espiral em Canvas
  3. *  jsfiddle.net/tmVK7/
  4. *  email@brunodasilva.com
  5. */
  6.  
  7. <canvas style="background-color:black" id='canvas' width=800 height=600></canvas>
  8.  
  9. <script>
  10.     cnv = document.getElementById('canvas').getContext('2d')
  11.  
  12.     cnv.fillStyle="white"
  13.  
  14.     // representar o tamanho máximo da tela onde movimenta os quadrados
  15.  
  16.     var w = 800
  17.     var h = 600
  18.  
  19.     // tempo para cada frame
  20.     var t = 1;
  21.  
  22.     // voltas da espiral
  23.     v = 5;
  24.  
  25.  
  26.     // escala inicial da espiral!
  27.     e = 350
  28.  
  29.     // calcular o centro da espiral
  30.     cx = w/2
  31.     cy = h/2
  32.  
  33.  
  34.     // número de pontos a ser escrito a cada volta da espiral
  35.     p = 1000
  36.  
  37.     // ponto atual em que está sendo escrito
  38.     a = 0;
  39.  
  40.     // Chamar função recursiva que vai executar o movimento dos quadrados
  41.     executarMovimento()
  42.  
  43.  
  44.     // Criando a função
  45.     function executarMovimento() {
  46.  
  47.         // aumentar o ponto
  48.         a ++;
  49.        
  50.         // verificar se todas voltas da espiral foram feitas
  51.         if(a < p * v ) {
  52.        
  53.  
  54.             // calcular o circulo a ser feito
  55.                 r = a / p* Math.PI * 2
  56.  
  57.                 px = Math.cos(r)*e+cx
  58.            
  59.                 py = Math.sin(r)*e+cy
  60.    
  61.             // desenhar o ponto
  62.             cnv.fillRect(px,py,1,1);
  63.  
  64.             // diminuir a escala do circulo para formar a espiral a cada volta
  65.             e -= (e/p);
  66.  
  67.             // cronometrar próxima volta da espiral
  68.             setTimeout( executarMovimento , t);
  69.  
  70.         }
  71.        
  72.        
  73.          }
  74.  
  75. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement