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.

    Session 1 Exercise 2
 */

//Define the width and height of the canvas
size(600, 400);
//Define line stroke
strokeWeight(5);
//Draw letter "d" for David in black
line(250, 100, 250, 300);
line(250, 300, 50, 300);
line(50, 300, 50, 200);
line(50, 200, 250, 200);
//Draw letter "c" for Cuartielles in red
stroke(255, 0, 0);
line(550, 200, 350, 200);
line(350, 200, 350, 300);
line(350, 300, 550, 300);

    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.

/*
Session 1 Exercise 3
 */
void setup() {
  size(400, 400);
}
void draw() {
  background(222);
  //Draw an ellipse that moves according to "X" and "Y" mouse coordinates 
  ellipse(mouseX, mouseY, 30, 30);
}

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.

    /*
Session 1 Exercise 4
 */
//Position Variables
int posX=100;
int posY=100;
//Direction Variables
int dirX=1;
int dirY=1;
void setup() {
  size(600, 400);
}
void draw() {
  background(222);
  //X-axis calculation
  posX=posX+dirX;
  if (posX>width) {
    dirX=-1;
  }
  if (posX<0) {
    dirX=1;
  }
  //Y-axis calculation
  posY=posY+dirY;
  if (posY>height) {
    dirY=-1;
  }
  if (posY<0) {
    dirY=1;
  }
  //Draw the primitive shape
  ellipse(posX, posY, 30, 30);
}

    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.

    /*
Session 2 exercise 1
*/
//Create the objects for the two images
PImage img1;
PImage img2;
void setup(){
  size(600,400);
  //Load the images to the sketch
  img1=loadImage("moon-wide.jpg");
  img2=loadImage("ystone08.jpg");
}
void draw(){
  //Place the images on the canvas
  image(img1,0,0,300,400);
  image(img2,300,0,300,400);
}

    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.

    /*
Session 2 Exercise 3
 */
 //Create the objects for the two images
PImage background;
PImage character;
//Create a variable that will control the X position
int posX=100;
void setup() {
  size(600, 400);
  //Load the images to the sketch
  background=loadImage("forest.png");
  character=loadImage("worm.png");
}
void draw() {
  //Create the background first
  image(background, 0, 0);
  //Now the character will move along the X-axis with the mouse position
  image(character, posX, 300, 100, 100);
}
//Overwrite the keyPressed function
void keyPressed() {
  //If 'a' key is pressed, the character will go left
  if (key=='a') {
    posX=posX-1;
  }
   //If 'd' key is pressed, the character will go right
  if (key=='d') {
    posX=posX+1;
  }
}

    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.

    /*
Session 2 Exercise 4
Load external font
*/
//Create the font object
PFont font;
//Create a String variable to store the hour, minute and second values
String tiempo;
void setup(){
  size(600,400);
  //Load the external font which is located in the data folder
  font=loadFont("DejaVuSerifCondensed-32.vlw");
  //Define the font and its size
  textFont(font,32);
}
void draw(){
  background(222);
  //Link time values using +
  //Also use str to convert the variables into a string 
  tiempo=str(hour())+':'+str(minute())+':'+str(second());
   //Create the text on the screen
  text(tiempo,220,200);
}

    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.