Página 1 de 1

Efecto texto haciendo ondas

Publicado: 26 May 2010, 08:06
por Ximorro
Aparte del efecto en el siguiente post para hacer una marquesina de texto en AutoIT, que Chefito ha hecho ¡¡de tres maneras diferentes!!
http://www.emesn.com/autoitforum/viewto ... dc9e#p8331

hablábamos en una entrada en la que Jonny ponía una UDF para hacer efectos, si se podía hacer un efecto de onda... pues la UDF aquélla no lo hacía, pero lo he montado a base de poner cada letra en un label y desplazarlos... ¡y va sorprendentemente suave!

He aquí el código de ejemplo, lo he modificado para que vaya en la 3.3.6, pero no lo puedo probar porque tengo la 3.3.0 ;-), así que si hay algún problema para compilar me lo comentáis:

Código: Seleccionar todo

#cs ----------------------------------------------------------------------------

 AutoIt Version: 3.3.6.0
 Author:         Ximorro

 Script Function:
	Efecto de texto en ondas Xísmicas ;-)

#ce ----------------------------------------------------------------------------

#include <GUIConstantsEx.au3>
#include <WindowsConstants.au3>
#include <StaticConstants.au3>

Opt('MustDeclareVars', 1)
Opt("GUIOnEventMode", 1)

Global $WS_EX_COMPOSITED = 0x02000000 ;Evita parpadeos en XP
Global $GUIondas, $aLabels[1], $aX[1], $nlabels, $texto

$GUIondas = GuiCreate("Ondas Xísmicas", 900,200, -1,-1, -1,$WS_EX_COMPOSITED)
GUISetOnEvent($GUI_EVENT_CLOSE, "_Cerrar")
GUISetFont(40, 800, 0, "Courier New")

$texto = "¡XIMORRO SUBE Y BAJA!"
$nlabels = StringLen($texto)
ReDim $aLabels[$nlabels], $aX[$nlabels]
Global $X = 30, $dX = 40, $Y = 70
For $i = 0 To $nlabels-1
	$aLabels[$i] = GUICtrlCreateLabel(StringMid($texto,$i+1,1), $X,$Y, 40,-1, $SS_CENTER)
	GUICtrlSetBkColor(-1, $GUI_BKCOLOR_TRANSPARENT)
	$aX[$i] = $X ;Guardamos la X para mantenerla al reposicionar las etiquetas
	$X += $dX
Next
GUISetState()

; Parámetros para la onda (en realidad cada letra tiene la suya, desfasadas entre sí de forma constante)
Global Const $PI = 3.14159265358979
Global $amplitud = 40, $alfa = 0, $delta = 0.2, $desfase = 0.5
AdlibRegister("_OndaLabels", 25)

While 1
	Sleep(1000) ; No afecta a Adlib, que interrumpe
WEnd

Func _OndaLabels()
	For $i = 0 To $nlabels-1
		GUICtrlSetPos($aLabels[$i], $aX[$i], $Y + Sin($alfa+$i*$desfase)*$amplitud)
	Next

	;Con estas dos líneas la onda se desplaza de izquierda a derecha:
	$alfa -= $delta
	If $alfa < 0 Then $alfa += 2*$PI ;Si se pasa de una vuelta lo ponemos de nuevo en la primera revolución

	;Sustituyendo lo anterior por estas dos líneas la onda se desplaza de derecha a izquierda:
	;$alfa += $delta
	;If $alfa > 2*$PI Then $alfa -= 2*$PI ;Si se pasa de una vuelta (360º = 2PI radianes) lo ponemos de nuevo en la primera revolución
EndFunc

Func _Cerrar()
	Exit
EndFunc
Nota sobre las variables de la onda, por si queréis experimentar:
$amplitud es lo que se desplaza en vertical cada letra, en píxeles
$alfa no lo toquéis, es un ángulo que va dando vueltas para calcular la función trigonométrica
$delta es el "paso" en que se incrementa $alfa, más pequeño = menos saltos = más suave = aparentemente más lento (se moverá menos distancia en el mismo tiempo)
$desfase es la diferencia dentro de la onda para cada letra, si queréis una onda con más picos aumentadlo, si la queréis más suave (más estirada) se hace más pequeño.

Si cambiáis $delta y $desfase que sea en valores pequeñitos ¡que está en radianes!

La velocidad global se cambia con la función Adlib, que ejecuta la actualización del efecto a intervalos regulares. Lo podría haber puesto en el bucle principal, pero así se puede poner otras cosas más fácilmente. Eso sí, con la configuración actual de 25ms igual queda un poco justo si el GUI tiene que hacer otras muchas cosas ;-)

Re: Efecto texto haciendo ondas

Publicado: 26 May 2010, 12:41
por Jonny
Hola

Buff.... ¡Buenísimo! Felicidades.

Eso sí, es para mirárselo con lupa, porque tiene hasta ¡trigonometría! jejejeje.

Está visto, que aveces no es conocer un lenguaje de p a pa, sinó darle al coco, para conseguir lo que se quiera...

Salu2!

Re: Efecto texto haciendo ondas

Publicado: 26 May 2010, 15:28
por Chefito
Jajajaja.....eres una máquina!! :smt023 . Muy buen programa y efecto. Enhorabuena.
Me ha gustado mucho, y encima te ha quedado perfecto :smt023 . Añado el script a mi colección :smt002 .

Veo que has utilizado una onda senoidal. Muy buena idea.
A ver si vemos más efectos de este estilo que están muy chulos.

Me estás poniendo dificil el superar esto :smt005 :smt005 :smt005 . A ver que se me ocurre :smt003 .

Saludos.

Re: Efecto texto haciendo ondas

Publicado: 26 May 2010, 16:37
por Fredinchy
Impresionante! Me encantó :smt007

Y vaya nombre Efecto de ondas "Xísmicas" :smt046

Saludos! :3

Re: Efecto texto haciendo ondas

Publicado: 27 May 2010, 09:25
por Ximorro
Gracias a todos, me alegra de que os haya gustado. Este es uno de esos programitas que quedan bastante aparentes teniendo un código relativamente sencillo.

Se me ocurrió hacerlo así desde el principio, cuando comentó Jonny que buscaba algo así, pero sólo de pensar en un montón de labels (hay que poner uno para cada letra) moviéndose independientemente me imaginé que parpadería todo una barbaridad.
Después de que Chefito hiciera los 3 marquee pues como sólo faltaba eso lo probé, y me he quedado flipado de lo suave que va (gracias a EX_COMPOSITED, si no sí hay parpadeos). La verdad es que igual lo he puesto demasiado suave (25ms por actualización), en un XP no muy potente que he probado va más justito y hay que darle menos caña, pero en otros Vista más modernos la verdad es que va sobrado.
La otra opción, que no requiere todos los labels... es hacerlo en GDI+, eso se lo dejo a Chefito ;-) Seguro que va aún más suave, aunque consumirá mucha más memoria... ¡y será una pesadilla de programar! ;-)

Jonny
el programa es mucho más sencillo de lo que parece. Sí usa trigonometría ¡pero una simple función seno! Esta función da valores entre -1 y 1, sin picos, de una forma suave (vaya, todos habéis visto la forma de las ondas aunque aún no lo hayáis estudiado), así que simplemente voy variando el ángulo ($alfa) a pasos de $delta radianes para que me vaya dando esos valores, amplifico ($amplitud) para ponerlo en el rango que quiero, y modifico la Y con ese valor. El efecto global se consigue porque en vez de mover todas las letras en bloque cada una está desfasada ($desfase) en ángulo respecto a la anterior (como moverse por la X en la onda) así que lo que hago es realmente dibujar la gráfica de seno, pero como voy cambiando el ángulo inicial pues queda animado.
Esa es la parte más complicada, pero lo demás es bastante sencillo ;-)
Por supuesto en vez de sin() se podía haber usado cos(), son perfectamente simétricas así que visualmente quedaría igual.
Quizás se pueda optimizar con propiedades del ángulo suma y cosas que no recuerdo, pero sin tablas precalculadas no creo que ayude mucho.

Chefito
gracias, queda aparente la verdad, pero yo por ejemplo me maravillo más con tu solución GDI para hacer el marquee, ¡eso sí que es más complicado! Y como te parecía poco, ¡lo hiciste de tres maneras! ja ja.

Fredinchi
Je, je ¿a que mola el nombre? Me da vergüenza quedar tan egocéntrico, ¡pero es que el nombre le va al pelo! :smt005

Re: Efecto texto haciendo ondas

Publicado: 27 May 2010, 12:34
por Jonny
Hola

sí, sí, esque a mí las matemáticas a ese nivel ¡me suenan a chino! jejeje.

Aquí se demuestra eso, de que la programación son matemáticas, puras y duras, jaja.

Salu2!

Re: Efecto texto haciendo ondas

Publicado: 27 May 2010, 13:07
por Ximorro
¡Hombre tampoco es eso! Pero si tienes que dibujar una onda... ¡pues lo normal es usar una función con forma de onda! ;-)

La informática se puede usar para muchísimas cosas, muchas tienen que ver con matemáticas, y sean puras o aplicadas (física, ingeniería...) pero lógicamente también se puede usar en otras muchas cosas. Tú acabas de poner un instalador de drivers, ofrece una buena utilidad sin usar matemáticas (bueno, alguna suma habrá ;-) )

La Informática, como ingeniería, sí tiene mucho de matemáticas, y más cuánto más teóricamente la tratas. Pero a la hora de programar la magia es que cada uno programa en lo que le interesa (vale, o puede), pero por ejemplo no te va a preocupar calcular primalidad de enteros por el método de curvas elípticas ¿verdad? Te aseguro que el que haga eso va a usar matemáticas incomprensibles, pero no pasa nada, que lo hagan ellos, que están interesados. Nosotros haremos textos que se desplazan ;-)

Re: Efecto texto haciendo ondas

Publicado: 28 May 2010, 07:04
por Jonny
Bueno, sí. Siempre hay distintas formas de hacer las cosas, y en la programación no iba a ser menos. Pero supongo, que dependerá efectivamente, de la complejidad del programa que se haga. Para un instalador de drivers, podría hacerse como lo estoy haciendo yo, usando el mínimo de matemáticas (por supuesto las hay, pero a un nivel muy básico), o con funciones bit y otras lindezas de las matemáticas, pero imagino, que habrán aplicaciones que no puedan desarrollarse con operaciones matemáticas básicas. Por ejemplo, la función que has hecho en este hilo, no me la imagino (seguro que si se pone uno, la hace) aunque fuera con gdi (quizá me equivoque y también haga operaciones matemáticas complejas).

Salu2!

Re: Efecto texto haciendo ondas

Publicado: 31 May 2010, 08:38
por Ximorro
Las funciones Bit no son exactamente de matemáticas, son operaciones lógicas bit a bit, de ahí el nombre. No trabajan con los números como enteros, sino con la representación binaria de esos números, y trabajan con los bits independientes.

Da igual que lo de las ondas lo hagas con GDI+ o desplazando etiquetas como he hecho yo, esa es la forma de dibujar. Cómo hacer la forma de la onda es independiente, y lo más rápido en GDI también sería usar una función sin() (o cos() ).

Probablemente es simulable de otra manera, pero la verdad, seguramente será más complicado que dejar que sin() haga la faena. En cualquier caso si encuentras otra manera, eso será independiente de que se haga con GDI o con etiquetas.

Si no has trabajado nunca con funciones trigonométricas puede resultarte extraño, pero como puedes ver ¡sólo hay una llamada a una función sin()!. Así que estarás de acuerdo en que tan complicado no debe ser. Y vaya, que yo estas cosas las vi en el instituto, tampoco hace falta ser matemático de alto nivel.

Re: Efecto texto haciendo ondas

Publicado: 31 May 2010, 12:07
por Jonny
Hola

Me quedo igual con las funciones bit, tendría que ver la representación binaria, etc etc...
No, si en cuanto a código, difícil no parece, pero de trigonometría que efectivamente se daba en el instituto ... ¡ni me acordaba! jejejejeje.
Solo las he usado en el instituto, por eso de aprobar, y desde ahí, no he vuelto a ssaber de las matemáticas, salvo la suma, resta, multiplicación y división jeje.

De todas formas, está muy bien que hayas documentado el código, porque así más o menos ya se hace uno a la idea de como funciona, que no es lo mismo liarse con la trigonometría, que con todo un código.

Salu2!

Re: Efecto texto haciendo ondas

Publicado: 31 May 2010, 12:38
por Ximorro
Pues hombre, si pasaste por el instituto también deberías saber derivadas e integrales, pongamos por ejemplo, las divisiones ya las sabíamos en 5º de primaria ;-)

Por cierto, si queréis que la onda se desplace hacia el otro lado hay dos sencillas opciones.
a) La rápida para probarlo es cambiar el signo "+" dentro del sin() por un menos.
b) La otra es no tocar el sin, y cambiar las dos últimas líneas de la función a esto:
$alfa -= $delta
If $alfa < 0 Then $alfa += 2*$PI ;Si se pasa de una vuelta lo ponemos de nuevo en la primera revolución

Me gusta más porque así nos ahorramos una multiplicación ;-)

Estoy por modificar el post original, así creo que queda más natural, como si la onda se moviera desde el principio del string ¿cómo lo veis?

Re: Efecto texto haciendo ondas

Publicado: 02 Jun 2010, 14:21
por Chefito
Ximorro escribió:Estoy por modificar el post original, así creo que queda más natural, como si la onda se moviera desde el principio del string ¿cómo lo veis?
Jeje, lo que tu quieras, que para eso es tu código :smt002 . Yo en situaciones parecidas a estas, si veo que merece la pena dos códigos que hacen algo parecido, o incluso hacen la misma cosa pero de dos formas distintas, uno de los códigos lo pongo en comentario, poniendo un comentario de lo que se debería hacer para ejecutarlo en vez de el otro.
A elección.

Saludos.

Re: Efecto texto haciendo ondas

Publicado: 03 Jun 2010, 06:55
por Jonny
Hola

Buena idea la de Chefito, así es más fácil modificar el código para usarlo según se quiera, usando una u otra opción.

Por cierto, que no respondo tan a menudo como suelo hacerlo,porque tengo el pc medio muerto, con un problema que no se de donde vendrá.

Salu2!

Re: Efecto texto haciendo ondas

Publicado: 03 Jun 2010, 07:54
por Ximorro
Vale pondré las dos y comentaré la vieja, pues me gusta más que se mueva hacia la derecha, luego cada uno que elija lo que más le guste.

Vaya Jonny, suerte con el cacharro.

Re: Efecto texto haciendo ondas

Publicado: 04 Jun 2010, 13:00
por Jonny
Hola

A mí la verdad, también me gusta más que se mueva hacia la derecha, pero no está de más ver alternativas, así se ven las posibilidades del código y puede ayudar a entenderlo un poco mejor.

¡Gracias!, pero tiene pinta de ir para largo el culebrón con el cacharro...

El condenao, se reinicia cuando le da la gana (siempre cuando se le da uso, si lo dejas encendido sin tocarlo, aguanta lo que quieras), sin saber porqué.
He formateado tres veces, y nada, sigue igual. Lo mejor es, que si lo uso yo en mi casa, cuando le da el puntazo se reinicia y aparece un pantallazo azul con letras ilegibles... pero si lo llevo a que le hechen un vistazo y lo arreglen, dicen que no lo hace ¿Como se come eso?
Me han dicho que puede ser la gráfica, pero mientras no se reinicia, la pantalla se ve bien. He probado todo y nada. Hasta usarlo con la gráfica inhabilitada (Menudo cachondeo) y el ..., en todo un día no se ha reiniciao ni una vez.

En fin, que seguiré pensando que probar. A ver si abanicándole, se le va la tontería jeje.

salu2!

Re: Efecto texto haciendo ondas

Publicado: 04 Jun 2010, 13:08
por Ximorro
Pues aunque sea salirse de tema... y si quieres contestar te agradecería que pasases esto al foro de chat... pues sí, por lo que comentas es fácil que abanicándolo vaya mejor.
Es un poco broma pero ciertamente tiene pinta de sobrecalentamiento, el reset es un efecto típico de eso. Si ahora en verano (bueno, si estás en el hemisferio norte como yo) te pasa más seguramente es cosa del calor. La gráfica suele ser punto de mira porque generalmente es lo que más se calienta, y más, como dices, "cuando le das uso".

Prueba a ponerle mejor ventilador o sistema de refrigeración en general, otro ventilador en la caja que saque mejor el calor de dentro, que la habitación dónde está no esté tan caliente, etc...

Respecto a las ondas, pues ya está puesto, simplemente las dos opciones y una comentada. Si a alguien le interesa a base de parámetros puede hacer una función que indique a qué lado va, tamaño de fuente, amplitud, velocidad... vaya, parametrizarlo en todo regla. Yo no creo que lo use mucho, fue más bien una diversión, quien quiera desarrollarlo en serio ahí tiene la base... no os olvidéis de los créditos :smt006

Re: Efecto texto haciendo ondas

Publicado: 05 Jun 2010, 10:24
por Jonny
Hola

Sí, un poco fuera de tema sí que es aquí, así que ya lo puse en "Chat".


Sobre lo que dices de que ahí está la base del código para quien quiera ampliarlo, ciertamente es un buen paso que has dado, para que alguien con muchas ganas y paciencia hiciera una udf con efectos de este tipo, estaría muy chulo.

Salu2!