Trabajos Prácticos con Processing
En esta página mostraré una serie de trabajos que realicé con el lenguaje de programación Processing a lo largo del año 2021. Son 5 trabajos que irán avanzando en complejidad conforme pasen. Dentro de cada pestaña será visible tanto la consigna, como el código y una vista previa del programa corriendo.
¿Qué es Processing?
Processing es un lenguaje de programación y entorno de desarrollo integrado de código abierto basado en Java, de fácil utilización, y que sirve como medio para la enseñanza y producción de proyectos multimedia e interactivos de diseño digital. Fue iniciado por Ben Fry y Casey Reas, ambos miembros de Aesthetics and Computation Group del MIT Media Lab dirigido por John Maeda. Uno de los objetivos declarados de Processing es el de actuar como herramienta para que artistas, diseñadores visuales y miembros de otras comunidades ajenos al lenguaje de la programación, aprendieran las bases de la misma a través de una muestra gráfica instantánea y visual de la información. El lenguaje de Processing se basa en Java, aunque hace uso de una sintaxis simplificada y de un modelo de programación de gráficos.
TP#1 - Círculo Cromático
Consigna:
Crear tu propia versión de un círculo cromático con colores primarios, secundarios y terciarios (RGB). El círculo cromático es una representación ordenada y circular de los colores de acuerdo con su matiz, en donde se representa a los colores primarios y sus derivados. El TP debe ser realizado solo con instrucciones de dibujo. No debe haber ni eventos ni condicionales.
Resultado:
Código:
size(400,400);
background(180);
fill(0);
ellipse(200,200,400,400);
//COLORES TERCIARIOS
noStroke();
//Naranja-------------
fill(255,128,0);
ellipse(275,70,100,100);
//Lima----------------
fill(191, 255, 0);
ellipse(350,200,100,100);
//Verde Cian----------
fill(0,255,128);
ellipse(275,330,100,100);
//Azur----------------
fill(0,113,188);
ellipse(125,330,100,100);
//Violeta-------------
fill(180,0,255);
ellipse(50,200,100,100);
//Fucsia--------------
fill(255,0,180);
ellipse(125,70,100,100);
// COLORES RGB
//Rojo----------------
fill(255,0,0);
ellipse(200,50,100,100);
//Verde---------------
fill(0,255,0);
ellipse(330,275,100,100);
//Azul----------------
fill(0,0,255);
ellipse(70,275,100,100);
//COLORES YCM
//Amarillo------------
fill(255,255,0);
ellipse(330,125,100,100);
//Cian---------------
fill(0,255,255);
ellipse(200,350,100,100);
//Magenta-------------
fill(255, 0, 225);
ellipse(70,125,100,100);
//Circulos exterior-interior
noFill();
stroke(0);
strokeWeight(20);
ellipse(200,200,400,400);
fill(255);
ellipse(200,200,185,185);
//Circulos Centrales
fill(255);
ellipse(200,200,150,150);
ellipse(200,200,100,100);
//Cruz Central
fill(0);
noStroke();
ellipse(225,225,45,45); //abajo der.
ellipse(225,175,45,45); //arriba der.
ellipse(175,225,45,45); //abajo izq.
ellipse(175,175,45,45); //arriba izq.
//Estrella
noFill();
strokeWeight(5);
stroke(150);
triangle(275,70,50,200,275,330); //Terciarios
triangle(125,70,350,200,125,330);
stroke(200);
triangle(70,125,330,125,200,350); //Secundarios
stroke(255);
triangle(200,50,330,275,70,275); //Primarios
TP#2 - Animando con Código
Consigna:
Crear una animación con la secuencia de créditos de una película o videojuego seleccionado. Al menos debe contener cinco secuencias de información. Por ejemplo:
- - Título: una pantalla
- - Protagonistas principales y secundarios: 2 o 3 pantallas
- - Música y direción: 2 o 3 pantallas
Sería importante respetar la estética de la obra seleccionada.
Resultado:
Código:
PImage fondo, fondo2;
PFont fuente;
int a;
void setup() {
size (600, 400);
fondo = loadImage("imagen1.png");
fondo2 = loadImage("imagen2.png");
imageMode(CENTER);
fuente = createFont("Sun zoom spark.ttf", 50);
a = 0;
// TITULO
background(0);
image(fondo, width/2, height/2, width, height);
}
void draw () {
textFont(fuente);
a = a+1;
//1era pantalla
if (a>120 && a<240) {
image(fondo2, width/2, height/2, width, height);
textSize(30);
textAlign(CENTER);
text("CO - STARRING", width/2, 100);
textSize(40);
textAlign(RIGHT);
text("WAYNE PERE \n ISAAC WHITE \n PHILIP FORNAH \n JAIDEN KAINE", width/2, 170);
textSize(20);
textAlign(LEFT);
text(" LAWRENCE FREMER \n \n DANIEL \n \n GUIDE 1 \n \n KENYAN POLICEMAN", width/2, 170);
}
// 2da pantalla
if (a>240 && a<360) {
image(fondo2, width/2, height/2, width, height);
textSize(30);
textAlign(CENTER);
text("CO - STARRING", width/2, 100);
textSize(40);
textAlign(RIGHT);
text("BRANDON SCOTT STACY \n SHANE JACOBSEN \n GARRETT KRUITHOF \n JAY S. POTTER \n STELLA ALLEN", width/2, 170);
textSize(20);
textAlign(LEFT);
text(" BLAINE \n \n RUDY \n \n AUSTRALIAN DUDE \n \n REPORTER \n \n FREMER'S DAUGHTER", width/2, 170);
}
// 3era pantalla
if (a>360 && a<480) {
image(fondo2, width/2, height/2, width, height);
textSize(20);
textAlign(CENTER);
text("UNIT PREODUCTION MANAGER", width/2, 100);
textSize(40);
text("CYNDI BENNER", width/2, 150);
textSize(20);
text("FIRST ASSISTANT DIRECTOR", width/2, 200);
textSize(40);
text("ROBERT SCHROER", width/2, 250);
textSize(20);
text("SECOND ASSISTANT DIRECTOR", width/2, 300);
textSize(40);
text("JASON ALTIERI", width/2, 350);
}
// 4ta pantalla
if (a>480 && a<600) {
image(fondo2, width/2, height/2, width, height);
textSize(20);
textAlign(CENTER);
text("CASTING BY", width/2, 100);
textSize(40);
text("DONNA ROSEINSTEIN, CSA", width/2, 150);
textSize(20);
text("RON DIGMAN", width/2, 180);
textSize(20);
text("NEW ORLEANS CASTING BY", width/2, 250);
textSize(40);
text("MEAGAN LEWIS, CSA", width/2, 300);
}
// 5ta pantalla
if (a>600 && a<720) {
image(fondo2, width/2, height/2, width, height);
textSize(20);
textAlign(RIGHT);
text("ART DIRECTOR \n \n SET DECORATOR \n \n LOCATIONS MANAGER \n \n PROPERTY MASTER \n \n PRODUCTION ACCONUNTANT \n \n 1ST ASSISTANT ACCOUNTANT", width/2, 100);
textSize(40);
textAlign(LEFT);
text(" JAY HINKLE \n KRISTIN BICKSLER \n JOHN JOHNSTON \n MICHAEL MARTIN \n CARI STORY \n EMMA FULLER", width/2, 100);
}
// 6ta pantalla
if (a>720 && a<840) {
image(fondo2, width/2, height/2, width, height);
textSize(20);
textAlign(RIGHT);
text("CHIED LIGHTING TECHNICIAN \n \n FIRST COMPANY GRIP \n \n A CAMERA OPERATOR \n \n B CAMERA OPERATOR \n \n PRODUCTION SOUND MIXER", width/2, 120);
textSize(40);
textAlign(LEFT);
text(" MAX POMERLEAU \n CHRIS EKSTROM \n COLIN HUDSTON \n REMI TOURNOIS \n DAN IZEN", width/2, 120);
}
}
TP#3 - Ilusión Óptica Interactiva
Consigna:
Crear una ilusión óptica interactiva con estructuras repetitivas (ciclos for).
Contenidos obligatorios:
- - Estructuras repetitivas (ciclos for): simples o anidados.
- - 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.
Contenidos optativos:
- - Variables de Processing: frameCount, mouseX, mouseY, width, height, etc.
- - Colisión de coordenadas en superficies circulares o rectangulares (zonas y botones).
- - Manejo del tiempo con contadores o millis().
Resultado:
Código:
int tam, z, dire, contador;
boolean cambio;
void setup() {
size(600, 400);
tam = 50;
surface.setResizable(true);
cambio = (false);
}
void draw() {
rectMode(CENTER);
if (contador%10==0) {
stroke(random(30, map(mouseX, 0, width, 200, width)), 0, random(30, map(mouseY, 0, height, 200, height)));
}
strokeWeight(3);
z = 0;
dire = 1;
contador++;
for (int fila = 0; fila < height; fila += tam) {
boolean negro = true;
for (int columna = 0; columna < width+tam; columna += tam) {
if (negro) {
fill(0);
if(cambio){
fill(255);
}
} else {
fill(255);
if(cambio){
fill(0);
}
}
rect(columna + z, fila + (tam / 2), tam, tam);
negro = !negro;
}
z += 12.5 * dire;
if (z >= 20) {
dire = -1;
}
if (z <= 0) {
dire = 1;
}
}
}
void mousePressed() {
cambio = !cambio;
}
TP#4 - Aventura Gráfica
Consigna:
Crear una aventura gráfica que haga uso de arreglos y funciones.
Contenidos obligatorios:
- - Estructuras repetitivas (ciclos for): simples o anidados.
- - Condicionales (if - else): interactuar con los índices.
- - Arreglos (array []): poder grabar y leer valores de los mismos.
- - Funciones: crear funciones propias aplicando el concepto de generalidad, así como el retorno de valores en al menos una.
- - Una pantalla de inicio con opción a iniciar la aventura y a ver los créditos
- - Al menos 15 pantallas para armar como mínimo 3 caminos diferentes en la aventura
- - Reiniciar el programa: volver variables a estado original.
- - Resolución máxima de 800x600
Resultado:
Código:
PImage [] fondos;
PFont fuenteBotones, fuenteTitulo;
int Pantalla = 0;
int offsetX, offsetY; //Reemplazo del translate
int ejeBotonX = 0; //RectMode Off
int tamBotX, tamBotY, pBotX, pBotY; //Tamaño y posición de los botones
int decision;
void setup() {
size(800, 600);
offsetX = width/2;
offsetY = height/2;
tamBotX = 300;
tamBotY = 50;
pBotX = width/4;
pBotY = height/3;
//Cargar Imágenes
fondos = new PImage[13];
for (int i=0; i<13; i++) {
fondos[i] = loadImage("fondo_"+i+".jpg");
}
//Cargar Fuentes
fuenteBotones = createFont("DIOGENES.ttf", 25);
fuenteTitulo = createFont("adrip1.ttf", 90);
}
boolean isEnBoton(int tx, int ty, int w, int h) { //Distancia
int topX = tx - (w/2);
int topY = ty - (h/2);
return mouseX >= topX + offsetX && mouseX <= topX + offsetX + w && mouseY >= topY + offsetY && mouseY <= topY + offsetY + h;
}
void draw() {
if (Pantalla == 0) {
// Inicio
image(fondos[0], 0, 0);
Titulo("EL LABERINTO\n DEL MINOTAURO", 0, height/8, width, height);
Boton ("Empezar", ejeBotonX, height/8, tamBotX, tamBotY);
Boton ("Créditos", ejeBotonX, height/4, tamBotX, tamBotY);
} else if (Pantalla == 1) {
// Créditos
image(fondos[0], 0, 0);
Titulo("CREDITOS", 0, height/8, width, height);
Creditos("Jade Paoletti \n Comisión 1 \n Tecnología Multimedial 1 \n Prof. José Luis Bugiolachi", 0, height/3, width, height);
Boton("Volver al inicio", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 2) {
//Página 2
image(fondos[1], 0, 0);
Texto("El minotauro era hijo de Pasifae, esposa del rey Minos de Creta y de un toro blanco enviado por Poseidón, dios del mar.", 0, height/4, width/2, height);
Boton("Siguiente", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 3) {
//Página 3
image(fondos [2], 0, 0);
Texto("Minos había ofendido gravemente a Poseidón quien como venganza hizo que Pasifae se enamorase del animal. Fruto de dicha unión nació el Minotauro, un ser violento, mitad hombre, mitad toro, que se alimentaba de carne humana.", 0, height/15, width/2, height);
Boton("Siguiente", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 4) {
//Página 4
image(fondos [4], 0, 0);
Texto2("Esta bestia fue encerrada en un laberinto que construyó el artesano Dédalo, un laberinto del que todo aquel que entraba nunca salía. Era devorado por el Minotauro con el que el rey Minos de Creta tenía aterrorizados a sus vecinos que todos los años le pagaban un tributo para que los dejara en paz.", 0, height/15, width, height);
Boton("Siguiente", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 5) {
//Página 5
image(fondos [5], 0, 0);
Texto2("Mientras el Minotauro vagaba por el laberinto del palacio de Creta, ocurrió una desgracia: Andrógeno, hijo del rey Minos, fue asesinado tras ganar una olimpiada y su padre declaró la guerra a Atenas, que acabó rindiéndose. La rendición tuvo un precio: entregar siete hombres y siete mujeres al terrible laberinto. Y así lo hacía el rey de Atenas, Egeo.", 0, height/15, width, height);
Boton("Siguiente", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 6) {
//Página 6
image(fondos [6], 0, 0);
Texto("Su hijo Teseo, príncipe de \nAtenas, estaba harto de \nperder a su gente. Quería viajar él mismo y acabar con la bestia de una vez por todas, pero también temía por su vida.", 0, height/15, width/2, height);
Texto3("¿Atravesará Teseo la aventura?", width/50, height/5, width/2, height);
Boton("Si, parte hacia Creta", pBotX, height/5, tamBotX, tamBotY);
Boton("No, se queda en Atenas", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 7) {
//Página 7 (Opción "NO") 1er final
image(fondos [7], 0, 0);
Texto2("Teseo decidió que era muy descabellado para un miembro de la realeza ir a una aventura tan peligrosa, cualquier otro podría hacerlo. Pero la realidad es que nadie ha vencido ni vencerá al terrible Minotauro. El ciclo se repitó hasta que finalmente nadie quedó en Atenas", 0, height/15, width, height);
Titulo("FIN", 0, 300, width, height);
Boton("Volver al inicio", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 8) {
//Página 8 (Opción "SI")
image(fondos [6], 0, 0);
Texto("Su hijo Teseo se envalentonó y zarpó junto a otros trece jóvenes para Creta mientras su padre le pedía que si lograba su propósito alzara una vela blanca en su embarcación; de lo contrario, desplegaría una de color negro.", 0, height/15, width/2, height);
Boton("Siguiente", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 9) {
//Página 9
image(fondos [8], 0, 0);
Texto("Ariadna, la hija del rey Minos, quien estaba enamorada del joven, le ofreció ayuda en su recorrido por el laberinto. Le ofreció un ovillo de hilo para saber por dónde regresar en caso de acabar con el Minotauro.", 0, height/15, width/2, height);
Texto3("¿Aceptará nuestro héroe la ayuda del enemigo?", width/50, height/5, width/2, height);
Boton("Si, toda ayuda vale", pBotX, height/5, tamBotX, tamBotY);
Boton("Puede ser una trampa...", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 10) {
//Página 10 (Rama Denegando ayuda de Ariadna)
image(fondos [8], 0, 0);
Texto("Teseo decide que no confía en la princesa de Creta, a pesar de que podría ser una gran ventaja. Así que continúa por el famoso laberinto, seguido por su atemorizada gente.", 0, height/15, width/2, height);
Boton("Siguiente", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 11) {
//Página 11 (Rama Aceptando ayuda de Ariadna)
image(fondos [8], 0, 0);
Texto("Teseo acepta y agradece la ayuda de la princesa. Ese ovillo de hilo podría ser crucial al momento de salir del laberinto o quedar atrapado en él por el resto de sus vidas. Ató de un poste un extremo del ovillo antes de entrar.", 0, height/15, width/2, height);
Boton("Siguiente", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 12) {
//Página 12 (Rama Aceptando y denegando ayuda de Ariadna)
image(fondos [9], 0, 0);
Texto2("El príncipe de Atenas dio un paso al frente y se ofreció el primero para adentrarse en el laberinto. Estaba muy oscuro y no sabía qué camino tomar. Cada paso conducía a una muerte segura. Se preguntaba si en el camino habría algo que lo ayude a derrotar a la bestia...", 0, height/15, width, height);
Texto3("En la primera intersección hay dos caminos ¿Por cual debería seguir?", width/50, height/7, width/2, height);
Boton("El de la calavera", pBotY, height/5, tamBotX, tamBotY);
Boton("El de la antorcha", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 13) {
//Página 13 (Rama Aceptando y denegando ayuda de Ariadna) & (Rama de la Calavera 1)
image(fondos [10], 0, 0);
Texto("Teseo y sus seguidores continúan por el camino de la calavera. A lo largo del oscuro pasillo se encuentran diferentes partes óseas y telas de araña. Teseo aprovecha para fabricar un arma que lo ayude a enfrentar al Minotauro.", 0, height/15, width/2, height);
Boton("Siguiente", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 14) {
//Página 14 (Rama Aceptando y denegando ayuda de Ariadna) & (Rama de la Antorcha 1)
image(fondos [10], 0, 0);
Texto("Teseo y sus seguidores continúan por el camino de la antorcha. A lo largo del pasillo iluminado por la antorcha, se escuchaban los ecos de los jóvenes quienes aterrorizados rogaban a sus dioses por sus vidas.", 0, height/15, width/2, height);
Boton("Siguiente", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 15) {
//Página 15 (Rama Aceptando y denegando ayuda de Ariadna) & (Rama de la Calavera 2)
image(fondos [3], 0, 0);
Texto("Siguieron caminando hasta encontrarse en un inmenso y oscuro salón. Un nauseabundo olor a podredumbre se sentía en el ambiente y el aire era frío y húmedo. De repente, unos ojos rojos brillantes aparecieron en la oscuridad.", 0, height/15, width/2, height);
Boton("Siguiente", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 16) {
//Página 16 (Rama Aceptando y denegando ayuda de Ariadna) & (Rama de la Antorcha 2)
image(fondos [3], 0, 0);
Texto("Siguieron caminando hasta encontrarse en un inmenso y oscuro salón. Un nauseabundo olor a podredumbre se sentía en el ambiente y el aire era frío y húmedo. De repente, unos ojos rojos brillantes aparecieron en la oscuridad.", 0, height/15, width/2, height);
Boton("Siguiente", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 17) {
//Página 17 (Rama Aceptando y denegando ayuda de Ariadna) & (Rama de la Calavera 3)
image(fondos [11], 0, 0);
Texto("Al ver al joven armado, el Minotauro rugió, derribó a Teseo de un empujón y lo pisoteó con sus afiladas pezuñas. Pelearon completamente a oscuras. El monstruo le estrujó entre sus brazos peludos y le azotó con su cola.", 0, height/15, width/2, height);
Boton("Siguiente", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 18) {
//Página 18 (Rama Aceptando y denegando ayuda de Ariadna) & (Rama de la Calavera 4)
image(fondos [11], 0, 0);
Texto("Pero Teseo le agarró por los cuernos y los giró primero hacia un lado, después hace el otro. Le pateó, le embistió, forcejeó con él, y en una oportunidad, lo insartó con el arma de huesos. Finalmente la bestia profirió un balbuceo y cayó muerta.", 0, height/15, width/2, height);
Boton("Siguiente", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 19) {
//Página 19 (Rama Denegando ayuda de Ariadna) & (Rama de la Calavera y Antorcha 5) 2do Final
image(fondos [4], 0, 0);
Texto2("Todos aclamaron al valiente príncipe. Pero el desafío aún no había acabado; al no haber aceptado la ayuda de Ariadna, estaban perdidos dentro del laberinto. Teseo y sus seguidores pasaron el resto de sus vidas tratando de encontrar la salida, mientras cada vez más jóvenes eran eviados a sufrir el mismo destino.", 0, height/15, width, height);
Titulo("FIN", 0, 300, width, height);
Boton("Volver al inicio", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 20) {
//Página 20 (Rama Denegando ayuda de Ariadna) & (Rama de la Antorcha 3)
image(fondos [11], 0, 0);
Texto2("El Minotauro rugió, y cegado por la luz, embistió contra Teseo. La llama que antes lo había ayudado a ver en la oscuridad del laberinto, ahora yacía sobre su pecho. Ambos pelearon prendidos en llamas entre gritos y rugidos hasta que finalmente cayeron al suelo carbonizados.", 0, height/15, width, height);
Titulo("FIN", 0, 300, width, height);
Boton("Volver al inicio", pBotX, pBotY, tamBotX, tamBotY);
} else if (Pantalla == 21) {
//Página 21 (Rama Aceptando ayuda de Ariadna) & (Rama de la Calavera 5) 3er Final
image(fondos [12], 0, 0);
Texto2("Todos aclamaron al valiente príncipe, había hecho lo que nadie más había podido. Usando el hilo que había dejado en la puerta del gran salón, volvieron a la salida, sanos y salvo y Ariadna se fue con ellos. Emocionado por su victoria, a Teseo se le olvidó cambiar la vela negra por la blanca, por lo que su padre, al ver desde la Acrópolis la tela azabache, pensó que su hijo había sido devorado por el Minotauro y se arrojó al vacío.", 0, height/15, width, height);
Titulo("FIN", 0, 370, width, height);
Boton("Volver al inicio", pBotX, pBotY, tamBotX, tamBotY);
}
}
//CLICK BOTONES
void mouseReleased() {
switch(Pantalla) {
case 0:
{
if (isEnBoton(ejeBotonX, height/4, tamBotX, tamBotY)) {
Pantalla = 1;
}
if (isEnBoton(ejeBotonX, height/8, tamBotX, tamBotY)) {
Pantalla = 2;
}
}
break;
case 1:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 0;
}
}
break;
case 2:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 3;
}
}
break;
case 3:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 4;
}
}
break;
case 4:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 5;
}
}
break;
case 5:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 6;
}
}
break;
case 6:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 7;
}
if (isEnBoton(width/4 + ejeBotonX, height/5, tamBotX, tamBotY)) {
Pantalla = 8;
}
}
break;
case 7:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 0;
}
}
break;
case 8:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 9;
}
}
break;
case 9:
{
if (isEnBoton(width/4 + ejeBotonX, height/5, tamBotX, tamBotY)) {
Pantalla = 11;
decision = 11;
}
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 10;
decision = 10;
}
}
break;
case 10:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 12;
}
}
break;
case 11:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 12;
}
}
break;
case 12:
{
if (isEnBoton(width/4 + ejeBotonX, height/5, tamBotX, tamBotY)) {
Pantalla = 13;
}
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 14;
}
}
break;
case 13:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 15;
}
}
break;
case 15:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 17;
}
}
break;
case 17:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 18;
}
}
break;
case 18:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
if (decision == 10) {
Pantalla = 19;
} else {
Pantalla = 21;
}
}
}
break;
case 19: //FINAL 1
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 0;
}
}
break;
case 14:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 16;
}
}
break;
case 16:
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 20;
}
}
break;
case 20: // FINAL 2
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 0;
}
}
break;
case 21: // FINAL 3
{
if (isEnBoton(width/4 + ejeBotonX, height/3, tamBotX, tamBotY)) {
Pantalla = 0;
}
}
break;
}
}
void Boton(String texto_, float x_, float y_, float tamx_, float tamy_) {
pushStyle();
pushMatrix();
//cambiar el color del boton
if (isEnBoton((int) x_, (int) y_, (int) tamx_, (int) tamy_)) {
fill(108, 0, 0);
} else {
fill(157, 0, 0);
}
textFont(fuenteBotones);
noStroke();
rectMode(CENTER);
rect(x_ + offsetX, y_ + offsetY, tamx_, tamy_, 5);
fill(255);
textAlign(CENTER);
text(texto_, x_ + offsetX, y_ + offsetY + tamy_/6);
popStyle();
popMatrix();
}
void Creditos(String creditos_, float xcred_, float ycred_, float tamxcred_, float tamycred_) {
pushStyle();
pushMatrix();
textSize(30);
textFont(fuenteBotones);
textLeading(50);
textAlign(CENTER);
fill(255);
text(creditos_, xcred_, ycred_, tamxcred_, tamycred_);
popStyle();
popMatrix();
}
void Texto(String texto_, float xtex_, float ytex_, float tamxtex_, float tamytex_) {
pushStyle();
pushMatrix();
textFont(fuenteBotones);
textLeading(50);
textAlign(LEFT);
fill(255);
text(texto_, xtex_ + offsetX, ytex_, tamxtex_, tamytex_);
popStyle();
popMatrix();
}
void Texto2(String texto2_, float xtex2_, float ytex2_, float tamxtex2_, float tamytex2_) {
pushStyle();
pushMatrix();
textFont(fuenteBotones);
textLeading(50);
textAlign(CENTER);
fill(255);
text(texto2_, xtex2_, ytex2_, tamxtex2_, tamytex2_);
popStyle();
popMatrix();
}
//Preguntas del camino
void Texto3(String texto3_, float xtex3_, float ytex3_, float tamxtex3_, float tamytex3_) {
pushStyle();
pushMatrix();
textFont(fuenteBotones);
textLeading(50);
textAlign(LEFT);
text(texto3_, xtex3_, ytex3_ + offsetY, tamxtex3_, tamytex3_);
popStyle();
popMatrix();
}
void Titulo(String titulo_, float xtit_, float ytit_, float tamxtit_, float tamytit_) {
pushStyle();
pushMatrix();
textSize(60);
textFont(fuenteTitulo);
textLeading(100);
textAlign(CENTER);
fill(157, 0, 0);
text(titulo_, xtit_, ytit_, tamxtit_, tamytit_);
popStyle();
popMatrix();
}
Diagrama de Flujo:
TP#5 - Video Juego
Consigna:
Crear un video juego hecho completamente en objetos relacionado con la aventura gráfica del TP4. El video juego debe ser pensado para reemplazar una de las pantallas de conflicto de la aventura gráfica.
Contenidos obligatorios:
- - Objetos: todo el video juego debe ser hecho enteramente en objetos, con la menos 4 clases involucradas.
- - Estructuras repetitivas (ciclos for): simples o anidados.
- - Condicionales (if - else): interactuar con los índices.
- - Arreglos (array []): poder grabar y leer valores de los mismos.
- - Una pantalla de inicio con opción a iniciar el video juego
- - El video juego debe poseer una interacción que permita ganar o perder
- - Reiniciar el programa: al finalizar, se debe poder volver al inicio.
- - Resolución máxima de 800x600
Resultado:
Código:
Juego juego;
void setup() {
size(800, 600);
juego = new Juego(100, 1);
}
void draw() {
juego.dibujar();
}
void mouseReleased() {
juego.pasarPantalla(juego.botonEmpezar);
juego.pasarPantalla(juego.botonVolver);
juego.pasarPantalla(juego.botonReintentar);
}
class Barco {
Juego juego;
Carril carrilActual;
Obstaculo obstaculo;
float posCarril = 3;
float alto, ancho, posX;
PImage imgBarco;
Barco (Juego juego_, Carril carrilActual_, PImage imgBarco_, float posX_, float ancho_, float alto_) {
juego = juego_;
carrilActual = carrilActual_;
imgBarco = imgBarco_;
alto = alto_;
ancho = ancho_;
posX = posX_;
}
void dibujar() {
pushMatrix();
pushStyle();
carrilActual.dibujarBarco(this);
popMatrix();
popStyle();
}
void mover(int tecla) {
if (tecla==UP) {
juego.moverBarcoArriba(this);
}
if (tecla==DOWN) {
juego.moverBarcoAbajo(this);
}
}
}
class Boton {
Juego juego;
String etiqueta;
PFont fontBoton;
int alto, ancho, posX, posY;
boolean isMouseOver() {
if (mouseX >= posX-ancho/2 && mouseX <= posX+ancho/2 && mouseY >= posY-alto/2 && mouseY <= posY+alto/2) {
return true;
} else {
return false;
}
}
Boton (Juego juego_, String etiqueta_, PFont fontBoton_, int posX_, int posY_, int ancho_, int alto_) {
juego = juego_;
etiqueta = etiqueta_;
fontBoton = fontBoton_;
posX = posX_;
posY = posY_;
alto = alto_;
ancho = ancho_;
}
void dibujar() {
pushStyle();
//boton
if (isMouseOver()) {
fill(108, 0, 0);
} else {
fill(157, 0, 0);
}
textFont(fontBoton, 30);
noStroke();
rectMode(CENTER);
rect(posX, posY, ancho, alto, 5);
pushStyle();
//etiqueta
fill(255);
textAlign(CENTER, CENTER);
text(etiqueta, posX, posY);
popStyle();
popStyle();
}
}
class Carril {
Juego juego;
Obstaculo obstaculo;
float ancho, alto, posY;
int nroCarril;
Carril(Juego juego_, int nroCarril_, float ancho_, float alto_) {
juego = juego_;
nroCarril = nroCarril_;
posY = nroCarril_*alto_;
ancho = ancho_;
alto = alto_;
}
void dibujarBarco(Barco barco) {
image(barco.imgBarco, barco.posX, this.posY, barco.ancho, barco.alto);
}
void dibujarObstaculo(Obstaculo obstaculo) {
image(obstaculo.imgObstaculo, obstaculo.posX, this.posY, obstaculo.ancho, obstaculo.alto);
}
}
class Juego {
int cantImagen = 7;
int cantFondoJuego = 17, inicioFondoJuego = 0;
int cantFuente = 2;
int cantCarriles = 6;
// ARREGLOS PARA IMAGENES Y FUENTES ------------------------->
PImage [] imagen = new PImage[cantImagen];
PImage [] fondoJuego = new PImage[cantFondoJuego];
PFont [] fuentes = new PFont[cantFuente];
int cantVidas, cantMin;
int milSeg, seg, min;
int pantalla = 0;
int frame = 0;
Barco barco;
Boton botonEmpezar, botonVolver, botonReintentar;
// ARREGLOS DE OBJETOS -------------------------------------->
Carril [] carriles;
Obstaculo [] obstaculoRoca;
Obstaculo [] obstaculoTiburon;
Juego(int cantVidas_, int cantMin_) {
cantVidas = cantVidas_;
cantMin = cantMin_;
//Cargar imágenes y fuentes:
for (int i = 0; i < imagen.length; i++) {
imagen[i] = loadImage("imagen_"+i+".png");
}
for (int i = 0; i < fondoJuego.length; i++) {
fondoJuego[i] = loadImage("fondo_"+i+".png");
}
for (int i = 0; i < fuentes.length; i++) {
fuentes[i] = createFont("fuente_"+i+".ttf", 10);
}
//Parámetros de objetos:
carriles = new Carril[cantCarriles];
for (int i = 0; i < carriles.length; i++) {
carriles[i] = new Carril(this, i, width, 100);
}
obstaculoRoca = new Obstaculo[8];
for (int i = 0; i < obstaculoRoca.length; i++) {
obstaculoRoca[i] = new Obstaculo(this, carriles[(int)random(carriles.length)], imagen[2], random(width)+width, 100, 100);
}
obstaculoTiburon = new Obstaculo [4];
for (int i = 0; i < obstaculoTiburon.length; i++) {
obstaculoTiburon[i] = new Obstaculo(this, carriles[(int)random(carriles.length)], imagen[3], random(width)+width, 100, 100);
}
barco = new Barco(this, carriles[3], imagen[1], 50, 120, 100);
botonEmpezar = new Boton(this, "Empezar", fuentes[1], width/2, height/2+height/4, 300, 60);
botonVolver = new Boton(this, "Volver al inicio", fuentes[1], width/2, height/2+height/4, 300, 60);
botonReintentar = new Boton(this, "Reintentar", fuentes[1], width/2, height/2+height/4, 300, 60);
}
void dibujar() {
if (pantalla == 0) {
//Pantalla de inicio:
image(imagen[0], 0, 0);
titulo("Minijuego #1", fuentes[0], width/2, height/3, 100);
texto("Muévete con UP y DOWN y esquiva los obstaculos \n -Cada obstáculo que choques, te sacará un cierto porcentaje de tu vida \n -Si logras aguantar 1 min sin perder toda la vida, ganas", fuentes[1], width/2, height/2, 25);
botonEmpezar.dibujar();
} else if (pantalla == 1) {
//Pantalla del videojuego:
if (frame % 5 == 0) {
//Fondo videojuego:
image(fondoJuego[inicioFondoJuego], 0, 0);
inicioFondoJuego = (inicioFondoJuego+1)%fondoJuego.length;
//Barco:
barco.dibujar();
if (keyPressed) {
barco.mover(keyCode);
}
//Obstáculos:
for (int i = 0; i < obstaculoRoca.length; i++) {
obstaculoRoca[i].dibujar();
obstaculoRoca[i].mover();
//Evalúo colision:
if (barco.carrilActual.nroCarril == obstaculoRoca[i].carril.nroCarril) {
if (obstaculoRoca[i].colision(barco.posX, barco.carrilActual.nroCarril, barco.ancho, barco.alto)) {
cantVidas -=2;
}
}
}
for (int i = 0; i < obstaculoTiburon.length; i++) {
obstaculoTiburon[i].dibujar();
obstaculoTiburon[i].mover();
//Evalúo colision:
if (barco.carrilActual.nroCarril == obstaculoTiburon[i].carril.nroCarril) {
if (obstaculoTiburon[i].colision(barco.posX, barco.carrilActual.nroCarril, barco.ancho, barco.alto)) {
cantVidas -=2;
}
}
}
}
//Vidas:
vidas(imagen[6], fuentes[1], 50, 50, 50);
if (cantVidas <= 0) {
pantalla = 3;
}
if (min == cantMin && cantVidas > 0) {
pantalla = 2;
}
//Segundero:
segundero(fuentes[1], 50, 550);
//Velocidad del juego:
frame ++;
if (frame==60) {
frame=0;
}
} else if (pantalla == 2) {
//Pantalla de Victoria:
image(imagen[5], 0, 0);
titulo("¡Victoria!", fuentes[1], width/2, height/3, 100);
botonVolver.dibujar();
} else if (pantalla == 3) {
//Pantalla de Derrota:
image(imagen[4], 0, 0);
titulo("Derrota", fuentes[0], width/2, height/3, 100);
botonReintentar.dibujar();
}
}
void moverBarcoArriba(Barco barco) {
cantCarriles = barco.carrilActual.nroCarril;
if (cantCarriles==0) {
barco.carrilActual = carriles[carriles.length-1];
} else {
barco.carrilActual = carriles[cantCarriles-1];
}
}
void moverBarcoAbajo(Barco barco) {
cantCarriles = barco.carrilActual.nroCarril;
if (cantCarriles==carriles.length-1) {
barco.carrilActual = carriles[0];
} else {
barco.carrilActual = carriles[cantCarriles+1];
}
}
// FUNCIONES ----------------------->
void titulo(String texto, PFont fuente, float posX, float posY, float tam) {
pushStyle();
textFont(fuente, tam);
textLeading(100);
textAlign(CENTER);
fill(157, 0, 0);
text(texto, posX, posY);
popStyle();
}
void texto(String texto, PFont fuente, float posX, float posY, float tam){
pushStyle();
textFont(fuente, tam);
textLeading(30);
textAlign(CENTER);
fill(255);
text(texto, posX, posY);
popStyle();
}
void vidas(PImage imagen, PFont fuente, int posX, int posY, int tam) {
pushStyle();
imageMode(CENTER);
image(imagen, posX, posY, tam, tam);
textFont(fuente, 30);
textAlign(CENTER, CENTER);
fill(255);
text(cantVidas+"%", posX+tam, posY);
popStyle();
}
void segundero(PFont fuente, int posX, int posY) {
pushStyle();
textFont(fuente, 30);
textAlign(CENTER, CENTER);
fill(255);
if (milSeg <= 58 ) {
text(min+":"+seg, posX, posY);
milSeg = milSeg+1;
} else if (seg <= 58) {
seg = seg+1;
milSeg = 0;
text(min+":"+seg, posX, posY);
} else {
min = min+1;
seg = 0;
milSeg = 0;
text(min+":"+seg, posX, posY);
}
popStyle();
}
void reiniciarIndicadores() {
min = 0;
seg = 0;
milSeg = 0;
cantVidas = 100;
}
void reiniciarObstaculos() {
for (int i = 0; i < obstaculoRoca.length; i++) {
obstaculoRoca[i].reiniciar();
}
for (int i = 0; i < obstaculoTiburon.length; i++) {
obstaculoTiburon[i].reiniciar();
}
}
void pasarPantalla(Boton boton) {
if (boton.isMouseOver() && pantalla == 0) {
pantalla = 1;
reiniciarIndicadores();
reiniciarObstaculos();
} else if (boton.isMouseOver() && pantalla == 2) { // Pantalla Victoria
pantalla = 0;
} else if (boton.isMouseOver() && pantalla == 3) { // Pantalla Derrota
pantalla = 0;
}
}
}
class Obstaculo {
Juego juego;
Carril carril;
Barco barco;
float alto, ancho, posX, posY;
float posXInicial;
PImage imgObstaculo;
boolean colision(float posX_, float posY_, float ancho_, float alto_) {
if (
posX-ancho/4 < posX_+ancho_/4 &&
posX+ancho/4 > posX_-ancho_/4 &&
posY < posY_+alto_/2 &&
posY > posY_-alto_/2
) {
return true;
} else {
return false;
}
}
Obstaculo(Juego juego_, Carril carril_, PImage imgObstaculo_, float posX_, float ancho_, float alto_) {
juego = juego_;
carril = carril_;
imgObstaculo = imgObstaculo_;
alto = alto_;
ancho = ancho_;
posX = posX_;
posXInicial = posX_;
}
void dibujar() {
pushMatrix();
pushStyle();
carril.dibujarObstaculo(this);
popMatrix();
popStyle();
}
void mover() {
posX -= 20;
if (posX<0-100) {
posX = 800+random(width);
}
}
void reiniciar() {
posX = posXInicial;
}
}