Papervision Math

Olá pessoal, decidi que para este novo tutorial eu iria fazer alguma coisa simples mesclando matemática e papervision.

Clique aqui na imagem para visualizar a aplicação

Para demonstrar o movimento de translação nada melhor que usar um exemplo já conhecido, o movimento da lua sobre a terra.

Criaremos 1 arquivo (.fla) e um arquivo (.as) rotulado como ppv_math, definimos no flash como document class nosso ppv_math. Nosso código não possui nenhum mistério para quem já vem acompanhando nossos tutoriais de papervision com exceção das seguintes linhas de código.

lua.z = Math.cos(teta) * 150;
lua.x = Math.sin(teta) * 150;
lua.y = Math.sin(teta) * 50;

Para fazer a translação padrão utilizamos como eixos base nosso “x” e “z” para interargimos lateralmente e com profundidade, para dar um efeito mais interessante na aplicação decidi colocar uma interação no eixo “y” para a lua percorrer em um sentido diagonal. Experimente comentar um dos eixos para ver o que acontece. Agora segue o código na integra.

ppv_math.as

package {
    //flash
    import flash.display.Sprite;
    import flash.events.Event;
    //papervision
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;
    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.render.BasicRenderEngine;
    //Material
    import org.papervision3d.materials.BitmapAssetMaterial;
    // objeto
    import org.papervision3d.objects.primitives.Sphere;

    public class ppv_math extends Sprite {

        public var cena:Scene3D;
        public var viewport:Viewport3D;
        public var camera:Camera3D;
        public var renderer:BasicRenderEngine;
        //objetos Primitivos
        public var terra:Sphere;
        public var lua:Sphere;
        //Matemática
        public var alfa:Number = Math.PI / 180;
        public var teta:Number = 0;

        public function ppv_math () {
            Set ();
            Objetos ();
        }
        public function Set ():void {

            viewport = new Viewport3D(400,400);
            addChild (viewport);
            cena = new Scene3D ;
            renderer = new BasicRenderEngine ;
            camera = new Camera3D ;
            camera.zoom = 5;
            camera.focus = 200;

        }
        public function Objetos ():void {
            terra = new Sphere(new BitmapAssetMaterial("Earth"), 100, 15,15);
            lua = new Sphere(new BitmapAssetMaterial("moon"), 30, 15,15);

            cena.addChild(terra);
            cena.addChild(lua);

            addEventListener (Event.ENTER_FRAME,Loop,false, 0, true);

        }
        public function Loop (e:Event):void {
            teta += alfa;
            renderer.renderScene (cena, camera, viewport);
            terra.yaw(1);
            lua.yaw(1);

            lua.z = Math.cos(teta) * 150;
            lua.x = Math.sin(teta) * 150;
            lua.y = Math.sin(teta) * 50;

        }
    }
}

Com conceitos básicos é possível criar diversas coisas interessantes com o papervision, tentarei criar mais tutoriais cultos envolvendo a matemática. Até a próxima!

Anúncios

Matemática no Flash

Olá pessoal. Finalmente chegou a hora de vocês usarem seus conhecimentos do ginásio. Vocês sempre ouviram dizer que quem faz informática precisa saber matemática, bem se até hoje ainda não encontrou utilidade para ela, não se preocupe, hoje estarei estreando mais uma seqüência de tutoriais que mostrarão que a matemática é uma poderosa ferramenta para criação de jogos, menus interativos, aplicativos gráficos entre outra utilidade. O foco do nosso primeiro tutorial de matemática com actionscript será o movimento de translação.

Este é o plano cartesiano da matemática conceitual, no flash trabalhamos quase que exatamente igual com exceção que o eixo y é invertido, ao aumentarmos o valor de y a imagem segue para baixo.

Translação:

Para quem não se lembra, translação é o movimento que a terra faz em torno do sol. Resumindo , é quando um objeto circula um eixo sempre mantendo a mesma distância (raio).

Você com certeza já viram este recurso sendo usado em alguns jogos, assim como uma bola de fogo, bola de espinhos ou uma plataforma dinâmica. Para reproduzirmos este movimento precisamos relembrar alguns conceitos básicos de trigonometria.

Como podemos ver no circulo trigonométrico a distancia oposta ao angulo é o Cosseno vezes o raio e a distancia adjacente é igual ao seno vezes o raio, Porem no actionscript o angulo deve ser escrito em Radianos vamos analisar a figura e ver como ficaria a posição dos objetos.

Para efetuar o movimento de translação é necessário sempre estar incrementando o angulo por intermédio de enterframe ou timeout. Agora vamos seguir com o nosso exemplo pratico.

Iremos utilizar a linguagem estruturada em nosso exemplo, teremos apenas um arquivo .fla e já teremos um objeto que rotacionará o centro do palco, este objeto terá o nome de “ob”. No primeiro frame escreveremos o seguinte código.

No código a seguir utilizamos os seguintes métodos da classe Math:

Math.cos(n:Number): retorna o cosseno do ângulo.
Math.sin(n:Number): retorna o seno do ângulo.
Math.PI: constante que retorna o PI, PI é a representação gráfica de 180 em radianos.

Em nosso código o objeto ficará circulando o centro com um raio de 100px e a cada passada pelo loop de enterframe o angulo final receberá um ingremento de 2°.  O centro da circunferência será definido no final da equação. Adicionando o respectivo posicionamento do centro após a equação.

var angulo:Number = Math.PI/90;
var newAngulo:Number = 0;

addEventListener(Event.ENTER_FRAME,EnterFrame);

function EnterFrame(e:Event) {
	newAngulo += angulo;
	ob.x = Math.cos(newAngulo) * 100 + stage.stageWidth/2;
	ob.y = Math.sin(newAngulo) * 100 + stage.stageWidth/2;
}

Desculpe pela demora na postagem de um novo tutorial,  meu computador estava com problema e eu estava super atarefado no trabalho. Mas podem deixar que tentarei voltar a periodicidade^^ abraços.