Introdução ao seno e coseno com Actionscript
Trigonometria
Quando se fala em trigonometria geralmente é associada por grande parte a um “bicho daqueles maus” com cosenos, senos e mais um monte de fórmulas.
A verdade é que nos mais variados problemas é constante termos que aliar o actionscript com este ramo da matemática.
- PI:
É um numero irracional, eu normalmente uso apenas a aproximação com duas casas decimais 3,14. O record actualmente do numero mais aproximado é de Fabrice Bellard — um programador, claro!
Mas o que é visualmente este valor PI?
Importa saber que se fizermos um circulo perfeito com um raio de 1 unidade usando por exemplo uma corda, se esticarmos essa corda numa linha recta vamos ver que ela mede 2*PI. Portanto, metade da corda mede PI — um valor aproximado a 3.14159 26535 89793 23846 26433 83279 50288 4197 …. unidades! É a mesma coisa que dizer que o raio cabe PI vezes no arco de meia circunferência (um arco de circunferência de 180 graus).
- Está bem, pronto.. já gravei o que é o PI e agora o que faço com ele?
As funções Math.cos, Math.sin e outras no actionscript aceitam como parâmetro uma variável em radianos, esta variável indicam uma amplitude, um ponto especifico do nosso circulo.
A definição de Radiano
“O ângulo definido no centro de um círculo por um arco de circunferência com o mesmo comprimento que o raio do círculo é 1 radiano”
Ou seja, dizer que o raio do circulo “cabe” n vezes numa determinada parte do arco pode-se simplificar e dizer simplesmente que essa parte mede “n” radianos
Num sistema de coordenadas no plano cartesiano centrando um circulo com uma unidade de raio, fixa-se o ponto (a) mais à direita do circulo e mede-se o arco em sentido contrário ao sentido dos ponteiros do relógio obtendo um segundo ponto (b);
- a medida do arco entre os dois pontos “n radianos” (a verde), corresponde o parâmetro que usamos no coseno e no seno (entre outras funções do actionscript).
Seno
- traça-se uma recta paralela ao eixo dos xx’s que passa pelo ponto b e vai interceptar o eixo dos yy’s obtendo o valor do seno para “n radianos” (a laranja)
Coseno
- traça-se uma recta paralela ao eixo dos yy’s que passa pelo ponto b e que vai interceptar o eixo dos xx’s obtendo o valor do coseno para “n radianos” (a azul)
Isto é a parte chata da coisa, mas é o suficiente para fazermos milhares e milhares de cenas espectaculares 
.
Problema 1:
- Desenhar os pontos referentes às horas de um relógio analógico com raio de 80 pixeis e centro no ponto (200,122)
Resposta:
Sabemos que um circulo tem um arco de 2*PI, queremos dividir em 12 partes, portanto vamos ter 2*PI/12 como a medida de cada arco.
A partir daqui podemos passar estes arcos para coordenadas x,y usando o coseno e o seno.
Como queremos um raio maior que uma unidade temos que multiplicar os valores obtidos pelo novo raio desejado.
var arco_hora:Number=Math.PI*2/12;// simplificando Math.pi/6
var raio:Number=80;//raio do nosso relogio
this.graphics.lineStyle(4,0xff0000);//vamos por os pontos vermelhos
for (var i:int=0;i<12;i++)
{
var posx:Number=Math.cos(arco_hora*i)*raio;
var posy:Number=Math.sin(arco_hora*i)*raio;
this.graphics.drawCircle(posx,posy,4);
}
Ok, mas isto ficou no ponto (0,0), agora é necessário fazer uma translação para a posição final.
var arco_hora:Number=Math.PI*2/12;// simplificando Math.pi/6
var raio:Number=80;//raio do nosso relogio
var centro:Point=new Point(200,122);//posição central do relógio
this.graphics.lineStyle(4,0xff0000);//vamos por os pontos vermelhos
for (var i:int=0;i<12;i++)
{
var posx:Number=Math.cos(arco_hora*i)*raio+centro.x;
var posy:Number=Math.sin(arco_hora*i)*raio+centro.y;
this.graphics.drawCircle(posx,posy,4);
}
Desafio:
- Desenhar os ponteiros
Dica: Assim por alto podemos por um TIMER de 1000 e no evento TimerEvent.TIMER obtemos a hora e actualizamos os ponteiros.
Os ponteiros podem ser desenhados com
graphics.lineStyle(4,0xff0000);
graphics.moveTo(centro.x, centro.y);
graphics.lineTo(posx, posy);
Cuidados:
O coseno e seno são funções pesadas, o processador queixa-se se quando os usamos intensamente como por exemplo em sistemas de partículas.
Por isso uma leitura a este post do Michael Baczynski é recomendada.
Obrigado,
Paulo Afonso (semmais)
http://www.semmais.com/
This entry was written by and posted on January 26, 2010 at 6:11 pm and filed under Flash, Introduções, Tutoriais, Uncategorized. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
Post a comment or leave a trackback: Trackback URL. 1 Comment
Make A CommentComments RSS Feed TrackBack URL
January 29th, 2010 at 2:43 pm
Excelente artigo Paulo. Ando sempre às voltas com isto :p