into the dark forest - ENG-ESP arte interactivo

hi dear Hivers!
today I'm bringing you the process of creating a new interactive art.
I'm creating the drawings using Adobe Illustrator for the vector art, and then I'm mounting all into a HTML with Javascript for the interactivity.
I will create a parallax scrolling effect! This means, that when you scroll in the drawing, it will move the layers at different speed, creating the effect of deepness, this technique was used a lot in the old 16 bit videogames in Sega genesis and Snes.

¡Hola queridos Hivers!
hoy les traigo el proceso de creación de un nuevo arte interactivo.
Estoy creando los dibujos usando Adobe Illustrator para el arte vectorial y luego estoy montando todo en un HTML con Javascript para la interactividad.
¡Crearé un efecto de desplazamiento de paralaje! esto quiere decir, que al mover el dibujo, moverá las capas a diferente velocidad, creando el efecto de profundidad, esta técnica se usaba mucho en los antiguos videojuegos de 16 bits en Sega genesis y superNintendo.

image.png

so now I drawing the layers! the first one will be for the faces.

asi que ahora dibujo las capas! el primero será para las caras.

image.png

the layer behind will be for the trees in the background, it has the double of size than the faces layer, so it will move slower.

la capa detrás será para los árboles en el fondo, tiene el doble de tamaño que la capa de las caras, por lo que se moverá más lento.

image.png

the concept of the drawing will be that this is a dark forest with evil creatures, maybe a coven with witches near devils, so I'm drawing a dark creature made of tree branches in the second layer.

el concepto del dibujo será que este es un bosque oscuro con criaturas malvadas, tal vez un aquelarre con brujas cerca de demonios, así que estoy dibujando una criatura oscura hecha de ramas de árboles en la segunda capa.

image.png

the third layer will have the moon in the background, and it will move very slowly.

la tercera capa tendrá la luna de fondo y se moverá muy lentamente.

image.png

so I have now all the drawing into just one PNG drawing, I will move through it using html and javascript. it is ready for animation!

así que ahora tengo todo el dibujo en un solo dibujo PNG, lo recorreré usando html y javascript. ¡Está listo para la animación!

image.png

and after adding some coding, this is the result!
you can be the owner of one nft or play with it here:
5 x 1 tez - teia: https://teia.art/objkt/768677

y después de agregar algo de código, ¡este es el resultado!
puedes ser el propietario de un nft o jugar con él aquí:
5 x 1 tez - teia: https://teia.art/objkt/768677

ezgif-2-d0a8366b43.gif

I hope you like it! / espero te guste!



0
0
0.000
6 comments
avatar

Te quedo fino tratare de impulsarte con ecency

yo uso macromedia flahs y tambien tiene para publicar en HTML pero al hacerlo no se ven los movimientos.

0
0
0.000
avatar

muchas gracias! yo empecé usando flash también, si sabes algo de actionscript es casi identico a javascript, sólo tendrias que aprender un poco de html y css que es más sencillo si te interesa hacer htmls interactivos,

0
0
0.000
avatar

Your animation skills have grown a lot! This is some really cool art!

0
0
0.000