introduccion a processing 2010

Introduccin aProcessing v1.2.1Ral Lacabanne - 2011Versin 41

Resumen de los tpicos bsicos del libro: Processing: A Programming Handbook for Visual Designers and Artistsde Casey Reas y Ben Fry. MIT Press, 2007.

**

Design By NumbersDesign By Numbers (DBN) fue creado como una plataforma de introduccin al diseo asistido por ordenador para diseadores visuales y artistas. Conceptualizado por John Maeda en el ACG (Aesthetics + Computation Group) del MIT, quien cree que la calidad del diseo y arte de medios slo puede mejorar a travs del establecimiento de infraestructuras educativas en escuelas de arte y tecnologa que fomenten la formacin de individuos transdiciplinarios competentes.

John Maeda. DBN. 1999-2001.

**

ProcessingProcessing es un lenguaje y entorno de programacin de cdigo abierto basado en Java, de fcil utilizacin, y que sirve como instrumento didctico para la enseanza y produccin de proyectos multimedia e interactivos de diseo digital. Fue iniciado por Ben Fry y Casey Reas. Processing es desarrollado por artistas y diseadores como una herramienta alternativa al software propietario. Puede ser utilizado tanto para aplicaciones locales as como aplicaciones para la web.

Casey Reas & Ben Fry. 2001.

**

Parte 1Elementos de sintaxis

**

Descarga y descompresinDirigirse a la siguiente URL: http://www.processing.org/download/ y descargar la versin apropiada a su sistema operativo. Se recomienda a los usuarios de Windows descargar la versin Windows (a secas) y no la versin Windows (Without Java).

Una vez descargado el archivo, descomprimirlo en alguna carpeta del disco rgido, ej: el escritorio. Esto quiere decir que el entorno de desarrollo Processing no necesita instalacin.

A continuacin abrir la carpeta descomprimida y ejecutar el archivo correspondiente al icono:

**

ComentariosEn Processing tenemos dos formas de realizar comentarios.

El primero es un comentario simple:

//esto es un comentario...//...y esto tambin lo es

el segundo es un bloque de comentario:

/*estotambinesuncomentario*/

**

Funciones (I)Las funciones permiten ejecutar algoritmos, es decir, obtener un resultado a partir de un o una serie de pasos lgicos y estructurados.

En general, el nombre de una funcin comienza en minsculas y es seguido por un par de parntesis.

Los elementos que se encuentran entre los parntesis se llaman parmetros.

**

Funciones (II)Ejemplo de funciones

size(200, 200)

background(102)

noCursor()

**

Sensibilidad a maysculas y minsculasb =/= Bsize() =/= Size()

**

EspaciadoProcessing es flexible a los espaciados. Sin embargo se recomienda ser prudente con los mismos para que la lectura del cdigo sea cmoda.

**

Instrucciones (I)Si utilizamos una metfora del lenguaje humano, podemos entender a la instruccin como si fuera una oracin.Las instrucciones siempre se deben terminan con el signo punto y coma (;).Dentro de una instruccin se pueden realizar las siguientes acciones:definir una variable o array, asignar un valor a una variable (o valores a un array),ejecutar una funcin,o construir un objeto

**

Instrucciones (II)Ejemplo de un boceto que contiene un conjunto de instrucciones:

size(200, 200); // Ejecuta la funcin size() con dos parmetrosbackground(102); // Ejecuta la funcin background() con un parmetronoCursor(); // Ejecuta la funcin noCursor() con ningn parmetro

**

Lectura recomendada Captulo Structure 1: Code Elements (pag. 17).Reas, C. & Fry, B. "Processing: A Programming Handbook for Visual Designers and Artists, MIT Press, 2007.

**

Informacin complementaria

**

Utilizacin de la consola// Para imprimir un valor Uso de la funcin print()print(10); // Imprime 10 en la consola

// Para imprimir un texto, coloque el mismo entre comillasprint(processing"); // Imprime processing a continuacin del dato anterior

// Para imprimir en lneas separadas Uso de la funcin println()println(10); // Imprime 10 en la consola y salta a una nueva lneaprintln(processing"); // Imprime processing y salta a una nueva lnea

**

Funcin cursor() y noCursor()cursor()

Sintaxiscursor()cursor(MODE)cursor(image, x, y)

ParmetrosMODE: Puede optar por ARROW, CROSS, HAND, MOVE, TEXT, WAIT image PImage: cualquier variable del tipo PImage x int: el punto activo horizontal del cursor y int: el punto activo vertical del cursor

noCursor()

**

Parte 2Coordenadas yfiguras primitivas

**

CoordenadasEn Processing, el origen se encuentra en el margen superior izquierdo.

0, 0+100+100

**

Primitivas: puntopoint(20, 20);point(30, 30);point(40, 40);point(50, 50);point(60, 60);

**

Primitivas: lnealine(25, 90, 80, 60);line(50, 12, 42, 90);line(45, 30, 18, 36);

**

Primitivas: elipseellipse(40, 40, 60, 60); // crculo grandeellipse(75, 75, 32, 32); // crculo pequeo

**

Primitivas: rectngulorect(15, 15, 40, 40); // cuadrado granderect(55, 55, 25, 25); // cuadrado pequeo

**

Orden de dibujoEn Processing, el orden de dibujo siempre es secuencial, es decir, la primer instruccin se representa primero, las siguientes por encima, y la ltima por sobre todas estas.

rect(15, 15, 60, 60); // cuadrado inferiorrect(20, 20, 40, 40); // cuadrado intermediorect(25, 25, 20, 20); // cuadrado superior

**

Suavizadosmooth()noSmooth()

**

Atributos: strokeWeight()tamao de contorno

smooth();strokeWeight(1); // por defectoline(20, 20, 80, 20);strokeWeight(4); // 4 pixelesline(20, 40, 80, 40);strokeWeight(10); // 10 pixelesline(20, 70, 80, 70);

**

Atributos: strokeCap()extremo de contorno

smooth();strokeWeight(12.0);strokeCap(ROUND); // redondeadoline(20, 30, 80, 30);strokeCap(SQUARE); // planoline(20, 50, 80, 50);strokeCap(PROJECT); // proyeccinline(20, 70, 80, 70);

**

Atributos: strokeJoin()extremo de contorno

smooth();strokeWeight(10);strokeJoin(MITER); // mitratriangle(50, 20, 80, 80, 20, 80);

smooth();strokeWeight(10);strokeJoin(BEVEL); // biseltriangle(50, 20, 80, 80, 20, 80);

smooth();strokeWeight(10);strokeJoin(ROUND); // redondeadatriangle(50, 20, 80, 80, 20, 80);

**

Lectura recomendada Captulo Shape 1: Coordinates, Primitives (pag. 23).

**


**

Primitivas: tringulotriangle(60, 10, 25, 60, 75, 65);

**

Primitivas: cuadrilteroquad(38, 31, 86, 20, 69, 63, 30, 76);

**

Primitivas: curva bezierbezier(32, 20, 80, 5, 80, 75, 30, 75);

// Dibujo de puntos de controlline(32, 20, 80, 5);ellipse(80, 5, 4, 4);line(80, 75, 30, 75);ellipse(80, 75, 4, 4);

**

Ejercicio 1EJ01: Escribir un boceto con la finalidad de componer un cuadro, con una resolucin de 300x300 pxeles, que contenga las siguientes figuras:dos elipses, cuatro lneas y un rectngulo.Comentar todas las instrucciones.

De aqu en ms adaptar el siguiente comentario (a modo de ttulo) e ingresarlo en el lugar de la primera instruccin:

// ***********************************************// * Alumno: Nombre y apellido del alumno *// * Legajo: xxxxx *// * Ejercicio Nro: 01 *// * Asignatura: xxxx *// * Carrera: xxxx *// * Institucin: UNQ *// * Ao: XXXX Cuatrimestre: x *// ***********************************************

Ejercicio 2EJ02: Componer un cuadro con una resolucin de 300x300 que contenga las siguientes figuras:dos elipses, cuatro lneas y un rectngulo.Generar las figuras con cambios de atributos.Comentar todas las instrucciones.

Parte 3Modos de color.Fondo, contorno y relleno

**

colorMode() - Modo de colorEn general trabajamos con RGB pero es ms recomendable trabajar con HSB ya que se ajusta ms a un modelo de color plstico. Para esto utilizamos la funcin colorMode().

Veremos que para utilizar la funcin colorMode() podremos escoger cuatros versiones distintas de dicha funcin:

colorMode(modo)HSB o RGBcolorMode(modo, rango)int o floatcolorMode(modo, rango1, rango2, rango3)int o floatcolorMode(modo, rango1, rango2, rango3 , alpha)int o float

**

Sintaxis de colorMode()SintaxiscolorMode(modo);colorMode(mode, rango);colorMode(modo, rango1, rango2, rango3);colorMode(modo, rango1, rango2, rango3, alpha);

ParmetrosmodoRGB o HSB:correspondientes a Red/Green/Blue y Hue/Saturation/Brightness.range int o float:rango para todos los elementos de colorrango1 int o float:rango para el Rojo o Tono dependiendo del modo de color actual.rango2int o float:rango para el Verde o Saturacin dependiendo del modo de color actual.rango3 int o float:rango para el Azul o Brillo dependiendo del modo de color actual.alphaint o float:rango para Alpha (0 transparencia total, mximo opacidad total).

**

Ejemplo de colorMode()colorMode(HSB, 360, 100, 100);

**

Fondo, contorno y rellenoFondo = background()Valor por defecto = 204 (gris claro)

Contorno = stroke()Valor por defecto = 0 (negro)Sin contorno = noStroke()

Relleno = fill()Valor por defecto = 255 (blanco)Sin relleno = noFill()

**

Sintaxis de background()background(gray)background(gray, alpha)background(value1, value2, value3)background(value1, value2, value3, alpha)background(color)background(color, alpha)background(hex)background(hex, alpha)

**

Parmetros de las versionesde background()grayint o float: valores entre blanco y negro.alpha int o float: valor de opacidad (0 = transparencia 255 = opacidad).value1 int o float: rojo o valor de matiz (depende del modo de color).value2 int o float: verde o valor de saturacin (depende del modo de color).value3 int o float: azul o valor de brillo (depende del modo de color).color color: cualquier valor del tipo de dato color. hex int: valor de color en notacin hexadecimal (ej.: #FFCC00 0xFFFFCC00).

**

Ejemplos de background()

colorMode(HSB, 360, 100, 100);background(51);

o bien:

colorMode(HSB, 360, 100, 100);background(255, 204, 0);

**

Parmetros de versiones de background(), stroke() y fill()grayint o float: valores entre blanco y negro.alpha int o float: valor de opacidad (0 = transparencia 255 = opacidad).value1 int o float: rojo o valor de matiz (depende del modo de color).value2 int o float: verde o valor de saturacin (depende del modo de color).value3 int o float: azul o valor de brillo (depende del modo de color).color color: cualquier valor del tipo de dato color. hex int: valor de color en notacin hexadecimal (ej.: #FFCC00 or 0xFFFFCC00).

**

Sintaxis de stroke()stroke(gray)stroke(gray, alpha)stroke(value1, value2, value3)stroke(value1, value2, value3, alpha)stroke(color)stroke(color, alpha)stroke(hex)stroke(hex, alpha)

**

Ejemplos de stroke()

stroke(153);rect(30, 20, 55, 55);

o bien:

stroke(204, 102, 0);rect(30, 20, 55, 55);

**

Sintaxis de fill()fill(gray)fill(gray, alpha)fill(value1, value2, value3)fill(value1, value2, value3, alpha)fill(color)fill(color, alpha)fill(hex)fill(hex, alpha)

**

Ejemplos de fill()

fill(153);rect(30, 20, 55, 55);

o bien:

fill(204, 102, 0);rect(30, 20, 55, 55);

**

Lectura recomendada Captulo Color 1: Color by Numbers (pag. 85).

**

Ejercicio 3EJ03: Componer un cuadro con una resolucin de 300x300 que contenga las siguientes figuras:dos elipses, cuatro lneas y un rectngulo.Las figuras podrn tener slo dos colores y el fondo de la composicin (background) otro distinto.Comentar todas las instrucciones.

Parte 4Tipos de datos. Variables.

**

DatosEn general consisten de mediciones de caractersticas fsicas.Processing puede administrar distintos tipos de datos:nmeros,letras,colores,imgenes,tipografasy valores booleanos.

**

Tipos de datos bsicos

NombreTamaoRango de valoresboolean1 bittrue o falsebyte8 bits-128 a 127char16 bits0 a 65535int32 bits-2,147,483,648 a 2,147,483,647float32 bits-3.40282347E+38 a3.40282347E+38color32 bits16,777,216

**

Variables (I)Podemos entender una variable como un contenedor que nos permite almacenar un tipo de dato.

Las variables permiten la reutilizacin de datos en un programa tantas veces como se necesite.

Las variables constan de tres partes:tipo de dato,=>floatnombre de la variable=>alturay valor=>1.72

**

Variables (II)En Processing, cuando trabajamos con variables, primero debemos declararla y luego asignar el valor que corresponda:

int x; // declaracin de la variable x de tipo intfloat y; // declaracin de la variable y de tipo floatboolean b;// declaracin de la variable b de tipo booleanx = 50;// asignacin del valor 50 a la variable xy = 12.6;// asignacin del valor 12.6 a la variable yb = true;// asignacin del valor true a la variable b

Durante la asignacin utilizamos el signo =, el cual es llamado operador de asignacin. El sentido de asignacin se da siempre de derecha a izquierda de dicho signo.

**

Variables (III)Los pasos de declaracin y asignacin pueden ser resumidos en una sola lnea de cdigo:

int x = 50; // declaracin y asignacinfloat y = 12.6; // declaracin y asignacinboolean b = true; // declaracin y asignacin

**

Instrucciones (III)Otro ejemplo de boceto que contiene un conjunto de instrucciones:

size(200, 200);// Ejecuta la funcin size()int x;// Declara una nueva variable xx = 102;// Asigna el valor 102 a la variable xbackground(x);// Ejecuta la funcin background()

**

Lectura recomendada Captulo Data 1: Variables (pag. 37).

**

Parte 5Aritmtica

**

Operadores aritmticos bsicos en Processing+Suma-Resta*Multiplicacin/Divisin%Mdulo

**

Orden de ejecucin de operaciones aritmticas??? 3 + 4 * 5

1) * / %2) + -3) =

**

ExpresionesPodemos pensar en una expresin como si fuera una frase.Las expresiones contienen frecuentemente o bien un solo valor, o combinaciones de valores y operadores matemticos y/o relacionales.Una expresin siempre tiene un valor determinado por la evaluacin de su contenido:ExpresinValor

55122.3 + 3.1125.4((3 + 2) * -10) + 1-496 > 3true54 < 50falseMuchas veces un conjunto de expresiones conforma una instruccin.

**

Uso de una variable como parmetro de funcinEjemplo:

int a = 30;line(a, 0, a, height);

**

Uso de una variable como componen-te de una expresin de asignacinEjemplo:

int a = 30;int b = a + 40;line(b, 0, b, height);

**

Uso de variables como componentes de una expresin perteneciente a un parmetro de funcinEjemplo:

int a = 30;int b = 40;line(b - a, 0, b - a, height);

**

Lectura recomendada Captulo Math 1: Arithmetic, Functions (pag. 43).

**


**

Operador Mdulo %El operador % calcula el resto de un cociente.A menudo se lo utiliza para mantener los nmeros dentro de un rango deseado.Por ej.: si partimos de un contador ascendente desde el nmero 0 y queremos obtener cuatro valores que se reiteren (un ciclo de valores), usamos la siguiente expresin:

x0 1 2 3 4 5 6 7 8 9 10 11 12 x % 40 1 2 3 0 1 2 3 0 1 2 3 0

**

Atajos aritmticosOperador incremental ++

int x = 1;println(x); // Imprime "1" en la consolax++; // Equivale a x = x + 1println(x); // Imprime "2" en la consola

Operador decremental --

int y = 1;println(y); // Imprime "1" en la consolay--; // Equivale a y = y - 1println(y); // Imprime 0" en la consola

**

x++ ++xx++En este caso el valor es incrementado LUEGO de que se evala la expresin.

int x = 1;println(x++); // Imprime "1" en la consolaprintln(x); // Imprime 2" en la consola

++xEn este segundo caso se actualiza el valor ANTES de evaluar la expresin.

int x = 1;println(++x); // Imprime 2" en la consolaprintln(x); // Imprime 2" en la consola

**

Operadores de asignacin de suma y substraccinSe utilizan para realizar saltos de ms de un paso (una unidad de valor).Suma +=

int x = 1;println(x); // Imprime "1" en la consolax += 5; // Equivalente a x = x + 5println(x); // Imprime 6" en la consolaResta -=

int y = 1;println(y); // Imprime "1" en la consolay -= 5; // Equivalente a y = y - 5println(y); // Imprime -4" en la consola

**

Operadores de asignacin de multiplicacin y divisinSe utilizan para realizar saltos de ms de un paso (una unidad de valor).Multiplicacin *=

int x = 4;println(x); // Imprime "4" en la consolax *= 2; // Equivalente a x = x * 2println(x); // Imprime "8" en la consolaDivisin /=

int y = 4;println(y); // Imprime "4" en la consolay /= 2; // Equivalente a y = y / 2println(y); // Imprime 2" en la consola

**

Operadores de negacinCambia el signo del valor.

Negacin

int x = 5; // Asigna 5 a xx = -x; // Equivalente a x = x * -1println(x); // Imprime "-5"

**

Ejercicio 4EJ04: Tomar el EJ03, declarar tres variables y utilizarlas en tres contextos distintos:

1) como parmetro de funcin.2) como componente de una expresin de asignacin. Utilizar operadores aritmticos de suma o resta.3) como componente de una expresin perteneciente a un parmetro de funcin. Utilizar operadores aritmticos de suma o resta.Comentar todas las instrucciones.

Parte 6Control: Decisiones

**

Expresiones relacionalesLas expresiones relacionales nos informan la condicin de verdad de dicha expresin.Una expresin relacional compara dos valores y evala si el resultado es verdadero o falso.

ExpresinEvaluacin

3 > 5 false3 < 5 true5 < 3 false5 > 3 true

**

Operadores relacionalesOperadorSignificado

> mayor a< menor a>= mayor o equivalente a

Condicional: if

**

Ejemplo: if

boolean dibujoCirculo = true;

if (dibujoCirculo == true) { ellipse(50, 50, 50, 50);}rect(30, 45, 40, 10);

**

Condicional: if/else

**

Ejemplo: if/else

boolean dibujoCirculo = true;

if (dibujoCirculo == true) { ellipse(50, 50, 50, 50);} else { line(25, 25, 75, 75); line(75, 25, 25, 75);}rect(30, 45, 40, 10);

**

Condicional: if/else if

**

Ejemplo: if/else if

boolean dibujoCirculo = false;boolean dibujoElipse = false;

if (dibujoCirculo == true) { ellipse(50, 50, 50, 50);} else if (dibujoElipse == true){ ellipse(50, 50, 50, 25);}rect(30, 45, 40, 10);

**

Condicional: switch()Funciona como una estructura if, sin embargo es ms conveniente utilizar switch() cuando usted necesita seleccionar entre tres o ms alternativas.

El control del programa se dirige al caso (case) que contenga el mismo valor de la expresin. Todas las dems instrucciones del switch() sern ejecutadas a menos que sean redirigidas mediante un corte (break).

Slo los tipos de datos primitivos que pueden ser convertidos a un entero (byte, char e int) pueden ser usados como parmetro de expresin.

El caso por defecto (default) es opcional.

Sintaxis

switch(expresin){ case etiqueta1: instrucciones case etiqueta2: // Opcional instrucciones // Opcional default: // Opcional instrucciones // Opcional}

Parmetros

expresin byte, char o intetiqueta byte, char o intinstrucciones una o ms

**

Ejemplo 1/3: switch()int num = 1;

switch(num) { case 0: println("Cero"); // No se ejecuta break; case 1: println("Uno"); // Imprime "Uno" break;}println("Listo!"); // Imprime "Listo!"

**

Ejemplo 2/3: switch()char letra = 'N';

switch(letra) { case 'A': println("Alfa"); // No se ejecuta break; case 'B': println("Bravo"); // No se ejecuta break; default: // El caso por defecto se ejecuta si println("Ninguna"); // ninguna etiqueta coincide con el break; // parmetro de switch().}println("Listo!"); // Imprime "Listo!"

**

Ejemplo 3/3: switch()// La remocin de un "break" permite la// evaluacin de ms de un valor a la vez

char letra = 'b';

switch(letra) { case 'a': case 'A': println("Alfa"); // No se ejecuta break; case 'b': case 'B': println("Bravo"); // Imprime "Bravo" break;}println("Listo!"); // Imprime "Listo!"

**

Operadores lgicos (I)En la lgica proposicional se utilizan conectivas lgicas, tambin llamadas operadores lgicos.En programacin se los utilizan para combinar valores de verdad y obtener nuevos valores que determinen el flujo de control de un algoritmo o programa.Los operadores lgicos presentes en Processing se usan para combinar dos o ms expresiones relacionales y/o para invertir los valores lgicos. Permiten considerar ms de una condicin simultneamente.

Operador Significado

&& AND (Y conjuncin)|| OR (o disyuncin (disyuncin inclusiva))! NOT (no - negacin)

**

Operadores lgicos (II)Tabla de funciones de verdad:

Expresin Evaluacin

true && true truetrue && false falsefalse && true falsefalse && false false

true || true truetrue || false truefalse || true truefalse || false false

!true false!false true

**

Operador lgico ANDEl operador AND hace que una expresin relacional sea verdadera si AMBAS partes son verdaderas.

int a = 10;int b = 20;

// La expresin "a > 5" debe ser verdadera// y "b < 30 tambien debe serlo.// Debido a que ambas son verdaderas, se ejecutar el cdigo del bloque.if ((a > 5) && (b < 30)) {line(20, 50, 80, 50);}

// La expresin "a > 15" es falsa, pero "b < 30" es verdadera.// Debido a que el operador AND requiere que ambas sean// verdaderas, no se ejecutar el cdigo del bloque.if ((a > 15) && (b < 30)) {ellipse(50, 50, 36, 36);}

**

Operador lgico OREl operador OR hace que una expresin relacional sea verdadera si SLO una parte es verdadera.

int a = 10;int b = 20;// Cualquiera de las dos expresiones pueden ser verdaderas.// Debido a que ambas son verdaderas, se ejecutar el cdigo del bloque.if ((a > 5) || (b < 30)) {line(20, 50, 80, 50);}// La expresin "a > 15" es falsa, pero "b < 30" es verdadera.// Debido a que el operador OR requiere slo que una parte sea verdadera// en toda la expresin, se ejecutar el cdigo del bloque.if ((a > 15) || (b < 30)) {ellipse(50, 50, 36, 36);}

**

Operador lgico NOTEl operador NOT se nota mediante un signo de exclamacin (!). Invierte el valor lgico de las variables booleanas asociadas. Es decir cambia los valores TRUE a FALSE y viceversa. El operador lgico NOT se aplica slo a variables booleanas.

boolean b = true;// Asigna true a bprintln(b); // Imprime "true"println(!b); // Imprime "false"b = !b; // Asigna false a bprintln(b); // Imprime "false"println(!b); // Imprime "true"println(5 > 3); // Imprime "true"println(!(5 > 3));// Imprime "false"int x = 5;// Declara y asigna 5 a xprintln(!x); // ERROR! Slo es posible trabajar con// variables booleanas

**

Lectura recomendada Captulo Control 1: Decisions (pag. 51).

**

Ejercicio 5EJ05: Realizar un boceto donde se declare una variable que, en funcin del valor dibuje:TRUE: un crculo con relleno negro.FALSE: un crculo con relleno blanco.Comentar todas las instrucciones.

Ejercicio 6EJ06: Realizar un boceto donde se dibuje una lnea horizontal a mitad de pantalla, y que adems a partir del valor de la declaracin de una variable dibuje:TRUE: un crculo con relleno negro.FALSE: un crculo con relleno blanco.Comentar todas las instrucciones.

Ejercicio 7EJ7: Realizar un boceto donde se declare una variable que en funcin del valor dibuje:un crculo sin relleno.un crculo con relleno blanco.un crculo con relleno negro.Comentar todas las instrucciones.

Parte 7Control: Iteraciones

**

Las estructuras iterativas para simplificar instrucciones repetitivas.Ejemplo cdigo original

size(200, 200);line(20, 20, 20, 180); line(30, 20, 30, 180); line(40, 20, 40, 180);line(50, 20, 50, 180);line(60, 20, 60, 180);line(70, 20, 70, 180);line(80, 20, 80, 180);line(90, 20, 90, 180);line(100, 20, 100, 180);line(110, 20, 110, 180);line(120, 20, 120, 180);line(130, 20, 130, 180);line(140, 20, 140, 180);Ej. cdigo optimizado

size(200, 200);for (int i = 20; i < 150; i += 10) {line(i, 20, i, 180);}

**

Estructura y funcionamiento general de forfor (init; test; update) {statements}

Se ejecuta la instruccin init.Se evalua la condicin true o false de test.Si test es true, contina al paso 4. Si el test es false salta al paso 6.Ejecuta las instrucciones del bloque.Ejecuta la instruccin update y salta al paso 2.Sale de la estructura de iteracin y contina ejecutando el programa.

**

Iteracin: for

**

Ejemplo: forfor (int i = 10; i

Iteraciones anidadasLa estructura for produce repeticiones en una dimensin. Si anidamos esta estructura DENTRO de otra, combinando su efecto, crearemos iteraciones en dos dimensiones.

Ej. 1for (int y = 10; y < 100; y += 10) {point(10, y);}

Ej. 2for (int x = 10; x < 100; x += 10) {point(x, 10);}

Ej. 1 y 2 anidadosfor (int y = 10; y < 100; y += 10) {for (int x = 10; x < 100; x += 10) {point(x, y);}}Por cada punto dibujado en la estructura externa, se dibujan 9 puntos en la estructura interna.

**

Iteracin: whileLa estructura while ejecuta una serie de instrucciones de manera continua mientras que la expresin sea verdadera.

La expresin debe ser actualizada durante la iteracin, de lo contrario nunca saldremos del while.

Esta funcin puede resultar peligrosa ya que el cdigo dentro del bucle while() no se detendr hasta que la expresin dentro del mismo resulte falsa. Bloquear cualquier otro cdigo a ser utilizado (los eventos de ratn no sern actualizados, etc.). Por lo tanto debemos ser cautelosos ya que podemos llegar a inmovilizar el cdigo (y hasta a veces el entorno Processing mismo) si se usa de manera incorrecta.

Sintaxis

while (expresin) { instrucciones}

Parmetros

expresin una expresin vlidainstrucciones una o ms

**

Ejemplo: while

int i=0;

while(i < 80) { line(30, i, 80, i); i = i + 5;}

**

Lectura recomendada Captulo Control 2: Repetition (pag. 61).

**


**

Ejemplo 1/16: forfor (int x = -16; x < 100; x += 10) { line(x, 0, x+15, 50);}strokeWeight(4);for (int x = -8; x < 100; x += 10) { line(x, 50, x+15, 100);}

**

Ejemplo 2/16: fornoFill();for (int d = 150; d > 0; d -= 10) { ellipse(50, 50, d, d);}

**

Ejemplo 3/16: for/* Cambio de matiz, mientras la saturacin y el brillo se mantienen constantes */colorMode(HSB);for (int i = 0; i < 100; i++) { stroke(i*2.5, 255, 255); line(i, 0, i, 100);}

**

Ejemplo 4/16: for/* Cambio de saturacin, mientras el matiz y el brillo se mantienen constantes */colorMode(HSB);for (int i = 0; i < 100; i++) { stroke(132, i*2.5, 204); line(i, 0, i, 100);}

**

Ejemplo 5/16: for/* Cambio de brillo, mientras el matiz y la saturacin se mantienen constantes */colorMode(HSB);for (int i = 0; i < 100; i++) { stroke(132, 108, i*2.5); line(i, 0, i, 100);}

**

Ejemplo 6/16: for/* Cambio de saturacin y brillo, mientras el matiz se mantiene constante */colorMode(HSB);for (int i = 0; i < 100; i++) { for (int j = 0; j < 100; j++) { stroke(132, j*2.5, i*2.5); point(i, j); }}

**

Ejemplo 7/16: for// Cambio del azul al verde en modo RGBcolorMode(RGB);for (int i = 0; i < 100; i++) { float r = 61 + (i*0.92); float g = 156 + (i*0.48); float b = 204 - (i*1.43); stroke(r, g, b); line(i, 0, i, 100);}

**

Ejemplo 8/16: for// Cambio del azul al verde en modo HSBcolorMode(HSB, 360, 100, 100);for (int i = 0; i < 100; i++) { float newHue = 200 - (i*1.2); stroke(newHue, 70, 80); line(i, 0, i, 100);}

**

Ejemplos 9 a 12/16: for

**

Ejemplos 13 a 16/16: for

**

Ejemplos 1/8: iteraciones anidadasfor (int y = 1; y < 100; y += 10) { for (int x = 1; x < y; x += 10) { line(x, y, x+6, y+6); line(x+6, y, x, y+6); }}

**

Ejemplos 2/8: iteraciones anidadasnoStroke();for (int y = 0; y < 100; y += 10) { for (int x = 0; x < 100; x += 10) { fill((x+y) * 1.4); rect(x, y, 10, 10); }}

**

Ejemplos 3 a 4/8: iteraciones anidadas

**


**

Ejercicio 8EJ08: Utilizar dos estructuras for() para generar:un fondo con cambio de matiz;y por sobre este, una serie de ocho cuadrados negros concntricos (el menor deber tener 10 px de lado y el mayor 80 px), separados por una distancia de 5 px en cada uno de sus lados.Comentar todas las instrucciones.

Parte 8Aleatoriedad

**

Valores inesperadosLa funcin random() es utilizada para crear valores impredecibles dentro de un rango especificado por sus parmetros.

Los nmeros devueltos por la funcin random() son siempre de punto flotante.

random(valorAlto)random(valorBajo, valorAlto)

random(5);// regresa valores entre 0.0 y 5.0random(5.0);// regresa valores entre 0.0 y 5.0random(-5.0, 10.2);// regresa valores entre -5.0 y 10.2

**

Ejemplos (I)smooth();strokeWeight(10);stroke(0, 130);line(0, random(100), 100, random(100));line(0, random(100), 100, random(100));line(0, random(100), 100, random(100));line(0, random(100), 100, random(100));line(0, random(100), 100, random(100));

**

Ejemplos (II)smooth();strokeWeight(20);float r = random(5, 45);stroke(r * 5.6, 230);line(0, r, 100, random(55, 95));r = random(5, 45);stroke(r * 5.6, 230);line(0, r, 100, random(55, 95));r = random(5, 45);stroke(r * 5.6, 230);line(0, r, 100, random(55, 95));

**

Ejemplos (III)background(0);stroke(255, 60);for (int i = 0; i < 100; i++) {float r = random(10);strokeWeight(r);float desplazamiento = r * 5.0;line(i-20, 100, i+desplazamiento, 0);}

**

randomSeed() - SemillasYa que el ordenador no puede inventar numeros al azar, estos se obtienen con ms o menos complejas ecuaciones. Por lo tanto son repetibles.Para obtener cadenas de valores reiterados, utilizamos una semilla mediante la funcin randomSeed().

randomSeed(valor)

El valor debe ser siempre un int.

**

Ejemplo

int s = 6; // Valor de semilla, probar: s=6 o s=12background(0);stroke(255, 60);randomSeed(s); // Produce los mismos nros cada vezfor (int i = 0; i < 100; i++) {float r = random(10);strokeWeight(r);float desplazamiento = r * 5;line(i-20, 100, i+ desplazamiento, 0);}

**

noise() Ruido (I)La funcin noise() es utilizada para crear valores inesperados de una manera ms controlada. Utiliza la tcnica de ruido Perlin, fue desarrollada por el matemtico Ken Perlin en 1985.

Funciona interpolando valores aleatorios para crear transiciones ms suaves que las obtenidas mediante la funcin random(). Siempre devuelve valores de punto flotante entre 0.0 y 1.0.

**

noise() Ruido (II)

noise(x)noise(x, y)noise(x, y, z)

La versin con un solo parmetro es utilizada para crear una secuencia nica de nmeros aleatorios, Los parmetros adicionales producen ruido en ms dimensiones (2D: texturas, 3D: formas, texturas 3D o texturas animadas en 2D).

**

noise() Ruido (III)Los nmeros devueltos por noise() pueden resultar ms cercanos o ms lejanos del anterior mediante cambios en el parmetro de frecuencia de incremento.

Como regla general, mientras ms pequea sea la diferencia, ms suave resultar la secuencia de ruido. Entonces resulta que un incremento pequeo genera nmeros ms cercanos al valor anterior que un incremento mayor.

Se estila nombrar la variable de incremento como inc.

**

noiseSeed() semilla de ruidoLa funcin noise() suele ser utilizada en conjunto con la funcin noiseSeed(), siendo esta similar a randomSeed().

Generalmente se utilizan valores de incremento que se sitan en el rango 0.005 a 0.03.

**

Ejemplo con un parmetrosize(600, 100);float v = 0.0;float inc = 0.1; // Probar 0.1 o 0.01noStroke();fill(0);noiseSeed(0);for (int i = 0; i < width; i = i+4) {float n = noise(v) * 70.0;rect(i, 10 + n, 3, 20);v = v + inc;}

**

Ejemplo con dos parmetrosfloat xnoise = 0.0;float ynoise = 0.0;float inc = 0.04; //Probar 0.04, 0.02 o 0.1for (int y = 0; y < height; y++) { for (int x = 0; x < width; x++) { float gray = noise(xnoise, ynoise) * 255; stroke(gray); point(x, y); xnoise = xnoise + inc; } xnoise = 0; ynoise = ynoise + inc;}

**

Lectura recomendada Captulo Math 4: Random (pag. 127).

**

Ejercicio 9EJ09: Utilizar una estructura for() para generar:diez crculos sin relleno, con posicin, dimetro y color aleatorios.Usar funcin random().Comentar todas las instrucciones.

Ejercicio 10EJ10: Utilizar una estructura for() para generar:diez rectngulos sin relleno, con posicin, dimetro y color aleatorios pero cuyos valores resulten cercanos entre s.Usar funcin noise().Comentar todas las instrucciones.

Parte 9Continuidad: de la imagen esttica a la dinmica

**

Ejecucin continua Todos los bocetos programados hasta el momento son ejecutados por nica vez y luego se detienen.

Programas animados o sensibles a informacin en vivo deben ejecutarse continuamente.

**

Funcin draw() Los programas que se ejecutan continuamente DEBEN incluir una funcin llamada draw().

El cdigo incluido en el bloque de la funcin draw() se ejecuta en forma de BUCLE hasta que el usuario presione el botn de detencin o cierre la ventana.

Un programa puede tener un nico draw().

Cada vez que el bloque draw() finaliza, dibuja un nuevo cuadro (frame) y comienza nuevamente el cdigo del bloque desde su primera lnea.

**

Bloque de funcin draw() Por defecto, el ordenador intenta dibujar 60 cuadros por segundo.

Si utilizamos la variable de sistema frameRate podremos saber cuantos cuadros mximos por segundo puede renderizar nuestro ordenador.

void draw() {println(frameRate);}

**

Funcin frameRate() La funcin frameRate() determina el nmero mximo de cuadros por segundo que renderizar el programa siempre y cuando no exceda los valores posibles a realizar por el sistema.

Si utilizamos la variable de sistema frameCount podremos llevar un registro de la cantidad de cuadros renderizados hasta el momento:

void draw() { frameRate(1); println(frameCount);}

**

Animacin (I) Creamos animaciones cuando cambiamos atributos visuales de un cuadro al otro:

float y = 0.0;

void draw() {frameRate(30);line(0, y, 100, y);y = y + 0.5;}

**

Animacin (II) Debe ser observado que se define la variable y por fuera del bloque draw(). Qu hubiera pasado si la incluamos dentro?

void draw() {frameRate(30);float y = 0.0;line(0, y, 100, y);y = y + 0.5;}

**

Animacin (III) Para que tengamos una animacin la variable y debe ser declarada fuera del bloque, ya que de lo contrario esta se redefinira y reasignara al MISMO valor cada vez que se vuelve a iniciar el bucle.

**

Animacin (IV) Como podemos observar, el fondo del lienzo va cambiando de color de acuerdo a cada nueva lnea que aparece.

SI deseamos poder ver el avance de la lnea sobre el fondo, debemos refrescar el fondo cada vez que reiniciemos el draw() mediante la funcin background().

float y = 0.0;

void draw() {frameRate(30);background(204);line(0, y, 100, y);y = y + 0.5;}

**

Animacin (V) Incorporando una pequea expresin en los parmetros de background(), la animacin va ganando inters!

float y = 0.0;

void draw() {frameRate(30);background(y * 2.5);line(0, y, 100, y);y = y + 0.5;}

**

Animacin (VI) Y si incorporamos una pequea estructura de condicional generamos ciclos visibles!

float y = 0.0;

void draw() { frameRate(30); background(204); line(0, y, 100, y); y = y + 0.5;if (y > height) { y = 0; }}

**

Animacin (VII) O bien podemos volver a tomar la animacin IV y modificarla para obtener otro resultado visual:

int y = 0;int direccion = 1;

void draw() { frameRate(30); background(204);

if (y > 100) { direccion = -1; }

if (y < 0) { direccion = 1; }

y = y + (1 * direccion); line(0, y, 100, y);}

**

Animacin (VIII) Esta es otra manera de resolver la animacin anterior. No existen formas fijas de resolver un problema, por suerte podemos abordar diferentes enfoques para la resolucin del mismo:

int y = 0;int direccion = 1;

void draw() { frameRate(30); background(204);

if (y > 100 || y < 0) { direccion *= -1; }

y = y + (1 * direccion); line(0, y, 100, y);}

**

Lectura recomendada Captulo Structure 2: Continuous (pag. 173).

**

Ejercicio 11EJ11: Utilizar la estructura draw() y dos variables para animar:una elipse y tres lneas.Comentar todas las instrucciones.

Parte 10Anatoma de un programaestructurado

**

Funcin setup() Para optimizar la programacin, nos damos cuenta que ciertas funciones slo deben ser ejecutadas una vez. Exponemos como ejemplo la funcin frameRate() de los bocetos anteriores.

float y = 0.0;

void setup() { frameRate(30);}

void draw() { background(y * 2.5); y = y + 0.5; line(0, y, 100, y); if (y > 100) { y = 0; }}

**

Bloque de Funcin setup() Cuando en Processing se ejecuta un programa, el cdigo que se encuentra fuera de los bloques setup() y draw() es contemplado en primera instancia.

Luego, se ejecuta por nica vez el cdigo dentro del bloque setup().

Por ltimo, se ejecuta continuamente el contenido del bloque draw().

**

Diagrama de estructura formal standard de un programaSeccin de variables globalesSeccin de inicializacinSeccin de dibujo

**

Ejemplo float y = 0.0;

void setup() {size(100, 100);smooth();fill(0);}void draw() {background(204);ellipse(50, y, 70, 70);y += 0.5;if (y > 150) {y = -50.0;}}

**

Observaciones (I) Las variables que cambian en cada repeticin del bloque draw() DEBEN ser declaradas fuera de los bloques de setup() y draw().Si su programa dibuja un solo cuadro, puede escribirlo por completo dentro del bloque setup():

void setup() {size(100, 100);smooth();fill(0);ellipse(50, 50, 66, 66);}

**

Observaciones (II) Otra manera de realizar un solo cuadro, es utilizar la funcin noLoop() dentro del bloque setup().

void setup() {size(100, 100);smooth();fill(0);noLoop();}void draw() {ellipse(50, 50, 66, 66);}

**

mbito de las variables int d = 51; // d variable global

void setup() {size(100, 100);int val = d * 2;// val variable local en setup()fill(val);}

void draw() {int y = 60; // y variable local en draw()line(0, y, d, y);y -= 25;line(0, y, d, y);}

**

Lectura recomendada Captulo Structure 2: Continuous (pag. 173).

**

Parte 11Interactividad: ratn y teclado

**

Ratn: variables de sistemaEl mouse no es ms que un indicador XY de posicin de pantalla.Las variables de sistema ms usadas:mouseXmouseYpmouseXpmouseYmousePressedmouseButton

**

Ejemplo de variables de sistema mouseX y mouseY 1/6void draw() { frameRate(12); println(mouseX + " : " + mouseY);}

**

Ejemplo de variables de sistema mouseX y mouseY 2/6void setup() { size(200, 200); smooth(); noStroke();}void draw() { background(126); ellipseMode(CENTER); ellipse(mouseX, mouseY, 33, 33);}

**

Ejemplo de variables de sistema mouseX y mouseY 3/6void setup() { size(200, 200); smooth(); noStroke();}void draw() { background(126); ellipse(mouseX, 16, 33, 33); ellipse(mouseX + 20, 50, 33, 33); ellipse(mouseX - 20, 84, 33, 33);}

**

Ejemplo de variables de sistema mouseX y mouseY 4/6void setup() { size(200, 200); smooth(); noStroke();}void draw() { background(126); ellipse(mouseX, 16, 33, 33); ellipse(mouseX / 2, 50, 33, 33); ellipse(mouseX * 2, 84, 33, 33);}

**

Ejemplo de variables de sistema mouseX y mouseY 5/6void setup() { size(200, 200); smooth(); noStroke();}void draw() { float x = mouseX; float y = mouseY; float ix = width - mouseX; // Inverso de X float iy = mouseY - height; // Inverso de Y background(126); fill(255, 150); ellipse(x, height/2, y, y); fill(0, 159); ellipse(ix, height/2, iy, iy);}

**

Ejemplo de variables de sistema mouseX y mouseY 6/6void setup() { size(200, 200); smooth(); noStroke();}void draw() { background(126); float normX = mouseX / float(width); ellipse(mouseX, 16, 33, 33); ellipse(pow(normX, 4) * width, 50, 33, 33); ellipse(pow(normX, 8) * width, 84, 33, 33);}

**

Ejemplo de variables de sistema pmouseX y pmouseY 1/2void draw() { frameRate(12); println(pmouseX - mouseX);}

**

Ejemplo de variables de sistema pmouseX y pmouseY 2/2void setup() { size(100, 100); strokeWeight(8); smooth();}void draw() { background(204); line(mouseX, mouseY, pmouseX, pmouseY);}

**

Ejemplo de if y variable de sistema mousePressed y otrosvoid setup() { size(640, 200); background(102);}

void draw() { stroke(255); if(mousePressed == true) { line(mouseX, mouseY, pmouseX, pmouseY); }}

**

Ejemplo de estructura if y variable de sistema mousePressed // Pinta el relleno a negro// cuando se presiona el botn del ratn.

void draw() { if (mousePressed == true) { fill(0); } else { fill(255); } rect(25, 25, 50, 50);}

**

Ejemplo de estructura if y variable de sistema mouseButton 1/2 // Pinta el relleno a negro si presiono el botn izquierdo,// a blanco si es el derecho y a gris si es el medio.// mouseButton acepta las constantes: LEFT, RIGHT y CENTER.void setup() { size(100, 100);}void draw() { if (mouseButton == LEFT) { fill(0); // Negro } else if (mouseButton == RIGHT) { fill(255); // Blanco } else { fill(126); // Gris } rect(25, 25, 50, 50);}

**

Ejemplo de estructura if y variable de sistema mouseButton 2/2 // Versin alternativa del ejemplo anterior.

void setup() { size(100, 100);}void draw() { if (mousePressed == true) { if (mouseButton == LEFT) { fill(0); // Negro } else if (mouseButton == RIGHT) { fill(255); // Blanco } } else { fill(126); // Gris } rect(25, 25, 50, 50);}

**

Teclado: variables de sistemaLas variables de sistema ms usadas:keyPressedkeykeyCode

**

Ejemplo de variable de sistema keyPressed 1/2// Dibuja un rectngulo mientras se // mantiene presionada una tecla.

void setup() { size(100, 100); smooth(); strokeWeight(4);}void draw() { background(204); if (keyPressed == true) { rect(40, 40, 20, 20); } else { line(20, 20, 80, 80); }}

**

Ejemplo de variable de sistema keyPressed 2/2// Mueve una lnea si se // mantiene presionada una tecla.

int x = 20;void setup() { size(100, 100); smooth(); strokeWeight(4);}void draw() { background(204); if (keyPressed == true) { x++; } line(x, 20, x-60, 80);}

**

Ejemplo de variables de sistema keyPressed y key// Dibuja una lnea si se mantiene// presionada la tecla 'a' o 'A'.

void setup() { size(100, 100); smooth(); strokeWeight(4);}void draw() { background(204); if ((keyPressed == true) && ((key == 'a') || (key == 'A'))) { line(50, 25, 50, 75); } else { ellipse(50, 50, 50, 50); }}

**

Ejemplo de variables de sistema keyPressed, key y keyCode// Uso de variable de sistema keyCode.// keyCode acepta como constantes:// las teclas de direccin UP, DOWN, LEFT, RIGHT,// y ALT, CONTROL y SHIFT.

int y = 35;void setup() { size(100, 100);}void draw() { background(204); line(10, 50, 90, 50); if (key == CODED) { if (keyCode == UP) { y = 20; } else if (keyCode == DOWN) { y = 50; } } else { y = 35; } rect(25, y, 50, 30);}

**

Ratn: Funciones de eventoLas funciones de evento ms usadas: mousePressed()El cdigo dentro de esta funcin se ejecuta una vez cuando se presiona un botn de ratn.mouseReleased()El cdigo dentro de esta funcin se ejecuta una vez cuando se libera un botn de ratn.mouseMoved()El cdigo dentro de esta funcin se ejecuta una vez cuando se mueve un ratn.mouseDragged()El cdigo dentro de esta funcin se ejecuta una vez cuando se mueve un ratn mientras se encuentra presionado un botn de ratn.

**

Ejemplo de if...else y funcin de evento mouseReleasedint valor = 0;

void draw() { fill(valor); rect(25, 25, 50, 50);}

void mouseReleased() { if(valor == 0) { valor = 255; } else { valor = 0; }}

**

Teclado: Funciones de eventoLas funciones de evento ms usadas: keyPressed()El cdigo dentro de esta funcin se ejecuta una vez cuando se presiona cualquier tecla.keyReleased()El cdigo dentro de esta funcin se ejecuta una vez cuando se libera cualquier tecla.

**

Ejemplo de funcin de evento keyPressed() y keyReleased()boolean drawT = false;

void setup() { size(100, 100); noStroke();}void draw() { background(204); if (drawT == true) { rect(20, 20, 60, 20); rect(39, 40, 22, 45); }}void keyPressed() { if ((key == 'T') || (key == 't')) { drawT = true; }}void keyReleased() { drawT = false;}

**

Ejemplo de funcin de evento mousePressed() y keyPressed()void setup() { size(200, 200); background(255); fill(0, 102);}

void draw() {}

void mousePressed() { rectMode(CENTER); rect(mouseX, mouseY, 32, 32);}

void keyPressed() { background(255);}

**

Lectura recomendada Captulo Input 1: Mouse I (pag. 205). Captulo Drawing 1: Static Forms (pag. 217). Captulo Input 2: Keyboard (pag. 223). Captulo Input 3: Events (pag. 229).

**


**

Ejemplo de variables de sistema mouseX y mouseY y estructura if 1/4// La posicin del cursor pinta la mitad izquierda// o derecha de la ventana de visualizacin.

void setup() { size(100, 100); noStroke(); fill(0);}void draw() { background(204); if (mouseX < 50) { rect(0, 0, 50, 100); // Izquierda } else { rect(50, 0, 50, 100); // Derecha }}

**

Ejemplo de variables de sistema mouseX y mouseY y estructura if 2/4// La posicin del cursor pinta el tercio izquierdo// central o derecho de la ventana de visualizacin.

void setup() { size(100, 100); noStroke(); fill(0);}void draw() { background(204); if (mouseX < 33) { rect(0, 0, 33, 100); // Izquierda } else if ((mouseX >= 33) && (mouseX

Ejemplo de variables de sistema mouseX y mouseY y estructura if 3/4// La posicin del cursor pinta un cuadrante// de la ventana de visualizacin.

void setup() { size(100, 100); noStroke(); fill(0);}void draw() { background(204); if ((mouseX

Ejemplo de if...else if, variables de sistema mouseX, mouseY y operadores lgicosvoid setup() { size(200, 200);}void draw() { background(255); stroke(0); line(100, 0, 100, 200); line(0, 100, 200, 100);

// Relleno de color negro noStroke(); fill(0); if (mouseX < 100 && mouseY < 100) { rect(0, 0, 100, 100); } else if (mouseX > 100 && mouseY < 100) { rect(100, 0, 100, 100); } else if (mouseX < 100 && mouseY > 100) { rect(0, 100, 100, 100); } else if (mouseX > 100 && mouseY > 100) { rect(100, 100, 100, 100); }}

**

Ejemplo de variables de sistema mouseX y mouseY y estructura if 4/4// La posicin del cursor cambia el color// de relleno de un rea rectangular.

void setup() { size(100, 100); noStroke(); fill(0);}void draw() { background(204); if ((mouseX > 40) && (mouseX < 80) && (mouseY > 20) && (mouseY < 80)) { fill(255); } else { fill(0); } rect(40, 20, 40, 60);}

**

Ejercicio 12EJ12: Animar tres crculos de acuerdo a los datos ingresados mediante el ratn.Comentar todas las instrucciones.

Parte 12Funciones de usuario

**

Introduccin 1/2En Processing cualquier usuario puede programar sus propias funciones. Llamamos a esto funcin de usuario.Una funcin es un mdulo de programacin autocontenido.Las funciones de usuario hacen ms conciso el cdigo redundante al extraer los elementos comunes e incluirlos en bloques de cdigo para que puedan ejecutarse tantas veces se quiera dentro del programa.Esto permite una lectura ms fcil del cdigo y reduce las probabilidades de error al actualizar el cdigo.Las funciones generalmente tienen parmetros que definen sus acciones.Las funciones pueden operar de forma diferente dependiendo del nmero de parmetros usados.Una funcin puede ser imaginada como una caja con mecanismos dentro que actan sobre los datos ingresados y devuelven un resultado.

**

Introduccin 2/2Convencionalmente posee una o varias entradas, un bloque de cdigo que procesa dichas entradas, y finalmente una salida.

Algunos ejemplos de diagramas de funcin de usuario:

**

Abstraccin 1/2En terminologa de software se llama abstraccin al proceso que permite esconder los detalles de realizacin y concentrarnos en el resultado.En realidad todas las funciones de sistema que hemos visto hasta el momento son, tcnicamente, abstracciones: los autores han escondido los detalles de implementacin para que el programador se concentre en los resultados.Cuando construimos funciones estas podrn devolver un resultado o no. Depende evidentemente de qu querramos hacer con ella. Pero en el caso de optar por la no devolucin de un resultado deberemos comenzar por construir el bloque con la palabra clave void.Es por esto que todos los ejemplos que veremos a continuacin comienzan a construirse con dicha palabra clave.

**

Introduccin a las funciones 1/12// Programacin 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// Traduccin: Ral Lacabanne - 2009

void setup() { // esta funcin ser llamada automticamente por Processing cuando el programa se ejecute size(200, 200); // configura el tamao de pantalla }

void draw() { // esta funcin tambin ser llamada automticamente luego de setup() rect(100, 30, 90, 160); // crea un rectngulo}

// El "flujo de ejecucin" ser el siguiente: // 1) setup() // 2) size(200, 200) // 3) draw() // 4) rect(10, 10, 90, 160);

**


void setup() { size(200, 200); background(255); // establece el color de fondo en blanco }

void draw() { // cuatro llamadas a la funcin 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 funcin definida por el usuario (podemos nombrarla como querramos) noStroke(); fill(255, 0, 0); // rojo rect(0, 10, 30, 10); rect(10, 0, 10, 30); }

**


// 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 rectngulos sern dibujados desde el centro rect(0, 0, 30, 10); rect(0, 0, 10, 30); }

**


// cuando creamos funciones personalizadas es posible agregar un nmero arbitrario de "parmetros"// que actuarn como variables dentro del bloque de la funcin

void setup() { size(200, 200); background(255); }

void draw() { // cuando llamamos a nuestra funcin, estamos "pasando" 2 parmetros que // afectarn la posicin 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 parmetros (los nombramos como querramos) noStroke(); fill(255, 0, 0); rectMode(CENTER);

// ejeX y ejeY estn actuando como variables y han sido declaradas por fuera del bloque de la funcin rect(ejeX, ejeY, 30, 10); rect(ejeX, ejeY, 10, 30); }

**


// introduccin de parmetros adicionales void setup() { size(200, 200); background(255); } void draw() { // definicin de variables que contienen informacin 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 parmetro que afectar el tamao de la cruz // y un cuarto parmetro 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 parmetros han sido agregados a la funcin 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); }

**


// 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); }

**


// usar funciones que usan otras funciones... // primero hagamos dos figuras diferentes y examinmoslas 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); }

**


// usar funciones que usan otras funciones... // ahora hagamos una funcin 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); }

**


// usar funciones que usan otras funciones...

// generar una funcin que utiliza nuestras 2 piezas compuestas juntas// ms la introduccin de escalado (usando un parmetro adicional)


void draw() { peligro(50, 100, 13); // ms grande peligro(150, 100, 5); // ms pequeo}

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); }

**

Introduccin a las funciones 10/12// Programacin 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// Traduccin: Ral Lacabanne - 2009

// usar funciones que usan otras funciones... // generar una funcin que utiliza nuestras 2 piezas compuestas juntas// ms la introduccin de escalado basado en una matriz de transformacin 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); }

**


// usar funciones que usan otras funciones...

// generar una funcin que utiliza nuestras 2 piezas compuestas juntas// ms la introduccin de escalado basado en una matriz de transformacin


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); }

**

Introduccin a las funciones 12/12void setup(){ size(640, 360); background(102); smooth();}

void draw() {elipseVariable(mouseX, mouseY, pmouseX, pmouseY);}

// elipseVariable() calcula la velocidad del ratn.// Si el ratn se mueve lentamente: dibuja una elipse pequea,// si el ratn se mueve rpidamente: 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/2En 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 representacin.Sin embargo a veces preferiremos que la salida sea un nmero u otro tipo de dato. La salida de una funcin se llama valor de retorno.Se espera que todas las funciones regresen un valor, tal como un entero o un decimal. Si la funcin no regresa un valor, se utiliza la palabra especial void. El tipo de dato regresado por una funcin se encuentra a la izquierda del nombre de funcin.El comando clave return es usado para salir de una funcin y regresar al lugar desde el cual fue llamado. Cuando una funcin regresa un valor, return es usado para especificar qu valor debe ser regresado.La instruccin que incluye return es tpicamente la ltima de una funcin, ya que la misma finaliza inmediatamente despus 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 funcin regresa un valor, dicha funcin casi siempre aparece a la derecha de un operador de asignacin o como parte de una expresin mayor.Una funcin que no regresa un valor es frecuentemente usada como una instruccin completa.

**

Valor de retorno 2/2Las funciones no estn limitadas a regresar nmeros: pueden regresar boolean, String, PImage o cualquier otro tipo de dato.Para escribir una funcin de usuario que regrese un valor, reemplace void con el tipo de dato que necesite regresar, e incluya dentro de la funcin la palabra clave return seguido de la variable que contenga el valor que desee regresar para habilitar la salida del mismo.A continuacin 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/2Se llama sobrecarga de funciones al procedimiento de crear diferentes versiones de una misma funcin.Las distintas versiones pueden compartir el mismo nombre de funcin siempre y cuando tengan diferentes nmeros de parmetros o tipos de datos de los mismos. Es decir, un programa puede tener dos funciones con el mismo nmero de parmetros, pero slo si el tipo de dato de uno de sus parmetros es diferente.Processing identifica qu versin de funcin debe ejecutar al comparar el nmero y el tipo de dato de sus parmetros.Veamos el prximo ejemplo:

**

Sobrecarga de funciones (Function overloading) 2/2void 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 parmetrovoid 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 parmetrovoid dibujoX(float ancho) { stroke(0); strokeWeight(ancho); line(0, 5, 60, 65); line(60, 5, 0, 65);}// dibujoX con la posicin , el valor de gris, tamao y el ancho de// contorno determinados por sus correspondientes parmetrosvoid 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 Captulo Structure 3: Functions (pag. 181).

**

Ejercicio 13EJ13: Crear una forma animada autnoma que comunique la idea de "orden".Utilizar funciones de usuario.Comentar todas las instrucciones.

Ejercicio 14EJ14: Crear una forma animada autnoma que comunique la idea de "caos".Utilizar funciones de usuario.Comentar todas las instrucciones.

Ejercicio 15EJ15: Crear una forma interactiva que comunique la idea de "orden y caos".Utilizar funciones de usuario. Comentar todas las instrucciones.

Parte 13Otras funciones matemticas

**

Funcin sq() CuadradoPara calcular el cuadrado de un nmero usamos la funcin sq(). La misma nos regresa el resultado, el cual ser siempre un nmero positivo aunque usemos un valor negativo.

sq(valor)

float x = sq(1); // Asigna 1.0 a x: equivalente a 1 * 1float y = sq(-5); // Asigna 25.0 a y: equivalente a -5 * -5float z = sq(9); // Asigna 81.0 a z: equivalente a 9 * 9

**

Funcin sqrt() Raz cuadradaLa funcin sqrt() es usada para calcular la raz cuadrada de un nmero. La misma regresa el resultado.

sqrt(valor)

Recordemos que tambin lo podemos expresar de la siguiente manera: (a) == (a1/2 )

float r = sqrt(6561); // Asigna 81.0 a rfloat s = sqrt(625); // Asigna 25.0 a sfloat t = sqrt(1); // Asigna 1.0 a t

**

Funcin pow() PotenciacinLa funcin pow() calcula la potencia en funcin de dos trminos: base y exponente. La misma regresa el resultado.

pow(base, exponente)

Recordemos que, cuando el exponente es una fraccin irreducible, tambin lo podemos expresar de la siguiente manera:

(man) == (an/m )

float d = pow(1, 3); // Asigna 1.0 a d: equivalente a 1*1*1float e = pow(3, 4); // Asigna 81.0 a e: equivalente a 3*3*3*3float f = pow(3, -2); // Asigna 0.11 a f: equivalente a 1 / (3*3)float g = pow(-3, 3); // Asigna -27.0 a g: equivalente a -3*-3*-3

**

Funcin norm() Normalizacin 1/2Muchas veces se vuelve conveniente convertir un rango de nmeros dados al rango 0.0 a 1.0. A este procedimiento se lo llama normalizacin.Cuando multiplicamos nmeros entre 0.0 y 1.0, el resultado nunca ser menor a 0.0 ni mayor a 1.0. Esto permite no salir de un rango determinado.Desde luego que todas las operaciones de normalizacin deben ser realizadas con el tipo de dato float.Para normalizar un nmero debemos dividirlo por el valor mximo que este represente. Por ejemplo: para normalizar una serie de valores entre 0.0 y 255.0, divida cada uno por 255.0:

Valor inicialClculoValor normalizado0.00.0 / 255.00.0102.0102.0 / 255.00.4255.0255.0 / 255.01.0

**

Funcin norm() Normalizacin 2/2Para simplificar esta tarea podemos utilizar la funcin norm():

norm(valor_a_convertir, valor_mnimo, valor_mximo)

Si el valor a convertir se encuentra fuera del rango, el resultado podr ser menor a 0.0 o mayor a 1.0 de acuerdo al caso.

float x = norm(0.0, 0.0, 255.0); // Asigna 0.0 a xfloat y = norm(102.0, 0.0, 255.0); // Asigna 0.4 a yfloat z = norm(255.0, 0.0, 255.0); // Asigna 1.0 a z

**

Funcin lerp() Interpolacin lineal 1/2Luego de la normalizacin, podemos convertir el nmero a otro rango mediante operaciones aritmticas.Por ejemplo, para convertir desde un rango entre 0.0 y 1.0 al rango entre 0.0 y 500.0, simplemente los multiplicamos por 500.0. Para convertir nmeros entre 0.0 y 1.0 al rango que se extiende entre 200.0 y 500.0, multiplicamos por 300 y luego sumamos 200. Veamos a continuacin algunos ejemplos de conversin:

Rango inicial de xRango de destino de xConversin0.0 a 1.00.0 a 255.0x * 255.00.0 a 1.0-1.0 a 1.0(x * 2.0) - 1.00.0 a 1.0-20.0 a 60.0(x * 80.0) - 20.0

**

Funcin lerp() Interpolacin lineal 2/2Nuevamente, para simplificar esta tarea podemos utilizar la funcin lerp(). La misma presenta tres parmetros

lerp(valor_mnimo_del_rango_a_interpolar, valor_mximo_del_rango_a_interpolar, valor_a_interpolar)

El tercer parmetro (valor a interpolar) debe ser siempre un valor entre 0.0 y 1.0. Veamos algunos ejemplos:

float r = lerp(-20.0, 60.0, 0.0); // Asigna -20.0 a rfloat s = lerp(-20.0, 60.0, 0.5); // Asigna 20.0 a sfloat t = lerp(-20.0, 60.0, 1.0); // Asigna 60.0 a t

**

Funcin map() Mapeo 1/2Existe otra funcin que nos permite aplicar las operaciones de normalizacin e interpolacin lineal en una: hablamos de la funcin map().

Con dicha funcin podemos convertir directamente un valor correspondiente a un rango de nmeros a otro correspondiente a otro rango de nmeros.

Posee cinco parmetros:

map(valor, mnimo1, mximo1, mnimo2, mximo2)

Donde valor corresponde al nmero de origen a mapear, mnimo1 y mximo1 a los nmeros del rango origen, y mnimo2 y mximo2 a los nmeros del rango de destino.

**

Funcin map() Mapeo 2/2El prximo ejemplo muestra el uso de map() para convertir valores del rango de origen 0 a 255 al rango de destino -1 a 1. Este proceso equivale a, primero, normalizar el valor, y luego a multiplicar y sumar para desplazar el rango de 0 a 1 al rango -1 a 1:

float x = map(20.0, 0.0, 255.0, -1.0, 1.0); // Asigna -0.84 a xfloat y = map(0.0, 0.0, 255.0, -1.0, 1.0); // Asigna -1.0 a yfloat z = map(255.0, 0.0, 255.0, -1.0, 1.0); // Asigna 1.0 a z

**

Funcin constrain() Limitacin de rangos 1/2La funcin constrain() permite limitar un nmero a un rango determinado. Trabaja con enteros o decimales.Posee tres parmetros:

constrain(valor, mnimo, mximo)

Donde valor corresponde al nmero a limitar, mnimo al valor mnimo posible y mximo al valor mximo posible. Esta funcin regresa el nmero mnimo si el parmetro valor es menor o equivalente al antedicho, regresa el nmero mximo si el mismo es mayor o equivalente, y regresa valor si se encuentra en el rango previsto.

int x = constrain(35, 15, 90); // Asigna 35 a xint y = constrain(10, 15, 90); // Asigna 15 a yint z = constrain(91, 15, 90); // Asigna 90 a z

**

Funcin constrain() Limitacin de rangos 2/2// Limitar la posicin de una elipse a una regin determinada

void setup() { size(100, 100); smooth(); noStroke();}void draw() { background(0); // Limita mx entre 35 y 65 float mx = constrain(mouseX, 35, 65); // Limita my entre 40 y 60 float my = constrain(mouseY, 40, 60); fill(102); rect(20, 25, 60, 50); fill(255); ellipse(mx, my, 30, 30);}

**

Funcin dist() Distancia entre coordenadas 1/3La funcin dist() calcula la distancia entre dos coordenadas. Trabaja con enteros o decimales, pero regresa decimales.Posee cuatro parmetros:

dist(x1, y1, x2, y2)

El primer par de parmetros corresponde a la primera coordenada y el segundo par a la segunda.

float r = dist(0, 0, 50, 0); // Asigna 50.0 a rfloat s = dist(50, 0, 50, 90); // Asigna 90.0 a sfloat t = dist(30, 20, 80, 90); // Asigna 86.023254 a t

**

Funcin dist() Distancia entre coordenadas 2/3// La distancia entre el centro de la ventana de representacin// y el puntero determina el dametro del crculo

void setup() { size(100, 100); smooth();}void draw() { background(0); float d = dist(width/2, height/2, mouseX, mouseY); ellipse(width/2, height/2, d*2, d*2);}

**

Funcin dist() Distancia entre coordenadas 3/3// Dibujo de una grilla de crculos y clculo de la// distancia de cada uno de ellos para determinar el tamao

float distanciaMax;void setup() { size(100, 100); noStroke(); smooth(); fill(0); distanciaMax = dist(0, 0, width, height);}void draw() { background(204); for (int i = 0; i

Tcnica Easing Aligeramiento 1/7La tcnica de animacin llamada Easing, es en realidad una tcnica de interpolacin entre dos puntos. Al mover en cada cuadro una fraccin de la distancia total de una figura, el movimiento de esta parece desacelerarse (o acelerarse) al acercarse a la ubicacin de destino.El siguiente diagrama muestra qu ocurre cuando un punto siempre se mueve la mitad del recorrido entre su posicin actual y la posicin de destino:

A medida que la figura se acerca a la posicin de destino, la distancia recorrida disminuye en cada fotograma, por lo tanto el movimiento de la misma parece ralentizarse.

**

Tcnica Easing Aligeramiento 2/7En el siguiente ejemplo la variable x corresponde a la posicin horizontal actual del crculo y la varible destinoX corresponde a la posicin de destino.La variable easing dispone la fraccin de la distancia entre la posicin actual del crculo y la posicin del ratn que el crculo se mueve en cada cuadro. El valor de esta variable cambia la rapidez con que el crculo llega al destino.El valor de easing debe estar siempre entre 0.0 y 1.0, y los nmeros cercanos a 0.0 causan que el movimiento se ralentice ms.Un valor de easing de 0.5 har que el crculo se mueva la mitad de la distancia en cada cuadro, mientras que un valor de 0.01 har que el crculo se mueva una centsima de la distancia en cada cuadro.El crculo superior es dibujado de acuerdo a la posicin destinoX, mientras que el crculo inferior es dibujado de acuerdo a la posicin interpolada.Ahora s veamos el ejemplo:

**

Tcnica Easing Aligeramiento 3/7float x = 0.0; // Distancia actual en xfloat easing = 0.05; // Nmeros 0.0 a 1.0

void setup() { size(100, 100); smooth();}

void draw() { background(0); float destinoX = mouseX; x += (destinoX - x) * easing; ellipse(mouseX, 30, 40, 40); ellipse(x, 70, 40, 40);}

**

Tcnica Easing Aligeramiento 4/7En el siguiente ejemplo utilizamos dos variables para controlar la tcnica easing en las dos dimensiones. Observe que estructuralmente es igual al anterior. El ejemplo se encuentra en la siguiente pgina:

**

Tcnica Easing Aligeramiento 5/7float x = 0; // Distancia actual en xfloat y = 0; // Distancia actual en yfloat easing = 0.05; // Nmeros 0.0 a 1.0

void setup() { size(100, 100); smooth(); noStroke();}

void draw() { background(0); float destinoX = mouseX; float destinoY = mouseY; x += (destinoX - x) * easing; y += (destinoY - y) * easing; fill(255); ellipse(x, y, 40, 40); //Crculo blanco grande interpolado fill(153); ellipse(mouseX, mouseY, 20, 20); //Crculo gris pequeo destino}

**

Tcnica Easing Aligeramiento 6/7Los dos ejemplo previos continan realizando el clculo para la posicin del crculo incluso luego de haber alcanzado su destino. Desde el punto de vista informtico resulta ineficiente, y si hubieran cientos de crculos todos aligerando las posiciones, esto ralentizara el programa en general.Para detener los clculos cuando estos no son necesarios, evale que la posicin de destino y la posicin actual sean equivalentes y detenga el clculo si esta condicin resulta verdadera.El siguiente ejemplo presenta el uso de la funcin abs() la cual devuelve el valor absoluto de un nmero.Esta es necesaria ya que los valores resultantes de la tcnica Easing pueden ser tanto negativos como positivos dependiendo de si la posicin se encuentra a la izquierda o a la derecha del destino.

**

Tcnica Easing Aligeramiento 7/7float x = 0.0; // Distancia actual en xfloat easing = 0.05; // Nmeros 0.0 a 1.0

void setup() { size(100, 100); smooth();}

void draw() { background(0); float destinoX = mouseX; // Distancia desde l posicin hasta el destino float dx = destinoX - x; // Si la distancia entre la posicin actual y el destino // es mayor a 1.0, actualizo la posicin if (abs(dx) > 1.0) { x += dx * easing; println(dx); } ellipse(mouseX, 30, 40, 40); ellipse(x, 70, 40, 40);}

**

Clculo de velocidad 1/3A continuacin calcularemos la velocidad del ratn mediante la comparacin de la posicin actual con la posicin anterior.Esto lo haremos usando la funcin dist() con los valores de parmetros de las variables mouseX, mouseY, pmouseX y pmouseY.Entonces, el siguiente ejemplo calcula la velocidad del ratn y convierte este valor en el dimetro de una elipse:

void setup() { size(100, 100); noStroke(); smooth();}void draw() { background(0); float velocidad = dist(mouseX, mouseY, pmouseX, pmouseY); float diametro = velocidad * 3.0; ellipse(50, 50, diametro, diametro);}

**

Clculo de velocidad 2/3El ejemplo previo muestra la velocidad instantnea del ratn. Los nmeros producidos son extremos saltan constantemente entre cero y otros valores ms grandes de un cuadro al otro.

Se puede utilizar la tcnica Easing para incrementar o mermar la velocidad de forma suavizada.

El siguiente ejemplo muestra cmo aplicar la tcnica Easing en dicho contexto. La barra superior representa la velocidad instantnea mientras que la inferior representa la velocidad aligerada:

**

Clculo de velocidad 3/3float velocidad = 0.0;float easing = 0.05; // Nmeros 0.0 al 1.0

void setup() { size(400, 400); noStroke(); smooth();}void draw() { background(0); float destino = dist(mouseX, mouseY, pmouseX, pmouseY); velocidad += (destino - velocidad) * easing; rect(0, 33, destino, 17); rect(0, 50, velocidad, 17);}

**

Orientacin 1/4La funcin atan2() es usada para calcular el ngulo desde cualquier punto del rea de representacin a la coordenada de origen (0, 0). Tiene dos parmetros:

atan2(y, x)

Donde los parmetro x e y corresponden a la coordenada de inters. Note que la posicin de ambos parmetros se presentan en reverso comparado a cmo las usa otras funciones tales como point().Los valores de ngulo son regresados en radianes dentro del rango a .Recordemos que un circulo mide 2* radianes, lo cual equivale en grados a 360. Por lo tanto, un ngulo de 90 corresponde a /2 (1.5707964). Para convertir una medida de radianes a grados utilizamos la funcin degrees().Veamos un ejemplo donde aplicamos estas dos funciones:

**

Orientacin 2/4// El ngulo se incrementa a medida de que el ratn// se mueve desde la esquina superior-derecha de la// pantalla a la esquina inferior-izquierdavoid setup() { size(100, 100); frameRate(15); fill(0);}void draw() { float angulo = atan2(mouseY, mouseX); float grados = degrees(angulo); println(grados + ""); background(204); ellipse(mouseX, mouseY, 8, 8); rotate(angulo); line(0, 0, 150, 0);}

**

Orientacin 3/4Por ltimo, para calcular la orientacin relativa a otro punto de referencia que no sea la coordenada de origen (0, 0), utilizamos la funcin atan2() cuyos parmetros son substrados por los valores correspondientes al otro punto de referencia que se desea fijar. Veamos lo antedicho en el siguiente ejemplo:

**

Orientacin 4/4// Rota el tringulo apuntando siempre// a la posicin del punterofloat x = 50;float y = 50;void setup() { size(100, 100); noStroke(); smooth();}void draw() { background(0); float angulo = atan2(mouseY - y, mouseX - x); pushMatrix(); translate(x, y); rotate(angulo); triangle(-20, -8, 20, 0, -20, 8); popMatrix();}

**

Lectura recomendada Captulo Shape 2: Vertices (pag. 69). Captulo Math 2: Curves (pag. 79). Captulo Math 3: Trigonometry (pag. 117). Captulo Transform 1: Translate, Matrices (pag. 133). Captulo Transform 2: Rotate, Scale (pag. 137). Captulo Shape 3: Parameters, Recursion (pag. 197). Captulo Input 4: Mouse II (pag. 237).

**


**

Reduccin de rangoDisponemos de cinco funciones bsicas:ceil()floor()round()min()max().

**

ceil() - techoCalcula el valor entero ms cercano que el valor ms grande o igual del de su parmetro.

int w = ceil(2.0); // Asigna 2 a wint x = ceil(2.1); // Asigna 3 a xint y = ceil(2.5); // Asigna 3 a yint z = ceil(2.9); // Asigna 3 a z

**

floor() - pisoCalcula el valor entero ms cercano que el valor ms pequeo o igual del de su parmetro.

int w = floor(2.0); // Asigna 2 a wint x = floor(2.1); // Asigna 2 a xint y = floor(2.5); // Asigna 2 a yint z = floor(2.9); // Asigna 2 a z

**

round() - redondeoCalcula el valor entero ms cercano al valor de la media de su parmetro.

int w = round(2.0);// Asigna 2 a wint x = round(2.1);// Asigna 2 a xint y = round(2.5); // Asigna 3 a yint z = round(2.9); // Asigna 3 a z

**

min() - mnimoint u = min(5, 9); // Asigna 5 a uint v = min(-4, -12, -9); // Asigna -12 a vfloat w = min(12.3, 230.24);// Asigna 12.3 a w

**

max() - mximoint x = max(5, 9); // Asigna 9 a xint y = max(-4, -12, -9); // Asigna -4 a yfloat z = max(12.3, 230.24); // Asigna 230.24 a z

**

Parte 14Movimientos simples

**

MovimientoEn esta seccin revisaremos tres clases de movimiento:

Movimiento implcitoMovimiento explcitoMovimiento mediante transformacin

**

Movimiento implcito en una direccin 1/2Para poner en movimiento una figura, necesitamos al menos usar una variable para cambiar un atributo.

El siguiente ejemplo presenta un movimiento implcito, es decir un movimiento rectilneo uniforme que no contempla posicin de origen ni de destino:

**

Movimiento implcito en una direccin 2/2float y = 50.0;float velocidad = 1.0;float radio = 15.0;void setup() { size(100, 100); smooth(); noStroke(); ellipseMode(RADIUS);}void draw() { background(0); ellipse(33, y, radio, radio); y = y + velocidad; if (y > height+radio) { y = -radio; }}

**

Efecto de desenfoque 1/2Puede crear un efecto de desenfoque utilizando un rectngulo semitransparente dentro del bloque draw().

La cantidad de desenfoque es controlado por el valor del parmetro de transparencia usado para pintar el relleno del rectngulo (la funcin fill()).

Los nmeros cercanos a 255 refrescarn rpidamente la pantalla, mientras que los cercanos a 0 crearn un fundido lento.

Veamos su aplicacin en el siguiente ejemplo:

**

Efecto de desenfoque 2/2float y = 50.0;float velocidad = 1.0;float radio = 15.0;int direccion = 1;void setup() { size(100, 100); smooth(); noStroke(); ellipseMode(RADIUS);}void draw() { fill(0, 12); // Valores funcionales entre 10 y 100 rect(0, 0, width, height); fill(255); ellipse(33, y, radio, radio); y += velocidad * direccion; if ((y > height-radio) || (y < radio)) { direccion = -direccion; }}

**

Movimiento implcito en dos direcciones 1/2Tambin podemos utilizar un segundo conjunto de variables para aprovechar el movimiento en el eje X:

float x = 50.0; // coordenada en Xfloat y = 50.0; // coordenada en Yfloat radio = 15.0; // Radio del crculofloat velocidadX = 1.0; // Velocidad de mov. en eje Xfloat velocidadY = 0.4; // Velocidad de mov. en eje Yint direccionX = 1; // Direccin de mov. en eje Xint direccionY = -1; // Direccin de mov. en eje Xvoid setup() { size(100, 100); smooth(); noStroke(); ellipseMode(RADIUS);}// ***contina***

**

Movimiento implcito en dos direcciones 2/2void draw() { fill(0, 12); rect(0, 0, width, height); fill(255); ellipse(x, y, radio, radio); x += velocidadX * direccionX; if ((x > width-radio) || (x < radio)) { direccionX = -direccionX; // Cambia direccion } y += velocidadY * direccionY; if ((y > height-radio) || (y < radio)) { direccionY = -direccionY; // Cambia direccion }}

**

Movimiento explcito en dos direcciones 1/2Si deseamos mover una figura desde y hasta una posicin especfica, debemos incorporar algunas variables de control ms:

float origenX = 20.0; // Coordenada de origen en Xfloat origenY = 10.0; // Coordenada de origen en Yfloat destinoX = 70.0; // Coordenada de destino en Xfloat destinoY = 80.0; // Coordenada de destino en Yfloat distX; // Distancia a mover en eje-Xfloat distY; // Distancia a mover en eje-Yfloat x = 0.0; // Coordenada actual en Xfloat y = 0.0; // Coordenada actual en Yfloat paso = 0.02; // Tamao de cada paso (0.0 a 0.4)float pct = 0.0; // Porcentaje recorrido (0.0 a 1.0)

// ***contina***

**

Movimiento explcito en dos direcciones 2/2void setup() { size(100, 100); noStroke(); smooth(); distX = destinoX - origenX; distY = destinoY - origenY;}void draw() { fill(0, 12); rect(0, 0, width, height); pct += paso; if (pct < 1.0) { x = origenX + (pct * distX); y = origenY + (pct * distY); } fill(

introduccion a processing 2010

Documents