Trabajo Práctico N°2 - Tecnologías Web

En esta página se muestran ejercicios y trabajos prácticos realizados con programación en la asignatura de Tecnología Multimedial 1, en la carrera de Diseño Multimedial.

¿Qué es Processing?

Processing es un software creado en 2001 por Ben Fry y Casey Reas para producir imágenes, interacciones y animaciones. Es un lenguaje de programación de código abierto basado en Java, ideal para crear proyectos semi-complejos y complejos.

Sketch

Características:

• » Descarga gratuita y código abierto.
• » Programas interactivos con salida 2D, 3D, PDF o SVG.
• » Integración OpenGL para 2D y 3D acelerados.
• » Para GNU / Linux, Mac OS X, Windows, Android y ARM.
• » Más de 100 bibliotecas amplían el software principal.
• » Bien documentado , con muchos libros disponibles.

TRABAJO PRÁCTICO N°1: Círculo cromático

Circulo cromático en forma de pizza

Objetivo:

Este trabajo constaba de la realización de un círculo cromático utilizando colores primarios, secundarios y terciarios.

Se usó el modelo RGB (red, green, blue) de colores aditivos de luz primarios que al mezclarse varian en diferentes combinaciones.

Se utilizaron funciones como:

• » ellipse
• » triangle
• » fill

• Código
  size(400,400); background(0); strokeWeight(2); fill(255); ellipse(200,200,295,295); fill(255,0,255); triangle(62,199,200,199,76,135); //magenta fill(150,0,255); triangle(62,203,200,200,78,267); //violeta fill(0,0,255); triangle(80,270,129,320,202,199); //azul fill(0,150,210); triangle(132,322,198,340,201,200); //azul cerúleo fill(255,0,140); triangle(79,132,126,82,198,198);//fucsia fill(255,0,0); triangle(130,81,198,61,200,200); //ROJO fill(255,127,25); triangle(202,61,201,199,269,79); //naranja fill(255,255,0); triangle(202,200,272,81,320,131); //amarillo fill(190,255,0); triangle(322,134,202,200,339,198); //lima fill(0,255,0); triangle(200,200,339,202,323,265); //verde fill(0,255,150); triangle(203,202,321,268,273,319); //verde cian fill(0,255,255); triangle(201,200,202,339,269,320); //cian fill(255); ellipse(200,200,10,10);//circulo del medio stroke(0); noFill(); ellipse(245,305,15,15); ellipse(223,256,15,15); ellipse(214,295,15,15);//cian ellipse(248,238,15,15); ellipse(260,275,15,15); ellipse(293,265,15,15); //verde cian ellipse(257,210,15,15); ellipse(289,235,15,15); ellipse(315,214,15,15); //verde ellipse(255,180,15,15); ellipse(293,188,15,15); ellipse(305,157,15,15); //verde lima ellipse(238,157,15,15); ellipse(277,144,15,15); ellipse(270,110,15,15);//amarillo ellipse(210,147,15,15); ellipse(236,115,15,15); ellipse(215,88,15,15); //naranja ellipse(156,98,15,15); ellipse(186,113,15,15); ellipse(181,149,15,15); //rojo ellipse(107,135,15,15); ellipse(141,129,15,15); ellipse(155,166,15,15);//fucsia ellipse(85,188,15,15); ellipse(113,168,15,15); ellipse(145,190,15,15); //magenta ellipse(93,246,15,15); ellipse(110,215,15,15); ellipse(145,220,15,15); //violeta ellipse(128,294,15,15); ellipse(126,259,15,15); ellipse(165,247,15,15); //azul ellipse(192,257,15,15); ellipse(164,289,15,15); ellipse(185,318,15,15);//azul cerúleo

TRABAJO PRÁCTICO N°2: Créditos

Créditos de la película de Toy Story

Objetivo:

En este trabajo se realizaron los créditos de una película con información sobre los actores primarios, secundarios, el director, la música, etc.

Las funciones que se utilizaron fueron:

• » image
• » textAlign
• » text

• Código
  PImage foto1, foto2, foto3, foto4, foto5, foto6, foto7; PFont titulo, actores, personajes; int x, y, y2, abajo, abajo2, abajo3, abajo4, abajo5, abajo6, abajo7, abajo8, posx, cero, arriba, arriba2, sube, sube1, px1, py1, izquierda, izquierda1; float rojo, negro, valor, px, py; void setup() { size(600, 500); posx=0; y=0; y2=height/2; negro=0; abajo=-150; abajo2=7300; abajo3=2800; abajo4=2845; abajo5=3000; abajo6=3045; abajo7=8500; abajo8=8900; cero=0; arriba=-2300; arriba2=700; sube1=800; sube=850; px1=-1300; izquierda=-1600; izquierda1=-3800; titulo=loadFont("TITULO.vlw"); personajes=loadFont("P.vlw"); actores=loadFont("A.vlw"); foto1=loadImage("PARATITULO.jpg"); foto2=loadImage("foto2.jpg"); foto3=loadImage("foto3.jpg"); foto4=loadImage("foto4.png"); foto5=loadImage("foto5.jpg"); foto6=loadImage("foto6.jpg"); foto7=loadImage("foto7.jpg"); } void draw() { fill(0); rect(0, 0, width, height); posx+=2; abajo+=3; abajo2-=+3; abajo3--; abajo4--; abajo5--; abajo6--; abajo7-=+3; abajo8-=+3; arriba+=1; arriba+=1; sube-=1; sube1-=1; px1+=2; izquierda++; izquierda1+=2; image(foto1, x, abajo, width, height); fill(negro, negro, 0); textAlign(LEFT); textFont(titulo, 70); text("Toy Story", width/6-10, y2); negro+=2; negro=map(posx, 250, 0, 255, 0); fill(rojo, 0, 0, 200); textAlign(CENTER, RIGHT); textFont(titulo, 200); text("4", width/2, y2+45); rojo=map(posx, 0, 250, 0, 255); fill(0, valor); rect(0, 0, width, height); image(foto2, izquierda1, 150, width, 200); image(foto3, px1, 0, width, height); image(foto4, 0, arriba, width, height); image(foto5, 0, abajo2, width, height*2); image(foto6, 30, abajo7, mouseX, 300); image(foto7, 30, abajo8, mouseX, 300); fill(255, 0, 0); textSize(40); text("Cast", width/2, sube1); fill(0, 0, 255); text("Música", izquierda, 70); fill(170, 160, 250); text("Direction", 440, abajo3); text("Production", 440, abajo5); fill(255); textFont(actores); /* No son actores pero ya le había dado ese nombre*/ textSize(20); text("Josh Cooley", 440, abajo4); text("Jonas Rivera\n Mark Nielsen", 440, abajo6); text("Randy Newman", izquierda, 100); text("Mitchell Froom", izquierda, 400); text("Tom Hanks\n Tim Allen\n Annie Potts\n Tony Hale\n Keegan-Michael Key\n Madeleine McGraw\n Christina Hendricks\n Jordan Peele\n Keanu Reeves\n Ally Maki\n Jay Hernandez\n Lori Alan\n Joan Cussack\n Bonnie Hunt\n Kristen Schaal\n Wallace Shawn\n Emily Davis\n John Ratzenberger\n Blake Clarck\n Don Rickles\n Estelle Hansen\n Jeff Garlin\n Jeff Pidgeon", 400, sube); fill(235); textFont(personajes, 20); text("Woody\n Buzz Lightyear\n Bo Peep\n Forky\n Ducky\n Bonnie\n Gabby Gabby\n Bunny\n Duke Caboom\n Giggle McDimples\n Bonnie´s dad\n Bonnie´s mom\n Jessie\n Dolly\n Trixie\n Rex\n Billy, Goat & Gruff\n Hamm\n Slinky Dog\n mr.Potato Head\n mrs. Potato Head\n Buttercup\n Martians ", 200, sube); } void mouseMoved() { valor=valor+4; px = random(width); py = random(height); float distan=dist(px, py, width/2, height/2); float distMax=dist(0, 0, width/2, height/2); float tam=map(distan, 0, distMax, 20, 90); noStroke(); fill(255, 100); ellipse(px, py, tam, tam);}

TRABAJO FINAL: Aventura Gráfica + Juego

¿Qué es una aventura gráfica?

La aventura gráfica es una historia interactiva con diferentes bifurcaciones o caminos (buenos o malos), donde el ausuario es quién decide por cual camino ir.

Cada bifurcación representa una condición que se cumple o no.

Estructura de la aventura gráfica: diagrama de flujo

¿De qué trata la aventura?

Esta aventura está inspirada en The vampires diaries pero con un historia personalizada totalmente diferente y con dos finales posibles:

Se cuenta la historia de Elena, una joven que se muda con su familia a Centfor, un vecindario de pocas personas. En su casa antigua pero con un toque moderno y elegante, vivirá una experiencia peligrosa de la cual las consecuencias serán fatales.

Objetivo:

Para realizar este trabajo se fusionaron los trabajos n°3, 4 y 5, pero también se tuvieron en cuenta los dos primeros y los contenidos de todo el año.

Se adaptó la aventura gráfica a programación orientada a objetos.

Se utilizaron las funciones de los tps anteriores junto con:

• » condicionales (if, for, else, else if)
• » ciclos (for)
• » arreglos [ ]
• » librerias para aplicar sonido

En el programa principal de la aventura se trató de dejar lo más "limpia" posible la pestaña y se cargó:

• » la clase principal
• » librerías de sonido
• » la variable global
• » el resize
• » condicionales para controlar el sonido
• » eventos: keyPressed y mousePressed

En la clase principal, llamada aventura, se declararon las clases de los botones y las imágenes para usar las funciones con parámetros, y el juego para vincular con condicionales su posición dentro de la aventura y detectar el movimiento de la mano para agarrar las llaves. También se usó arreglos para cargar todos los textos y más funciones con parámetros en métodos cargados en el programa principal dentro de los eventos.

Juego

El juego se encuentra dentro de la aventura gráfica en uno de los tantos caminos, se trata de una ambiente oscuro con poca iluminación en donde el padre de Elena deberá recoger todas las llaves para abrir la puerta pero con ciertas dificultades teniendo cuidado si no quiere salir herido por las ratas.

Fondo/oscuridad

Para lograr ese efecto de oscuridad y de una pequeña luz o linterna que alumbra la mano a medida que esta avanza en cualquier dirección, se utilizó una imagen en negro editada en Photoshop con un tamaño del doble de la ventana y con un círculo en medio sin fondo.

A su vez, esta imagen se convirtió en una clase/objeto articulada dentro de la clase mano, delimitando la posición de px y py con un if. Así, a medida que se mueve la mano también se mueve el fondo.

Desafíos de vacaciones