Mostrando postagens com marcador trigonometria. Mostrar todas as postagens
Mostrando postagens com marcador trigonometria. Mostrar todas as postagens

segunda-feira, 3 de agosto de 2009

Seguindo o Mouse com Trigonometria

Olá, esse poste de hoje foi baseado na dúvida do leitor Jefferson A. Pereira. Espero que gostem...

Se não leu meu post sobre Trigonometria em Actionscript, leia-o antes clicando aqui.

Vou ensinar hoje como usar a trigonometria em actionscript para fazer o olhos seguirem o ponteiro do mouse. Assim...


No método construtor, vamos adicionar o listener MouseEvent.MOUSE_MOVE no STAGE:

public function Main() 
{
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
}

No método listener, vamos limpar os riscos antigos dos triângulos que usamos para testar e executar a função que rotaciona o olho. Também forço o updateAfterEvent para que fique mais suave.

private function onMouseMoveHandler($event:MouseEvent):void 
{
graphics.clear();

rotateEye(eye1);
rotateEye(eye2);

$event.updateAfterEvent();
}

No método rotateEye é onde faço os cálculos para que o olho seja rotacionado de forma que "siga" o mouse do usuário. Primeiro eu encontro os catetos adjacente e oposto para que possa encontrar a hipotenusa:

var catAdj:Number = mouseX - $eye.x;
var catOp:Number = mouseY - $eye.y;
var hipot:Number = Math.sqrt((catAdj * catAdj) + (catOp * catOp));

Com isso posso calcular o ângulo de abertura do triângulo em radianos:

var radians:Number = Math.asin(catOp / hipot);

E transformar em graus:

var degree:Number = radians * (180 / Math.PI);

Ok, até essa parte tudo bem. Mas como o actionscript trabalha com graus de forma diferente, temos que verificar se o mouse está a direita ou esquerda do nosso olho. Fazemos isso comparando se o cateto adjacente está positivo ou negativo:

if (catAdj >= 0)
{
$eye.rotation = degree;
}
else
{
$eye.rotation = 180 - degree;
}

Se for negativo, subtraimos o valor de 180º. Por exemplo: 180º - (-90º) = 180º + 90º = 270º. Ou seja, está apontando na direção norte.

E depois adicionamos as linhas de teste e o log:

log.text = 'catAdj: ' + catAdj;
log.appendText('\ncatOp: ' + catOp);
log.appendText('\nhipot: ' + hipot);
log.appendText('\nradians: ' + radians);
log.appendText('\ndegree: ' + degree);

graphics.lineStyle(1, 0xff0000);
graphics.moveTo($eye.x, $eye.y);
graphics.lineTo(mouseX, mouseY);
graphics.lineStyle(1, 0xcccccc);
graphics.lineTo(mouseX, $eye.y);
graphics.lineTo($eye.x, $eye.y);

O método rotateEye ficou assim:

private function rotateEye($eye:MovieClip):void
{
var catAdj:Number = mouseX - $eye.x;
var catOp:Number = mouseY - $eye.y;
var hipot:Number = Math.sqrt((catAdj * catAdj) + (catOp * catOp));

var radians:Number = Math.asin(catOp / hipot);
var degree:Number = radians * (180 / Math.PI);

if (catAdj >= 0)
{
$eye.rotation = degree;
}
else
{
$eye.rotation = 180 - degree;
}

log.text = 'catAdj: ' + catAdj;
log.appendText('\ncatOp: ' + catOp);
log.appendText('\nhipot: ' + hipot);
log.appendText('\nradians: ' + radians);
log.appendText('\ndegree: ' + degree);

graphics.lineStyle(1, 0xff0000);
graphics.moveTo($eye.x, $eye.y);
graphics.lineTo(mouseX, mouseY);
graphics.lineStyle(1, 0xcccccc);
graphics.lineTo(mouseX, $eye.y);
graphics.lineTo($eye.x, $eye.y);
}

Pronto!!!

Abaixo a classe Main inteira:

package  
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.text.TextField;

/**
* ...
* @author www.idemax.net
*/
public class Main extends MovieClip
{
public var eye1:MovieClip;
public var eye2:MovieClip;
public var log:TextField;

public function Main()
{
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
}

private function onMouseMoveHandler($event:MouseEvent):void
{
graphics.clear();

rotateEye(eye1);
rotateEye(eye2);

$event.updateAfterEvent();
}

private function rotateEye($eye:MovieClip):void
{
var catAdj:Number = mouseX - $eye.x;
var catOp:Number = mouseY - $eye.y;
var hipot:Number = Math.sqrt((catAdj * catAdj) + (catOp * catOp));

var radians:Number = Math.asin(catOp / hipot);
var degree:Number = radians * (180 / Math.PI);

if (catAdj >= 0)
{
$eye.rotation = degree;
}
else
{
$eye.rotation = 180 - degree;
}

log.text = 'catAdj: ' + catAdj;
log.appendText('\ncatOp: ' + catOp);
log.appendText('\nhipot: ' + hipot);
log.appendText('\nradians: ' + radians);
log.appendText('\ndegree: ' + degree);

graphics.lineStyle(1, 0xff0000);
graphics.moveTo($eye.x, $eye.y);
graphics.lineTo(mouseX, mouseY);
graphics.lineStyle(1, 0xcccccc);
graphics.lineTo(mouseX, $eye.y);
graphics.lineTo($eye.x, $eye.y);
}

}

}

Clique abaixo para fazer o download dos arquivos:

domingo, 29 de março de 2009

Trigonometria com Actionscript

"Trigonometria (do grego trigōnon "triângulo" + metron "medida") é um ramo da matemática que estuda os triângulos, particularmente triângulos em um plano onde um dos ângulos do triângulo mede 90 graus (triângulo retângulo). Também estuda especificamente as relações entre os lados e os ângulos dos triângulos; as funções trigonométricas, e os cálculos baseados nelas. A abordagem da trigonometria penetra outros campos da geometria, como o estudo de esferas usando a trigonometria esférica".
Fonte: Wikipédia - 29/03/2009 - http://pt.wikipedia.org/wiki/Trigonometria

Olá, hoje irei explicar alguns conceitos básicos de como usar a trigonometria com actionscript. Vou levar em conta que você já tem algum conhecimento em actionscript 3, ok?! Então vamos lá...

No final desse post, você vai entender facilmente como se faz:

Radianos
"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".
Fonte: Wikipédia - 29/03/2009 - http://pt.wikipedia.org/wiki/Radianos


Um radiano equivale a 57,29º, ou seja, uma círcuferência tem
6,28 radianos (360º).

No actionscript, o 0º (grau zero) começa no ponto (raio, 0) e cresce em sentido horário até (-raio, 0) formando 180º, após esse ponto, torna-se negativo (-180º) e vai diminuindo em sentido horário até o ponto (raio, 0) que é 0º (grau zero).



Tanto que se você fizer:
meuMc.rotation = 270;
trace(meuMc.rotation);
//Retorna: -90
Não tenho certeza, mas acho que os grausº no actionscript são dessa forma para facilitar a conversão para radianos. Sendo o positivo e negativo os controladores de hemisfério, o positivo +y e negativo -y.
Círculo Trigonométrico


Depois dos radiano, fica mais fácil entender a imagem acima assim...

O ponto em que a hipotenusa cruza com o perímetro da circunferência, vamos chamá-lo de P. Para calculá-lo, usamos as formulás:
Px = cosseno(radiano) * raio;
Py = seno(radiano) * raio;
Programando...
Para podermos desenhar uma simples circunferência no palco, podemos fazer assim:
var radius:Number = 100;

var circle:Shape = new Shape();
circle.graphics.lineStyle(1);
circle.graphics.moveTo(radius, 0);

for (var i:int = 0; i <= 360; i++)
{
var radian:Number = i * (Math.PI / 180);
var xPoint:Number = Math.cos(radian) * radius;
var yPoint:Number = Math.sin(radian) * radius;
circle.graphics.lineTo(xPoint, yPoint);
}
circle.graphics.endFill();
circle.x = stage.stageWidth / 2;
circle.y = stage.stageHeight / 2;
addChild(circle);
Pronto! Agora é só usar a imaginação...
Abaixo o link para o download dos fontes:
clique aqui