Trabajos de Processing de Primer Año
¿Que es Processing?
Processing es un lenguaje de programación y un entorno de desarrollo integrado de código abierto. Es un recurso fundamental para aprender a programar de manera creativa y para producir proyectos multimedia e interactivos de diseño digital.
trabajo 0
Dibujo Basico
CONSIGNA: explorar las formas primitivas de dibujo con Processing y las diferentes alternativas de composición que ofrecen el entorno y las coordenadas para crear un grafismo libre, abstracto o figurativo.
Contenidos para el trabajo
Crear un dibujo libre con formas primitivas de Processing y sus atributos.
-
- void setup(){
- size(600,600);
- }
- void draw(){
- background(255,255,0);
- rect(150,250,80,30);
- rect(370,250,80,30);
- rect(230,400,40,100);
- rect(330,400,40,100);
- quad(250,200,350,200,450,450,150,450);
- ellipse(300,150,200,200);
- ellipse(260,115,20,20);
- ellipse(340,115,20,20);
- ellipse(300,180,80,30);
- line(260,180,340,180);
- line(300,20,300,50);
- line(270,20,300,50);
- line(330,20,300,50);
- }
Trabajo 1
Animando con codigo
CONSIGNA: crear una animación con la secuencia de créditos(*) de una película o videojuego seleccionado.
Contenido para el trabajo
- Usar variables numéricas para operaciones como:Cambiar la ubicación, el tamaño y el color de las formas y Obtener resultados haciendo cálculos matemáticos con variables.
-
- PImage fondo1;
- PImage titulo1;
- PFont fuente;
- String texto;
- int movimiento=0;
- int mousex, mousey;
- void setup() {
- size(800, 600);
- textSize(25);
- fuente=loadFont("FreestyleScript-Regular-40.vlw");
- fondo1=loadImage("fondo1.jpg");
- titulo1=loadImage("titulo1.jpg");
- }
- void draw() {
- background(0);
- textFont(fuente);
- movimiento= frameCount;
- println(movimiento);
- image(fondo1, 0, 0, 800, 600);
- image(titulo1, 250, movimiento, 200, 350);
- frameCount+=2;
- textAlign(CENTER);
- if (frameCount>=602) {
- fill(0,0,random(255));
- ext("Personajes principales", 200, 1300-movimiento, 400, 100);
- fill(0);
- text("Mae Whitman-Tinker Bell", 200, 1340-movimiento, 400, 100);
- text("Lucy Hale-Periwinkle", 200, 1380-movimiento, 400, 100);
- text("Anjelina Huston-Reina Clarion", 200, 1420-movimiento, 400, 100);
- text("Timothy Dalton-Lord Milori", 200, 1460-movimiento, 400, 100);
- text("Jeff Benett-Dewey", 200, 1500-movimiento, 400, 100);
- }
- if (movimiento>=1580) {
- fill(0,0,random(255));
- text("Personajes secundarios", 200, -2060+movimiento, 400, 100);
- fill(0);
- text("Lucy Liu-Silvermist", 200, -2020+movimiento, 400, 100);
- text("Pamela Adlon-vidia", 200, -1980+movimiento, 400, 100);
- text("Megan Hilty-Rosetta", 200, -1940+movimiento, 400, 100);
- text("Raven Symone-Iridessa", 200, -1900+movimiento, 400, 100);
- text("Angela Bartys-Fawn", 200, -1860+movimiento, 400, 100);
- text("Debby Ryan-Spike", 200, -1820+movimiento, 400, 100);
- text("Grey Deliste-Gliss", 200, -1780+movimiento, 400, 100);
- text("Matt Lanter-Sled", 200, -1740+movimiento, 400, 100);
- text("Jane Horrocks-Fairy Mary", 200, -1700+movimiento, 400, 100);
- text("Jesse McCarthey-Terence", 200, -1660+movimiento, 400, 100);
- text("Rob Paulsen-boble", 200, -1620+movimiento, 400, 100);
- text("Jeff Benett-Clank", 200, -1580+movimiento, 400, 100);
- }
- if (movimiento>=2680);
- fill(0,0,random(255));
- text("Direccion y Guion", -2700+movimiento, 200, 400, 100);
- fill(0);
- text("Roberts Gannaways y Peggy Holmes", -2700+movimiento, 240, 400, 100);
- fill(0,0,random(255));
- text("Produccion", -2700+movimiento, 280, 400, 100);
- fill(0);
- text("Sean Lurie", -2700+movimiento, 320, 400, 100);
- fill(0,0,random(255));
- text("Musica", -2700+movimiento, 360, 400, 100);
- fill(0);
- text("Joel McNeely", -2700+movimiento, 400, 400, 100);
- f (movimiento>=3515) {
- fill(0,0,random(255));
- text("Montaje", 4200-movimiento, 200, 400, 100);
- fill(0);
- text("Marek Rozenbaum", 4200-movimiento, 240, 400, 100);
- fill(0,0,random(255));
- text("Escenografia", 4200-movimiento, 280, 400, 100);
- fill(0);
- text("Chris Oatley", 4200-movimiento, 320, 400, 100);
- fill(0,0,random(255));
- text("Efectos Especiales", 4200-movimiento, 360, 400, 100);
- fill(0);
- text("Jhon Edgar Park", 4200-movimiento, 400, 400, 100);
- }
- }
- void mousePressed(){//boton reinicio
- frameCount=0;
- }
Trabajo 2
Ilusion optica interactiva
CONSIGNA: crear una ilusión óptica* interactiva** con estructuras repetitivas (ciclos flor) y funciones propias.
contenido para el trabajo
- Estructuras repetitivas (ciclos for): simples o anidados.
- Funciones propias con y sin parámetros
- Condicionales (if - else): interactuar con los índices.
- Eventos (mouse y/o teclado): modificación de variables.
- Algunas funciones matemáticas: dist(), map(), random().
- Reiniciar el programa: volver variables a estado original.
-
- boolean blanco=true;
- void setup() {
- size(600, 600);
- noStroke();
- }
- void draw() {
- float fx=map(mouseX, 0, width, 0, 255);
- float fy=map(mouseY, 0, height, 0, 255);
- background(fx, 0, fy);
- translate(width/2, height/2);
- rectMode(CENTER);
- for (int c=width; c>0; c-=20) {
- if (blanco) {
- fill (0);
- } else {
- fill(fx,0,fy);
- }
- rotate(PI/45);
- rect(0, 0, c, c);
- blanco=!blanco;
- }
- }
Trabajo 3
Juego interactivo
CONSIGNA: crear un juego interactivo de formato y temática libre.
Contenido para el trabajo
- Estructuras repetitivas (ciclos for): simples o anidados.
- Funciones propias con y sin parámetros
- Condicionales (if - else)
- Eventos (mouse y/o teclado)
- Arreglos.
-
Pantalla TP3
- PImage fondo, nube, arcoiris;
- String [] textos={"un clima loco", "intrucciones:\n evitar tocar \nlas nubes para ganar\n\n con las flechitas de izquierda \ny derecha te moves", "game over\n volve a intentar\npara poder ganar", "felicitaciones ganaste\nvolve a jugar"};
- int estados, orden;
- int c=0;
- int cant=7;
- PImage[] personaje=new PImage[cant];
- int movimiento=0;
- float ax, ay, nx, ny, px, py;
- int tam=10;
- boolean perder;
- boolean ganar;
- int puntos=0;
- void setup() {
- size(800, 600);
- fondo=loadImage("fondo.jpg");
- nube=loadImage("nube.png");
- arcoiris=loadImage("arcoiris.png");
- for ( int p = 0; p < personaje.length; p++ ) {
- personaje[p] = loadImage( "nena"+p+".png" );
- }
- ax=400;
- ay=-15;
- nx=200;
- ny=-15;
- px=0;
- py=400;
- tam=10;
- }
- void draw() {
- background(0);
- movimiento=frameCount;
- println(movimiento);
- image(fondo, 0, 0, 800, 600);
- if (estados==0) {
- pantallas(textos[0], width/2, 100);
- } else if (estados==1) {
- pantallas(textos[1], width/2, 100);
- } else if (estados==2)
- image(personaje[c], px, py);
- clima();
- float dn=dist(px, nx, py, ny);
- int rn=10/2;
- if (dn<=rn){
- if (estados==3) {
- pantallas(textos[3], width/2, 100);
- }
- }
- for (int i=0; i<=15; i++) {
- float da=dist(px, ax, py, ay);
- int ra=10/2;
- if (da<=ra) {
- ganar=true;
- puntos++;
- text("puntos:"+i, 750, 50);
- }
- }
- text("puntos:"+i, 750, 50);
- }
- }
- }
- }
- void keyPressed() {
- if (key=='s') {
- estados++;
- }
- if ( keyCode == RIGHT ) {
- px += 10;
- c += 1;
- }
- if ( keyCode == LEFT ) {
- px -= 10;
- c -= 1;
- }
- if ( c == personaje.length ) {
- c = 0;
- } else if ( c == -1 ) {
- c = 2;
- }
- }
- void mousePressed() {
- estados=1;
- }
pantalla clima
- void clima() {
- ellipse(nx, movimiento, tam, tam);
- image(nube, -15+nx, ny+movimiento, 40, 40);
- ellipse(ax, movimiento, tam, tam);
- image(arcoiris, -30+ax, ay+movimiento, 80, 40);
- frameCount+=3;
- if (frameCount>=600) {
- frameCount=0;
- nx=random(0, 800);
- ax=random(0, 800);
- }
pantalla pantallas
- void pantallas(String texto, int px, int py) {
- textSize(40);
- textAlign(CENTER);
- fill(0);
- text(texto, px, py);
- }
Trabajo 4
Programando con objetos
CONSIGNA: crear una aplicación básica que comience a aprovechar el potencial de la programación orientada a objetos.
Contenido para el trabajo
- La construcción de al menos tres (3) clases con un (1) objeto/ instancia cada una (como mínimo).
- La aplicación debe poseer:
- Clases que puedan comunicarse entre sí
- que puedan interactuar con eventos (al menos los objetos de una clase).
-
pantalla TP4
- Cartelera pelis;
- void setup() {
- size(600, 400);
- pelis = new Cartelera();
- }
- void draw() {
- background(0);
- pelis.dibujar();
- }
- void mousePressed() {
- pelis.accionarBotones();
- }
pantalla clase cartelera
- class Cartelera {
- Fondos peliculas;
- Titulos titulo;
- int pantalla;
- int anchoB, altoB;
- Boton [] BotonD=new Boton[8];
- Boton [] BotonI=new Boton[8];
- Cartelera() {
- peliculas=new Fondos();
- titulo=new Titulos();
- anchoB = 220;
- altoB = 50;
- for (int i=0; i<8; i++) {
- BotonD[i]=new Boton(width-anchoB, altoB, anchoB, altoB);
- }
- for (int i=0; i<8; i++) {
- BotonI[i]=new Boton(0, altoB, anchoB, altoB);
- }
- }
- void dibujar() {
- text(pantalla, width/2, 100);
- if (pantalla==0) {
- fill(255);
- titulo.texto("saga completa:Tinkerbell", width/2, height/2);
- BotonD[1].dibujarBoton(0, 1, "elegir pelicula");
- } else if (pantalla==1) {
- peliculas.dibujarFondo(0);
- fill(0);
- titulo.texto("Tinkerbell", width/2, 300);
- BotonD[2].dibujarBoton(1, 2, "siguiente pelicula");
- BotonI[1].dibujarBoton(1, 0, "volver a inicio");
- } else if (pantalla==2) {
- peliculas.dibujarFondo(1);
- titulo.texto("Tinkerbell: Hadas Piratas", width/2, 350);
- BotonD[3].dibujarBoton(2, 3, "siguiente pelicula");
- BotonI[2].dibujarBoton(2, 1, "pelicula anterior");
- } else if (pantalla==3) {
- peliculas.dibujarFondo(2);
- titulo.texto("Tinkerbell:Hadas al Rescate", width/2, 350);
- BotonD[4].dibujarBoton(3, 4, "siguiente pelicula");
- BotonI[3].dibujarBoton(3, 2, "pelicula anterior");
- } else if (pantalla==4) {
- peliculas.dibujarFondo(3);
- titulo.texto("Tinkerbell:El secreto de las Hadas", width/2, 350);
- BotonD[5].dibujarBoton(4, 5, "siguiente pelicula");
- BotonI[4].dibujarBoton(4, 3, "pelicula anterior");
- } else if (pantalla==5) {
- peliculas.dibujarFondo(4);
- titulo.texto("Tinkerbell:El Tesoro Perdido", width/2, 350);
- BotonD[6].dibujarBoton(5, 6, "siguiente pelicula");
- BotonI[5].dibujarBoton(5, 4, "pelicula anterior");
- } else if (pantalla==6) {
- peliculas.dibujarFondo(5);
- titulo.texto("Tinkerbell:La Bestia\nde Nunca Jamas", width/2, 320);
- BotonI[6].dibujarBoton(6, 5, "pelicula anterior");
- }
- }
- void accionarBotones() {
- if (BotonD[1].botonPress(width-anchoB, altoB, anchoB, altoB) && pantalla==BotonD[1].actual) {
- pantalla = BotonD[1].prox;
- }
- if (BotonD[2].botonPress(width-anchoB, altoB, anchoB, altoB)&&pantalla==BotonD[2].actual) {
- pantalla = BotonD[2].prox;
- }
- if (BotonD[3].botonPress(width-anchoB, altoB, anchoB, altoB)&& pantalla==BotonD[3].actual) {
- pantalla = BotonD[3].prox;
- }
- if (BotonD[4].botonPress(width-anchoB, altoB, anchoB, altoB)&& pantalla==BotonD[4].actual) {
- pantalla = BotonD[4].prox;
- }
- if (BotonD[5].botonPress(width-anchoB, altoB, anchoB, altoB)&& pantalla==BotonD[5].actual) {
- pantalla = BotonD[5].prox;
- }
- if (BotonD[6].botonPress(width-anchoB, altoB, anchoB, altoB)&& pantalla==BotonD[6].actual) {
- pantalla = BotonD[6].prox;
- }
- if (BotonI[1].botonPress(0, altoB, anchoB, altoB) && pantalla==BotonI[1].actual) {
- pantalla = BotonI[1].prox;
- }
- if (BotonI[2].botonPress(0, altoB, anchoB, altoB)&&pantalla==BotonI[2].actual) {
- pantalla = BotonI[2].prox;
- }
- if (BotonI[3].botonPress(0, altoB, anchoB, altoB)&& pantalla==BotonI[3].actual) {
- pantalla = BotonI[3].prox;
- }
- if (BotonI[4].botonPress(0, altoB, anchoB, altoB)&& pantalla==BotonI[4].actual) {
- pantalla = BotonI[4].prox;
- }
- if (BotonI[5].botonPress(0, altoB, anchoB, altoB)&& pantalla==BotonI[5].actual) {
- pantalla = BotonI[5].prox;
- }
- if (BotonI[6].botonPress(0, altoB, anchoB, altoB)&& pantalla==BotonI[6].actual) {
- pantalla = BotonI[6].prox;
- }
- }
- }
pantalla clase pelicula
- class Fondos {
- PImage pelicula1, pelicula2, pelicula3, pelicula4, pelicula5, pelicula6;
- int miFondo;
- PImage [] fondos = new PImage [7];
- ondos() {
- for (int i=0; i
- fondos[i] = loadImage("pelicula"+i+".jpg");
- }
- }
- void dibujarFondo(int i) {
- image(fondos[miFondo+i], 0, 0, 600, 400);
- }
- }
pantalla clase titulos
- class Titulos {
- PFont letra;
- Titulos() {
- letra=loadFont("Kunstler.vlw");
- }
- void texto(String tituloP, int px, int py) {
- push();
- textFont(letra);
- text(tituloP, px, py);
- pop();
- }
- }
pantalla clase botones
- class Boton {
- int bx, by, ancho, alto;
- int actual, prox;
- String texto;
- Boton(int bx, int by, int ancho, int alto) {
- this.bx = bx;
- this.by = by;
- this.ancho = ancho;
- this.alto = alto;
- textAlign(CENTER, CENTER);
- textSize(alto/2);
- }
- void dibujarBoton(int actual, int prox, String texto) {
- this.actual = actual;
- this.prox = prox;
- this.texto = texto;
- fill(0, 255, 100);
- rect(bx, by, ancho, alto);
- fill(0);
- text(texto, bx+ancho/2, by+alto/2);
- }
- boolean botonPress(int bx, int by, int ancho, int alto) {
- return mouseX>bx && mouseXby && mouseY
- }
- }
Trabajo 5 y final
Avanzando con POO
CONSIGNA: crear una aplicación con los siguientes contenidos:
- Lógica de estados:
- Una pantalla de inicio.
- Pantallas de desarrollo.
- Pantalla de créditos (con posibilidad de reiniciar el programa).
- Programado íntegramente con POO y que incluya al menos un arreglo de objetos.
- Comunicación entre clases a través de sus métodos.
- Implementación de alguna librería de sonido.
-
pantalla clase tp5
- import processing.sound.*;
- SoundFile sonido;
- Juego juego;
- void setup() {
- size(600, 400);
- juego=new Juego();
- //sonido=new SoundFile(this,"sonido.mp3");
- //sonido.loop();
- //sonido.amp(0.3);
- }
- void draw() {
- background(0);
- juego.dibujar();
- if (keyPressed) {
- juego.moverpersonaje(keyCode);
- }
- }
- void mousePressed() {
- juego.accionarBotones();
- }
pantalla clase botones
- class Boton {
- int bx, by, ancho, alto;
- int actual, prox;
- String texto;
- Boton(int bx, int by, int ancho, int alto) {
- this.bx = bx;
- this.by = by;
- this.ancho = ancho;
- this.alto = alto;
- textAlign(CENTER, CENTER);
- textSize(alto/2);
- }
- void dibujarBoton(int actual, int prox, String texto) {
- this.actual = actual;
- this.prox = prox;
- this.texto = texto;
- fill(0, 255, 100);
- rect(bx, by, ancho, alto);
- fill(0);
- text(texto, bx+ancho/2, by+alto/2);
- }
- boolean botonPress(int bx, int by, int ancho, int alto) {
- return mouseX>bx && mouseXby && mouseY
- }
- }
pantalla clase fondo
- class Fondos {
- int miFondo;
- PImage [] fondos = new PImage [6];
- Fondos() {
- for (int i=0; i
- fondos[i] = loadImage("fondo"+i+".jpg");
- }
- }
- void dibujarFondo(int i) {
- imageMode(CORNER);
- image(fondos[miFondo+i], 0, 0, 600, 400);
- }
- }
pantalla clase juego
- class Juego {
- Personaje nena;
- Fondos fondo;
- PFont letra;
- int pantalla;
- int anchoB, altoB;
- int puntos;
- int contador=0;
- Botones [] Boton=new Botones[9];
- Nieve [] nieves = new Nieve[10];
- Juego() {
- nena=new Personaje();
- fondo=new Fondos();
- letra=loadFont("forsa.vlw");
- anchoB=220;
- altoB=30;
- for (int i=0; i<9; i++) {
- Boton[i]=new Botones(width-anchoB, altoB, anchoB, altoB);
- }
- for (int i=0; i
- nieves[i] = new Nieve(50+i*height/6);
- }
- }
- void dibujar() {
- textFont(letra);
- textSize(20);
- text(pantalla, width/2, 100);
- if (pantalla==0) {
- fondo.dibujarFondo(0);
- push();
- textSize(50);
- text("La\n Tormenta", width/2, 100);
- pop();
- text("pasas pantalla haciendo\nclick en los botones.", width/2, 370);
- Boton[1].dibujarBoton(0, 1, "Creditos");
- }
- if (pantalla==1) {
- fondo.dibujarFondo(1);
- push();
- textSize(30);
- text("Juego creado por la alumna: \nAlonso Mayra (91340/9)\nAño: 2022", width/2, 150);
- pop();
- Boton[2].dibujarBoton(1, 2, "Instrucciones");
- }
- if (pantalla==2) {
- fondo.dibujarFondo(2);
- push();
- textSize(30);
- text("Tenes que escapar de la tormenta de\n nieve con las flechitas de izquierda y\n derecha. suerte...", width/2, 120);
- pop();
- text("para ganar tener que aguantar\n 20 segundos sin perder 3 vidas", 170, 300);
- Boton[3].dibujarBoton(2, 3, "Jugar");
- }
- if (pantalla==3) {
- fondo.dibujarFondo(3);
- nena.dibujarnena();
- dibujarjuego();
- perder();
- text("vidas perdidas:", 80, 30);
- text(puntos, 160, 30);
- if (frameCount%60==0) {
- contador++;
- }
- text("tiempo:", 500, 30);
- text(contador, 550, 30);
- if (puntos<3 && contador==20) {//condicion para ganar
- pantalla=4;
- puntos=0;
- contador=0;
- }
- if (puntos==3) {//condicion para perder
- pantalla=5;
- puntos=0;
- contador=0;
- }
- }
- if (pantalla==4) {//gano
- fondo.dibujarFondo(4);
- Boton[4].dibujarBoton(4, 0, "volver al inicio");
- push();
- textSize(30);
- text("felicitaciones ganaste!\npodes volver al inicio", width/2, 100);
- pop();
- }
- if (pantalla==5) {//perdio
- fondo.dibujarFondo(5);
- Boton[5].dibujarBoton(5, 0, "volver al inicio");
- push();
- textSize(30);
- text("lo siento perdiste!\npodes volver al inicio", width/2, 100 );
- pop();
- }
- println(pantalla+" "+puntos+" "+contador);
- void accionarBotones() {
- }
- if (Boton[1].botonPress(width-anchoB, altoB, anchoB, altoB) && pantalla==Boton[1].actual) {
- pantalla = Boton[1].prox;
- }
- if (Boton[2].botonPress(width-anchoB, altoB, anchoB, altoB)&&pantalla==Boton[2].actual) {
- pantalla = Boton[2].prox;
- }
- if (Boton[3].botonPress(width-anchoB, altoB, anchoB, altoB)&& pantalla==Boton[3].actual) {
- pantalla = Boton[3].prox;
- }
- if (Boton[4].botonPress(width-anchoB, altoB, anchoB, altoB)&& pantalla==Boton[4].actual) {
- pantalla = Boton[4].prox;
- }
- if (Boton[5].botonPress(width-anchoB, altoB, anchoB, altoB)&& pantalla==Boton[5].actual) {
- pantalla = Boton[5].prox;
- }
- }
- void moverpersonaje(int tecla) {
- nena.movernena(tecla);
- }
- void dibujarjuego() {
- for (int i=0; i
- nieves[i].dibujarcopo();
- nieves[i].movercopo();
- }
- }
- void perder() {
- for (int i=0; i
- float distancia = dist(nena.nx, nena.ny, nieves[i].cx, nieves[i].cy);
- if (distancia
- nieves[i].derribado();
- puntos++;
- }
- }
- }
- }
pantalla clase nieve
- class Nieve {
- PImage copo;
- float cx, cy, ctam, nvel;
- boolean copoderribado;
- Nieve(float n) {
- copo=loadImage("copo.png");
- ctam = 20;
- cy =random(width, width);
- cx = n;
- nvel = random(1, 1);
- copoderribado = false;
- }
- void dibujarcopo() {
- imageMode(CENTER);
- image(copo, cx, cy, 40, 40);
- }
- void movercopo() {
- if (cy>height+ctam || copoderribado) {
- cy =random(-height/2, -ctam);
- ctam = 20;
- nvel = random(2, 4);
- copoderribado = false;
- }
- cy+=nvel;
- }
- void derribado() {
- copoderribado=true;
- }
- }
pantalla clase personaje
- class Personaje {
- PImage nena;
- int nx, ny, ntam;
- Personaje() {
- nena=loadImage("nena.png");
- nx=width/2;
- ny=330;
- ntam=10;
- }
- void dibujarnena() {
- imageMode(CENTER);
- image(nena, nx, ny, 100, 160);
- }
- void movernena(int tecla) {
- if (tecla==RIGHT && ny
- nx+=3;
- }
- if (tecla==LEFT && nx>ntam/4) {
- nx-=3;
- }
- if (nx>width) {
- nx=0;
- }
- }
- }
Metodo de entrega para los trabajos
<6>Para entregar los trabajos de debe subir los archivos de processing a la pagina llamada GitHub
- Lo primero que debemos hacer en crearnos una cuenta en GitHub
- Luego crear un repositorio para la materia "tecnomultimedia".
- se crean ranchs para cada trabajo ej: tp0
- subir los archivos en cada branch dependiendo el numero de trabajo
- copiamos la URL de la pagina y la subimos al colaboratorio.
Video explicativo del trabajo
Se debe hacer una breve presentación personal y una explicando del programa realizado (código) aproximadamente de una duracion de 2 minutos como maximo..
creditos
Alonso Mayra cursando el primer año de la carrera de diseño multimedial