04/11/2014

1

TEMA VII: CICLOS

Otoño 2014

Objetivo del capítulo

� Conocer , comprender y aplicar el concepto de

iteración.

04/11/2014

2

Iteración

� ¿Qué es iteración?

� Proceso para repetir una serie de reglas o

pasos una y otra vez.

� Concepto fundamental en computación.

Iteración

� Pensemos en un conjunto de líneas

void setup(){size(200,200);background(255);stroke(0);

}

void draw(){line(50, 60, 50, 80);line(60, 60, 60, 80);line(70, 60, 70, 80);line(80, 60, 80, 80);line(90, 60, 90, 80);line(100, 60, 100, 80);line(110, 60, 110, 80);line(120, 60, 120, 80);line(130, 60, 130, 80);

} Dibuja líneas de x = 50 a x =130 con espacio de 10 entre una y otra

04/11/2014

3

Iteración

� Queremos algo así:

� Dibuja una línea 100 veces

� Sólo una línea de código

� Uso de CICLOS (loop)

Iteración

� ¿Qué queremos repetir y cuántas veces ?

� While

� for

04/11/2014

4

Iteración - while

� Con el uso de condicionales (if/then) el while

utiliza condiciones de tipo booleano

(true/false)

WHILE ( PRUEBA BOOLEANA)

Es verdadero Es falsoA. hacer estoB. hacer esto

REPEAT

Iteración

size(200,200);background(255);stroke(0);

int x = 50;

while (x <= 130){

line(x, 60, x, 80);x = x + 10;

}

size(200,200);background(255);stroke(0);line(50, 60, 50, 80);line(60, 60, 60, 80);line(70, 60, 70, 80);line(80, 60, 80, 80);line(90, 60, 90, 80);line(100, 60, 100, 80);line(110, 60, 110, 80);line(120, 60, 120, 80);line(130, 60, 130, 80);

04/11/2014

5

Iteración

� Si queremos realizar la siguiente imagen:

Iteración - ejercicio

� Rellena los espacios en blanco del siguiente

código para recrear la siguiente figura:

int y = 0;void setup(){

size(200, 200);background(255);}void draw(){while(___________________________) {stroke(0);line(________, _________, _________, _________,);y = __________;}}

04/11/2014

6

Iteración - solución

size(200, 200);background(255);

int y = 0;while(y<height) {stroke(0);line(0, y, width, y);y = y+10;}

Iteración - ejerciciofloat w= 200;float r=100;float g= 100;float b= 100;

size(200,200);background(255);

ellipseMode(CENTER);while(__________){noStroke();fill(___, _____, _____);ellipse(______, ______, _______, _______);w = _______________;r =_________;g= _________;b =_________;

}

04/11/2014

7

Iteración - soluciónfloat w= 200;float r=100;float g= 100;float b= 100;

size(200,200);background(255);

smooth();ellipseMode(CENTER);while(w > 0){noStroke();fill(r,g,b);ellipse(100, 100, w, w);w = w -10;r =random(255);g= random(255);b =random(255);

}

Condiciones de salida

� Existen ciclos infinitos

� Debemos asegurarnos que haya un fin

WHILE ( siempre verdadero)

Hacer esto por siempre

04/11/2014

8

Condiciones de salida

� Cuidado con:

int x=0;while (x < 10) {println(x);x = x – 1;

}Siempre va a ser menor

que 10 … CUIDADO!!

For

� inicialización, verificación booleana,

expresión de iteración

for (int i=0; i < 10; i++){

}

1 empezar con esto

2 verificar estosi es falso EXIT

3 ejecutar código

4 hacer esto

5 regresar a #2

04/11/2014

9

Operadores incremento/decremento

� Lo más fácil para sumar o restar de una

variable es:

� x++; es equivalente a: x = x +1;

� x--; es equivalente a: x = x -1;

x+=2; equivalente a x = x +2;

x*=3; equivalente a x = x*3;

For

for (int i=0; i < 10; i++)

{

…

}

int i=0;

while( i < 10)

{

i++;

…

}

04/11/2014

10

Iteración - ejercicio

� Ahora usando for:

size(200, 200);background(255);

for(int y =_______;__________;__________) {stroke(0);line(________, _________, _________, _________,);}

Iteración - solución

� Ahora usando for:

size(200, 200);background(255);

for(int y =10; y<height; y = y+10) {stroke(0);line(0,y,width,y);}

04/11/2014

11

Iteración - ejerciciofloat r=100;float g= 100;float b= 100;void setup(){size(200,200);background(255);}

void draw(){

for(_______; __________; ___________;){noStroke();fill(r,g,b,100);ellipse(______, ______, _______, _______);r = random(255);g =random(255);b =random(255);

}}

Iteración - ejerciciofloat r=100;float g= 100;float b= 100;void setup(){size(200,200);background(255);}

void draw(){

for(float w=200;w>0;w-=5){noStroke();fill(r,g,b,100);ellipse(100, 100, w,w);r =random(255);g =random(255);b =random(255);

}}

04/11/2014

12

Iteración – ejercicios y

variables

Iteración – ejemplos de

ciclos

void setup(){size(300,300);background(255);

}

void draw(){stroke(0);noFill();for (int i=0; i <10; i++){rect(i*20, height/2, 5, 5);

}}

04/11/2014

13

Iteración – ejemplos de

ciclos

void setup(){size(300,300);background(255);

}

void draw(){stroke(0);noFill();int i=0;while(i<10){ellipse(width/2, height/2, i*10, i *20);i++;

}}

Iteración – ejemplos de

ciclos

void setup(){size(300,300);background(255);

}

void draw(){stroke(0);noFill();

for(float i=1.0; i <width; i*=1.1){rect(0, i, i, i*2);

}}

04/11/2014

14

Iteración – ejemplos de

ciclos

void setup(){size(300,300);background(255);

}

void draw(){stroke(0);noFill();int x=0;for(int c=255; c >0; c-=15){fill(c);rect(x, height/2, 10, 10);x = x +10;

}}

Un ciclo dentro del ciclo

principal

� Hay que tomar en cuenta que en realidad la

función draw() lo que hace es repetir

indefinidamente lo que esta dentro de ella,

así que al insertar un ciclo dentro estamos

generando un ciclo anidado

04/11/2014

15

Un ciclo dentro del ciclo

principal - ejemplo

int y = 0;

void setup(){size(200,200);background(255);frameRate(5);

}

void draw(){stroke(0);line(0, y, width, y);y +=10;}

Variables locales vs. globales

� Hasta el momento hemos siempre declarado

las variables arriba del setup()

� Pero las variables se pueden declarar en

cualquier lugar

04/11/2014

16

Variables locales vs. globales

� Las variables globales van fuera tanto del

setup() como del draw() y pueden usarse en

TODO el programa

� Las variables locales se declaran dentro de un

bloque de código : setup(), draw(),

mousePressed(), keyPressed(), if, while, for y

SOLO pueden ser utilizadas dentro del

bloque

Variables locales vs. globales

void setup() {

size(200,200);

}

void draw() {

background(0);

int x = 0;

while (x < width) {

stroke(255);

line(x,0,x,height);

x += 5;

}

}

void mousePressed() {

println( " The mouse was pressed! " );

}

X esta ahora disponible ya que ha sido declarado dentro del draw() y estará disponible una

vez que ha sido declarada

X no esta disponible, ya que fue declarada para usarse

únicamente en el draw()

X no esta disponible! Es una variable local al bloque de

código draw()

04/11/2014

17

Variables locales vs. globales

� ¿Para qué usamos las variables locales?, ¿no

es más fácil declararlas al inicio todas las

variables?

� En la práctica es más fácil eficiente, práctico y

menos confuso declarar las variables cuando

las utilizaremos.

Variables locales vs. globales

� Dentro de un ciclo:

for ( int i=0; i < 100; i+=10) {

stroke(255);

fill (i);

rect(i,0,10, height);

}

No se debe declarar (aunque es posible) declarar con el

mismo nombre una variable local y una variable

global

i esta disponible únicamente dentro del ciclo for

04/11/2014

18

Variables locales vs. globales

void setup(){

size(200,200);

}

void draw(){

for ( int i=0; i < 200; i+=10) {

stroke(255);

fill (i);

rect(i,0,10, height);

}

}

Variables locales vs. globales

� ¿Cuál es la diferencia con estos dos programas?, ¿Qué pasa

después de 100 repeticiones?

int count =0;

void setup(){

size (200, 200);

}

void draw() {

count = count +1;

background (count);

}

void setup(){

size (200, 200);

}

void draw() {

int count =0;

count = count +1;

background (count);

}

04/11/2014

19

Un ciclo dentro del ciclo

principal - ejercicio

� Crea el siguiente recuadro utilizando un par de

ciclos. ¿Puedes hacerlo con for y con el while?

Un ciclo dentro del ciclo

principal - ejercicioint x;int y=0;float r,g,b;int diam;

void setup(){size(300,300);frameRate(10);background(0);diam=width;

}

void draw(){

for (x=0; x<diam; x+=diam/20){r=random(255);g=random(255);b=random(255);fill(r,g,b);rect(x,y,diam/20, diam/20);}

if (x>=diam){x=0;y=y+diam/20;

}}

04/11/2014

20

Un ciclo dentro del ciclo

principal - ejercicioint x;int y=0;float r,g,b;size(300,300);frameRate(10);background(0);

for (y=0; y < height; y=y+20){

for (x=0; x<width; x=x+20){r=random(255);g=random(255);b=random(255);fill(r,g,b);rect(x,y,20,20);

}

}

Fin del capítulo