dis9034-2024-1
clase-10
Para la solemne quise trabajar con Processing y sus bibliotecas. Me interesaba hacer algo interactivo que tuviera tanto imágenes como sonido. También me gustan mucho los gatos así que, al igual que la Solemne anterior, quise trabajar con uno.
Vi este ejemplo en las referencias: https://processing.org/examples/mousefunctions.html
Me gustó mucho porque de inmediato me imaginé cómo sería armar un puzzle virtual arrastrando imágenes. Traté de entender el código y se me hizo difícil. Iba a rendirme con esta idea pero después de hablar con el profe decidí intentarlo de nuevo.
Copié el código. Investigué las variables. Primero entré aquí http://www.sc.ehu.es/sbweb/fisica/cursoJava/fundamentos/introduccion/primero.htm#:~:text=Las%20variables%20del%20tipo%20float,parte%20entera%20y%20parte%20decimal.
Float almacena números con parte entera y decimal. Boolean tiene solo dos valores: verdadero o falso. Int almacena valores enteros. Vi este video de The Coding Train acerca de las expresiones Boolean https://www.youtube.com/watch?v=wsI6N9hfW7E&list=PLRqwX-V7Uu6YqykuLs00261JCqnL_NNZ_
Luego investigué la siguiente parte del código, la cual se encarga de detectar si el cursor está dentro del rectángulo. Y abajo de esto, también la parte del código que le da un trazo blanco al rectángulo si se cumple la condición.
Luego busqué en las referencias las funciones de mouseDragged, mouseReleased y mousePressed. https://processing.org/reference/mousePressed_.html
Una vez entendí mejor el código me propuse reemplazar el rectángulo por una imagen. Visité esta página de las referencias sobre cómo trabajar imágenes y los distintos modos de imagen. https://processing.org/reference/imageMode_.html
y vi el video tutorial de The Coding Train https://www.youtube.com/watch?v=-f0WEitGmiw&list=PLzJbM9-DyOZyMZzVda3HaWviHqfPiYN7e&index=44 Aquí también explica cómo añadir, cargar y dibujar imágenes. Además visité esta página de las referencias https://processing.org/reference/PImage_resize_.html donde se explica como cargar las imágenes y cambiarles el tamaño.
En el video de The Coding Train se mencionaba cómo una imagen funciona casi igual a como funcionaba la figura de rectángulo dentro del código. Esto me sirvió para modificar el código inicial.
1) Añadí la variable de la imagen
2) Precargué la foto en setup https://processing.org/reference/loadImage_.html
3) Agrandé el canvas
4) Con lo que aprendí en https://processing.org/reference/imageMode_.html y https://processing.org/reference/rectMode_.html reemplacé el rectángulo por la imagen, y le di el modo de (CENTER) en vez de (RADIUS)
5) En void draw hice el fondo, mantuve la parte que identifica la posición del cursor, y reemplacé el rectángulo por una foto de un gato. Mantuve las variables pero cambié el tamaño con los dos últimos números.
6) Por fin logré cambiar el rectángulo por este gatito. Se le puede arrastrar y soltar en cualquier parte del lienzo.
7) Más adelante modifiqué esta variable, de 75 a 100, ya que me di cuenta de que afectaba las zonas de la imagen que se podían arrastrar. Con el 100 puedo arrastrar el gato desde cualquier parte de la foto.
Ahora le quise agregar sonido cada vez que se soltara la imagen del gato. Lo practiqué en un nuevo sketch para no alterar lo que había hecho antes. Vi este video https://www.youtube.com/watch?v=I6fG1wneXWo donde se enseña a importar la biblioteca de sonido de Processing y añadir sonidos a la carpeta del sketch. Luego fui a la referencia de mouseClicked https://processing.org/reference/mouseClicked_.html . Hice el siguiente código.
Con este código cada vez que hago click suena un sonido de gota de agua que descargué. Ahora tocaba intentar que al soltar la imagen del gato hiciera el sonido, así que nuevamente hice otro sketch para practicar.
1) Copié el código del gato que se puede arrastrar.
2) Le Importe la biblioteca de sonido de Processing y el reproductor que permite manipular archivos de audio. https://processing.org/reference/libraries/sound/SoundFile.html
3) Cargué el sonido en SetUp
4) En la función de mouseReleased añadí que además de soltar la imagen, reprodujera el sonido.
5) Lo probé y funcionó. El gato suena cada vez que se suelta la imagen.
Después de todo esto volví a mi idea del puzzle, así que hice otro sketch para probar. Corté la imagen del gato, haciendo que le faltara un pedazo.
Son 4 imágenes en total.
La imagen número 4 es la que se puede mover, está ligada a las variables enunciadas al principio.
Ahora me falta añadir sonido a este último sketch
1)
2)
3)
4) Funcionó
Otras cosas que investigué pero no utilicé https://forum.processing.org/one/topic/problem-splitting-an-image-into-several-pieces.html https://processing.org/reference/mouseWheel_.html https://www.youtube.com/watch?v=RtAPBvz6k0Y&list=PLzJbM9-DyOZyMZzVda3HaWviHqfPiYN7e&index=23