Ejercicios de Processing
Ejercicios de Processing
Embedded Files
En esta sección encontrarás diferentes ejercicios que te ayudarán a entender mejor las posibilidades que te ofrece Processing (soluciones al final).
- Coordenadas
Escribe un programa que dibuje las iniciales de tu nombre utilizando gráficas simples como un arco o una línea.
2. Movimientos simples
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.
3. Pelota rebotadora
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.
4. Cargar imagenes
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.
5. Cargar imágenes PNG y utilizar el teclado
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.
6. Crea un reloj
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
- Solución:
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.
//Exercise 1
//Define the width and height of the canvas
size(600, 400);
//Define line stroke
strokeWeight(5);
//Draw letter "d" 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" in red
stroke(255, 0, 0);
line(550, 200, 350, 200);
line(350, 200, 350, 300);
line(350, 300, 550, 300);
2. Solución:
2. Solución:
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».
/*
Exercise 2
*/
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);
}
3. Solución:
3. Solución:
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.
/*
Exercise 3
*/
//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);
}
4. Solución:
4. Solución:
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.
/*
Exercise 4
*/
//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);
}
5. Solución:
5. Solución:
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.
/*
Exercise 5
*/
//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;
}
}
6. Solución:
6. Solución:
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.
/*
Exercise 6
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);
}
Page updated
Google Sites
Report abuse