Comunidad de diseño web y desarrollo en internet online

graficar funcion

Citar            
MensajeEscrito el 02 Sep 2009 04:52 pm
Hola a todos??' como andan???
hoy tengo una duda, espero que simple.
Estube viendo el tutorial de asphyk, sobre Dibujar curvas paramétricas con Bitmapdata en Actionscript 3.
El ahí hace variar a x, y en funcion de t

Mi problema es que yo quiero graficar una funcion, pero solo y en funcion de t, entonces trate de modificarla, pero solo grafica un punto, el del inicio, y no toda la grafica.

Para que tengan una idea, la funcion es:
Y=A(1-e^(-t/tau))

donde:
A=constante (definida como amplitud en el codigo)
tau=constante
t=varía desde 0 hasta (5*tau)

y el código modificado queda:

Código ActionScript :

package 
{
   import flash.display.Bitmap;
   import flash.display.BitmapData;
   import flash.display.MovieClip;
   import flash.events.Event;
   import flash.geom.Point;
   
   /**
    * ...
    * @author bubudrc
    */
   public class prueba extends MovieClip
   { 
      private var bm:BitmapData; 
      private var bp:Bitmap; 
      private var t:Number = 0;
      private var _y:Number = 0;//(y)
      private var tau:Number = 10;
      private var amplitud:Number = 50;
      // Un valor para limitar el dibujo de la curva 
      private var _n:Number = 10; 
      
      public function prueba() 
      { 
         init(); 
         events(); 
      } 
 
      private function init():void 
      { 
         bm = new BitmapData(450, 350, false, 0x000000);
         bp = new Bitmap(bm);
         bp.x = 10;
         bp.y = 10;
         this.addChild(bp);
      }
      
      private function events():void
      {
         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 
            _y = Point(formula(t)).y; 
            bp.bitmapData.setPixel(10, _y, 0x60FF0000);
            // En cuanto se incrementa el parametro T 
            t += 5 * tau;         
         }
         else 
         { 
            this.removeEventListener(Event.ENTER_FRAME, mframe); 
         }
      }
      //formula: y=amplitud*(1-e^(-t/tau))
      private function formula (t:Number):Point
      {
         _n = 500;
         var p:Point = new Point();         
         p.y = amplitud * (1 - Math.E * ( -t / tau));
         return p;
      }

         
         
   }
   
}

Por bubudrc

Claber

591 de clabLevel

1 tutorial

 

mayo 2006

firefox
Citar            
MensajeEscrito el 03 Sep 2009 06:29 am
Varias cosas
1.-El signo ^ es "elevado a", luego la fórmula debería ser

Código ActionScript :

Y=amplitud*(1-Math.exp(-X/tau))

2.-Si la quieres convertir en "paramétricas" es muy fácil

Código ActionScript :

Y=amplitud*(1-Math.exp(-t/tau))
X=t

Y te servirá el código de Asphyk
3.-Lo que supongo que falla -he mirado muy por encima el código, es que no le das valor a la "X"

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Sep 2009 01:43 am
quein me iba ayudar sino era Eliseo2. Muchas gracias por tu ayuda, termine poniendo esta solución:

Código ActionScript :

Y=amplitud*(1-Math.exp(-t/tau));
X=t;

sin embargo, la grafica empieza en cualkier lado y estuve probando y no puedo hacer q arranque en las coordenadas q yo deseeo.
Solo necesito eso para poder finalizar el proyecto.
Muchas gracias.
saludos

Por bubudrc

Claber

591 de clabLevel

1 tutorial

 

mayo 2006

firefox
Citar            
MensajeEscrito el 04 Sep 2009 06:29 am
La gráfica debería empezar en 0,0.
cuando graficamos una función, lo que solemos hacer es tener un Mc "contenedor" y otro MC "interior" donde pintamos la gráfica.
El motivo de ello es que podemos mover el MC "interior" donde queramos. Esto hará que empieze donde queramos
El siguiente motivo ¡Importante!, es poder igualar al MC "contenedor" igualar su scaleY a -1 (un "flip" horizontal)
Eso es así porque en matemáticas el "eje Y" es "hacia arriba" (mientras que en Flash es "hacia abajo"). Vamos, valores mayores de la Y, en matemáticas significa que está más alto y valores mayores de Y en Flash indica que está hacia abajo.

En FlashAndMath tienes un .swf -bastante complejo- que grafica funciones en paramétricas

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Sep 2009 09:46 pm
Muchas gracias Eliseo por tu ayuda. Conocia lo de FlashAndMath, pero queria lago q solo variara en funcion de x, sin embargo he encontrado ahi mismo un .fla que realiza la funcion que yo lo defina, por lo que me pondre a investigar y tratar de solucionar lo que deseo.
Saludos y muchas gracias por tu ayuda.

Por bubudrc

Claber

591 de clabLevel

1 tutorial

 

mayo 2006

firefox
Citar            
MensajeEscrito el 06 Sep 2009 03:36 am
Upps llegue un poco tarde :(
Sip la fòrmula se puede reutilizar para lo sea, es una paramètrica XD y tambien jugando con x, y, z puedes obtener distinto tipos de gràficas muy interesantes.
Pronto publicarè màs àrticulos con matemàtica y de fìsica tambien XD, toy buscando aplicaciones màs reales.

Por emedinaa

196 de clabLevel

2 tutoriales

Genero:Masculino  

Lima Perú

firefox
Citar            
MensajeEscrito el 09 Sep 2009 03:52 pm
al final he podido solucionarlo creando una funcion un poco rustica que pero hace lo q quiero y mas, por lo que me sirve muchisisimo, este el codigo:

Código ActionScript :

graficar1 (amp1.value,taus);
/*GRAFICA FUNCIONES-------------------------------------------------------------------*/
function graficar1 (amplitud:Number,tau:Number){

   for (var i:uint=1; i<700;i++)
   {
      var circle:Sprite = new Sprite();
      circle.graphics.beginFill(0x00FF00);
      circle.graphics.drawCircle(posinix,posiniy,3)
      circle.x=i+0.5
      circle.y=-(amplitud*(1-Math.exp(-i/tau)));
      addChild(circle);
   }
}

Lo que hace es crear un circulo en un sprite y repetirlo 700 veces.
Es decir, lo pense como comunmente te enseñana en el colo, dado que Y=3X, entonces si
x=1-->y=3
x=2-->y=6
x=3-->y=9
etc...
entonces asi, pude solucionarlo, y con solo cambiar la funcion en circle.y y poner otra cualquiera funcionara del mismo modo.
saludos

Por bubudrc

Claber

591 de clabLevel

1 tutorial

 

mayo 2006

firefox
Citar            
MensajeEscrito el 09 Sep 2009 06:23 pm
uhmm eso es graphics, cheka esto

Código ActionScript :

      var ns:Sprite = graficaSP(new Point(100,150),2,10,20,20);
      this.addChild(ns);

      private function graficaSP (posInicial:Point,_r:int,_factor:Number,amplitud:Number, tau:Number):Sprite
      { 
         var contenedor:Sprite = new Sprite();
         for (var i:int=1; i<700;i++) 
         { 
           var circle:Shape = new Shape(); 
           circle.graphics.beginFill(0x00FF00); 
           circle.graphics.drawCircle(posInicial.x, posInicial.y, _r);
           circle.x = i;
           circle.alpha = 0.5;
           circle.y=-(amplitud*(1-_factor*Math.exp(-circle.x/tau))); 
           contenedor.addChild( circle); 
         } 
         return contenedor;
      } 

Por emedinaa

196 de clabLevel

2 tutoriales

Genero:Masculino  

Lima Perú

firefox
Citar            
MensajeEscrito el 10 Sep 2009 12:02 am
Muy buena la funcion. Grafica lo mismo, pero esta mas optimizada y clara. la tendre en cuenta para las proximas.
Saludos

Por bubudrc

Claber

591 de clabLevel

1 tutorial

 

mayo 2006

firefox
Citar            
MensajeEscrito el 12 Sep 2009 12:07 am
hola de nuevo.
disculpen por molestar, pero ando algo perdido
en este momento estoy tratando de hacer una funcion que borre la grafica
es decir, me deje la pantalla desde cero, o sea borrar los shape, los puntos que se hagan, pero no he podido, si me dieran alguna instruccion por donde encarar se los agradeceria.
saludos

Por bubudrc

Claber

591 de clabLevel

1 tutorial

 

mayo 2006

firefox
Citar            
MensajeEscrito el 13 Sep 2009 10:25 am
Puedes usar "clear"

Código ActionScript :

circle.grafics.clear()

Por Eliseo2

710 de clabLevel



 

msie8
Citar            
MensajeEscrito el 13 Sep 2009 01:58 pm
Eliseo2, como andas?
en relidad he ya habia probado ese metodo, sin embargo no funciona, es decir, como mi "grafica" grafica puntos, solo creo circle dentro del for, por lo q si quiero utilizar el clear(), debo hacerlo dentro de este y al hacerlo no funciona, o sea no borra la grafica.
Si lo uso fuera Flash me dice "Error 1120: Acceso a una propiedad circle no definida", por eso es que ando luchando, y por ahora seguire haciendolo.
Igual, gracias por tu ayuda.
Saludos

Por bubudrc

Claber

591 de clabLevel

1 tutorial

 

mayo 2006

firefox
Citar            
MensajeEscrito el 13 Sep 2009 02:31 pm
Hola,
define el Sprite circle fuera de la función graficar1, y podrás eliminarlo de la lista de visualización con:
removeChild(circle);

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 14 Sep 2009 12:05 am
isidoro. tambien e intentado esa solucion, pero igualmente no me funciona.
estaba pensando en una solucion poco fiable, q seria crear un igual a la anterior, pero en vez de dibujar los puntos de coloe, por ejemplo verde, los haga del color del fondo de pantalla. con eso, al estar en el mismo lugar, y reproducirse luego, estos pareceran borrarse, pero no es algo recomendado, sino un "parche" para cumplir la funcion, aunque no me gusta.
jjejeej
por lo que seguir intentando.
saludos

Por bubudrc

Claber

591 de clabLevel

1 tutorial

 

mayo 2006

firefox
Citar            
MensajeEscrito el 14 Sep 2009 06:35 am
Pues es raro que no te funcione, porque si circle está definido en el mismo ámbito que el removeChild tiene que sacarlo de la lista de visualización. Prueba esto, debería borrarse al hacer click con el mouse:

Código ActionScript :

graficar1 (amp1.value,taus); 
var circle:Sprite = new Sprite();
/*GRAFICA FUNCIONES-------------------------------------------------------------------*/ 
function graficar1 (amplitud:Number,tau:Number){ 
 
   for (var i:uint=1; i<700;i++) 
   { 
      circle.graphics.beginFill(0x00FF00); 
      circle.graphics.drawCircle(posinix,posiniy,3) 
      circle.x=i+0.5 
      circle.y=-(amplitud*(1-Math.exp(-i/tau))); 
      addChild(circle); 
   } 
} 

addEventListener(MouseEvent.CLICK, mouseClickHandler);
function mouseClickHandler(event:MouseEvent):void
{
   removeChild(circle);
   removeEventListener(MouseEvent.CLICK, mouseClickHandler);
}

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 14 Sep 2009 07:27 am
Isidoro, creo que no va a funcionar así. La variable "circle" va haciendo referencia a distintos Sprites.
Bubudrc, leí demasiado rápido.
Existen dos soluciones. Una, es guardar los "circles" en un array para luego, bien usar un clear, bien un removeChild (no demasiado óptima), la otra es añadir los "circles" a "contenedor", tal y como muestra Asphyk y eliminarlos recorriendo toda la displayList de dicho contenedor. Vamos

Código ActionScript :

for (var i:uint=1; i<700;i++)  
   {  
      .....
      contenedor.addChild(circle);  //<--se lo añadimos a "contenedor"
   }  

Y a la hora de borrar, eliminamos TODOS los "hijos" de contenedor.

Código ActionScript :

while (contenedor.numChildren>0){
     contenedor.removeChildAt(0)
}

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Sep 2009 02:40 pm
Sí, pero así vas a crear 700 sprites, uno por cada punto. A lo que yo me refiero es a crear un sprite donde se dibujará el círculo entero con graphics, pero fuera de la función para poderlo eliminar con removeChild. Lo que pasa es que me he equivocado en 2 cosas: el sprite hay que crearlo antes de llamar a la función graficar, y el addChild, va fuera del bucle for. Aquí pongo un ejemplo comprobado, cambiando la función por una que dibuja una línea (porque hay variables que no conozco de tu código). Al hacer click sobre cualquier punto se borra la línea entera:

Código ActionScript :

var circle:Sprite = new Sprite();
var g:Graphics = circle.graphics;
graficar1();

/*GRAFICA FUNCIONES-------------------------------------------------------------------*/   
function graficar1()
{
   g.beginFill(0x00FF00);
   for (var i:uint = 0; i < 10; i++)
   {
      g.drawCircle(i * 10, i * 10, 3);
   }
   g.endFill();
   addChild(circle);
}

addEventListener(MouseEvent.CLICK, mouseClickHandler);
function mouseClickHandler(event:MouseEvent):void
{
   removeChild(circle);
   removeEventListener(MouseEvent.CLICK, mouseClickHandler);
}

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 11 Oct 2009 05:43 pm
yo crarìa una clase Punto, le agregarìa una propiedad id (distinta para cada intancia de punto) luego crearìa una mètodo destroy y recorrerìa el contenedor y buscarìa por id y asi eliminarìa cada punto... , es una opciòn XD

Por emedinaa

196 de clabLevel

2 tutoriales

Genero:Masculino  

Lima Perú

firefox
Citar            
MensajeEscrito el 14 Oct 2009 06:10 am
... a mí sige sin convencerme eso de crear 700 Shapes distintos (pero bueno, para gustos se hicieron los colores); aunque si los creas, se podría hacer algún efecto de borrado progresivo de los puntos.

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 14 Oct 2009 11:52 am
Bueno... y que es var g:Graphics ?, = 700 Graphics.
La clase Graphics contiene un conjunto de métodos que puede utilizar para crear una figura vectorial. Entre los objetos de visualización que admiten el dibujo se encuentran los objetos Sprite y Shape.

Por emedinaa

196 de clabLevel

2 tutoriales

Genero:Masculino  

Lima Perú

firefox
Citar            
MensajeEscrito el 14 Oct 2009 10:03 pm
Con graphics se dibuja 700 veces sobre el sprite, pero no se crean 700 objetos nuevos. Para mí la cuestión es que si se van a borrar todos los puntos a la vez, yo personalmente lo que haría sería eliminar directamente el DisplayObjectContainer, y no haría falta gastar memoria para contener esos objetos (aunque en este caso no sea un problema crítico, ni mucho menos), ni haría falta un bucle para borrarlos.
Pero como he dicho antes, usaría tu opción si una vez dibujado el círculo quisiese tratar a ciertos puntos independientemente de los otros (que da mucho más juego para hacer algún efecto visual con los puntos dibujados).

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.