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"

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.