Usando un poquito de Javascript

   Hasta ahora trabajamos en P5*Js con aburridas formas primitivas como Ellipse, Rect y Triangle, pero vamos a hacer algo más interesante que es usar imágenes ya sean descargadas de internet o dibujadas por nosotros.



 Antes de empezar, como siempre, debemos descargar los archivos de éste link (que contiene el proyecto P5 Vacío): 




  Una vez descargado y descomprimido, tomamos una imagen o dibujamos con algún programa como PAINT o KolourPaint (ya que en clase usamos UBUNTU), y la ponemos dentro de la carpeta. 

   Cuando arrojamos la carpeta sobre Brackets, veremos que la imagen también está cargada. 
En mi caso Elegí una imagen de Gumball que encontré en internet (no pregunten porque Gumball, tengo mis razones), y luego clickeamos en sketch.js para empezar a programar nuestro script.






VARIABLES


  Una variable es un espacio en la memoria donde podemos guardar algo, un número, palabra (usando "comillas" para éste caso), o incluso una imagen. Es como cuando un mago cierra el puño y te dice "TENGO ALGO EN MI MANO"... ok hagamos como que centro de la variable dibujo existe la imagen de Gumbal.png.

  Como vemos en la imagen de abajo, en la línea 1 le digo que existe una variable llamada dibujo
   La razón que esté afuera de todas las funciones, es porque es una variable global y podemos llamarla desde cualquier función sin problemas, por el contrario si la declaráramos dentro de la function setup() , sólo podríamos usarlo dentro de ella y en el function draw() no existiría y eso sería contraproducente en este caso.





   En la línea 6 se usa la función loadImage() para poner una imagen a la variable dibujo, y entre paréntesis indicamos el nombre del archivo que utilizaremos, en mi casi "Gumball.png".



Usando el Dibujo en DRAW()

   Para poner el dibujo usamos la función image() dentro de la funcion draw(). Los parámetros dentro del paréntesis son 5:

  •  dibujo es la variable que contiene la imagen (como se declaró en la línea 6).
  •  posición en X de la imagen en el canvas (Amarillo).
  •  posición en Y de la imagen en el canvas (Verde).
  •  Ancho de la imagen (Naranja).
  •  Altura de la Imagen (Celeste).   



Moviendo la Imagen


   Como seguro ya se dieron cuenta, los 4 parámetros que usa image() luego del primero son los mismos que en el rectángulo o en ellipse, como vimos en clases anteriores. Y de la misma forma, los 2 primeros valores (en el caso de la imagen, el segundo y el tercero) pueden reemplazarse por las variables mouseX y mouseY para que el objeto se dibuje en la posición del mouse, y como la function draw() es un ciclo continuo (loop infinito), seguirá dibujándolo como pasaba con los las formas de las clases anteriores.








Ya sé en que están pensando...


   Estoy viejo, y no entiendo esta tontería de los Fidget Fingers... en serio, nosotros jugábamos con cosas así, pero de ahí a que sea una moda mundial, solo se explica por internet. 
   Sea como sea, cargaremos una imagen que ya he recordado de uno de ellos para usarlo como imagen. Pueden descargar la imagen dentro de la carpeta del proyecto y reemplazar la imagen "Gumball.png"

  Para que rote de forma correcta debemos cambiar la posición anterior por 0,0 (línea 15), luego ponemos el mouseX, mouseY en el translate() de la línea 11, y finalmente usamos un rotate() con frameCount/10 para que no gire tan rápido, si deseamos que gire más lento debemos usar un divisor mayor.


  En la línea 14 usamos imageMode(CENTER), para indicar que necesitamos que el centro de la imagen sea el centro de las coordenadas, como si fuera una ellipse, y no un rectángulo (sino tenemos que poner coordenadas -100,-100 en la posición).





Si desean probarlo, en el siguiente link pueden hacerlo aunque le puse un canvas HD o sea de 1920 x 1080.

Dibujando Solo el Spinner


   Para quienes prefieran ver sólo el Spinner, sólo debemos poner la línea del background()    en el  function draw(), y pintará el fondo en cada ciclo.

  Para el parámetro de la rotación usé frameCount/(mouseX/100) o sea que se resolverá primero lo que está entre paréntesis, si movemos el mouse a la derecha, mouseX será un valor mayor (dividido por 10) y dará un divisor mayor, por lo tanto la rotación será más lenta, por el contrario si movemos el mouse a la izquierda mouseX será menor y por lo tanto el divisor menor, haciendo que gire más rápido.   



Si quieren probarlo usen éste link:




Un poco de Magia Negra

 Para hacerlo más interesante me bajé una mano de internet y ponerla debajo del spinner. 
 Primero que nada repetimos el proceso de crear otra variable para la nueva imagen, como se ve en la línea 2, creamos la variable mano (var mano;).
 Luego en la línea 5 guardé la imagen mano.png a la variable mano, por lo tanto cuando la usemos, sólo debemos llamar a "mano".
 En la línea 14, la función image() se lleba con los nuevos parámetros para la segunda imagen, justo entre el translate y el rotate, ya que queremos que se mueva con el mouseX y mouseY pero no que rote. Por lo tanto dejamos el  rotate() debajo, y sólo afectará al spinner.    



Aquí podemos probarlo: