Introducción a Processing 1



Descargar 1,94 Mb.
Página11/11
Fecha de conversión04.03.2017
Tamaño1,94 Mb.
1   2   3   4   5   6   7   8   9   10   11

Ejercicio 16

  • EJ16: Crear dos "entes autónomos" en el escenario. Uno debe exhibir movimientos de cualidades más bien mecánicas y el otro orgánicas.
  • Utilizar clases.
  • Comentar todas las instrucciones.
  • Capítulo “Structure 4: Objects I” (pag. 395).
  • Parte 18 Arrays de objetos
  • Introducción
  • El trabajo con arrays de objetos es similar al trabajo con arrays de otros tipos de dato.
  • Como todo array, un array de objetos se distingue de cualquier objeto gracias a los corchetes.
  • Ya que cada elemento de array es un objeto, cada elemento del array debe ser creado antes de que pueda ser accedido.
  • Los pasos para el trabajo con un array de objetos son los siguientes:
      • 1. Declaración del array
      • 2. Creación del array
      • 3. Creación de cada objeto del array
  • Veamos cómo se implementa en los próximos dos ejemplos:
  • Ejemplo 1 1/2
  • int numCirc = 6;
  • // Declaración y creación del array
  • Circulo[] circulos = new Circulo[numCirc];
  • void setup() {
  • size(100, 100);
  • smooth();
  • noStroke();
  • for (int i = 0; i < circulos.length; i++) {
  • float x = 10 + i*16;
  • float rate = 0.5 + i*0.05;
  • // Creación de cada objeto del array
  • circulos[i] = new Circulo(x, 50, 16, rate);
  • }
  • }
  • void draw() {
  • fill(0, 12);
  • rect(0, 0, width, height);
  • fill(255);
  • for (int i = 0; i < circulos.length; i++) {
  • circulos[i].mover(); // Move each object
  • circulos[i].mostrar(); // Display each object
  • }
  • }
  • // *** continúa ***
  • Ejemplo 1 2/2
  • class Circulo {
  • // Campos
  • float x, y, diametro;
  • float velocidad; // Distancia movida en cada cuadro
  • int direccion = 1; // Dirección del movimiento (1 hacia abajo, -1 hacia arriba)
  • // Constructor
  • Circulo(float xpos, float ypos, float diam, float vel) {
  • x = xpos;
  • y = ypos;
  • diametro = diam;
  • velocidad = vel;
  • }
  • // Métodos
  • void mover() {
  • y += (velocidad * direccion);
  • if ((y > (height - diametro/2)) || (y < diametro/2)) {
  • direccion *= -1;
  • }
  • }
  • void mostrar() {
  • ellipse(x, y, diametro, diametro);
  • }
  • } // *** continúa ***
  • Ejemplo 2 1/2
  • Anillo[] anillos; // Declaración del array
  • int numAnillos = 50;
  • int actualAnillo = 0;
  • void setup() {
  • size(100, 100);
  • smooth();
  • anillos = new Anillo[numAnillos]; // Creación del array
  • for (int i = 0; i < numAnillos; i++) {
  • anillos[i] = new Anillo(); // Creación de cada objeto
  • }
  • }
  • void draw() {
  • background(0);
  • for (int i = 0; i < numAnillos; i++) {
  • anillos[i].crecer();
  • anillos[i].mostrar();
  • }
  • }
  • // Click para crear un nuevo anillo
  • void mousePressed() {
  • anillos[actualAnillo].iniciar(mouseX, mouseY);
  • actualAnillo++;
  • if (actualAnillo >= numAnillos) {
  • actualAnillo = 0;
  • }
  • }
  • // *** continúa ***
  • Ejemplo 2 2/2
  • class Anillo {
  • float x, y; // Coordenadas-xy
  • float diametro; // Diámetro del anillo
  • boolean on = false; // Enciende o apaga la visualización
  • void iniciar(float xpos, float ypos) {
  • x = xpos;
  • y = ypos;
  • on = true;
  • diametro = 1;
  • }
  • void crecer() {
  • if (on == true) {
  • diametro += 0.5;
  • if (diametro > 400) {
  • on = false;
  • }
  • }
  • }
  • void mostrar() {
  • if (on == true) {
  • noFill();
  • strokeWeight(4);
  • stroke(155, 153);
  • ellipse(x, y, diametro, diametro);
  • }
  • }
  • }
  • Multiples archivos
  • Cuando un programa crece de sobremanera resulta más conveniente dividirlo y separarlo en múltiples archivos.
  • Esta práctica también es aconsejada cuando se desea reusar clases en otros programas.
  • Para realizar esto se recomienda primero guardar el cuerpo principal del programa en un archivo, por ejemplo, anillos-main, y luego hacer clic en el botón del extremo derecho, en el sector de lengüetas.
  • Allí se despliega un menú contextual y se seleccionará la primera opción New Tab.
  • Entonces se nos pide el nombre del nuevo archivo e ingresaremos Anillo-clase.
  • Finalizamos con clic en OK.
  • En la carpeta correspondiente a anillos-main encontraremos dos archivos: anillos-main.pde y Anillo-clase.pde.
  • Lectura recomendada
  • Capítulo “Structure 4: Objects I” (pag. 395).
  • Parte 19 Objetos II
  • Múltiples constructores 1/3
  • A medida que el programa comienza a crecer y las ideas se hacen más ambiciosas, los conceptos y técnicas avanzados sobre POO se vuelven ineludibles para la gestión del código.
  • Una clase puede tener múltiples constructores que asignan los campos de formas diferentes. A veces resulta beneficioso especificar cada aspecto de los datos de un objeto al asignar parámetros a los campos, pero otras veces puede resultar apropiado definir sólo uno o algunos de ellos.
  • En el siguiente ejemplo, un constructor aplica los valores de los campos x, y, y radio, mientras que el otro aplica valores por defecto.
  • Cuando el objeto es creado, Processing elige el constructor apropiado de acuerdo a la identificación del número y tipo de variables especificado:
  • Múltiples constructores 2/3
  • Circulo circ1, circ2;
  • void setup() {
  • size(100, 100);
  • smooth();
  • noLoop();
  • // Ejecuta el constructor sin parámetros
  • circ1 = new Circulo();
  • // Ejecuta el constructor con tres parámetros
  • circ2 = new Circulo(66, 50, 20);
  • }
  • void draw() {
  • circ1.mostrar();
  • circ2.mostrar();
  • }
  • // *** continúa ***
  • Múltiples constructores 3/3
  • class Circulo {
  • float x, y, radio;
  • // Primera versión del constructor Circulo;
  • // se asigna a los campos valores por defecto
  • Circulo() {
  • x = 33;
  • y = 50;
  • radio = 8;
  • }
  • // Segunda versión del constructor Circulo;
  • // se asigna a los campos los valores de los parámetros
  • Circulo(float xpos, float ypos, float r) {
  • x = xpos;
  • y = ypos;
  • radio = r;
  • }
  • void mostrar() {
  • ellipse(x, y, radio*2, radio*2);
  • }
  • }
  • Objetos compuestos 1/5
  • Un objeto puede incluir otros objetos. La creación de semejantes objetos compuestos resultan una forma apropiada para aplicar el principio de modularidad y construir niveles más altos de abstracción.
  • En el mundo concreto, los objetos frecuentemente poseen componentes que operan autónomamente pero en relación a otros componentes.
  • Si se permite usar una analogía biológica, puede crear una clase celula, grupos de ellas que combinadas conforman un tejido muscular o un tejido nervioso. Estos tejidos pueden ser combinados en órganos, y los órganos en un organismo.
  • Con múltiples capas de abstracción, cada paso es construido a partir de compuestos de una capa anterior.
  • El siguiente ejemplo combina la clase Huevo y la clase Anillo para crear una nueva clase llamada HuevoAnillo. Cuando se usa la clase HuevoAnillo en un programa, cada instancia dibuja un huevo en la pantalla con un anillo creciendo desde su centro.
  • El ejemplo cuenta con un objeto de tipo Huevo llamado ovoide, creado en el constructor, y un objeto de tipo Anillo llamado circulo, creado en la base de la clase.
  • El método transmitir() llama a los métodos de ambas clases y reinicializa circulo cuando el objeto alcanza su máximo tamaño.
  • Ahora sí, veamos el ejemplo:
  • Objetos compuestos 2/5
  • HuevoAnillo ha1, ha2;
  • void setup() {
  • size(100, 100);
  • smooth();
  • ha1 = new HuevoAnillo(33, 66, 16, 33);
  • ha2 = new HuevoAnillo(66, 90, 8, 66);
  • }
  • void draw() {
  • background(0);
  • ha1.transmitir();
  • ha2.transmitir();
  • }
  • // Se debe incluir las sig. Clases: Huevo, Anillo y HuevoAnillo
  • Objetos compuestos 3/5
  • class Huevo {
  • float x, y; // coords-xy
  • float inclinacion; // Offset ángulo izquierda y derecha
  • float balanceo; // Factor de balanceo
  • float angulo; // Ángulo de balanceo
  • float altura; // Altura del huevo
  • Huevo(int xpos, int ypos, float balFactor, float h) {
  • x = xpos;
  • y = ypos;
  • balanceo = balFactor;
  • altura = h / 100.0;
  • }
  • void balancear() {
  • inclinacion = cos(angulo) / balanceo;
  • angulo += 0.1;
  • }
  • void mostrar() {
  • noStroke();
  • fill(255);
  • pushMatrix();
  • translate(x, y);
  • rotate(inclinacion);
  • scale(altura);
  • beginShape();
  • vertex(0, -100);
  • bezierVertex(25, -100, 40, -65, 40, -40);
  • bezierVertex(40, -15, 25, 0, 0, 0);
  • bezierVertex(-25, 0, -40, -15, -40, -40);
  • bezierVertex(-40, -65, -25, -100, 0, -100);
  • endShape();
  • popMatrix();
  • }
  • }
  • Objetos compuestos 4/5
  • class Anillo {
  • float x, y; // Coordenadas-xy
  • float diametro; // Diámetro del anillo
  • boolean on = false; // Enciende o apaga la visualización
  • void iniciar(float xpos, float ypos) {
  • x = xpos;
  • y = ypos;
  • on = true;
  • diametro = 1;
  • }
  • void crecer() {
  • if (on == true) {
  • diametro += 0.5;
  • if (diametro > 400) {
  • on = false;
  • }
  • }
  • }
  • void mostrar() {
  • if (on == true) {
  • noFill();
  • strokeWeight(4);
  • stroke(155, 153);
  • ellipse(x, y, diametro, diametro);
  • }
  • }
  • }
  • Objetos compuestos 5/5
  • class HuevoAnillo {
  • Huevo ovoide;
  • Anillo circulo = new Anillo();
  • HuevoAnillo(int x, int y, float t, float sp) {
  • ovoide = new Huevo(x, y, t, sp);
  • circulo.iniciar(x, y - sp/2);
  • }
  • void transmitir() {
  • ovoide.balancear();
  • ovoide.mostrar();
  • circulo.crecer();
  • circulo.mostrar();
  • if (circulo.on == false) {
  • circulo.on = true;
  • }
  • }
  • }
  • Herencia
  • Una clase puede ser definida usando otra clase como fundamento. En términos de POO, una clase puede heredar campos o métodos de otra.
  • Un objeto que hereda de otro (heredero) es llamado subclase, mientras que el objeto del cual se hereda (antecesor) es llamado superclase.
  • Una subclase extiende las capacidades de una superclase. Cuando una clase extiende a otra, todos los campos y métodos de la superclase resultan automáticamente incluidos en la subclase. Cuando se define la subclase se utiliza la palabra clave extends antecediendo el nombre de la superclase.
  • Se puede agregar nuevos campos y métodos a la subclase para poder trabajar sobre los datos y los comportamientos de la superclase.
  • Si un nombre de método es repetido dentro de la subclase, y además tiene el mismo prototipo (mismo número de parámetros y mismo tipo de datos) que el presente en la superclase, el método de la subclase anula el de la superclase, por lo tanto lo reemplaza.
  • Cuando un campo o método de la superclase es llamado desde la subclase, el nombre es antecedido por la palabra clave super para hacer saber a Processing que dicho campo o método es parte de la superclase.
  • El siguiente ejemplo refleja estos nuevos términos y conceptos:
  • Herencia
  • Ejemplo (Giro: superclase)
  • class Giro {
  • float x, y, velocidad;
  • float angulo = 0.0;
  • Giro(float xpos, float ypos, float vel) {
  • x = xpos;
  • y = ypos;
  • velocidad = vel;
  • }
  • void actualizar() {
  • angulo += velocidad;
  • }
  • }
  • Herencia
  • Ejemplo (GiroLinea: subclase)
  • class GiroLinea extends Giro {
  • GiroLinea(float x, float y, float v) {
  • super(x, y, v);
  • }
  • void mostrar() {
  • strokeWeight(1);
  • stroke(0);
  • pushMatrix();
  • translate(x, y);
  • angulo += velocidad;
  • rotate(angulo);
  • line(0, 0, 100, 0);
  • popMatrix();
  • }
  • }
  • Herencia
  • Ejemplo (GiroCirculos: subclase)
  • class GiroCirculos extends Giro {
  • float dimen;
  • GiroCirculos(float x, float y, float v, float d) {
  • super(x, y, v);
  • dimen = d;
  • }
  • void mostrar() {
  • noStroke();
  • pushMatrix();
  • translate(x, y);
  • angulo += velocidad;
  • rotate(angulo);
  • ellipse(-dimen/2, 0, dimen, dimen);
  • ellipse(dimen/2, 0, dimen, dimen);
  • popMatrix();
  • }
  • }
  • Herencia
  • Ejemplo (animacion: main)
  • GiroCirculos circulos;
  • GiroLinea linea;
  • void setup() {
  • size(100, 100);
  • smooth();
  • linea = new GiroLinea(width/2, height/2, 0.01);
  • circulos = new GiroCirculos(width/2, height/2, -0.02, 33.0);
  • }
  • void draw() {
  • background(204);
  • linea.actualizar();
  • linea.mostrar();
  • circulos.actualizar();
  • circulos.mostrar();
  • }
  • Lectura recomendada
  • Capítulo “Structure 5: Objects II” (pag. 453).
  • Parte 20 ArrayList
  • ArrayList
  • La clase Java ArrayList permite implementar arrays de tamaño flexible, donde es posible agregar o remover elementos del principio, mitad o final del array.
  • El uso de un ArrayList conceptualmente es similar al de un array estandar, pero lo que difiere es la sintáxis.
  • El siguiente ejemplo muestra el uso de ArrayList para crear una aplicación que genera un emisor de partículas.
  • Cada vez que presionamos el botón del mouse, la aplicación genera una partícula en cada fotograma mientras dure la presión del mouse.
  • ArrayList
  • Ejemplo (ArrayList: main)
  • // Learning Processing
  • // Daniel Shiffman
  • // http://www.learningprocessing.com
  • // Ejemplo 23-2: Sistema de partículas simple con ArrayList
  • ArrayList particulas;
  • void setup() {
  • size(200,200);
  • particulas = new ArrayList();
  • smooth();
  • }
  • void draw() {
  • // Cuando el botón del mouse es presionado, se agrega un nuevo
  • // objeto Particula al ArrayList en cada ciclo del draw().
  • if (mousePressed) {
  • particulas.add(new Particula());
  • }
  • background(255);
  • // Iteración a través del ArrayList y obtiene cada partícula.
  • // ArrayList mantiene un seguimiento del nñúmero total de partículas.
  • for (int i = 0; i < particulas.size(); i++ ) {
  • Particula p = (Particula) particulas.get(i);
  • p.ejecutar();
  • p.gravedad();
  • p.mostrar();
  • }
  • // Si ArrayList contiene más de 100 elementos, eliminamos
  • // el primer elemento usando el método remove().
  • if (particulas.size() > 100) {
  • particulas.remove(0);
  • }
  • }
  • ArrayList
  • Ejemplo (Particula: clase)
  • // Learning Processing
  • // Daniel Shiffman
  • // http://www.learningprocessing.com
  • // Ejemplo 23-2: Sistema de partículas simple con ArrayList
  • // Una clase de Partícula simple
  • class Particula {
  • float x;
  • float y;
  • float xVelocidad;
  • float yVelocidad;
  • Particula() {
  • x = mouseX;
  • y = mouseY;
  • xVelocidad = random(-1,1);
  • yVelocidad = random(-2,0);
  • }
  • void ejecutar() {
  • x = x + xVelocidad;
  • y = y + yVelocidad;
  • }
  • void gravedad() {
  • yVelocidad += 0.1;
  • }
  • void mostrar() {
  • stroke(0);
  • fill(0,75);
  • ellipse(x,y,10,10);
  • }
  • }
  • Lectura recomendada
  • Capítulo 23 “Java” (pag. 423). Shiffman, D. “Learning Processing - A Beginner’s Guide to Programming Images, Animation, and Interaction”, Morgan Kaufman, 2008.

Ej 17

  • EJ17: Crear una superficie sensible a datos de entrada (mouse y/o teclado) cuya programación haga uso de las técnicas, procedimientos y estructuras aprendidas durante el curso.
  • Comentar todas las instrucciones.

Trabajo Práctico Final

  • TPFinal: Crear un sistema generativo de imagen (processing) y sonido (pure data), en el cual se establezcan relaciones de influencia audiovisual en una o en dos vías a través de datos enviados entre sí mediante el formato de contenido Open Sound Control.
  • Comentar todas las instrucciones.
  • FIN



Compartir con tus amigos:
1   2   3   4   5   6   7   8   9   10   11


La base de datos está protegida por derechos de autor ©absta.info 2019
enviar mensaje

    Página principal