Canvas y 'animaciones'

[Albuss]

Hola a todos!

Estoy estudiando como llevar a cabo animaciones en canvas, animaciones complejas como por ejemplo,
un monton de pelotas interactuando entre si (deteccion de colisiones, calculo de velocidad, inercia ... ect ect)

hasta ahora solo he encontrado guias tal con la solucion : "borrar todo el lienzo y volver a representar todo de nuevo",
generando asi la animación. Es algo que quisiera evitar a toda costa.

Ahora yo me pregunto, para lo que yo busco (cada pelota es un objeto que guarda posicion,velocidad, masa,
inercia y tambien interactua con otros objetos por ejemplo el encargado de derectar las colisiones o el que calcula su inercia)
una manera de no tener que borrar todo el canvas, si no , obtener cada pelota (circulo) e ir llevando a cabo todo el programa como
por ejemplo, cuando se detacta una colision, darle una velocidad, inercia, fricion, colision multiple con otras pelotas ... ect ect

Hay algun contexto / metodologia de canvas 2D que no te obligue a borrar todo el lienzo para llevar a cabo una animacion?
es decir, crear un elemento y ir modificando su posicion en el propio lienzo con coordenadas.

[marlanga]

No importa cómo funcione tu juego. El canvas es una imagen estática que se genera mediante instrucciones de dibujo gráfico sobre el contexto.

Una de dos: O borras la imagen y dibujas todo de nuevo, o pintas encima. No hay más.

Hay técnicas para mejorar la eficiencia: Multiples canvas superpuestos (en el primer canvas se dibuja el fondo, que es un elemento que no suele "actualizarse" mucho, y en los sucesivos canvas, los elementos mas propensos a actualizarse contínuamente), doble o triple buffer (consiste en dibujar en un canvas que no está en el DOM de la página, que no es visible, por lo que dibujar sobre él es mucho más rápido; luego cuando toda la escena está dibujada, se vuelca el contenido de ese canvas virtual sobre el canvas real que sí está en el DOM d ela página visible), hacer CLIP ( borrar y dibujar solo el trozo del canvas donde realmente se ha producido un cambio), ecétera.

Todo depende de las necesidades que tenga tu código y cuánto estrujes tu cerebro.

[Albuss]

gracias marlanga por tu respuesta, lo que dices sobre el doble/triple buffer es my interesante y tambien sobre el 'CLIP' , concretamente este es el que menos información obtengo en google, podrias darme algunas referencias?


PD. hay vida mas haya de los juegos xD , en concreto estoy adaptanto un sistema de particulas que hice con CSS, DOM y javascrip, y ahora queria usar canvas para poder meter 'mas' contenido.

[jp91]

No lo encuentras en google?? los estas buscando en español jejejeje,como siempre digo en ingles la informacion vale oro y ya te digo estas entrando en mundo de perfomance.
Puedes leer esto:
http://www.html5rocks.com/en/tutorials/canvas/performance/
http://kaioa.com/node/103

[Albuss]

seamos francos, llevar a cabo un render con tantas particulas como este ejemplo, es factible para alguien que empieza con canvas? : http://html5-pro.com/wormz/

[jp91]

Si eso es lo que quieres hacer la verdad no necesitas ser un experto con canvas , asi por encima usa los metodos del contexto para dibujar imagenes,cuadro ,lineas y getImageData(), la cantidad de particulas es lo de menos.

[Albuss]

no estoy tratando de hacer eso, simplemente ese ejemplo llamo mi atencion por el numero de elementos dibujados , supongo que la estela sera un elemento normal con opacidad y si tenemos en cuenta cada elemento deja una estela ...

trato de hacer un sistema de particulas que emule un entorno fisico, y cuantas mas particulas puedas manejar y 'pintar' mucho mejor para mi.

¿donde esta el limite 10.000 100.000 ?


Ps. a cada particula o 'pelota 2D' le meto muchas operaciones, calculo de aceleracion, distancia recorrida, factor de coeficiente de rozamiento, friccion, gravedad, inercia, deteccion de colisiones, detecion de limites en el espacio, su propio movimiento ... (practicamente casi todas se basan en su masa y su velocidad).

[Italico76]

Investiga si hay forma de hacer un XOR entre los sucesivos frames.......

[Albuss]

acabo de hacer un test y con 900 puntos 2D en movimiento (a la vez) y ya me da algún tirón ... , estoy bastante desilusionado ...

uso setInterval cada 16 ms (60 frames/s), aplico clearRect() y vuelvo a pintar cada punto.

ps. dimensiones del lienzo : 1920 x 1080;

[jp91]

Sin usar optimizaciones y con semejante lienzo pues como no te va a prensentar alguna baja, usa window.requestAnimationframe digamos que es un setTimeout inteligente, puedes usar varios canvas como capas es decir crear 10 capas cada una de mil particulas pues 10.000 particulas.

[Albuss]

es decir, segun lo que dices, crear capas a la vez no disminuye el rendimiento ...

[ocp001a]

¿y has probado a usar svg? con canvas debes repintar los objetos, en svg podrías moverlos, si todos los objetos deben repintarse de un frame a otro, te da más rendimiento canvas, pero si sólo moverás algunos, svg podría ser una buena alternativa.

[Albuss]

antes de ponerme con canvas intente SVG por que entre otras cosas es menos complicado (al menos para mi lo fue) y haciendo numerosos test solo podia mantener 300 - 350 puntos en movimiento sin tirones.

No me canso de decirlo, no es solo representar y mover un 'punto' o particula, es un entorno fisico y hay muchas operaciones para cada una de ellas, una cosa que me mosquea es que tengo muchos for() y claro si tengo que ir iterando 900 veces para cada operacion , como por ejemplo el detector de colisiones, detectar si 900 puntos colisionan entre si , es necesario iterar 900 x 900 y ... bueno, no hace falta decir que eso carga mucho.

[jp91]

Dividir la carga entre canvas aligera un poco, pero es es solo una solucion, he usado y estudiado muchos frameworks y claro que el usar fisica es un trabajo pesado y aun mas con una cantidad de objetos considerable, el que uso ahora crea 5.000 particulas en modo WEBGL sin ningun problema, con canvas hay que optimizar mas , por ahora puedes intentar con pocas particulas e ir experimentado y optimizar tus bucles,crear un pequeño entorno fisicio con estados digamos en el loop principal un preupdate, update. actualizar lo dibujado y las fisica de manera independiente , ufff etc son muchas cosas.

[Albuss]

se puede usar WEBGL en 2D? , quizas es una pregunta un poco tonta xD

[jp91]

Sip si se puede aqui el engine grafico del framework con el que trabajo
www.pixijs.com

[Carlangueitor]

Si, pero creo que tu problema no se resolvería con eso. Sin ver que estás haciendo apunto a que tu código es de bastante mala calidad. ¿estás utilizando requestAnimationFrame? ¿tienes fors optimizados? ¿tus cálculos son óptimos?

Saludos

[Albuss]

Yo con solamente CSS y DOM logre un resultado muy prometedor en mi entorno fisico, en el test 'definitivo' tenia 100 particulas interactuando con su masa , inercia, velocidad y detecion de colisiones (solo con el punto del raton, eso si) :

test del que hablo :

http://vodoad.com/Braismartelo/Conte..._II/Index.html

Menu de mis test con CSS y DOM

http://vodoad.com/Braismartelo/Conte...s3D/Index.html

[Albuss]

Iniciado por Carlangueitor

Si, pero creo que tu problema no se resolvería con eso. Sin ver que estás haciendo apunto a que tu código es de bastante mala calidad. ¿estás utilizando requestAnimationFrame? ¿tienes fors optimizados? ¿tus cálculos son óptimos?

Saludos

Uso for de la manera convencional en el sentido de que , itero todos los elementos para manipularlos uno a uno.

mis calculos no usan valores con mas de tres decimales, si es a lo que te refieres con calculos optimos (ni tampoco sumo pixel a pixel)

[jp91]

Iniciado por Albuss

Yo con solamente CSS y DOM logre un resultado muy prometedor en mi entorno fisico, en el test 'definitivo' tenia 100 particulas interactuando con su masa , inercia, velocidad y detecion de colisiones (solo con el punto del raton, eso si) :

test del que hablo :

[url]http://vodoad.com/Braismartelo/Contenido/Test/Test_ChoquePerfectamenteElastico_II/Index.html[/url]

Menu de mis test con CSS y DOM

[url]http://vodoad.com/Braismartelo/Contenido/Menus3D/Index.html[/url]

Ufff amigo si esa es la manera de crear tus clases y objetos ps...... usa la consola de google chrome y crea un perfil de de cpu y veras el recolector de basura muy feliz.

[Carlangueitor]

Revisé el primer archivo JS (que no es lo que te genera problemas, pero si así haces todo tienes problemas), es malo:

Código Javascript:

document.getElementById('TestNombre').style.width = (950*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.height = (40*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.marginTop = (100*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.marginLeft = (15*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.width = (950*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.height = (40*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.marginTop = (100*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.marginLeft = (15*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.fontSize = (22*this.ProportionResolutionY) + 'px';
 

Haces la busqueda en el DOM 8 veces, fuera de que sea una mala práctica por el código duplicado eso carga demasiado, deberías hacer algo así:

Código Javascript:

var testNombre = document.getElementById('TestNombre');
 

Y trabajar con ese objeto.

Luego eso es lo que pasa, por cada punto, cada vez que se mueve haces el lookup:

Código Javascript:

document.getElementById('Point'+this.ID).style.webkitTransform = 'translate('+this.CoordinateX+'px,'+this.CoordinateY+'px)';
 

Cachea el elemento y llamalo cuando lo necesites.

Saludos

[Albuss]

Iniciado por jp91

Ufff amigo si esa es la manera de crear tus clases y objetos ps...... usa la consola de google chrome y crea un perfil de de cpu y veras el recolector de basura muy feliz.

Podrias ser mas explicito, es ovbio que no se muchas cosas que tu si.

[Albuss]

Iniciado por Carlangueitor

Revisé el primer archivo JS (que no es lo que te genera problemas, pero si así haces todo tienes problemas), es malo:

Código Javascript:

document.getElementById('TestNombre').style.width = (950*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.height = (40*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.marginTop = (100*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.marginLeft = (15*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.width = (950*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.height = (40*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.marginTop = (100*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.marginLeft = (15*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.fontSize = (22*this.ProportionResolutionY) + 'px';
 

Haces la busqueda en el DOM 8 veces, fuera de que sea una mala práctica por el código duplicado eso carga demasiado, deberías hacer algo así:

Código Javascript:

var testNombre = document.getElementById('TestNombre');
 

Y trabajar con ese objeto.

Luego eso es lo que pasa, por cada punto, cada vez que se mueve haces el lookup:

Código Javascript:

document.getElementById('Point'+this.ID).style.webkitTransform = 'translate('+this.CoordinateX+'px,'+this.CoordinateY+'px)';
 

Cachea el elemento y llamalo cuando lo necesites.

Saludos

Lo del los nombres no me preocupa por que es solo texto, si , visto asi parece muy flagrante pero es algo que hice para adaptalo a todas la resoluciones.

Los 'points' no van asi, con DOM y CSS le asigno a cada objeto una id a parte de un nombre definitorio para cada uno , por ejemplo, el punto con id 5 : 'point' + id.

Eso es para poder recuperar su valor y manipularlo, no veo nada de malo, me gustaria que me explicases eso mas a fondo.

[jp91]

@Albuss ok relax no suy maestro ni el mas sabio jejejeje, esto que te digo es sobre tus clases es mejor que uses prototipos para los metodos que usan seguidamente y de los cuales creas nuevas instancias, hacer profiling en chrome es muy util para ver perfomance aqui puede leer
https://developer.chrome.com/devtools/docs/cpu-profiling

[Albuss]

Iniciado por jp91

@Albuss ok relax no suy maestro ni el mas sabio jejejeje, esto que te digo es sobre tus clases es mejor que uses prototipos para los metodos que usan seguidamente y de los cuales creas nuevas instancias, hacer profiling en chrome es muy util para ver perfomance aqui puede leer
https://developer.chrome.com/devtool.../cpu-profiling

no he entendido muy bien lo que tratas de decirme sobre mis prototypos y metodos, a ver, lo que yo hago es crear un sistema de objetos padre que contienen a otros objetos, por ejemplo, el objeto deusExMachina contiene a todos los obetos y es el encargado e inicializar las cosas mas esenciales.

deusExMachina contiene al objeto metaPoint, que es la fabrica de obejtos point

PD. no trato de ser grosero , si lo he parecido lo siento, trato de saber, es lo que mas me interesa! y quiero salir de este tema sabiendo todo lo posible para acercarme a una forma eficiente y elegante de construir mi sistema.

[jp91]

ok no pasa nada tu tienes esto:

Código Javascript:

function DeusExMachinaPrototype(){
    
    this.Instanced  = false;
    this.NumberOfPoints = 100;
    this.ProportionResolutionX = (screen.width/1920); 
    this.ProportionResolutionY = (screen.height/1080);
    
    
    
        this.CreateInfoElements = function CreateInfoElements(){};
 
        
}
 

Con prototipos:

Código Javascript:

function general (){
this.propiedad= "algo";
};
 
general.prototype = {
metodo:function(){}
};
 
//ahora el protoype es modificado apunta al constructor de la funcion
//es decir a la funcion general y puede acceder a sus metodos.
// y no es una copia en memoria del objeto ahora el metodo se encuentra en el prototype 
var instancia = new general();
 

[Albuss]

no lo en tiendo, en su dia cuando 'adapte' mi forma de escribir en POO (vengo de C++) en javascript, em asegure de que fuera una forma ampliamente utilizada, funcional y correcta.

de hecho implemente una herencia en el codigo del test que he puesto arriba, y es funcional! (podria no serlo valga al redundancia xD) , ¿por que la forma en la escribo en POO en javascript es deficiente?


Ps. segun tu, tengo que definir cada propiedad y metodo de clase como una funcion? (y luego asignar el prototipo al nombre de cada?)

[Albuss]

por cierto acabo de ver un profile del CPU y solo he visto dos veces el proveso de recolector de basura ¿debería preocuparme?, en un lapso de 25 sg se ejecuto dos veces, y no tengo carga excesiva en el pesadores, si tenemos en cuenta que los puntos se representan y se animan mediante DOOM y CSS (no usa la GPU y recarga mas las CPU), creo que es un rendimiento ¿aceptable?

estoy hablando del este test : http://vodoad.com/Braismartelo/Conte..._II/Index.html

[Italico76]

Iniciado por Albuss

no lo en tiendo, en su dia cuando 'adapte' mi forma de escribir en POO (vengo de C++) en javascript, em asegure de que fuera una forma ampliamente utilizada, funcional y correcta.

de hecho implemente una herencia en el codigo del test que he puesto arriba, y es funcional! (podria no serlo valga al redundancia xD) , ¿por que la forma en la escribo en POO en javascript es deficiente?


Ps. segun tu, tengo que definir cada propiedad y metodo de clase como una funcion? (y luego asignar el prototipo al nombre de cada?)

El problema de como lo haces es que tus metodos se clonan con cada objeto... y obviamente se vuelven objetos Muyyyy pesados.

Debes hacerlo con prototipos como te dicen si tienes muchos de estos.

[Albuss]

no se clonan, uso de hecho una herencia para ellos, precisamente por que instancio muchos objetos 'point'. creo una 'clase' (prototypo) abstracta de point y luego creo objetos point heredando a este, vease en el propio codigo, archivos : deus ex machina para el metodo que declara las herencias , el archivo abstracPoint y el archivo point.

hasta donde yo se, si uso una herencia y no declaro cada metodo en el objeto, simplemente lo hereda (valga la redundancia), se supone que cada metodo seria un puntero apuntando al padre

¿que me estoy perdiendo? , en serio, este tema me interesa mucho y me gusta mucho.