dibujar optimamente

[derkenuke]

He hecho una tonteria javascript que permite dibujar cuando el boton izq del raton esta presionado, pero cuanto mas se dibuja, peor, y va mucho mas lento.

Código PHP:

  <style> 
.pto { width:1; height:1; background-color:black;position:absolute; font-size:1px; } 
</style> 
 
<script> 
/*  
JAVASCRIPT PARA DIBUJAR  
*/ 
document.write('<div id="almacen">&nbsp</div><div id="documento">&nbsp</div>'); 
 
function dib() { 
    documento.innerHTML+="<div class='pto' style='top:"+event.y+";left:"+event.x+";'></div>"; 
} 
 
function aprieta() { document.onmousemove=dib; } 
function suelta() {  
    document.onmousemove=null;  
    almacen.innerHTML+=documento.innerHTML; documento.innerHTML=""; 
} 
 
document.onmousedown=aprieta; 
document.onmouseup=suelta; 
</script>  
  

¿Que puedo hacer para optimizarlo? He puesto el div almacen por si servia de algo, y un poco mas rapido va, pero...


Agradecimientos adelantados

[caricatos]

Hola derkenuke:

Hice una librería gráfica que tal vez te interese:

http://www.pepemolina.com/efectos/libgraf.js

Puedes ver un ejemplo en esta página: http://www.pepemolina.com/efectos/reloj.html

Espero que te sirva.

Saludos

[KarlanKas]

dekernuke!

Me ha encantado tu idea! Muchas gracias por compartirla con nosotros!

Es sencilla y muy efectiva!

[derkenuke]

caricatos la libreria grafica es realmente increible, el codigo es muy largo, pero por fin no esta en ingles . Esta muy muy bien explicado y comentado, con las variables llamandose como se tienen que llamar, haber si hago cosas con ella porque esta .

Se me ha ocurrido algo para optimizar mi script: En vez de utilizar el onmousemove (que es muy muy preciso), igual utilizo una funcion de mi creacion para captar si se ha movido el raton, y hacer un bucle de intervalo 10 milisegundos (o igual 100, tendria que hacer pruebas).

¿creeis que funcionaria?

Gracias por los apoyos!

[derkenuke]

Por cierto caricatos, me he estado leyendo y probando las funciones para dibujar de tu libreria y no entiendo lo que haces para generar un circulo. Si me la puedes explicar brevemente te lo agradeceria mucho, pero, ¿no es mas facil con senos y cosenos?

Seria algo asi:

Código PHP:

  <style> 
.pto { width:1; height:1; background-color:black;position:absolute; font-size:1px; } 
</style> 
 
<script> 
var radio=200; 
var inicX=300; 
var inicY=300; 
for(a=0;a<360;a=a+1/4) { 
    angRad=a*Math.PI/180; //el angulo en radianes en el ordenador 
    posX=(Math.cos(angRad)*radio)+inicX; 
    posY=(Math.sin(angRad)*radio)+inicY; 
    document.write("<div class='pto' style='left:"+posX+";top:"+posY+";'></div>"); 
} 
</script>  
  

No lo he probado, hice algo asi hace mucho, creo que a 'a' hay que sumarle 1/4 (0.25) y no 1 para que quede una linea en las circunferencias de radio grande, pero se podria calcular segun el radio para ahorrar recursos (con radio 50 por ejemplo y a++, quedaria igual y utilizando menos recursos).

PD: Si se intercambian sin y cos no pasa nada creo.


Era eso simplemente, espero tu respuesta.

[caricatos]

Hola otra vez:

La verdad es que para las matemáticas soy bastante malo y ahora mismo no sé cuál fue la fuente que usé para esas rutinas, aunque me acuerdo que implementé algo en ensamblador en la Universidad y con eso me pusieron una matrícula, pero las rutinas eran mucho más complejas .

Si encuentro esas rutinas me fijaré, pero no creo que sepa descifrarlas (por lo menos me tendría que tomar algunos dias).

De todos modos, tal como dices está implementado a base de senos y cosenos:

posX=(Math.cos(angRad)*radio)+inicX;
posY=(Math.sin(angRad)*radio)+inicY;

Si sabes alguna forma de mejorar algo no dudes en decírmelo para modificar la librería.

Saludos

[derkenuke]

Por cierto, al hacer una esfera (supongo que una circunferencia rellena) lo haces con muchos puntos ¿no?. Es que estoy pensando en la manera de hacer algo para hacer el cuadrado mas grande dentro de la circunferencia, cuando este esté hecho, el mas grande posible otra vez... y asi hasta que no queden huecos libres, no se si será mas optimo, aunque de momento no se ni por donde empezar jeje.

Si me sale ya te contare.

Un saludo.

[caricatos]

Hola otra vez:

Me parece que no te has fijado bien en "generaEsfera" ... por cada punto más a la izquierda, se calcula el equivalente de la derecha en la misma coordenada y, y lo que se escribe es una línea.

Sé que hay algoritmos para llenar la esfera aleatoriamente con puntos, pero creo que son menos efectivos.

Con este sistema pude hacer este efecto curioso:
http://www.pepemolina.com/efectos/circulo2.html

Cuando pasa el ratón dentro del círculo... además el círculo central es un link

Saludos

[derkenuke]

Ah, es verdad, el ejemplo habla por si solo, ademas es como dices muy curioso . No se la verdad de que te estoy hablando, porque no he encontrado un algoritmo de esos, y menos me ha salido a mi xD, por lo tanto no lo he probado, pero la esfera que se hacia con tu libreria me parecia muy rapida, y queria saber cómo estaba hecha, nada más jeje.


Muchas gracias.

[derkenuke]

Trabajando con la libreria, caricatos, me he dado cuenta que necesitaba una cosa mas simple para trabajar, algo mas pobre, porque tu codigo para mi es demasiado grande (aunque no por ello malo, me parece fantastico). He hecho una "libreria" que dibuja puntos, rectangulos y circulos, estos dos ultimos con la posibilidad de hacerlo con bordes. Falta por implementar que haga lineas, pero estoy trabajando en ello:

Código PHP:

  document.write('<style>.pto { width:2; height:1; position:absolute; font-size:1; }</style>'); 
 
function ptoObj(x,y,color) {            //objeto punto. color en rrggbb 
    this.x=x; this.y=y; this.color=color;     
    this.generar=function() { 
        document.write("<div class='pto' style='background-color:#"+this.color+";top:"+this.y+";left:"+this.x+";'></div>"); 
    } 
} 
 
function cuadObj(x,y,w,h,color) { 
    this.x=x; this.y=y; this.w=w; this.h=h; this.color=color; 
    this.generar=function() { 
        document.write("<div class='pto' style='background-color:#"+this.color+";top:"+this.y+";left:"+this.x+";width:"+this.w+";'></div>"); 
        document.write("<div class='pto' style='background-color:#"+this.color+";top:"+this.y+";left:"+this.x+";height:"+this.h+";'></div>"); 
        document.write("<div class='pto' style='background-color:#"+this.color+";top:"+(this.y+this.h)+";left:"+this.x+";width:"+this.w+";'></div>"); 
        document.write("<div class='pto' style='background-color:#"+this.color+";top:"+this.y+";left:"+(this.x+this.w)+";height:"+(this.h+2)+";'></div>"); 
    } 
    this.rellenar=function(color) { 
        color=color==null?this.color:color;    //si no se pone el color, que sea el mismo que el del cual 
        document.write("<div class='pto' style='background-color:#"+color+";top:"+(this.y+2)+";left:"+(this.x+2)+";width:"+(this.w-2)+";height:"+(this.h-2)+";'></div>"); 
    } 
} 
 
function circObj(x,y,radio,color) { 
    this.x=x; this.y=y; this.radio=radio; this.color=color; 
    this.generar=function() { 
        for(a=0;a<360;a+=0.25) { 
            ang=a*Math.PI/180;                //a radianes 
            posX=(Math.cos(ang)*this.radio)+this.x; posY=(Math.sin(ang)*this.radio)+this.y; 
            document.write("<div class='pto' style='background-color:#"+this.color+";top:"+posY+";left:"+posX+";z-index:2;'></div>"); 
        } 
    } 
    this.rellenar=function(color) {        //color es optativo 
        color=color==null?this.color:color;    //si no se pone el color, que sea el mismo que el del circ 
        for(a=90;a>-90;a-=0.5) {        //recorremos cada angulo en los cuadrantes 1º y 4º (los de la dcha del circ) 
            rad=a*Math.PI/180;    //radianes 
            y=this.y-Math.sin(rad)*this.radio; 
            width=(Math.cos(rad)*this.radio)*2; width+=1;    // el 1 es para el margen de error por los decimales ;-) 
            x=this.x-(width/2); 
            document.write("<div class='pto' style='background-color:#"+color+";top:"+y+";left:"+x+";width:"+width+";z-index:1'></div>"); 
        } 
    } 
} 
 
 
miPto=new ptoObj(30,30,"ff00ff"); 
miPto.generar(); 
 
miCuad=new cuadObj(50,100,50,100,"996643"); 
miCuad.generar(); 
miCuad.rellenar(); 
 
miCirc=new circObj(300,300,200,"ff0000"); 
miCirc.generar(); 
miCirc.rellenar("ff9933");  
   

(caricatos fijate en lo del relleno del circulo, porque he visto que utilizas mucho codigo para rellenarlo, haber si lo entiendes).

Espero que le sirva a mucha gente.


Un saludo

[caricatos]

Hola otra vez:

Muy bien...

... pero creo que me estás haciendo trampa ...

Lo digo porque en la simplificación no estás contando con los eventos que son parte de lo que "rellena" el código..., pero creo que algo lo has simplificado.

De eso te hablaré luego, pero creo que antes de seguir, tal vez sea mejor adaptar las rutinas al DOM para que los gráficos puedan crearse en "tiempo real"...

La idea es que en vez de escribir las figuras mediante "document,write", se use createElement y luego se cuelgue al body.

Supongo que habrás visto el Inspector DOM de otro mensaje mio (hay muchos ejemplos más)... se trata de crear los elementos dinámicamente, por ejemplo en vez de:
document.write("<div align=center style="background-color: 'red'"></div>");

usar:
var unDiv = document.createElement("div");
unDiv.align = "center";
unDiv.style.backgroundColor = "red";
document.body.appendChild(unDiv);
...

Solo es una idea... si te animas, cuenta conmigo para ayudarte.

Saludos

[derkenuke]

Me animare, haber si me tomo mi tiempecillo para estudiarmelo, porque eso para mi es nuevo .

Jeje, no he contado los eventos, pero bueno, miratelo a ver si puedes sacar algo de simplificacion para tu libreria.


Un saludo y gracias por la recomendacion.

[caricatos]

Hola otra vez:

Reitero que puedes contar con mi ayuda para las dudas que puedas tener (también me las apuntaré... )

Hace algún tiempo se habló sobre efectos gráficos, y los ejemplos los colgué en una página que ya no existe, pero para animarte te voy a poner algunos enlaces que se corresponden con ese post (cambiando de página)...

http://www.pepemolina.com/efectos/efecto1.html
http://www.pepemolina.com/efectos/efecto4.html
http://www.pepemolina.com/efectos/efecto6.html
http://www.pepemolina.com/efectos/efecto11.html
http://www.pepemolina.com/efectos/efecto7_2.html

Saludos

P.D:

Es una pena que no hayas estado en ese tiempo, porque creo que hubieras aportado cosas importantes,,,

[derkenuke]

Bueno, que se le va a hacer, no tiene remedio. Muchisimas gracias por las paginas que me has dado, apuntadas en favoritos quedan.


Creo que ya tengo trabajo de sobra, entre esto y el createElement y appendChild no me falta entretenimiento.



Muchisimas gracias por todo!!

[caricatos]

Hola otra vez:

Empecé a actualizar la librería desde cero para que sea más llevadero, las propiedades son las básicas:
coordenadas, color y "visible", y los métodos generar y borrar.

Se puede ver aquí: http://www.pepemolina.com/efectos/graf.html

Hay muchos métodos fáciles de implementar como cambiarColor, reUbicar, mostrar/ocultar...

Fíjate en el código y me comentas como lo ves.

Saludos

[derkenuke]

Me gusta me gusta. Al menos asi por partes es bastante mas facil entenderlo. He leido documentos del DOM y son muy interesantes, ya he hecho mis cosillas. Me parece muchisimo mejor que cualquier cosa para escribir en una pagina web.

Hasta otra.

[caricatos]

Hola otra vez:

Despacio es mejor, ¡verdad!

Bueno, hay algunas cosas que no están del todo bien:

Código PHP:

  function generarPunto()    { 
    var punto = document.createElement("span"); 
    punto.style.position = "absolute"; 
    punto.style.left = this.x; 
    punto.style.top = this.y; 
    punto.style.width = [COLOR=blue]"2px";[/COLOR]  
    punto.style.height = [COLOR=blue]"2px";[/COLOR]  
    [COLOR=blue]punto.appendChild(document.createTextNode(" "));[/COLOR]  
    punto.style.backgroundColor = this.color; 
    punto.style.visibility = (this.visible) ? "visible" : "hidden"; 
    this.soy = punto; 
 
[COLOR=blue]    document.body.appendChild(punto);    //nuevo 
    return true;[/COLOR]  
}  
   

Lo de los 2 pixeles es porque 1 no se ve bien, pero lo correcto es darle un tamaño de 1 pixel.

punto.appendChild(document.createTextNode(" "));... lo de agregar un nodo de texto es porque explorer (al menos mi versión) no lo muestra bien, pero no tendría que ser necesario.

Creo conveniente colgar el nodo "punto" creado en el método generar()

y return true no es obligatorio pero creo que es conveniente.

Tampoco creo necesario asignar un id, ya que se supone que con los métodos que se declare en el objeto tiene que ser suficiente para su manejo.

Creo que las definiciones que apunté antes son fáciles de implementar (mostrar, mover...)

Saludos