Ejercicios de Processing


En esta sección encontrarás diferentes ejercicios que te ayudarán a entender mejor las posibilidades que te ofrece Processing.


1. Coordenadas

  • Escribe un programa que dibuje las iniciales de tu nombre utilizando gráficas simples como un arco o una línea.

    Código

    Este es el código que debes utilizar para resolver el ejercicio.

    source: https://bit.ly/28PddoI

    Comandos

    • size(x, y) define el ancho y la altura en píxeles de la zona de trabajo.
    • strokeWeight(n) define el ancho de los trazos, la línea o el contorno de las formas. El parámetro «n» define el ancho en píxeles.
    • line(x1,y1,x2,y2) dibuja una línea desde las coordenadas (x1,y1) a las coordenadas (x2,y2).
    • arc(x,y,w,h,start,stop) o arc(x,y,w,h,start,stop,mode) dibuja un arco dónde «x» y «y» definen las coordenadas dónde estará el arco y, «w» y «h» definen el ancho y la altura , respectivamente de la elipse del arco. Los parámetros «Start» y «Stop» definen los ángulos de principio y final en radiantes. También se puede añadir un parámetro adicional («mode») que define el modo de dibujar el arco. Puede ser «OPEN», «PIE» o «CHORD». Por defecto, el arco se pinta en modo «OPEN».
    • arc() es un buen ejemplo de una función que podría ser utilizada de distintas maneras.

2. Movimientos simples

Escribe un programa que mueva una gráfica simple en función de los movimientos del ratón. Utiliza las variables mouseX y mouseY para controlar el movimiento de esta gráfica.Código

Este es el código que debes utilizar para resolver el ejercicio.

source: https://bit.ly/28NIzNE

Comandos

  • void setup() es el método principal de Processing. Se ejecuta solo una vez, cuando el programa está empezando.
  • void draw() es el código principal del programa de Processing.
  • background(r,g,b) o background(x) define el color de fondo de pantalla de tu zona de trabajo. Si hay tres parámetros(r,g,b) el primer parámetro corresponde al valor de rojo, el segundo al valor de verde y el tercero al valor de azul. Por otro lado, si solo hay un parámetro(x) , este parámetro define la cantidad de rojo, verde y azul con un único valor.
  • ellipse(x,y,w,h) dibuja una elipse dónde los dos primeros parámetros definen las coordenadas(x,y,) y los dos últimos parámetros definen el ancho y la altura de la forma.
  • mouseX y mouseY devuelven la posición del ratón en «x» y «y».

3. Pelota rebotadora

  • Escribe un programa dónde se mueva una elipse alrededor de la zona de trabajo y que ésta rebote cuando choque contra los bordes de la ventana.

    Código

    Este es el código que debes utilizar para resolver el ejercicio.

    source: https://bit.ly/28PdI1L

    Comandos

    • int define una variable del tipo entero.
    • El comando if funciona como una condición, dónde el código que hay entre corchetes solo se ejecuta si la condición es cierta.

4. Cargar imagenes

  • Escoge dos imágenes y utilízalas en el programa de Processing. Deberás modificarlas ( reducir su medida y/o resolución) para que puedan estar dentro de la zona de trabajo.

    Código

    Este es el código que debes utilizar para solucionar el ejercicio.

    source: https://bit.ly/28NIKZs

    Comandos

    • PImage define un objeto vacio donde podrás guardar la imagen que utilizaras en tu programa.
    • loadImage(n) carga la imagen y utiliza como parámetro el nombre de la imagen. Recuerda que las imágenes deben estar guardadas en la carpeta de datos del programa de Processing.
    • image(n,x,y,w,h) o image(n,x,y) muestran la imagen previamente definida. El primer parámetro es el nombre de PImage, los siguientes definen las coordenadas dónde se mostrará la imagen y , de manera opcional, también puedes definir el ancho y la altura de la imagen.

5. Cargar imágenes PNG y utilizar el teclado

  • Escribe un programa que tenga como fondo de pantalla una imagen. Además, define otra imagen del tipo PNG a la parte superior del programa, que se pueda ir moviendo en función de la interacción que tengas con el teclado.

    Código

    Este es el código que debes utilizar para solucionar el ejercicio.

    source: https://bit.ly/28OnVLd

    Comandos

    • void keyPressed() es una función de Processing que se llama cada vez que hay una interacción con el teclado.
    • key devuelve el valor de la tecla que se ha pulsado.

6. Crea un reloj

  • Escribe un programa que utilice las funciones de tiempo para crear un reloj que muestre la hora, utilizando texto, en la pantalla.
  • Utiliza el siguiente archivo y añádelo igual que has hecho anteriormente con las imagenes.

    Código

    Este es el código que debes utilizar para solucionar el ejercicio.

    source: https://bit.ly/28Rv4j4

    Comandos

    • PFont crea un nuevo objeto del tipo Font que determinará que tipo de fuente utilizaremos para el texto.
    • loadFont(n)carga la fuente que le has pasado por parámetro(«n») en el objeto PFont previamente definido.
    • Los comandos hour()minute() y second()devuelven el valor del reloj del ordenador.
    • text(s, x, y) muestra el texto a la pantalla. El primer parámetro es el texto que quieres mostrar. Los otros dos parámetros son las coordenadas dónde vas a mostrar el texto.