Introducción a Processing 1



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

Ejercicio 12

  • EJ12: Animar tres círculos de acuerdo a los datos ingresados mediante el ratón.
  • Comentar todas las instrucciones.
  • Introducción 1/2
  • En Processing cualquier usuario puede programar sus propias funciones. Llamamos a esto función de usuario.
  • Una función es un módulo de programación autocontenido.
  • Las funciones de usuario hacen más conciso el código redundante al extraer los elementos comunes e incluirlos en bloques de código para que puedan ejecutarse tantas veces se quiera dentro del programa.
  • Esto permite una lectura más fácil del código y reduce las probabilidades de error al actualizar el código.
  • Las funciones generalmente tienen parámetros que definen sus acciones.
  • Las funciones pueden operar de forma diferente dependiendo del número de parámetros usados.
  • Una función puede ser imaginada como una caja con mecanismos dentro que actúan sobre los datos ingresados y devuelven un resultado.
  • Introducción 2/2
  • Convencionalmente posee una o varias entradas, un bloque de código que procesa dichas entradas, y finalmente una salida.
  • Algunos ejemplos de diagramas de función de usuario:
  • Abstracción 1/2
  • En terminología de software se llama abstracción al proceso que permite esconder los detalles de realización y concentrarnos en el resultado.
  • En realidad todas las funciones de sistema que hemos visto hasta el momento son, técnicamente, abstracciones: los autores han escondido los detalles de implementación para que el programador se concentre en los resultados.
  • Cuando construimos funciones estas podrán devolver un resultado o no. Depende evidentemente de qué querramos hacer con ella. Pero en el caso de optar por la no devolución de un resultado deberemos comenzar por construir el bloque con la palabra clave void.
  • Es por esto que todos los ejemplos que veremos a continuación comienzan a construirse con dicha palabra clave.
  • Introducción a las funciones 1/12
  • // Programación basada en primitivas
  • // usando funciones personalizadas o funciones definidas por el usuario
  • // Autor: Ariel Malka | www.chronotext.org
  • // URL: http://processing.org/discourse/yabb/YaBB.cgi?board=TheoryandPractice;action=display;num=1078263461
  • // Traducción: Raúl Lacabanne - 2009
  • void setup() { // esta función será llamada automáticamente por Processing cuando el programa se ejecute
  • size(200, 200); // configura el tamaño de pantalla
  • }
  • void draw() { // esta función también será llamada automáticamente luego de setup()
  • rect(100, 30, 90, 160); // crea un rectángulo
  • }
  • // El "flujo de ejecución" será el siguiente:
  • // 1) setup()
  • // 2) size(200, 200)
  • // 3) draw()
  • // 4) rect(10, 10, 90, 160);
  • Introducción a las funciones 2/12
  • // Programación basada en primitivas
  • // usando funciones personalizadas o funciones definidas por el usuario
  • // Autor: Ariel Malka | www.chronotext.org
  • // URL: http://processing.org/discourse/yabb/YaBB.cgi?board=TheoryandPractice;action=display;num=1078263461
  • // Traducción: Raúl Lacabanne - 2009
  • void setup() {
  • size(200, 200);
  • background(255); // establece el color de fondo en blanco
  • }
  • void draw() {
  • // cuatro llamadas a la función definida por el usuario cross()
  • // el "origen del sistema de coordenadas" por defecto se encuentra en la esquina superior izquierda de la pantalla
  • cruz(); // esquina superior izquierda de la cruz en 0,0
  • translate(50, 50); // el "origen del sistema de coordenadas" se mueve 50 px a la derecha y 50 px abajo
  • cruz(); // esquina superior izquierda de la cruz en 50,50
  • translate(50, 50); // el "origen del sistema de coordenadas" se mueve otros 50 px a la derecha y 50 px abajo
  • cruz(); // esquina superior izquierda de la cruz en 100,100
  • translate(50, 50); // el "origen del sistema de coordenadas" se mueve otros 50 px a la derecha y 50 px abajo
  • cruz(); // esquina superior izquierda de la cruz en 150,150
  • }
  • void cruz() { // nuestra función definida por el usuario (podemos nombrarla como querramos)
  • noStroke();
  • fill(255, 0, 0); // rojo
  • rect(0, 10, 30, 10);
  • rect(10, 0, 10, 30);
  • }
  • Introducción a las funciones 3/12
  • // Programación basada en primitivas
  • // usando funciones personalizadas o funciones definidas por el usuario
  • // Autor: Ariel Malka | www.chronotext.org
  • // URL: http://processing.org/discourse/yabb/YaBB.cgi?board=TheoryandPractice;action=display;num=1078263461
  • // Traducción: Raúl Lacabanne - 2009
  • // cuando dibujamos usando funciones es importante poder tener la posibilidad de dibujar una forma desde el centro...
  • void setup() {
  • size(200, 200);
  • background(255);
  • }
  • void draw() {
  • cruz(); // esquina superior izquierda de la cruz en 0,0
  • translate(50, 50); // el "origen del sistema de coordenadas" se mueve 50 px a la derecha y 50 px abajo
  • cruz(); // esquina superior izquierda de la cruz en 50,50
  • translate(50, 50); // el "origen del sistema de coordenadas" se mueve otros 50 px a la derecha y 50 px abajo
  • cruz(); // esquina superior izquierda de la cruz en 100,100
  • translate(50, 50); // el "origen del sistema de coordenadas" se mueve otros 50 px a la derecha y 50 px abajo
  • cruz(); // esquina superior izquierda de la cruz en 150,150
  • }
  • void cruz() {
  • noStroke();
  • fill(255, 0, 0);
  • rectMode(CENTER); // los rectángulos serán dibujados desde el centro
  • rect(0, 0, 30, 10);
  • rect(0, 0, 10, 30);
  • }
  • Introducción a las funciones 4/12
  • // Programación basada en primitivas
  • // usando funciones personalizadas o funciones definidas por el usuario
  • // Autor: Ariel Malka | www.chronotext.org
  • // URL: http://processing.org/discourse/yabb/YaBB.cgi?board=TheoryandPractice;action=display;num=1078263461
  • // Traducción: Raúl Lacabanne - 2009
  • // cuando creamos funciones personalizadas es posible agregar un número arbitrario de "parámetros"
  • // que actuarán como variables dentro del bloque de la función
  • void setup() {
  • size(200, 200);
  • background(255);
  • }
  • void draw() {
  • // cuando llamamos a nuestra función, estamos "pasando" 2 parámetros que
  • // afectarán la posición de la cruz
  • cruz(0, 0); // el centro de la cruz se encuentra en 0,0
  • cruz(50, 50); // el centro de la cruz se encuentra en 50,50
  • cruz(100, 100); // el centro de la cruz se encuentra en 100,100
  • cruz(150, 150); // el centro de la cruz se encuentra en 150,150
  • }
  • void cruz(float ejeX, float ejeY) { // estamos usando dos parámetros (los nombramos como querramos)
  • noStroke();
  • fill(255, 0, 0);
  • rectMode(CENTER);
  • // ejeX y ejeY están actuando como variables y han sido declaradas por fuera del bloque de la función
  • rect(ejeX, ejeY, 30, 10);
  • rect(ejeX, ejeY, 10, 30);
  • }
  • Introducción a las funciones 5/12
  • // Programación basada en primitivas
  • // usando funciones personalizadas o funciones definidas por el usuario
  • // Autor: Ariel Malka | www.chronotext.org
  • // URL: http://processing.org/discourse/yabb/YaBB.cgi?board=TheoryandPractice;action=display;num=1078263461
  • // Traducción: Raúl Lacabanne - 2009
  • // introducción de parámetros adicionales
  • void setup() {
  • size(200, 200);
  • background(255);
  • }
  • void draw() {
  • // definición de variables que contienen información de color
  • color rojo = color(255, 0, 0);
  • color azul = color(51, 153, 255);
  • color gris = color(128, 128, 128);
  • color verde = color(153, 255, 51);
  • // estamos pasando un tercer parámetro que afectará el tamaño de la cruz
  • // y un cuarto parámetro que permitirá en control de color de la cruz
  • cruz(0, 0, 1, rojo);
  • cruz(50, 50, 3, azul);
  • cruz(100, 100, 0.5, gris);
  • cruz(150, 150, 5.5, verde);
  • }
  • void cruz(float x, float y, float tamanio, color colorCruz) { // 2 nuevos parámetros han sido agregados a la función
  • noStroke();
  • fill(colorCruz); // esto controla el color de la cruz
  • rectMode(CENTER);
  • rect(x, y, 30 * tamanio, 10 * tamanio);
  • rect(x, y, 10 * tamanio, 30 * tamanio);
  • }
  • Introducción a las funciones 6/12
  • // Programación basada en primitivas
  • // usando funciones personalizadas o funciones definidas por el usuario
  • // Autor: Ariel Malka | www.chronotext.org
  • // URL: http://processing.org/discourse/yabb/YaBB.cgi?board=TheoryandPractice;action=display;num=1078263461
  • // Traducción: Raúl Lacabanne - 2009
  • // ¡cuando se programa es posible alcanzar los mismos resultados utilizando diferentes acercamientos!
  • void setup() {
  • size(200, 200);
  • background(255);
  • }
  • void draw() {
  • fill(255, 0, 0); // rojo
  • cruz(0, 0, 1);
  • fill(51, 153, 255); // azul
  • cruz(50, 50, 3);
  • fill(128, 128, 128); // gris
  • cruz(100, 100, 0.5);
  • fill(153, 255, 51); // verde
  • cruz(150, 150, 5.5);
  • }
  • void cruz(float x, float y, float tamanio) {
  • noStroke();
  • rectMode(CENTER);
  • rect(x, y, 30 * tamanio, 10 * tamanio);
  • rect(x, y, 10 * tamanio, 30 * tamanio);
  • }
  • Introducción a las funciones 7/12
  • // Programación basada en primitivas
  • // usando funciones personalizadas o funciones definidas por el usuario
  • // Autor: Ariel Malka | www.chronotext.org
  • // URL: http://processing.org/discourse/yabb/YaBB.cgi?board=TheoryandPractice;action=display;num=1078263461
  • // Traducción: Raúl Lacabanne - 2009
  • // usar funciones que usan otras funciones...
  • // primero hagamos dos figuras diferentes y examinémoslas por separado
  • void setup() {
  • size(200, 200);
  • background(255);
  • fill(0, 0, 0); // todas las figuras con relleno negro
  • }
  • void draw() {
  • bubbles(50, 100);
  • tube(150, 100);
  • }
  • void tube(float x, float y) {
  • noStroke();
  • rectMode(CENTER);
  • ellipseMode(RADIUS);
  • rect(x, y, 40, 100);
  • rect(x, y - 50, 60, 10);
  • ellipse(x, y + 50, 20, 20);
  • }
  • void bubbles(float x, float y) {
  • noStroke();
  • ellipseMode(RADIUS);
  • ellipse(x + 4, y - 24, 10, 10);
  • ellipse(x - 4, y, 9, 9);
  • ellipse(x + 4, y + 24, 8, 8);
  • ellipse(x - 4, y + 48, 7, 7);
  • }
  • Introducción a las funciones 8/12
  • // Programación basada en primitivas
  • // usando funciones personalizadas o funciones definidas por el usuario
  • // Autor: Ariel Malka | www.chronotext.org
  • // URL: http://processing.org/discourse/yabb/YaBB.cgi?board=TheoryandPractice;action=display;num=1078263461
  • // Traducción: Raúl Lacabanne - 2009
  • // usar funciones que usan otras funciones...
  • // ahora hagamos una función que usa juntas y de manera compuesta nuestras dos funciones anteriores
  • void setup() {
  • size(200, 200);
  • background(255);
  • }
  • void draw() {
  • peligro(50, 100);
  • peligro(75, 80);
  • peligro(100, 100);
  • peligro(125, 120);
  • peligro(150, 100);
  • }
  • void peligro(float x, float y) {
  • fill(0, 0, 0); // negro
  • tubo(x, y);
  • fill(255, 255, 255); // blanco
  • burbujas(x, y);
  • }
  • void tubo(float x, float y) {
  • noStroke();
  • rectMode(DIAMETER);
  • ellipseMode(RADIUS);
  • rect(x, y, 40, 100);
  • rect(x, y - 50, 60, 10);
  • ellipse(x, y + 50, 20, 20);
  • }
  • void burbujas(float x, float y) {
  • noStroke();
  • ellipseMode(RADIUS);
  • ellipse(x + 4, y - 24, 10, 10);
  • ellipse(x - 4, y, 9, 9);
  • ellipse(x + 4, y + 24, 8, 8);
  • ellipse(x - 4, y + 48, 7, 7);
  • }
  • Introducción a las funciones 9/12
  • // Programación basada en primitivas
  • // usando funciones personalizadas o funciones definidas por el usuario
  • // Autor: Ariel Malka | www.chronotext.org
  • // URL: http://processing.org/discourse/yabb/YaBB.cgi?board=TheoryandPractice;action=display;num=1078263461
  • // Traducción: Raúl Lacabanne - 2009
  • // usar funciones que usan otras funciones...
  • // generar una función que utiliza nuestras 2 piezas compuestas juntas
  • // más la introducción de escalado (usando un parámetro adicional)
  • void setup() {
  • size(200, 200);
  • background(255);
  • }
  • void draw() {
  • peligro(50, 100, 13); // más grande
  • peligro(150, 100, 5); // más pequeño
  • }
  • void peligro(float x, float y, float tamanio) {
  • fill(0, 0, 0); // negro
  • tubo(x, y, tamanio);
  • fill(255, 255, 255); // blanco
  • burbujas(x, y, tamanio);
  • }
  • void tubo(float x, float y, float tamanio) {
  • noStroke();
  • rectMode(DIAMETER);
  • ellipseMode(RADIUS);
  • rect(x, y, 4 * tamanio, 10 * tamanio);
  • rect(x, y - 5 * tamanio, 6 * tamanio, 1 * tamanio);
  • ellipse(x, y + 5 * tamanio, 2 * tamanio, 2 * tamanio);
  • }
  • void burbujas(float x, float y, float tamanio) {
  • noStroke();
  • ellipseMode(RADIUS);
  • ellipse(x + 0.4 * tamanio, y - 2.4 * tamanio, 1 * tamanio, 1 * tamanio);
  • ellipse(x - 0.4 * tamanio, y, 0.9 * tamanio, 0.9 * tamanio);
  • ellipse(x + 0.4 * tamanio, y + 2.4 * tamanio, 0.8 * tamanio, 0.8 * tamanio);
  • ellipse(x - 0.4 * tamanio, y + 4.8 * tamanio, 0.7 * tamanio, 0.7 * tamanio);
  • }
  • Introducción a las funciones 10/12
  • // Programación basada en primitivas
  • // usando funciones personalizadas
  • // Autor: Ariel Malka | www.chronotext.org
  • // URL: http://processing.org/discourse/yabb/YaBB.cgi?board=TheoryandPractice;action=display;num=1078263461
  • // Traducción: Raúl Lacabanne - 2009
  • // usar funciones que usan otras funciones...
  • // generar una función que utiliza nuestras 2 piezas compuestas juntas
  • // más la introducción de escalado basado en una matriz de transformación
  • void setup() {
  • size(200, 200);
  • background(255);
  • }
  • void draw() {
  • peligro(50, 100, 1.3);
  • peligro(150, 100, 0.5);
  • }
  • void peligro(float x, float y, float sz) {
  • fill(0, 0, 0); // negro
  • pushMatrix();
  • translate(x, y);
  • scale(sz);
  • tubo();
  • popMatrix();
  • fill(255, 255, 255); // blanco
  • pushMatrix();
  • translate(x, y);
  • scale(sz);
  • burbujas();
  • popMatrix();
  • }
  • void tubo() {
  • noStroke();
  • rectMode(DIAMETER);
  • ellipseMode(RADIUS);
  • rect(0, 0, 40, 100);
  • rect(0, - 50, 60, 10);
  • ellipse(0, 50, 20, 20);
  • }
  • void burbujas() {
  • noStroke();
  • ellipseMode(RADIUS);
  • ellipse(4, - 24, 10, 10);
  • ellipse(-4, 0, 9, 9);
  • ellipse(4, 24, 8, 8);
  • ellipse(-4, 48, 7, 7);
  • }
  • Introducción a las funciones 11/12
  • // Programación basada en primitivas
  • // usando funciones personalizadas o funciones definidas por el usuario
  • // Autor: Ariel Malka | www.chronotext.org
  • // URL: http://processing.org/discourse/yabb/YaBB.cgi?board=TheoryandPractice;action=display;num=1078263461
  • // Traducción: Raúl Lacabanne - 2009
  • // usar funciones que usan otras funciones...
  • // generar una función que utiliza nuestras 2 piezas compuestas juntas
  • // más la introducción de escalado basado en una matriz de transformación
  • void setup() {
  • size(200, 200);
  • background(255);
  • }
  • void draw() {
  • peligro(50, 100, 1.3);
  • peligro(150, 100, 0.5);
  • }
  • void peligro(float x, float y, float tamanio) {
  • fill(255, 0, 0); // rojo
  • pushMatrix();
  • translate(x, y);
  • scale(tamanio);
  • tubo();
  • fill(255, 255, 255); // blanco
  • burbujas();
  • popMatrix();
  • }
  • void tubo() {
  • noStroke();
  • rectMode(DIAMETER);
  • ellipseMode(RADIUS);
  • rect(0, 0, 40, 100);
  • rect(0, - 50, 60, 10);
  • ellipse(0, 50, 20, 20);
  • }
  • void burbujas() {
  • noStroke();
  • ellipseMode(RADIUS);
  • ellipse(4, - 24, 10, 10);
  • ellipse(-4, 0, 9, 9);
  • ellipse(4, 24, 8, 8);
  • ellipse(-4, 48, 7, 7);
  • }
  • Introducción a las funciones 12/12
  • void setup()
  • {
  • size(640, 360);
  • background(102);
  • smooth();
  • }
  • void draw()
  • {
  • elipseVariable(mouseX, mouseY, pmouseX, pmouseY);
  • }
  • // elipseVariable() calcula la velocidad del ratón.
  • // Si el ratón se mueve lentamente: dibuja una elipse pequeña,
  • // si el ratón se mueve rápidamente: dibuja una elipse mayor si
  • void elipseVariable(int x, int y, int px, int py)
  • {
  • float speed = abs(x-px) + abs(y-py);
  • stroke(speed);
  • ellipse(x, y, speed, speed);
  • }
  • Valor de retorno 1/2
    • En todos los ejemplos vistos hasta ahora, hemos visto que la salida, por ejemplo, de una funcion de primitivas ha sido en forma de dibujo en el área de representación.
    • Sin embargo a veces preferiremos que la salida sea un número u otro tipo de dato. La salida de una función se llama valor de retorno.
    • Se espera que todas las funciones regresen un valor, tal como un entero o un decimal. Si la función no regresa un valor, se utiliza la palabra especial void. El tipo de dato regresado por una función se encuentra a la izquierda del nombre de función.
    • El comando clave return es usado para salir de una función y regresar al lugar desde el cual fue llamado. Cuando una función regresa un valor, return es usado para especificar qué valor debe ser regresado.
    • La instrucción que incluye return es típicamente la última de una función, ya que la misma finaliza inmediatamente después de un retorno.
    • Ya hemos usado funciones que devuelven valores: por ej.: random() regresa un decimal, color() regresa un tipo de dato de color, etc.
    • Si una función regresa un valor, dicha función casi siempre aparece a la derecha de un operador de asignación o como parte de una expresión mayor.
    • Una función que no regresa un valor es frecuentemente usada como una instrucción completa.
  • Valor de retorno 2/2
    • Las funciones no están limitadas a regresar números: pueden regresar boolean, String, PImage o cualquier otro tipo de dato.
    • Para escribir una función de usuario que regrese un valor, reemplace void con el tipo de dato que necesite regresar, e incluya dentro de la función la palabra clave return seguido de la variable que contenga el valor que desee regresar para habilitar la salida del mismo.
    • A continuación veremos un ejemplo:
      • void setup() {
      • size(100, 100);
      • float f = promedio(12.0, 6.0); // Asigna 9.0 a f
      • println(f);
      • }
      • float promedio(float num1, float num2) {
      • float av = (num1 + num2) / 2.0;
      • return av;
      • }
  • Sobrecarga de funciones (Function overloading) 1/2
    • Se llama sobrecarga de funciones al procedimiento de crear diferentes versiones de una misma función.
    • Las distintas versiones pueden compartir el mismo nombre de función siempre y cuando tengan diferentes números de parámetros o tipos de datos de los mismos. Es decir, un programa puede tener dos funciones con el mismo número de parámetros, pero sólo si el tipo de dato de uno de sus parámetros es diferente.
    • Processing identifica qué versión de función debe ejecutar al comparar el número y el tipo de dato de sus parámetros.
    • Veamos el próximo ejemplo:
  • Sobrecarga de funciones (Function overloading) 2/2
      • void setup() {
      • size(100, 100);
      • smooth();
      • }
      • void draw() {
      • dibujoX(255); // Ejecuta primer dibujoX()
      • dibujoX(5.5); // Ejecuta segundo dibujoX()
      • dibujoX(0, 2, 44, 48, 36); // Ejecuta tercer dibujoX()
      • }
      • // dibujoX con el valor de gris determinado por el parámetro
      • void dibujoX(int gris) {
      • stroke(gris);
      • strokeWeight(20);
      • line(0, 5, 60, 65);
      • line(60, 5, 0, 65);
      • }
      • // dibujoX negro con el valor ancho de contorno determinado por el parámetro
      • void dibujoX(float ancho) {
      • stroke(0);
      • strokeWeight(ancho);
      • line(0, 5, 60, 65);
      • line(60, 5, 0, 65);
      • }
      • // dibujoX con la posición , el valor de gris, tamaño y el ancho de
      • // contorno determinados por sus correspondientes parámetros
      • void dibujoX(int gris, int ancho, int x, int y, int s) {
      • stroke(gris);
      • strokeWeight(ancho);
      • line(x, y, x+s, y+s);
      • line(x+s, y, x, y+s);
      • }
  • Lectura recomendada
  • Capítulo “Structure 3: Functions” (pag. 181).



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