Hay gente que ha hecho la PR, porque claro, como lo comenté, pues hay gente que decía, bueno, pues se ha hecho la PR para que se vea, no sé qué.
Y por ejemplo, en este caso, Alexis lo ha hecho, ¿ves? Aquí, bueno, aquí no se ve el efecto humo, o yo no lo veo.
Yo no veo efecto humo aquí. Me siento engañado, me siento engañado. ¿Qué ha pasado aquí? No lo veo.
Aquí sí que se ve como un efectillo y tal, muy, bueno, pero que casi no se nota. Bueno, ahí sí que se notaba un poquito más.
Pero yo creo que en lo desplegado no se ve. Fue humo, el humo del humo. Este ha sido el humo del humo, totalmente.
Bueno, vamos a hacer el efecto humo. Hoy sí, vamos a hacer nosotros el efecto humo.
Creo que lo habrá hecho, pero a la hora de arreglar seguramente los conflictos, me imagino que se le habrá ido alguna cosita.
Se le habrá ido. A ver aquí, si este sí que se ve. Este, este no sé si... Tampoco, no sé, el efecto humo ha desaparecido.
Bueno, lo vamos a hacer en vivo en directo. Es que había dos PRs que lo hacían. Este es de José, ¿vale?
Que le doy las gracias a las dos personas que han hecho las PRs, pero yo me imagino que una vez que han hecho, han arreglado los conflictos, a lo mejor se han apagado.
Se ha apagado el humo, se ha apagado. Así, bueno, no pasa nada. Así lo hacemos justamente, así lo hacemos justamente.
Le agradezco mucho a José y a Alexis que hicieron las PRs, que además tenéis por aquí todo el código de cómo lo han hecho y tal.
Yo le he estado echando un vistazo porque yo de 3GS, pues no soy un máquina, ni mucho menos.
De hecho, me he tenido que mirar un par de vídeos para entender alguna cosita.
Ya sabéis que 3GS es una biblioteca muy interesante para hacer animaciones y cosas en 3D con JavaScript.
Y claro, no solo con un rendimiento buenísimo, sino que puedes hacer hasta videojuegos. Es tremendo.
De hecho, me he pillado un curso. El curso este que me habéis dicho mil millones de veces, pues me lo he pillado.
Este, 3GS Journey. Este me lo he pillado, me lo he pillado.
Así que nada, cuando aprenda, pues haremos un curso en condiciones.
Pero hoy al menos, al menos, vamos a ser capaces.
Lo he estado estudiando, a ver cómo lo podemos hacer.
Y vamos a hacer el efecto humo del fondo de la web de la velada, paso a paso,
para que al menos tengan lo más básico y sepas un poquito más de 3GS.
Pero antes, antes de esto, te voy a explicar unas cuantas cosas.
Te voy a explicar lo primero, que ya está confirmado, que voy a estar en Medellín, en Colombia, en el CityGS.
¿Vale? En el CityGS. 25 y 26 de octubre, en la ciudad de Medellín, en Colombia.
Voy a estar en la conferencia del CityGS.
Así que si sois de la zona, pues que sepáis que os podéis pasar.
Creo que, si no me equivoco, voy a dar la keynote.
Así, porque lo pone aquí.
Keynote. Voy a estar presentando la conferencia.
Así que nada, pasaos, que me hace muchísima ilusión.
Dejad vuestro like, si os gusta que vaya.
Porque así seguro que me invitarán más veces.
Y a mí, con lo que me gusta viajar, pues yo encantado de la vida de ir a Medellín.
Y comerme allí, pues, una buena... ¿Cómo se llama?
La bandeja paisa. Dios, la bandeja paisa.
También os anuncio que voy a estar en Madrid.
Voy a estar en Madrid el 27 de abril.
El 27 de abril voy a estar en La Nave, en Madrid.
Donde voy a estar con Douglas Crockford.
Ay, Douglas. Douglas. Douglas. Douglas. No Douglas.
Hemos clavo ahí. Douglas Crockford.
El creador de JSON. Ya sabéis que odia muchas cosas, pero también ama otras.
Pues Douglas va a estar también. Voy a estar con él.
Y voy a estar justamente en una conferencia que hace la gente de Keep Coding.
De hecho, se llama Connect 2024.
Uno de los eventos más épicos del año que va a estar ahí en Madrid.
Voy a estar con el bueno de Douglas, con el que tiene el librazo este de JavaScript.
Las buenas partes.
Así es como tenemos la página de la velada.
¿Qué os parece el efectillo ese que se va dibujando el logo de la velada?
Y luego se anima y todo esto.
Esto lo hizo alguien que está muy interesante porque eso se ha hecho puramente con CSS.
Con un poquito de CSS y al final es el SVG.
Que le dices cómo lo tiene que dibujar y ya está.
Y yo también te quiero a ti, Elmarra.
Así que es bastante interesante.
Lo que vamos a hacer hoy...
No sé qué cambios más se han hecho aparte de esto.
No hemos hecho muchas cosas más.
Pero lo que sí que os puedo decir es, uno, vamos a cerrar ya casi, ya casi, la oferta en Infojobs para encontrar a los dos programadores que me van a echar una mano.
¿Ok?
Entonces, lo van a cerrar creo que hoy o mañana.
No sé.
Porque ya están avisando a gente que han preseleccionado.
Ya están preseleccionando a gente de toda la que se ha apuntado.
Así que, si queréis apuntaros, tenéis que apuntaros hoy.
Ya.
Porque están ya preseleccionando los currículums que están viendo.
Ya está.
Ya hay gente.
Mira, hay gente que la han preseleccionado.
Y hay gente en el chat que está diciendo, me han preseleccionado.
Mido, me alegro.
Felicidades.
Sé que todavía os podéis apuntar.
Pero no tardéis porque termina casi que ya.
¿Ok?
Así que, os dejo el enlace por si os queréis apuntar.
Pero ya están preseleccionando.
Y yo creo que van a cerrar entre hoy y mañana la oferta.
Así que, la gente de Infojobs ya están haciendo el proceso.
Me han dicho que todavía puede entrar gente.
Pero, ojo, que todavía están preseleccionando.
O sea, están en el proceso.
No lo han cerrado todavía.
¿Vale?
Están empezando ya a preseleccionar a la gente.
Suerte.
Y a ver si lo podéis hacer.
Y luego, por otra parte, os quiero decir que, bueno,
gracias a la gente de Infojobs, no solo contratamos a dos personas estas,
sino que podemos desarrollar la web de La Velada.
La gente de La Velada me han comentado,
porque ha habido unos problemillas técnicos,
que pronto vamos a poder ver la web en el dominio.
¿Vale?
Pronto vamos a poder ver en lavelada.es,
vamos a poder ver por fin la página que hemos desarrollado.
Se están trabajando en ello.
Están cambiando las DNS.
Espero que pronto las podamos ver.
¿Vale?
Así que, nada, paciencia.
Y solo deciros que un montón de gente ha estado colaborando aquí.
Muchas gracias a toda la gente que ha hecho PRs.
Mejorando rendimiento, mejorando accesibilidad.
Ya hay 53 contribuidores que, independientemente de si os fichan o no os fichan,
vais a poder echar una mano.
Vais a poder contribuir a la web de La Velada.
Y os digo una cosa.
Ahora estamos haciendo la prelanding para el anuncio que va a hacer Ibai el 4 de marzo,
pero el 5 de marzo, ¿vale?
El 5 de marzo es que vamos a hacer el desarrollo de la web definitiva
con los colores definitivos, con los boxeadores, con todo, ¿vale?
Con todos los boxeadores, el lugar, la fecha definitiva, los colores definitivos.
Y ahí es donde ya vamos a estar ahí dándole a tope a la web oficial y definitiva, ¿vale?
Así que el 5 de marzo, que es la semana que viene, justamente a esta misma hora,
vamos a estar haciendo ya la web definitiva de La Velada.
Para que lo tengáis ahí clarísimo, la semana que viene empezamos la web definitiva.
Vamos a ponernos con el smoke, el smoke.
Vamos a bajar los últimos cambios que tendríamos por aquí, ¿vale?
Vamos a traer, va, pues ya parece que tengo los últimos cambios.
Pues voy a instalar las últimas dependencias.
Es que como no he estado aquí en esta máquina trabajando,
a ver si no tengo las últimas dependencias y todo esto, ¿no?
En pionrandef, ¿vale?
Y vamos a darle cañita, ¿vale?
Pues aquí tenemos la web en local.
Voy a cerrar esto por ahora.
Voy a ponerlo en modo oscuro por ahora.
La idea es hacer un efecto humo que esté como en el fondo de la animación, ¿vale?
Así que vamos a echarle un vistazo.
Vamos a abrir aquí las herramientas de desarrollo.
Vale, venga, tres cositas, tres cositas.
La 3GS.
3GS, para el que no lo sepa, de nuevo,
es una biblioteca que lo que te permite es crear gráficos y animaciones en 3D
en la página web con JavaScript, lo cual es brutal.
Y lo bueno es que además el rendimiento que te ofrece es brutal.
¿Por qué?
Porque utiliza WebGL, o sea, que está todo animado con tu tarjeta gráfica.
Se pueden hacer cosas increíbles.
Fíjate, esto es tremendo.
Es que puedes hacer hasta videojuegos, ¿eh?
Puedes hacer videojuegos, puedes hacer que se mueva la cámara.
Hicimos nosotros un Minecraft, por si lo queréis.
Podéis mirar el Minecraft que hicimos con 3GS, que lo tenemos por aquí.
Hicimos un Minecraft con 3GS, paso a paso, estuvimos dos horas haciéndolo.
Se pueden hacer un montón de cosas, pero en este caso lo vamos a utilizar para hacer el fondo,
para hacer una animación así que sea como humo, ¿vale?
Entonces, lo que vamos a necesitar primero de todo es el humo, ¿vale?
Y el humo lo tengo por aquí, me lo voy a copiar en public, ¿vale?
Ese es tu humillo.
Y este humillo lo que vamos a hacer es crear un montón de partículas en el fondo
para que se vayan moviendo y lo vamos a intentar hacer aleatorio
y lo pondremos en el fondo.
Lo importante es que necesitamos como esta textura
que va a ser la que nos acompañará para ponerla en el fondo.
Luego la cargaremos y te explicaré cómo lo tenemos que hacer paso a paso.
Pero lo más importante es que necesitamos, por supuesto,
la dependencia de 3GS para que funcione todo.
Así que la vamos a instalar, install 3.
Creo que es 3 y ya está.
O sea, que no tiene mucha historia.
Es que nunca me acuerdo si es 3GS.
Yo creo que es 3.
A ver, documentation, get started.
Sí, sí, es 3, ¿vale?
3.
Es que como React también tiene la dependencia de 3,
pero es con Fiverr y tal, es un poco diferente.
Siempre se me olvida si hay que poner 3GS y no sé qué.
Pues ya la tendríamos instalada.
Seguramente luego tenemos que instalar los tipos también de TypeScript.
Nos vamos aquí y vamos a crear un componente, ¿vale?
Que le vamos a llamar smokeBackground.astro.
Y vamos a crear aquí un div, un div, un div.
Y aquí vamos a tener el script.
Vale, el script ahora nos pondremos...
Joder, todo lo que ha puesto aquí.
No tiene nada que ver con lo que vamos a hacer, ¿eh?
Bueno, empecemos con el div.
En el div es como lo que vamos a querer renderizar este efecto humillo, ¿vale?
Y el efecto humillo este, lo que queremos es que quede por detrás de todo.
Voy a utilizar una ID porque vamos a tener que recuperar este div, este elemento.
Y vamos a hacer que esto quede fijo, que esté pegado arriba
y que ocupe todo el ancho y todo el alto.
Esto es todo el HTML que vamos a necesitar.
Porque esto lo que hace es renderizarse donde tú le digas, básicamente, ¿vale?
Vamos a importar todo lo de 3, ¿vale?
From 3.
Esta es la biblioteca para las bibliotecas, animaciones, 3D, ¿vale?
Que es la que vamos a utilizar.
Vamos a obtener...
Bueno, voy a ponerlo directamente.
Document, getElement, byID, smokeBG, BKG, BKG...
Bueno, da igual, ¿vale?
Vamos a recuperar el elemento y ya está.
Y vamos a tener, por un lado, el ancho y el alto de la ventana, ¿vale?
Esto luego lo arreglaremos.
Ah, me ha quitado el import porque como no lo uso, o sea, no puedo guardar hasta que lo use.
Esto para inicializar un poco nuestras constantes, ¿vale?
Biblioteca, el elemento donde vamos a renderizar, el ancho y el alto.
Aquí vamos a inicializar 3GS.
3GS.
Me gusta que se llame 3GS porque parece que es de 3D, pero a mí me gusta pensar porque son tres las cosas que necesitas para que funcione, básicamente.
Son tres cosas, ¿vale?
Tres cosas básicas.
Necesitas una... ¿Vale?
Eso.
La escena, la cámara y el renderizador.
Vamos a hacerlo al revés.
La cámara, la escena y el renderizador.
Esos son los tres elementos mínimos básicos que necesitas para que funcione.
Una escena que será como donde vamos a hacer las cosas.
La cámara, porque es desde donde vamos a poder observar la escena.
Y el renderizador que digamos que es el que le está dando al play, el que está reproduciendo la escena.
Serían como las tres cositas básicas que necesitamos de 3GS.
Así que, mira, vamos a empezar con la escena.
Que como la cámara y el renderizador, ¿vale?
Vamos a empezar con la escena.
La escena, lo más sencillo.
Creamos la escena con new3.scene.
Y ya tendríamos aquí el objeto donde vamos a poder incorporando otros objetos en nuestra escena, ¿no?
Pues los personajes, los...
En este caso va a ser humo, ¿no?
Van a ser unos materiales con la textura de humo.
Pero bueno, en la escena es donde vamos a tenerlo todo.
Luego vamos a tener...
Mira, voy a hacerle aquí escena.
Vamos a poner esto.
Vamos a poner aquí la cámara y vamos a poner la cam.
Vale, la cámara.
La cámara...
Hay diferentes cámaras en 3GS.
Esto no es un curso de 3GS y por lo tanto no vamos a pasar por todas.
Pero en este caso la que vamos a utilizar, te la voy a intentar explicar un poquito.
Que vamos a utilizar la cámara es la de perspectiva, ¿vale?
A ver si la...
Perspective camera.
Vale.
Y te voy a explicar lo que serían los parámetros, ¿no?
Porque aquí pone 75, 0.1, 1000, no sé qué.
¿Y esto qué quiere decir?
Bueno, vamos a ver.
Aquí lo que estamos haciendo es una cámara que está en perspectiva desde donde vamos a ver, como si fueran nuestros ojos, desde donde vamos a ver esta escena, ¿no?
El 75, ¿qué es?
El 75 serían los ángulos del campo de visión.
Y esto sería...
Si miramos fill of vision, lo vamos a ver más claro.
Por ejemplo, aquí a ver si hay una buena fill of vision.
¿Veis?
Aquí tendríamos una buena...
Un ejemplo, ¿no?
Cuando nosotros estamos mirando, podemos ver más o menos.
Por ejemplo, mira, voy a poner aquí para que lo veáis claro.
Si yo pongo esto aquí, seguramente vuestra visión, lo que ahora estamos viendo con esta relación de aspecto, pues lo estáis viendo desde un ángulo.
Pero si yo empiezo a quitarlo y lo pongo aquí, pues ya se pierde porque el ángulo desde que lo estáis viendo ya no lo abarca, ¿no?
Cuanto más grande sea el ángulo, más abarcará la vista, más podréis estar viendo.
Pero, por supuesto, eso puede verse distorsionar un poco como está la imagen.
En este caso, lo que le estamos diciendo es que nos abra el ángulo de visión un 75%, ¿vale?
Mira, aquí tendríamos un ejemplo...
Mira, con una cámara, justamente.
Aquí se ve bastante claro, ¿no?
Aquí tenéis la cámara.
Aquí tenéis 5,6 grados, por ejemplo, de ángulo de visión.
Y fijaos que lo que puede ver es solo esto.
En cambio, aquí, que tiene 7 grados de ángulo de visión, aquí podéis ver que puede ver más de la imagen.
Así que, en este caso, le vamos a poner 75 grados.
Podríamos ir mirando lo que puede ir ángulo de visión, lo que puede ir quedando mejor.
Aquí tendríamos la relación de aspecto, ¿vale?
Entonces, la relación de aspecto, como la cámara queremos que sea justamente el fondo de la web,
pues vamos a ponerle que sea la división entre el ancho y el alto,
que será, en algunos casos, 16,9, pero en otras cosas puede ser 16,10.
Así que, para que sea la relación de aspecto correcta, utilizamos la relación de aspecto de la ventana.
Y aquí tenemos estos dos campos que, básicamente, es como de lejos y cerca se puede ver un objeto.
Por ejemplo, si yo te pongo un objeto aquí, tengo una cerilla.
Es muy random, ¿vale?
Es muy random que tenga la cerilla porque, básicamente, esto es del día que fue mi cumpleaños
y estuvimos celebrándolo y justo hicimos aquí el soplar las velas y tal, ¿vale?
Entonces, imagínate, yo si te pongo muy cerca esto, ¿vale?
Si te pongo aquí esto, pues me dirás, no veo, no veo la cerilla, ¿no?
Porque está demasiado cerca, está demasiado cerca.
Pero si te la pongo muy lejos, también llega un momento que la pierdes de vista, ¿cierto?
Entonces, como llega un momento que se pierde de vista totalmente,
ya no tiene sentido renderizarla en el tema de la animación.
Aquí sí que se ve, pues tendría sentido animarla.
Por lo tanto, podríamos decir que tanto que hay un punto de que está demasiado cerca
y hay un punto que está demasiado lejos como para que se vea
y, por lo tanto, ya no tiene sentido renderizarla.
Por ejemplo, si pongo la cerilla detrás de la cámara, ¿para qué la vamos a renderizar
si no la vas a ver?
Bueno, pues entonces, aquí lo que tendríamos entre el 1 y el 1000
sería como esa profundidad que la cámara, los objetos que están dentro de esa profundidad,
siendo esta la más cercana y esta la más lejana, vamos a renderizar esos objetos.
Por lo tanto, si la cerilla está en profundidad 1200,
pues ya no tendría sentido renderizarla porque ni siquiera se ve.
Pero si está entre 0 y 1, pues está tan cerca que también llega un momento
que tampoco tiene sentido.
De hecho, fijaos, mira, ahora vais a entender una cosa de videojuegos,
porque seguro que alguna vez habéis visto que cuando un objeto se acerca demasiado a cámara,
llega un momento que desaparece.
Seguro que os ha pasado.
Cuando te pegas mucho a un personaje o a una pared y dices,
ostras, que desaparece de golpe.
Eso es porque está tan cerca de la cámara que ya no tiene sentido mostrarlo.
No solo porque encima que molesta, sino porque no eres consciente de lo que hay ahí, ¿sabes?
Entonces, esto sería un poco ese ejemplo.
Llegando al momento que esto esté tan, tan cerca,
pues no tiene sentido ya renderizarlo porque está molestando más que otra cosa, ¿vale?
Las montañas de Skyrim.
Bueno, hay un montón de ejemplos de un montón de juegos.
Vale, pues esto sería nuestra cámara, ¿vale?
Esto me parece interesante, pues básicamente para que lo entendáis.
También os digo, yo no soy el mega crack de 3GS.
Voy a estudiarlo para explicaros mejor.
Pero más o menos esto lo he entendido.
Luego podríamos posicionar la cámara para que esté, en este caso le podamos poner la posición,
mira, de la Z le podemos poner posición 10.
En este caso es en 3D.
Entonces tendríamos la X, la Y y la Z.
Y la Z sería la profundidad.
Claro, podríamos acercarla más.
En profundidad la podríamos alejar.
En este caso le vamos a poner como en 10.
Cuando la ponemos más, la queremos alejar más, pues podríamos poner 100, 1000.
La podríamos alejar cada vez más, ¿vale?
Y finalmente le decimos que a esta escena le vamos a añadir la cámara.
Esto es súper importante, que la escena que creamos constantemente tenemos que ir añadiendo todo lo que queremos.
La escena, los objetos, la cámara, todo.
Todo lo tenemos que ir haciendo, ¿vale?
Ya tenemos la escena, la cámara.
¿Qué nos falta?
Nos falta el renderizador.
Así que le vamos a poner aquí un, a ver, player, o a ver si puedo buscar un, el play, que me parece reproducir, reproducir.
Es que me parece este, el más interesante, ¿vale?
El renderizador, renderizador.
Vale, el renderizador básicamente es el que renderiza la escena, el que digamos que le está dando, el que va a reproducirlo todo,
el que va a ponerle al play y vamos a dónde se va a tener que reproducir la animación, todo lo que tengamos, ¿ok?
Entonces, lo que le vamos a decir es, bueno, voy a crear el renderizador y el renderizador, ¿qué le tenemos que decir?
Porque tenemos diferentes renderizadores.
En este caso queremos utilizar UGL, pero hay otros diferentes, ¿vale?
Eso ya depende de cada uno.
Normalmente se utiliza UGL por temas de rendimiento, pero hay otros diferentes que podrías utilizar,
porque al final esto lo podemos renderizar de diferentes formas y podría tener diferentes casos de uso, totalmente diferentes.
Le tengo que decir también el ancho y el alto.
En este caso va a ser exactamente como el ancho y alto de nuestra ventana.
Luego le podemos poner el color de fondo.
El color de fondo es, o sea, no es obligatorio, es opcional, pero al menos para que así podamos ver exactamente que ya hemos empezado haciendo algo,
pues le voy a poner un color así como, no sé, no sé, le voy a poner de color negro, ¿vale?
Esto, aunque lo veas un poco raro, no deja de ser hexadecimal, ¿vale?
Y lo que tendríamos aquí, que le he puesto cero, esto es la opacidad.
Así que como quiero que se vea, le vamos a poner uno.
Ahora lo voy a poner totalmente de color negro, pero bueno, para que lo tengamos.
Esto es el renderer.
Y el renderer es finalmente la pieza que vamos a tener que meter en el DOM.
Así que el renderer, esto tiene un elemento del DOM que lo vamos a añadir en el BKG,
que es el elemento que tenemos aquí.
Este elemento de aquí es en el que le vamos a añadir este elemento del DOM donde tenemos el renderizador.
A ver, ahora mismo, vale, hostia, esto no sé por qué me ha, por qué me está metiendo eso.
¿Por qué se le está yendo a esto?
Import, import, y a ver qué dice por aquí.
No se encontró ninguna declaración.
Vale, eso es de los tipos.
Vamos a instalar los tipos de tree como dependencia de desarrollo, ¿vale?
Para que no me moleste con los tipos.
Pero no sé por qué.
¿Veis que me hace algo raro cuando guardo?
No sé por qué me hace algo raro.
No sé si es que la he liado con algo.
¿La he liado con algo?
¿Habéis visto?
¿Hay alguna cosa que esté mal?
No sé, ¿no?
Script, esto está cerrado aquí.
Hostia, se le va la olla.
¿Puede ser que sea por este comentario?
Sí, es por el comentario.
Es por el comentario que estaba en la línea.
Justo porque he puesto esto aquí, el comentario, pues se le estaba yendo la cabeza.
Súper raro, ¿eh?
Súper raro.
Y a ver ahora, porque ahora debería encontrar los tipos.
Ya lo hemos instalado.
Ahora sí que funcionan bien los tipos.
Vale, perfecto.
A ver si ahora también he escrito mal lo de WebGL Renderer, ¿no?
Porque como aquí se me está quejando, WebGL Renderer.
Este es, ¿no?
Ahí está.
Vale, igual lo había escrito mal.
Entonces, por eso se me estaba quejando.
Por eso es importante TypeScript, ¿vale?
Vale, ahora mismo, si yo me voy, voy a poner el componente,
que hemos creado.
Voy a quitar este, que esto, si no me equivoco, era el...
Esto lo vamos a quitar.
Vamos a utilizar el Smoke Background, este de fondo.
Y vamos a mirar en nuestra página.
A ver, la página aquí.
Vale, esta es nuestra página, pero en nuestra página ahora mismo,
pues no se ve absolutamente nada, ¿vale?
Vamos a ver en la consola, a ver si hay algún error o algo.
Vale, parece que no hay ningún error.
Pero es verdad que debería renderizarse...
Ah, no, es normal que no se renderice.
Es normal que no se renderice porque todavía ni siquiera le hemos dicho
que tenga que animarse, ¿sabes?
Que tiene que renderizar la escena todavía.
Tendríamos que decirle aquí, renderer, punto,
y decirle, renderiza la escena con la cámara, ¿vale?
Tendríamos que hacer esto.
Y ahora sí está ahí.
Ahora, todavía no estamos renderizando absolutamente nada.
O sea, es una pantalla en negro.
Es como un lienzo vacío.
Pero tenemos que justamente ejecutar esto.
Le tenemos que decir cuál es la escena
y cuál es la cámara que estamos utilizando para ver esa escena.
Por eso os decía que son tres elementos básicos.
Entonces, al menos ya tenemos como lo principal.
Voy a crear un cubo, que es el ejemplo más sencillo,
al menos para no empezar de cero
y para que veas cómo podemos añadir un objeto en la escena.
Pero no vamos a utilizar un cubo.
Luego utilizaremos unas texturas.
Pero al menos así vamos a tener la animación, el loop,
que es muy similar a cómo se hace en los videojuegos, la verdad.
Así que lo que vamos a hacer para crear también un...
Para crear un objeto, para crear un objeto,
necesitamos tres cosas también.
Tres cosas, ¿vale?
A ver, en realidad necesitamos dos y eso produce una tercera.
Pero necesitamos la geometría,
luego necesitamos el material
y luego necesitaríamos la malla, ¿vale?
O el mesh, como en inglés queda más bonito.
La geometría, el material y la malla.
Primero la geometría.
Pues podemos crear, por ejemplo, geometría.
Le voy a llamar geometry, aunque esto podría ser cubo,
porque al final podríamos crear una caja
y aquí tendríamos el ancho, el alto y la profundidad.
Esto veremos después que si lo cambiamos
podemos hacer un rectángulo,
podemos hacer diferentes formas,
se puede hacer de todo.
Pero en este caso sería para crear un cubo, ¿no?
Porque al final tenemos ancho, alto y profundidad de uno.
Luego el material.
Para crear el material tendríamos que decir,
vale, pues quiero crear un material básico.
¿Por qué básico?
Porque hay diferentes materiales.
Hay materiales que reflejan la luz, por ejemplo,
que al final les afecta la luz.
En este caso queremos que no tenga absolutamente nada raro,
sino que sea básico, que lo veamos y ya está,
y que no le afecte la luz ni nada.
Simplemente que tenga un color.
Vamos a ponerle aquí el color.
El 0x0099ff, ¿vale?
Y con la geometría y el material
ya podemos crear nuestro cubo, ¿vale?
Podríamos tener un cubo.
Vamos a crear la malla
y le pasamos la geometría y el material.
Yo creo que lo mejor,
sobre todo cuando estás empezando,
porque luego verás que hay código muy loco
de meten aquí directamente la geometría,
luego meten aquí directamente el material y tal.
Pero yo te recomiendo que siempre pienses como paso a paso
de creo la geometría, creo el material,
entonces creo la malla.
Creo esto porque si no luego te cuesta, ¿vale?
Y lo vas a mezclar.
Y así lo vas a ver mucho más fácil de generar.
Lo puedes crear con funciones
y va a ser mucho más fácil.
Y luego, pues nada, lo añadimos en la escena.
En la escena añadimos el cubo
y ya pues tenemos aquí nuestro cubo, ¿vale?
Un cubo que no tiene mucha historia,
como podéis ver, ¿vale?
Es un cubo que tiene profundidad,
pero no lo estamos viendo ahora mismo.
Porque claro, como está,
tal y como está, pues está pegado
y solo estamos viendo ahora mismo
una cara del cubo.
No estamos viendo el 3D.
Pero vamos a hacer una cosa
para ver lo más interesante.
Vamos a ver la animación.
O sea, cómo vamos a animar
todo lo que haríamos en 3GS.
Básicamente necesitamos una función, ¿vale?
Que sea animate.
Se puede llamar animate
o se puede llamar como tú quieras.
Y aquí podríamos hacer diferentes cosas.
O la podríamos llamar el renderer render, ¿vale?
Cada vez que animamos.
Y aquí podemos cambiar, por ejemplo, el cubo.
Podríamos decir, vale, pues vamos a rotar el cubo
y vamos a hacer que vaya girando.
Y tanto la X como la Y.
Y entonces así, pues vamos a verlo como en 3D.
¿Y qué pasa?
Que esto además lo que tenemos que hacer
es ir llamando en cada frame
a esta misma función animate, ¿vale?
Entonces, ¿qué va a ocurrir con esto?
Lo que va a ocurrir es
vamos a tener esta función
que en cada frame se va a llamar.
Aquí vamos a estar modificando
propiedades de nuestros objetos
y en cada frame va a estar renderizándose
en la escena con esta cámara constantemente.
Y esto lo llamamos por primera vez aquí
y cuando lo guardamos, bueno, pues ya vemos aquí ahora,
pues a ver, que está dando vueltas.
No se ve aquí como los vórtices y tal,
pero podemos ver como está dando vueltas.
Lo que está haciendo aquí cada frame
es que estamos cambiando un poco la rotación.
Podríamos cambiar, yo que sé, otras cosas.
Podríamos cambiar, por ejemplo,
no sé si la posición para que se fuese,
pero vas viendo que se va a ir moviendo para la derecha.
O que si queremos que también vaya para arriba,
poco a poco, ¿vale?
O podemos hacer también que se vaya acercando.
Pues también lo podríamos hacer,
que se vaya acercando, ¿no?
¿Ves? Se va haciendo más grande
porque se va acercando cada vez más a la cámara.
Podemos, obviamente, acelerarlo más.
Claro, demasiado.
¿Por qué?
Porque cuanto más alto sea,
pues más rápido irá.
Pero fijaos el rendimiento que tiene,
y que lo hemos hecho en un momento,
que tampoco hemos tardado mucho,
el rendimiento que tiene
de hacerlo como en 60 frames.
Que como esto está utilizando la GPU,
¿sabes?
Como está utilizando la GPU,
pues esto va súper, súper rápido.
Porque no está utilizando JavaScript
y está utilizando tu CPU.
Esto es todo, todo,
simplemente la tarjeta gráfica.
Por lo tanto,
está totalmente liberada la CPU
y por eso tiene tan buen rendimiento, ¿sabes?
Así que esto sería lo básico de 3GS.
Que más adelante, ya os digo yo,
que haremos un curso chulo, chulo,
para que lo podamos hacer más y más interesante.
Pero bueno, esto sería lo básico.
No vamos a usar un cubo,
como os podéis imaginar.
Lo que vamos a utilizar en nuestro caso,
voy a poner solo esto, el cubo por aquí,
vamos a utilizar partículas de humo
para darle ese efecto humo a la animación.
Y es que podéis animar,
podéis, por ejemplo,
cargar texturas de una imagen
y pegarlas a una geometría plana,
como a un papel,
y ponerle ahí la textura,
que es lo que vamos a hacer ahora.
Podemos crear aquí,
voy a crearlo,
no sé si crearlo por aquí,
bueno, voy a crearlo justo aquí, ¿vale?
Vamos a crear el smokeparticles,
que esto va a ser un array,
vamos a crear un array
y aquí vamos a tener todas las partículas de humo,
porque podemos crear 100 o 100,
esto lo vamos a poder configurar
sin ningún tipo de problema.
Vamos a tener también el loader de las texturas,
así que new, three, texture loader,
y este,
aquí a veces te puede dar problemas,
especialmente si lo desplegáis, ¿vale?
En localhost no pasa nada,
pero si desplegamos a un servidor,
puede ser necesario, ¿vale?
El cross origin.
Esto básicamente lo que hace
es decirle que podemos cargar este recurso
totalmente sin ningún tipo de problema,
sin necesidad de que haga la validación,
si este JavaScript se está ejecutando
en el mismo origen
que en el que estamos intentando cargar la textura.
Si intentáis cargar una textura de fuera,
seguramente os va a dar problemas,
si es una textura que tenemos,
como en nuestro caso,
en nuestra carpeta public,
seguramente no vamos a tener problemas,
pero esto, aunque os sorprenda,
es el mítico error de course,
así que si os da el problema,
con esto no debería pasar nada,
pero en nuestro caso yo creo que no lo necesitamos,
pero te lo explico
por si te pega, ¿vale?
Entonces, vamos a cargar la textura,
vamos a poner barra,
no sé si he puesto texture,
ah, smoke.web.p
Y aquí ya tendríamos la textura,
ya tendríamos la textura cargada.
Como veis es un callback.
Esto es totalmente asíncrono,
cuando carga esta imagen
ya tendríamos aquí la textura.
Lo primero que vamos a hacer es cargar un,
o crear un plano geométrico.
Básicamente es como una hoja de papel, ¿vale?
De 300 por 300.
Una hoja de papel.
Como para tener la textura pegada,
no hace falta que tenga volumen,
porque al final solo la vamos a ver en un plano,
la vamos a ver en 2D.
Por lo tanto, en lugar de crear un cubo,
lo que podemos hacer es como crear una hoja de papel
donde le pegamos justamente la textura.
Así que vamos a poner smoke.geo, ¿vale?
New3.
Y aquí ponemos el plan geometry.
Utilizamos 300 por 300,
no tiene ningún tipo de profundidad,
porque ya te digo,
es como un papel,
y por lo tanto solo tiene una cara.
O sea, bueno, podría tener dos caras y lo ves al revés.
Pero quiero decir que no va a tener profundidad de ningún tipo.
Es como una hoja, básicamente.
¿Vale?
Ahora tenemos la geometría.
Esto es todo el rato lo mismo,
como hemos hecho antes.
Geometría, ¿vale?
Geometría.
Ahora, ¿qué tenemos que hacer?
El material.
Con el material este es un poquito diferente al otro,
porque necesitamos el material que hemos cargado de la textura.
Por lo tanto,
vamos a crear mesh lambert material, ¿vale?
Y en este caso no necesitamos color,
pero sí que sea transparente,
porque la imagen,
si lo miramos,
tiene transparencias, ¿vale?
Por lo tanto,
tenemos que decirle también que sea transparente.
Y esto luego nos ayudará también a trabajar con la opacidad
de toda la imagen.
Pero le decimos que nos mapee la textura en esta geometría,
y le decimos que sí,
que puede ser transparente, ¿vale?
Así que ya teníamos el material,
y ahora lo que tendríamos que crear es la malla.
Pero no vamos a crear la malla una vez,
sino que vamos a tener cientos de veces la malla.
Así que vamos a crear aquí num of particles, por ejemplo.
Vamos a poner 300.
Ahora veremos cuál queda mejor, ¿no?
Entonces, vamos a crear let p igual a cero.
Vale, me parece...
Bueno, se parece bastante a lo que queremos hacer.
O sea, muy bien, GeekHackoPilot.
También es verdad que como me he basado en las PRs
que ha hecho estos dos chicos,
me imagino que el código es muy similar
en algunos sitios que ya estará hecho.
Entonces, ahora sí que podemos crear la malla
con la geometría y el material que hemos creado, ¿vale?
Utilizando esta geometría, que es un papel,
y el material que tiene la textura del humo,
vamos a crear aquí la partícula, ¿vale?
Una partícula, entonces, 3.mesh, 3.smokegeo,
¿vale?
La geometría y el material.
Ahora, esta partícula tendríamos que posicionarla
aleatoriamente en la X, la Y, incluso la Z, ¿vale?
Vamos a ver qué nos ofrece, ¿vale?
Bueno, esta sería una forma...
Bueno, la podemos hacer así.
Esta sería la X, ¿vale?
Posicionar la X, esta sería la Y,
y esta sería la Z, la profundidad, ¿vale?
Esto lo que va a hacer es que nos va a hacer
que las 300 partículas que estamos creando
nos pongan algunas en una posición de la X,
otras de la Y y tal.
Ojo, porque aquí nos está poniendo...
Esto sería de menos 250 a 250.
Esto sería de 250 a menos 250 y de menos 100 a 900.
O sea, que tiene sentido, aunque aquí yo creo que no tiene mucho sentido
porque si quedan por detrás no se van a ver.
O sea, esto no sé hasta qué punto tiene mucho sentido.
Vamos a ver cómo queda, pero yo creo que esto lo tendríamos que ajustar.
Este al menos.
Este puede tener sentido para que no quede muy en el medio
y quede más por los laterales, ¿vale?
O sea, que sea como que está alrededor del centro
en lugar de estar más en el centro, ¿vale?
Así que así pasacionamos aleatoriamente.
También podríamos hacer aleatoriamente la Z.
Básicamente, pues decirle que particle punto,
la rotación de la Z sea un más random.
Y esto tiene que ser en grados.
Así que le ponemos 360 y así empezarán de diferentes formas.
Y a esa añadimos la partícula en la escena.
Así que es thin.addParticle.
Añadimos la escena.
Y añadimos la partícula al array.
Hemos hecho un array aquí, justamente aquí, smokeParticles.
Así que vamos a hacer un push de esta partícula
para guardarla después por si tenemos que modificarla,
tenemos que eliminarla, tenemos que hacer lo que sea, ¿vale?
Así que ya tendríamos toda la carga de la textura del humo.
Hemos creado 300 partículas, las hemos posicionado, ¿vale?
Y ya lo que tenemos que hacer es para ver como si se ve o no se ve.
Así que vámonos por aquí.
Vale, no se ve nada.
No se ve nada.
No se ve nada.
Pero la pregunta del millón es, ¿están ahí realmente?
O sea, ¿realmente están ahí?
Podemos hacer dos cosas.
Uno, seguramente no se ven porque no hay iluminación, ¿vale?
O sea, no se ve nada porque, claro, no está nada iluminado.
Podríamos ver en todo caso, no sé si podríamos cambiarle el fondo a esto.
Voy a quitar por un lado, a ver aquí.
No sé si cambiándole el fondo igual aparece algo.
Se ve algo.
No sé si lo veis, ¿vale?
Se ve algo, ¿vale?
Se ve un poquito.
Claro, es que de color negro, pues no se ve nada, ¿eh?
Pero, vale, ¿veis?
Está ahí.
Está ahí.
Lo que pasa es que ahora mismo no está haciendo nada.
Entre quien no tiene iluminación de detrás.
Claro, si le ponemos que el color sea totalmente oscuro y no hay ningún tipo de iluminación,
pues el humillo ese no hace nada.
Luego también, el humillo ahora es estático.
Como veis, aunque está muy chulo esta textura, está estática.
No tiene ninguna cosa.
Entonces, vamos a intentar primero añadirle la animación y luego vemos si necesitamos iluminación, ¿vale?
Entonces, primero haremos que se anime un poquito, que veremos a ver si realmente tenemos que hacer alguna cosita.
Que es muy sencillo.
O sea, igual que en el animate aquí habíamos hecho esto, el cubo ya no lo necesitamos.
Vamos a quitarlo.
Y así nos simplificará un poquito el código este.
No necesitamos el cubo.
Lo quitamos.
Aquí lo que podemos hacer básicamente es que como ya tenemos aquí todas las partículas,
vamos a hacer un forEach y para cada partícula vamos a rotarlas.
Vamos a decirle, vale, pues la partícula, la posi...
Bueno, sí, la rotación de la zeta vamos a hacer...
Aquí veremos si es demasiado rápido, si es más lento, si lo que sea, ¿vale?
Vale, aquí se me queja porque...
Ah, porque es del tipo any.
Vale.
Vale, esto no pasa nada.
Le podemos decir que esto es un array de 3.mesh y con esto ya no deberíamos tener ningún problema.
Vale, vale.
Pues vamos a ver ahora.
Vale, ahora ya se está animando así un poquito.
Está haciendo alguna cosita.
Yo creo que un poco demasiado rápido, así que seguramente lo vamos a bajar algo así.
Vale, y al menos ahora lo tendríamos así.
Todavía le faltan cosas.
Por ejemplo, esto debería quedar detrás del todo porque esto vamos a ponerlo así para que quede por detrás justamente de esto.
Como es bastante...
Vale, ahora ahí hay otro problema que luego lo arreglamos porque fijaos que si yo empiezo así la página y luego la hago más grande...
Hay un error ahí.
Pero bueno, al menos el humillo, lo que es el humillo al menos se ve.
No sé si lo veis.
No sé si se nota mucho, ¿eh?
No sé si se nota mucho.
¿Lo notáis?
No sé si lo notáis porque estoy mirando en la pantalla y no se ve mucho.
¿Sí se nota?
¿Sí?
Bueno, pues a ver, que todavía lo podríamos arreglar un poquito porque seguramente vamos a tener que jugar un poco con la iluminación.
Aquí también vamos a necesitar, por ejemplo, bajarle...
Yo creo que con la iluminación mejorará bastante.
Aquí ahora sí que se nota bastante.
Ahora sí que se nota bastante el hecho.
Pero esto está bastante chulo, ¿no?
Porque además, al ser aleatorio, cada vez será diferente.
Ahora haremos que tenga el modo oscuro y también el modo claro.
Porque claro, si ahora pongo el modo claro vais a ver que se ve fatal.
Entonces, no os preocupéis que esto lo vamos a arreglar también para que se vea bien con las dos, ¿vale?
Con el modo claro y el modo oscuro.
Vale.
Entonces, ¿cómo se ve en móvil?
Pues el móvil se verá exactamente igual, pero en pequeñito.
Lo pondremos así y se verá en pequeñito.
Entonces, ahora lo arreglamos.
Ahora lo arreglaremos.
Esto también lo arreglaremos.
No os preocupéis, ¿eh?
No os preocupéis.
¿Pero se pierde todo el color de fondo?
No, lo vamos a ir arreglando.
Lo vamos a ir arreglando.
No os preocupéis.
La idea es, el color de fondo era algo así de 3, 3, 3, 3, 3, 3.
Entonces, a ver, puedo intentar añadir, tiene su cosa, pero podemos intentar añadirle como una luz, ¿vale?
Para que básicamente le añada una luz por detrás y que así gane un poquito.
O sea, que quede el fondo, tenga la luz y así la luz ilumine un poco la textura.
Podemos intentar.
Y si no, pues igual queda exactamente igual y ya veremos cómo lo hacemos.
Si no, jugando también con el tema del fondo y la opacidad.
Que a lo mejor jugando con el fondo y la opacidad de la malla ya queda bien.
Entonces, ¿qué es lo primero que vamos a hacer?
¿Qué hacemos primero?
¿Intentamos la luz?
¿Intentamos la luz?
A ver.
Vale.
Vamos a intentar la luz.
A ver, ahora mismo se supone que tiene exactamente...
Claro, está bastante oscuro, pero se supone que tiene el color que tenía antes.
Lo que podemos hacer aquí antes de esto...
Vamos a añadir aquí...
Añadir una luz direccional, ¿vale?
Vamos a crear la luz, new, three, directional light.
Le ponemos el color de la luz, que sea en blanco.
Y esta es la intensidad de la luz, 0.5.
Si es 1, pues será más fuerte.
Le tenemos que poner la posición de la luz.
En este caso...
Vale.
Aquí, pues lo podremos ir moviendo.
Es difícil saber dónde queda la luz.
Yo lo voy a poner más o menos así.
Y ahora te enseñaré una herramienta que está muy chula de 3GS para saber de dónde viene la luz exactamente.
Se supone que esto es la X, la Y y la profundidad, ¿vale?
Pero ahora la arreglamos.
Y añadimos a la escena la luz.
Obviamente, ahora con esto...
¿Veis que ahora tiene como más luz?
¿Vale?
Pues la luz nos ha ayudado a recuperar el color que se supone que debe tener ese fondo, ¿vale?
Y ahora sí que se parece un poco más.
Y el estilo del humillo, pues ahí sigue.
Pero tampoco llama tanto la atención.
Que podríamos, pues de nuevo, ir jugando.
Podríamos bajar aquí la intensidad un poquito.
Entonces quedaría más oscuro.
Si le subimos mucho la intensidad, quedaría más claro, ¿vale?
Yo creo que por el medio, más o menos.
Y lo que os decía es que para que tengáis claro de dónde viene la luz, porque viéndola así es muy difícil.
Podéis añadir un helper, ¿vale?
Que sea del palo helper, new3, directional, directional light helper, ¿vale?
Aquí tenemos la luz y aquí tendríamos como de grande queremos que aparezca el helper, ¿vale?
Lo añadimos en la escena y así podemos ver más bien de dónde viene la luz, ¿vale?
Ahora lo podemos mover aquí y vais a ver que si le pongo 10, pues se va más a la derecha.
Podríamos ver un poco de dónde viene la luz.
En este caso, claro, cuanto más lejos lo pongamos, menos se notará.
Pero yo creo que con que lo pongamos bastante cerca, pues se notará un poquito más, ¿vale?
No sé si le he puesto... Vamos a ponerlo por aquí, que se notará un poco más y ya está.
Esto más que nada, sobre todo, aquí no se nota tanto, pero si tienes un cubo que tenga sombras,
lo vas a notar mucho más claro, porque vas a ver cómo se proyecta la sombra.
O sea, que puedes hacer que tenga sombras o no, que eso está bastante interesante.
Pero bueno, esto más o menos para ver de dónde venía la luz, para que lo vieseis, ¿vale?
El tema de la posición.
No porque afecte mucho a lo que estamos haciendo, pero más que nada para que lo veáis.
Vale, entonces vamos a arreglar ahora dos cosas.
Una, el tamaño, ¿vale?
El tema de... Vamos a tener aquí una función resize porque tenemos un error
que básicamente si yo tengo esta página aquí y la hago grande, ¿veis?
Queda así, que queda como roto.
Bueno, esto lo vamos a tener que arreglar.
Entonces, vamos a crear aquí una función resize, ¿vale?
Y aquí vamos a tener que crear otra vez la h, window, ¿vale?
Esto creo que lo he puesto como constantes aquí arriba.
Vale, pues lo vamos a poner como led por si la volvemos a utilizar
y así utilizamos justamente la misma variable.
La cámara tiene que cambiar su relación de aspecto con el nuevo alto y nuevo ancho, ¿vale?
Porque claro, si le cambiamos el alto y el ancho, la cámara también se ve afectada
y solo tiene que renderizar lo que está ahí dentro.
Eso es lo que tiene que ver.
Así que le tenemos que decir esto.
Una vez que actualizáis la cámara, tenéis que ejecutar este método.
Este método lo tenéis que ejecutar siempre que cambiáis los parámetros de la cámara, ¿vale?
Básicamente es porque se tiene que actualizar internamente
y una vez que le ponéis esto no detecta el cambio como si nada,
sino que tenéis que decir, oye, quiero que la proyección se actualice con estos nuevos valores, ¿vale?
Aquí tendríamos ya la cámara, pero también necesitaríamos cambiar el renderer.
El renderer tendríamos que ponerle el nuevo size y con esto, en principio,
tendríamos el método que tenemos que llamar cada vez que hagamos un resize.
No es lo más, ahora mismo, lo más performante,
porque habría mejores formas de hacer este resize.
Esto, claro, esto se va a disparar, a disparar continuamente,
continuamente mientras hace el resize.
O sea, para que lo veáis más claro, si yo pongo aquí un console.log,
y pongo aquí el resize, vais a ver que conforme yo voy arrastrando esto,
¿veis? Se llama constantemente.
Pero también es verdad que si os fijáis, ¿ves? O sea, refresco y tal,
no va a bloquear mucha cosa porque casi todos los cambios que estamos haciendo
son más de la parte de 3GS que va a ser con la GPU.
Aún así, podríamos mejorarlo para que solo cuando lo suelte,
realmente entonces cambie todos estos valores.
Pero lo más importante es que ahora ya no está roto, ¿veis?
O sea, y funciona bastante bien.
Ahora, si empiezo aquí y lo hago grande,
pues se ajusta todo como justamente estábamos esperando, ¿vale?
Así que al menos el resize ya lo tenemos arreglado, perfecto.
Ahora nos falta lo del modo claro y el oscuro.
Con estas animaciones nos afecta al rendimiento.
Lo bueno que tiene, al final, lo bueno que tiene de rendimiento,
como he dicho, es que todo esto se está haciendo en la GPU,
en la tarjeta gráfica.
Por lo tanto, el impacto de rendimiento es muy pequeño
porque lo está llevando toda la tarjeta gráfica.
Sería mucho peor si justamente lo hiciésemos con la CPU.
O sea, sería mucho peor, ¿vale?
Y lo bueno que podemos hacer de esto,
porque 3GS ocupa bastante,
podríamos importar esto de forma dinámica,
de forma que solo cuando se cargue 3GS
de forma totalmente en segundo plano,
entonces que realmente empieza a verse y ya está, ¿vale?
Voy a hacerlo del modo claro y oscuro
y así ya tendremos cómo se ven en claro y en oscuro
y ajustaremos un poquito más los colores.
Pero lo del claro y oscuro me parece bastante interesante
porque así también podemos ver cómo tiene que cambiar justamente esto.
Porque ahora en modo oscuro parece que más o menos se ve bien ahí.
Es humillo, ¿vale?
Pero en modo claro se ve fatal, se ve fatal.
Vamos a arreglarlo.
Vamos a hacer diferentes cosas.
Lo primero, en el ThemeToggle,
aquí tenemos este GetThemePreference, ¿vale?
Tenemos todo esto.
Hostia, que veo que esto lo podríamos arreglar.
Vale, esto lo vamos a extraer y lo vamos a llevar al layout
y vamos a hacer aquí un script en línea, ¿vale?
Y vamos a meter esto por aquí, ¿ok?
Vale, esto lo vamos a poner aquí porque, a ver,
a otras cosas que veo que podríamos localitem, esto total no tiene sentido acceder dos veces a esto
porque si esto al final es true, entonces esto lo ponemos aquí
y esto que devuelva el localitem, ¿vale?
Esto por aquí.
Y esto si no, entonces que devuelva un matchmedia, dark y light.
Vale, esto está bien.
Y luego, si es dark, es que el GetThemePreference es dark.
Vale, esto, hostia, esto está interesante porque esto es una cosa.
Esto no lo hagáis así.
No pasa nada.
Esto alguien haría la PR y no me fijé.
No pasa nada.
Esto está bien, ¿eh?
No pasa nada.
Pero existe una forma mejor de hacer este código que yo creo que está soportado por casi todos los navegadores.
Toggle classlist, a ver, classlist, yo creo que el toggle don'ts no support el segundo parámetro,
pero veo que el segundo parámetro, a ver, solo Internet Explorer no lo soporta, el segundo parámetro.
Vale, es que esto se puede hacer más o menos parecido, pero podéis utilizar el toggle, ¿vale?
Exacto.
Utilizáis el toggle y le decís, tienes que ponerle la clase dark si este es true.
¿Sabes?
Y se lee mucho mejor que no tener que hacer todo esto de añadir o eliminar en el caso.
Porque esto lo que dices es, esta clase, si esto es true, añade o quita esta clase.
Y ya se entiende, o sea, es como más fácil de entender sin necesidad de hacer eso que es un poquito más tricky, ¿no?
Es como más fácil, creo yo.
Entonces, solo hay que tener cuidado con el soporte.
El 98,5% ya lo soportan, pero si por lo que sea tenéis que soportar Internet Explorer 11,
pues que sepáis que no lo soporta todavía.
Pero bueno, no soportamos Internet Explorer 11, ¿vale?
Entonces, para facilitar esto, porque si no estaría mucho rato y me gustaría hacer otra forma,
pero ahora mismo no da tiempo, voy a hacer una cosilla y es que voy a poner un window.gethingpreference.
No hagan esto en vuestras casas.
Básicamente voy a añadir en el window para poder acceder a esta función de aquí, ¿vale?
De hecho, podría ponerlo directamente en el window aquí, ¿eh?
Y ya está.
Y nos olvidamos para que siempre lo tengamos ahí claro y ya está.
Window.gethingpreference.
Y aquí lo que podríamos hacer, que nunca me acuerdo cómo se declaran estas cosas.
Nunca me acuerdo.
Creo que es declare window.
Window, ¿sí?
Y aquí directamente podríamos poner gethingpreference, creo.
Y aquí le vamos a decir dark o light.
Creo, no.
Function, creo que es así.
No.
Declare, no, no es declare.
Extend, ah, no, acuerdo.
Extend, window, global, astro.
Estoy bastante seguro.
Mira, extender, ta, ta, ta.
Extend.
Esto básicamente para que no nos dé problemas.
Interface, joder, eso.
Interface, window, ¿vale?
Y entonces ya no necesitamos esto.
Ahora, esto es, esto es.
Entonces ya lo tendríamos, ah, pues no, me ha dejado, ah, bueno, pero porque a lo mejor lo tenemos que recargar.
Si hacemos un reload, ahora yo creo que sí que lo debería detectar.
A ver, cargando, no, me pone any todavía.
Hostia, puesto aquí, esto debería ser light, ¿vale?
Esto debería ser así.
Creo que lo he hecho bien.
O light le faltan, sí, gracias.
Pero creo que light, creo que lo he hecho bien.
Creo que lo he hecho bien, no sé.
Ahora miraremos, a ver, gethingpreference.
Creo que sí.
Si no, ahora veremos si lo puedo llamar correctamente.
Vale, entonces, en el layout vamos a poner esta parte de gethingpreference.
Aquí lo vamos a quitar.
Ya no necesitamos todo esto.
Esto lo quitamos, ¿vale?
Y aquí, vale, ¿por qué se queja esto?
Ah, porque ha sido usado antes de ser definido.
Estos son problemas que ya existían aquí.
Vamos a pasar esto a funciones, que además creo que tiene un poquito más de sentido.
Y así ya no tenemos ese problema, porque ese problema solo pasa con las constantes, porque cuando se definen, las tienes que definir con el orden correcto y tal, ¿vale?
Entonces, vamos a poner esto y aquí vamos a utilizar el window.gethingpreference, que, vale, ya está aquí perfectamente, ¿ok?
Vale, esto ya estaba hecho.
Lo único que he hecho es ajustarlo para que lo podamos reutilizar y que utilice el gethingpreference que tenemos ahora en el layout.
¿Por qué lo he hecho?
Porque esto nos va a ayudar a nosotros también para poder preguntar a SmokeBackground, básicamente, también cuál es el que tenemos.
Entonces, voy a hacer una cosa.
Vamos a crear aquí, aquí justamente, un theme.
Vamos a tener el dark, ¿vale?
Y vamos a tener el light.
En el dark, lo importante es que tenemos el background, que aquí no sé qué le he puesto.
Vamos a probar 5, 5, 5, 5, 5.
Vamos a poner la luz, que la luz hemos utilizado que sea todo blanco.
Y la opacidad de las partículas, ¿vale?
Y en el light vamos a poner un background de 0x.
Ahora lo ajustamos y hace falta.
La luz, bueno, la luz es exactamente lo mismo.
No sé para qué lo vamos a...
Pero bueno, ¿vale?
Estos serían los dos themes.
Entonces, el current theme va a ser window...
Bueno, current...
¿O cómo le llamos?
Theme preference.
Theme preference.
Va a ser el window.getThemePreference, ¿vale?
Que esto nos va a decir si es light o dark.
Y entonces ya podemos recuperar el current theme,
que eso lo tenemos que ir a theme, theme preference.
Y esto vamos a poner que sea una constante,
para que no la podamos modificar, que todo sea solo de lectura.
Aquí ya tendríamos el current theme.
Y lo único que tendríamos que hacer es decir, vale,
pues aquí vamos a cambiar la opacidad según lo que tengamos en el theme.
Luego, la luz...
Ah, la luz es que está justo arriba.
Vale, pues esto lo vamos a hacer aquí.
Vale.
Esto lo vamos a hacer aquí.
Vale.
Añadir una luz...
Vale.
La luz, la luz por si la tenemos que cambiar, ¿eh?
Básicamente, current theme punto la luz.
Y el fondo...
Vale, el fondo está justamente arriba.
Vale, pues esto lo vamos a hacer también un poquito más arriba.
Esto lo tendríamos que separar en funciones, ¿eh?
Que esto también yo...
Es porque lo he hecho así un poco a saco,
porque te querías picar paso a paso y no liarte con abstracciones y tal, ¿vale?
Y este sería el current theme punto background, ¿vale?
Entonces, esto va a hacer...
¿Vale?
Por ejemplo, este se supone que es el modo oscuro.
Ahora...
No.
Este es el modo claro.
Este sería el modo claro.
¿O cuál sería el modo oscuro?
Ahora tengo dudas.
A ver.
Este es el...
Este es el modo claro.
Este es el modo claro.
Claro, es que como se parecen tanto...
Este es el modo claro.
Sí, es el modo claro.
Este es el modo claro y tiene la...
Con todo el humo y tal, ahí moviéndose.
Este sería el modo claro, ¿vale?
Ese es el modo claro.
Lo que pasa es que a veces no es tan claro, ¿eh?
Porque como que tiene...
Igual tendríamos que ajustar un poquito más la opacidad
para que sea un poquito menos,
porque me parece como que se ve demasiado las partículas, a lo mejor.
Y claro, como las partículas son bastante oscuras,
a lo mejor podríamos cargar dos texturas diferentes.
Una más oscura que la otra.
Esto habría que ir mirando, ¿vale?
Pero podríamos trabajar un poco para esto,
para que sea un poquito menos claro.
O sea, claro, es que si no...
Algo así, ¿vale?
Este sería el claro, ¿vale?
Este sería el claro, el modo claro,
y este sería el oscuro.
¿Pero qué pasa?
Que tenemos que refrescar.
Este sería el oscuro.
Entonces, ahora lo que nos faltaría es un detalle más
que sería detectar cada vez que estamos cambiando esto.
Hay diferentes formas de hacerlo.
Podríamos utilizar el MutationObserver
para detectar cuándo se cambia la clase y tal,
pero yo creo que ya teniendo la capacidad
de que nosotros aquí tenemos el UpdateThemeMessage,
que ya sabemos cuándo se está cambiando cada cosa,
o sea, yo lo que creo, la verdad,
es que esto a lo mejor tendría más sentido.
HandleToggleClacking, UpdatingMessage,
y esto...
Esto...
Hostia, esto que se cambie aquí...
Es que tengo dudas.
Esto de que se cambie exactamente aquí,
la primera vez, ¿tiene sentido que se cambie?
¿Sabes?
O sea, esto tiene sentido llamarlo la primera vez
que se cambie.
Porque si lo tenemos aquí,
y aquí ya se está aplicando directamente,
yo diría que esta línea no tiene sentido.
A ver, la voy a comentar,
y luego la descomento a ver si he roto algo.
Pero yo creo que esto no tiene sentido
porque ya se estaría aplicando
el estilo correctamente aquí.
Ah, claro.
Lo tiene que aplicar porque
se están haciendo todos estos cambios.
Entonces, por eso lo está aplicando.
Vale, vale.
Por eso lo está aplicando.
Porque esto, si no,
tenemos que hacerlo desde el servidor
para que se viese correctamente.
Bueno, vale.
Tiene sentido.
Ojalá lo podamos hacer desde el servidor
justamente para evitarlo llamar sin necesidad.
Entonces, cada vez que llamemos a cambiar el theme,
lo que podemos hacer es enviar un evento.
Podríamos enviar un evento,
básicamente,
window dispatch event,
¿vale?
Con un custom event.
Y en el theme change,
a ver, en realidad esto podría ser un evento.
No hace falta que hagamos esto,
que le enviemos la información.
Puede ser un evento normal y corriente.
Porque theme change.
At least click, theme change.
Vamos a poner así, theme change.
¿Vale?
Enviamos un evento de que hemos cambiado el theme.
Y esto ya directamente lo podríamos escuchar aquí.
Podríamos hacerlo también con un estado global.
Podríamos hacer un montón de cosas.
Pero me da la sensación que sería como hacer demasiadas cosas
para algo muy sencillo.
¿Vale?
Así que ya teníamos aquí.
Y aquí simplemente tendríamos que ver
lo que hemos hecho aquí antes.
O sea, teníamos que copiar el código que hemos hecho aquí.
Este código que hemos hecho aquí.
Pues este código.
Teníamos que volver a recuperar cuál es la preferencia.
Tendríamos aquí el theme.
Tendríamos que cambiar un par de colores.
Aquí sí, a mano.
¿Vale?
Pero ya lo tendríamos.
Todo lo demás.
O sea, teníamos aquí el current theme.
Este le vamos a quitar que sea una constante
para actualizar la variable que tenemos arriba.
Esta de aquí.
¿Vale?
Vamos a poner que es led.
Así desde dentro,
si se vuelve a renderizar algo como las partículas,
va a recuperar el nuevo valor.
Porque como se renderiza en cada frame,
va a recuperar el valor nuevo.
¿Vale?
Y aquí,
lo único que tenemos que hacer es actualizar
el del renderer,
el color.
¿Vale?
Y le ponemos el current theme con opacidad 1.
Y básicamente,
no, esto no hace falta.
No hace falta hacer esto porque esto lo hace ya en cada frame.
del color de la iluminación,
que en este caso es la misma exactamente.
Así que sería la luz.
Claro, le he llamado light,
que parece light,
pero se refiere a la luz en este caso, ¿no?
Entonces, con esto tendríamos el modo oscuro
y el modo claro que me ha dejado fatal.
A ver.
A ver, modo claro, modo oscuro.
Ahora sí.
Ahora sí.
¿Vale?
Este sería el modo claro.
Le damos aquí.
Y este sería el modo oscuro.
Ahora el modo claro.
¿Vale?
Y ahora está cambiándolo todo.
Está cambiando todo lo que es el polvillo,
está cambiando el fondo,
está cambiando todo.
Pero fijaos que no lo estoy reiniciando
porque el movimiento del polvillo
está exactamente igual
porque no nos interesa
que se tenga que volver a refrescar.
También es verdad que como,
hostia, otra vez.
Me ha dejado ahí.
Me ha dejado roto.
¿Qué ha pasado?
A ver.
Me ha dejado roto ahí.
Porque ahí no me lo estaba pillando, ¿no?
O sea, sí que parecía que estaba bien.
Puede ser que haya una lógica regular, ¿no?
Hay una lógica regular.
¿Puedes añadir una transición
al cambio del color de claro-oscuro?
Se podría añadir.
Se podría poner una transición
arriba del todo y ya.
Yo veo que el claro es el claro
y el oscuro es el claro.
Bueno, es que claro.
Este es el claro.
Es el claro porque el fondo es blanco, ¿no?
Y luego tendríamos el oscuro
porque el fondo es oscuro.
Así que ese sería un poco el tema.
¿Vale?
Ahora sí que funciona,
pero me da la sensación
que hay en algún momento
que no funciona.
En este caso, ¿no?
En este caso.
Cuando estamos en el modo oscuro,
¿no?
Me da la sensación
que cuando estamos en el modo oscuro
no pasa el otro, ¿no?
Ahí hay un...
Hay una cosa rara, ¿no?
Oye, Arashio,
muchas gracias por regalar
cinco suscripciones de la comunidad.
Muchas, muchas, muchas gracias.
Gracias, hombre, por el regalazo.
Muchas gracias.
Es culpa de Astro.
¿No hace falta dejar de escuchar el evento?
No, o sea, el evento tiene sentido.
Lo que puede ser current theme...
Aquí el current theme...
A ver, podemos ver aquí
el theme preference
que nos está devolviendo en todo momento.
Lo podríamos mirar aquí.
¿Ves?
Aquí...
Hostia, ¿por qué no me está pillando esto?
A ver, lo vamos a mirar aquí.
En el current theme...
Ah, bueno, claro.
Tiene sentido aquí.
¿Vale?
Si le doy...
Esto es light.
¿Vale?
Pero en el light,
aunque estoy haciendo
set clear color,
es como que no me lo está cambiando.
A ver, que entiendo que sí que lo...
O sea, cambiar lo está cambiando.
¿Ves?
Es el light,
pero no ha cambiado aquí el fondo.
No lo está haciendo.
Si volvemos a hacer lo mismo aquí,
dark light.
¿Ves que no cambia el fondo?
No sé por qué no cambia el fondo.
Es raro esto,
porque aquí en el background este
sí que lo...
Si miramos...
No sé.
Set clear color.
Set clear color.
Aquí lo he puesto bien, ¿no?
No sé si es que tengo que ejecutar algo.
Yo creo que el problema es que a veces
se agolpan los smokes
y queda muy oscuro.
No, pero eso no pasa.
No le pasa la opacidad.
No le pasa la opacidad
en el reset del theme.
No le pasa la opacidad.
No, pero la opacidad...
O sea, ahora mismo
el problema es el fondo.
Es el fondo.
O sea, el problema es el fondo.
Ahora mismo.
¿Vale?
Es el fondo.
Cuando aquí,
cuando pasamos de uno a otro,
como que hay algo del fondo aquí
que el color del fondo
no lo está cambiando.
Y debería.
El color del fondo
no lo está cambiando.
Este color de aquí del render.
Vamos a ir con analfa
for the opacity.
O sea, este current theme background
como que no lo está.
Current theme punto background.
A ver si lo hemos puesto bien.
¿Vale?
Esto sería por aquí.
Esto...
Cuando le damos aquí,
5, 5, 9, 2, 4, 5.
¿Vale?
Eso es porque es como funciona
con los números.
O sea, sí que los estaba pillando.
De hecho, aquí sí que está haciendo
el cambio perfectamente.
Aquí está haciendo bien el cambio.
El problema está
cuando yo empiezo
desde este.
Entonces...
No, desde este.
Y entonces le digo de cambiar
y no lo está haciendo bien.
¿Veis que no lo cambia?
La madre que lo parió.
Tendría que hacerlo mucho más claro
y no lo hace.
Qué raro, ¿no?
¿Por qué lo está...?
Dale hasta que pete.
No, no, no.
No es que creas el evento
en el update message.
No, pero da igual, ¿no?
O sea, está entrando aquí
sin ningún tipo de problema, ¿eh?
Es la luz.
Está seteando la posición
de la luz.
Ah, estoy seteando
la posición de la luz.
Tienes toda la razón.
Esto debería ser setx, ¿no?
Claro, claro.
Tienes razón.
Bueno, a ver.
No sé si es la luz.
A ver.
No, pero aún así...
¿Veis que no me está cambiando?
Aquí funciona bien.
En este punto está bien.
Pero en este hay un punto que desde que...
O sea, esto estaba mal, claramente,
pero alguna cosa todavía no está bien del todo, ¿eh?
No es por el default.
No, porque es justo cuando estoy cambiando.
Puede ser que tenga el request frame.
No.
Si se pone el fondo transparente
y que coja el del layout,
lo podríamos probar.
A ver si le...
Todo el set color.
Lo que pasa es que...
A ver, set killer color.
Le ponemos opacidad cero.
Y ya está.
A ver.
Opacidad cero.
Y tal.
Ahora aquí, este sería el modo claro.
¿Ves?
Pero justamente...
Puede ser que lo que no está...
Ahora sí que...
Ahora se supone que está con el...
Con la opacidad, ¿eh?
¿Ves?
Y ahora sí que está haciendo...
Pillando uno y el otro.
Pero aún así, es cuando...
Hay un error, me parece...
O igual...
Ah, igual he metido yo el error.
Igual he metido...
Ah, no.
Ahora sí que está haciendo bien.
Ahora sí que lo está haciendo bien.
Ah, sí que lo está haciendo bien.
Pues, mira.
Ya está.
Con lo de el...
Con lo de la...
Con lo de que pillé el de fondo ya estaría.
Bueno.
¡No!
Todavía.
¡Otra vez!
¡Otra vez!
Hostia, otra vez.
No sé.
No sé si es un tema raro.
No sé si es culpa del cambio que hemos hecho aquí del Isdark y todo esto.
Que a lo mejor es...
No, es que no tiene sentido.
No tiene sentido.
Pero es como que hay en algún momento que no sé por qué...
Este.
O sea, cuando yo empiezo aquí, que estoy en el Dark, ¿vale?
Estoy en el Dark.
Vamos a ver.
Estoy en el Dark.
Tú, tú, tú, tú, tú.
Estoy en el Dark.
O sea, que aquí pone Dark.
A ver, que aquí hay una consola.
No.
Vale.
Estoy en el Dark.
Cuando empezamos con el Dark y pasamos al Light, el problema es que no está pillando el fondo.
El fondo está mal.
Entonces, si miramos el fondo, por ejemplo, que aquí pone Background Image y tal.
¿Veis aquí?
Background Image.
Background.
Da igual lo que pongamos porque realmente, como podéis ver, claro, es que la textura está pillando demasiado.
O sea, que el fondo ni siquiera se está viendo.
Porque fijaos que si le cambio el fondo a blanco y tal, sí que se ilumina un poquito, pero tampoco se ilumina nada del otro mundo.
Entonces, ahí ese punto no es.
Entonces, el tema de la opacidad, ¿no?
En el Opacity del Background este.
Esto ya lo hemos quitado.
Si le ponemos aquí la opacidad de esto, Currency Opacity.
Ahora estaríamos en Light y, por lo tanto, la opacidad tendría que ser bastante baja.
Que sería esta, debería dejar de pasar bastante la luz.
El Clash se le quita el valor del Dark.
Bueno, pero eso tiene sentido porque ya no está Dark.
En realidad, lo malo es que parece que esté Dark por culpa de esto.
Pero, ¿veis?
Ya no está Dark.
El problema es que este Smoke, por lo que sea, no está pillando bien.
No sé si es el tema de las opacidades.
A lo mejor tenemos que...
A lo mejor...
Pero es que, claro, si esto se está ejecutando en cada frame, igual me he equivocado.
Y es que no se está ejecutando esto en cada frame, claro.
O sea, que no, que la he liado porque creo que esto voy a tener que volver a ejecutar todo esto.
O sea, voy a tener que volver a hacer que para cada...
Voy a tener que hacer que para cada partícula...
Yo creo que es eso, ¿eh?
Que para cada partícula vamos a tener que actualizarle la opacidad.
Al final va a ser eso.
Que creo que me lo ha dicho alguien.
Creo que me lo ha dicho alguien.
Opacity...
Claro, pero para cambiarle a Opacity...
Claro, ¿cómo se le puede cambiar la Opacity?
Justamente.
Claro, yo creo que ese es el problema.
Yo creo que ese es el problema, ¿no?
Que la partícula...
A ver...
Ah, mira.
Joder, me lo está chivando ahí.
No, pero yo creo que así no es, ¿eh?
Yo creo que esto no cuela.
Yo creo que así no cuela.
¿Cómo se le podría cambiar la opacidad a un material?
Yo creo que ese es el problema, ¿eh?
¿Puede ser por el más random?
No.
Yo creo que el problema es este.
Que le tenemos que cambiar la opacidad al material.
Ese es el problema.
Una instancia, no sé qué, ¿vale?
Opacity...
No existe en el tipo material.
A ver, si miramos aquí...
¿Y qué tiene?
Es que, claro, me pongo material.
Una instancia de material.
Pero si miramos aquí...
Constructor, isMaterial, AlphaHash.
AlphaTest...
AlphaTest, no.
BlendAlpha.
A lo mejor BlendAlpha...
¿Te cuesta emplear?
¿Te pruebas un nivel?
¿Cuándo cuesta?
No.
BlendColor...
¿Es raro que no te va...
Directamente que no se pueda poner la Opacity?
Opacity...
Ah, pues sí que está.
De hecho, está aquí.
O sea, que ¿por qué me dice que no existe?
Si justamente ahí sí que pone que esté.
Bueno, no lo sé.
Pues eso que me parece que es que tenemos que cambiar justamente la opacidad.
O sea, que cuando estemos aquí...
Ahí está.
Ahora sí, ¿eh?
Ahora sí.
Ahora sí.
Ahora sí.
Ese es el problema.
Que no se le estaba cambiando la opacidad.
Yo pensaba que sí, pero no.
Ya está.
Ese es el problema.
El problema es que no le estábamos cambiando la opacidad.
Lo que tenemos que hacer aquí...
No sé por qué esto dice que no existe.
Porque sí que existe.
De hecho, cuando entras aquí a la instancia, te aparece.
No sé si habrá setOpacity.
No, pero fijaos que está aquí.
El opacity.
Que de efecto está uno.
O sea, que sí que está entre las propiedades.
De hecho, está porque funciona.
A ver.
CloneDispose.
No sé si es que habrá setValues.
SetPropertyBasedOnValues.
Puede ser que sea por eso.
A ver si es que hay que utilizar el setValues.
No.
Es que me da la sensación...
Ah, no.
Ya sé por qué no.
Creo que ya sé por qué no.
Es básicamente porque cree que el particle este...
Vale, vale.
Eso habría que arreglar exactamente cómo detecta el particle.
Porque puede ser que este material a lo mejor no esté...
Vale, no pasa nada.
Pero al menos ya sabemos que esto es lo que funciona.
Esto lo que hace es cambiar la opacidad del material.
Claro, es que antes no lo estábamos cambiando.
Y por lo tanto, pasaba eso.
Ahora sí que lo está haciendo.
Ahora da igual cuándo entremos, dónde entremos.
Que ahora sí que lo está haciendo.
¿Vale?
Vale.
Pues ahí tenemos ya nuestro polvillo mágico con la animación.
Y ya tenemos esto funcionando.
Y ahora ese era el problema.
El problema es que no estábamos actualizando la opacidad.
Estaba actualizando el fondo.
Que al final el fondo lo he quitado.
Más que nada porque pensaba que podía ir por ahí del problema.
O sea, está mal pero no tan mal.
No, no, no.
Entonces, ¿por qué funcaba?
Porque parecía que funcaba.
Parecía que funcaba porque la opacidad que utilizaba desde el principio estaba bastante
bien, ¿no?
Y quedaba bien en las dos.
Entonces, como quedaba bien en las dos, esa opacidad que se utilizaba desde el principio,
pues por eso no había ningún problema.
Ahora, el problema estaba cuando empezamos desde la opacidad que no quedaba bien en la
otra.
Y, por lo tanto, ahí sí que se notaba.
Ese era el problema.
Y ahora sí le estamos seteando la opacidad que necesita.
Lo que podríamos llegar a hacer es justamente también decir, vale, pues vamos a ponerle esa
opacidad que justamente quedaba bien desde el principio a los dos.
Pero ese era lo que estaba pasando.
Que la opacidad que le estábamos utilizando no era la correcta.
Y, claro, teníamos que actualizarla.
De hecho, lo que ahora podríamos hacer es que se vea un poquito más.
Podríamos ajustar un poco los colores.
Es que, claro, que he hecho aquí esto del background, que le he puesto el color este.
Y seguramente tendríamos que poner que fuese todavía más oscuro.
Yo creo que estaría bien que todavía fuese más oscuro en uno y un poquito más claro
en el otro, ¿vale?
Para que se vea un poquito más.
Vale, claro.
Ahora este y ahora este.
Ahora se ve un poquito más claro porque está encajando perfectamente el color, ¿vale?
Más claro y este más oscuro.
Y así se nota más el polvillo, la sombra ahí, la sombra ahí.
Bueno, la escena.
Bueno, bueno.
¿Hay algo que no sepas hacer en programación?
A ver, esto lo he aprendido.
O sea, esto no os quiero decir...
¿Cómo que no se ve?
¿Cómo que no se ve?
Joder, sí que se ve, tío.
A ver, tampoco queremos que se vea...
Ah, que a lo mejor no cambié la escena.
Perdón, perdón.
Bueno, pero ahí sé que se ve.
O sea, ¿se ve ahora qué?
Cuando está en modo oscuro y cuando está en modo claro, que se ve mejor con un poquito
más claro de fondo.
Que no había cambiado ya la escena.
Perdón, perdón.
¿Detrás del humo no se ve?
No, no se ve.
Vale, pero ahora sí que se ve.
Ahora sí que se ve el humillo.
Ahora sí que se ve el humillo.
Cuando entréis a la página en la vuestra se verá.
Igual aquí, creo que hay una cosa rara.
Aquí a lo mejor todavía podríamos hacer que se viese más.
No sé si haciéndolo más oscuro o...
Claro, es que si hacemos más oscuro es que ese es el problema.
Cuanto más oscuro hagamos esto, seguramente menos se verá el humo.
Claro.
Vamos a poner este color, este número mágico.
666, claro.
Bueno, yo creo que así se vería bastante bien.
Y aquí a lo mejor podríamos ajustar todavía un poco más.
No sé si un poco más blanco para que se vea todavía más.
Pero esta sería un poco la idea.
Un poquito más.
Ahí, claro.
Uy, qué he hecho.
Bueno, esta sería un poco la idea.
Que ahí se ve el humillo pasando por detrás.
¿Vale?
Detrás del humo, detrás del humo no se ve, eso seguro.
Pero bueno, ahí tenemos...
Le va a estallar la cabeza a Ibai.
Bueno, eso espero.
Me da la impresión de que el más random en la posición aparece a veces abajo.
Abajo.
Bueno, a ver, como está fijo, tampoco pasaría mucho nada, ¿no?
Que se vea más abajo, más arriba.
O sea que no hay mucho problema.
La verdad.
No pasa nada, ¿no?
Bueno, pues ahí os lo dejo.
¿Vale?
Voy a subir los cambios.
Add smoke effect background.
Y bueno, ahí hemos hecho alguna cosita ahí con 3GS que no está nada mal.
Igualmente, os digo una cosa.
Voy a estudiar 3GS.
Voy a estudiar porque me gustaría hacer más cosas todavía.
Así que le daremos cañita.
La animación de locos un poco más rápida y ya está.
La he intentado hacer un poquito más rápida.
De hecho, alguien me había preguntado antes sobre la animación del logo.
Es esta.
Fijaos, es un SVG y la animación del logo está aquí.
Son estas líneas de CSS.
O sea, no tiene más historia.
Y lo que la magia está aquí en el fill opacity, en el stroke dash array,
que lo que está haciendo es que sigue la línea del stroke para dibujarlo.
Y lo que hace es esto, ¿no?
Fijaos aquí que la opacidad lo que hace es cambiarla.
Y por eso aparece, cuando ya lleva el 70%, que hace eso.
Lo podríamos ajustar todavía más para que hasta que no se escriba más todavía.
¿Vale?
Hasta que no se escriba del todo, que tampoco podría ser.
Y lo podríamos hacer un poquito más rápido.
Justamente como pedía la gente.
¿Veis?
Algo así.
Aunque es un poquito...
No sé si hacer un is out, porque creo que el final a lo mejor es un poquito más...
Como, no sé si...
O in out.
In out.
Es que se ve como demasiado apresurado, ¿no?
A ver, is.
Es que al principio es como demasiado rápido.
Bueno, con el is in, que ya es el que tenía, pues ya estaría.
Y así es un poquito más rápido.
¿Vale?
Y así, lo que está haciendo aquí es que hasta que no llega a dibujar el 90% de las letras, ¿vale?
Del recorrido de las letras, entonces no se le rellena y hace la opacidad.
Por eso lo dibuja y luego al final es que aparece.
Ahí es donde está el truquillo.
Y para hacer la animación de eso de que parece que se está dibujando,
se está haciendo gracias a este stroke-array y dash-offset.
Que justamente lo pasas aquí.
Con el dash-offset al final lo pasas a cero.
Y así es como dibuja esa parte.
Porque va siendo como el stroke.
Y luego el fill, que sería lo que lo rellena,
le cambias la opacidad y ya lo tendrías.
Y esto lo puedes hacer con un montón de cosas.
Déjalo en dos y medio.
Bueno, ahora va...
Ahora un montón.
Dos y medio, tal.
Estaban dos antes.
Estaban dos.
Yo creo que dos sería el límite.
Más de dos ya me parece mucho.
Porque si no, tarda demasiado en animarse.
Vamos a dejarlo en dos, que es como estaba.
Y ya está.
¿Vale?
Y ya aquí...
A ver qué cambio hemos hecho.
Bueno, esto tampoco es un cambio muy importante.
Así que lo dejamos por ahí.
Y ya está.