Dibujar curvas paramétricas con Bitmapdata en Actionscript 3

Una Curva Paramétrica es aquella en donde tanto "X" e "Y" depende de un parámetro "T", el cual se va incrementando en el tiempo. Obteniendo así, puntos "x" e "y" que juntos forman un gráfica muy particular, como por ejemplo un Cicloide o una Espiral. En este tip mostraré como dibujarlas usando Bitmap y BitmapData.

Que necesitamos:

- Flash CS4
- FlashDevelop
- Algo de Matemática

Usualmente podemos tener un curva en donde Y dependa de X

Código :

var x,y:Number=0;

this.addEventListener(Event.ENTER_FRAME, mframe);
private function mframe(e:Event):void
{
y=1+2*(x*x);// en este caso tenemos una cuadrática o parábola
x++;
}

Mientras "X" vaya aumentando en el tiempo, "Y" lo hará de manera cuadrática.
* Con esta ecuación podemos hacer N cosas, como el efecto de "saltar" en un juego.

Ahora hagamos que la dependencia no sea "Y" de "X", sino que ambas dependan de un parámetro "T"

Código :

var x,y,t:Number=0;

this.addEventListener(Event.ENTER_FRAME, mframe);
private function mframe(e:Event):void
{
x=t;
y=t*t;
t++; //adivinen que curva se forma :)
}

Estos puntos (x,y) se les pueden asociar a las posiciones de movieclip, de una linea o en un BitmapData.

Comencemos:

Esta es la clase "Parametrica" asociada al fla, en un nuevo proyecto as3 con FlashDevelop

Código :

package view
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.events.Event;
import flash.geom.Point;

/**
* ...
* @author ASD Eduardo J. Medina Alfaro
*/
public class Parametrica extends MovieClip
{
private var bm:BitmapData;
private var bp:Bitmap;
private var t:Number=0; //Parámetro
private var _x, _y:Number = 0;//(x,y)
// Un valor para limitar el dibujo de la curva
private var _n:Number = 10;

public function Parametrica()
{
init();
events();
}

private function init():void
{
//Creamos un BitmapData sin transparencia y oscuro
bm = new BitmapData(420,350, false, 0x00000000);
//creamos el Bitmap para visualizar el BitmapData
bp = new Bitmap(bm);
bp.x = 10;
bp.y = 10;
//Lo agregamos al escenario
this.addChild(bp);

}

private function events():void
{
//Adicionamos un evento enterFrame
this.addEventListener(Event.ENTER_FRAME, mframe);
}

private function mframe(e:Event):void
{
//Esto es para limitar la curva
if (t <= _n)
{
// Te devuelve los valores de X e Y según la paramétrica
_x = Point(cicloide(t)).x;
_y = Point(cicloide(t)).y;

// Adicionamos los píxeles en las posiciones (x,y)
bp.bitmapData.setPixel(_x, _y, 0x60FF0000);

// En cuanto se incrementa el parametro T
t += 5*Math.PI/180;
}else
{
this.removeEventListener(Event.ENTER_FRAME, mframe);
}

}
/*
* CICLOIDE
* x=a/2 + b*(t-seno(t));
* x=a + b*(1-cos(t));
*/
private function cicloide(t:Number):Point
{
_n =23;
var p:Point = new Point();
p.x = 50 + 20*(t - Math.sin(t));
p.y = 100 - 30*(1 - Math.cos(t));
return p;
}
}

}

Con lo cual dibujamos un CICLOIDE



Podemos seguir creando más funciones como la del cicloide y obteniendo más curvas, incluyendo polares

Código :

private function circunferencia(t:Number):Point
{
_n = 10;
var p:Point = new Point();
p.x = 100 + 70*(Math.cos(t));
p.y = 100 + 70*(Math.sin(t));
return p;
}

Código :

private function espiral(t:Number):Point
{
_n =30;
var p:Point = new Point();
p.x = 100 + (2*Math.cos(t))*t;
p.y = 100 + (2*Math.sin(t))*t;
return p;
}

Código :

private function rosa (t:Number):Point
{
_n =7;
var p:Point = new Point();
p.x =100 + (75*Math.cos(2*t))*Math.cos(t);
p.y =100 + (75*Math.cos(2*t))*Math.sin(t);
return p;
}

Código :

private function caracol(t:Number):Point
{
_n =10;
var p:Point = new Point();
p.x = 200 + (50-80*Math.cos(t))*Math.cos(t);
p.y = 100 + (50-80*Math.cos(t))*Math.sin(t);
return p;
}

Las ecuaciones de la curvas ya estan hechas, asi que podemos seguir jugando con los números y obtener formas muy interesantes , incluyendo en 3D... Eso es para el otro tip

Agradecimientos:
Otakurzo "Utiliza un solo bitmap y no varios por cada BitmapData"

También te interesa

• Clase para dibujar líneas segmentadas con ActionScript 3
• Coordenadas 3D con ActionScript 3
• Detectar lados visibles en una figura 3D con ActionScript 3

matematicas actionscript_3 bitmap

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario