Bucle for, variables, texto, rotate, color en formato HSB, ejemplos integradores

Motivación

Bucle for

El bucle for se utiliza para repetir una o más instrucciones un determinado número de veces. Consiste de tres partes: inicialización, condición y actualización.

for (inicialización; condición; actualización) {

// sentencias a ejecutar en cada iteración

}

Lerp color

Bucle for

size(600, 600);background(0);fill(255); // blancorect( 0, 50, 100, 100);rect(100, 50, 100, 100);rect(200, 50, 100, 100);rect(300, 50, 100, 100);rect(400, 50, 100, 100);rect(500, 50, 100, 100);

Ejemplo simple SIN for

size(600, 600);background(0);fill(255); // blancorect(0*100, 50, 100, 100);rect(1*100, 50, 100, 100);rect(2*100, 50, 100, 100);rect(3*100, 50, 100, 100);rect(4*100, 50, 100, 100);rect(5*100, 50, 100, 100);

Ejemplo simple SIN for

size(600, 600);background(0);fill(255); // blanco

// dibujo 6 rectángulosfor (int i = 0; i < 6 ; i++){ rect(i*100, 50, 100, 100); }

Ejemplo simple - línea con rectángulos

for (int i=0 ; i<6 ; i++){ rect(i*100, 50, 100, 100); }

inicialización condición actualización

for (int i=0 ; i<6 ; i++){ rect(i*100,50,100,100); }rect(0*100, 50, 100, 100); rect(1*100, 50, 100, 100); rect(2*100, 50, 100, 100);rect(3*100, 50, 100, 100); rect(4*100, 50, 100, 100); rect(5*100, 50, 100, 100);

size(600, 600);background(0);fill(255,255,0); // amarillo

for(int i=0;i<6;i++){ rect(i*100+20,250,10,100); rect(i*100+70,250,10,100); }

¿Qué dibuja este código?

y = 100

y = 200

y = 300

y = 400

y = 500

Puede haber varias instrucciones en el for

y = 100

y = 200

y = 300

y = 400

y = 500

¿Cómo logro esto?

y = 100

y = 200

y = 300

y = 400

y = 500

size(600, 600);background(0);fill(255); // blancofor (int i=0;i<6;i++){ if (i%2==0){ ellipse(i*100+50,200,100,100); }else{ ellipse(i*100+50,200,50,50); }}

for con if

i no es un número par

¿Es i un número par?

Ya vimos todo que se precisa para armar este dibujo

size(600, 600);background(0);

for(int i=0;i<6;i++){fill(255); // blanco

rect(i*100,50,100,100); // primera fila de rectángulos blancos fill(255,255,0); // amarillo rect(i*100+20,250,10,100); // rectangulos finos rect(i*100+70,250,10,100); // rectangulos finos fill(255,0,255); // magenta rect(i*100,450,100,100); // última fila de rectangulos if (i%2==0){ fill(255); // blanco ellipse(i*100+50,200,100,100); // círculos grandes blancos fill(255,255,0); // amarillo ellipse(i*100+50,400,50,50); // círculos chicos amarillos }else{ fill(255); // blanco ellipse(i*100+50,200,50,50); // círculos chicos blancos fill(255,255,0); // amarillo ellipse(i*100+50,400,100,100); // círculos grandes amarillos }}

size(600, 600); stroke(112, 138, 144);strokeWeight(4); background(175, 191, 183);

for (int i=0; i<7; i++) { fill(255); arc( i*100, 150, 80, 85, 0, PI); fill(40); ellipse(i*100-20, 160, 2, 6); ellipse(i*100-10, 160, 2, 6); ellipse(i*100, 160, 2, 6); ellipse(i*100+10, 160, 2, 6); ellipse(i*100+20, 160, 2, 6); }

Sandías con for

Dibujo semillas

¿No les parece que hay muchas repeticiones en este código?

ellipse(i*100-20, 160, 2, 6); ellipse(i*100-10, 160, 2, 6); ellipse(i*100, 160, 2, 6); ellipse(i*100+10, 160, 2, 6); ellipse(i*100+20, 160, 2, 6);

¿Cómo podemos transformar las repeticiones en un for?

ellipse(i*100-20, 160, 2, 6); ellipse(i*100-10, 160, 2, 6); ellipse(i*100, 160, 2, 6); ellipse(i*100+10, 160, 2, 6); ellipse(i*100+20, 160, 2, 6);

for(int j=? ; j?? ; j?){ ellipse(i*100 + ?,160,2,6); }

size(600, 600); stroke(112, 138, 144);strokeWeight(4);

background(175, 191, 183); for (int i=0; i<7; i++) { fill(255); arc( i*100, 150, 80, 85, 0, PI); fill(40); for (int j = -2; j<=2;j++){ ellipse(i*100+j*10, 160, 2, 6); }}

Sandías con doble for

Ejemplos

Reproducir los siguientes patrones:

Ejercicio

Texto

text(“el texto a escribir”,100,10); // escribo el texto en x=100, y=10

textSize(12) // cambiar el tamaño de la fuentetextAlign(CENTER) // alignear, las opciones son: LEFT, CENTER, RIGHT

PFont f = createFont("Serif",160); // definir una fuente (tiene que estar disponible en la computadora)

textFont(f); // usar una fuente predefinida

Funciones predefinidas para escribir texto

¿Qué fuentes puedo usar para este comando?

PFont f = createFont("Serif",160);

Puedo imprimir en la consola de Processing las fuentes disponibles:

println( PFont.list());

PFont

size(600,200);textSize(32);line(300,0,300,200); // dibujo línea verticalline(0,30,600,30); // líne horizontal y = 30textAlign(CENTER);text("Centrado",300,30);

line(0,100,600,100); // líne horizontal y = 100textAlign(LEFT);text("Izquierda",300,100);

line(0,140,600,140); // líne horizontal y = 140textAlign(RIGHT);text("Derecha",300,140);

textAlign

En los tres casos escribimos en x = 300

x = 300

rotate y scale

void setup() { size(400, 400); textAlign(CENTER); // importante! textSize(40); background(0); noStroke();}void draw() { fill(255,0,255,4); // magenta con poca opacidad rect(0,0,400,400); translate(200,200); // muevo al centro de la ventana de dibujo el origen (0,0) del sistema de coordenadas rotate(radians(frameCount)); // roto el sistema según el valor de frameCount fill(255,255,0); // amarillo text("un texto que gira",0,0); // escribo en 0,0 del sistema de coordenadas (el centro del texto estará ahí) }

Un texto que gira

PFont f = createFont("Serif",160);int repeatNr =6; // defino cuantas veces repito la letraint rotationDegrees = 360/repeatNr; // calculo los grados de separación entre letrastextFont(f);textAlign(CENTER); // aligneo el texto “centralmente”size(400,400);background(255);fill(0);translate(width/2,height/2);for(int i=0;i<repeatNr;i++){ rotate(radians(rotationDegrees)); // en cada repetición roto según el valor de rotationDegrees text("N",0,0); // escribo en la posición (0,0) que ahora está en el centro de la ventana de dibujo }

Rotación y repetición

muevo el origen del sistema de coordenadas al centro de la ventana de dibujo (en este caso lo mismo que translate (200,200))

Origen de sistema de coordenadas después de translate

repeatNr = 3; // defino cuantas veces repito la letrarotationDegrees = 120; // 360/3 = 120

repeatNr = 4; // defino cuantas veces repito la letrarotationDegrees = 90; // 360/4 = 90

primera letra que dibujo cuando i = 0

tercera letra que dibujo cuando i = 2

segunda letra que dibujo cuando i = 1

PFont f = createFont("Serif",160);int repeatNr =6; // defino cuantas veces repito la letraint rotationDegrees = 360/repeatNr; // calculo los grados de separación entre letrastextFont(f);textAlign(CENTER);size(400,400);background(255);fill(0);translate(width/2,height/2); // en este caso lo mismo que translate (200,200)for(int i=0;i<repeatNr;i++){ rotate(radians(rotationDegrees)); text("N",0,0);}translate(100,100);scale(0.25);for(int i=0;i<repeatNr;i++){ rotate(radians(rotationDegrees)); text("N",0,0);}

Rotación, repetición y escala

en cada repetición roto según el valor de rotationDegrees

Trasladamos el origen del sistema de coordenadas +100 y +100

Achicamos a ¼ lo que dibujaremos

60 grados

120 grados

180 grados

240 grados

300 grados

360 grados

PFont f = createFont("Serif",160);int repeatNr =6; // defino cuantas veces repito la letraint rotationDegrees = 360/repeatNr; // veo los grados entre las letrastextFont(f);textAlign(CENTER);size(400,400);background(255);fill(0);translate(width/2,height/2); // en este caso lo mismo que translate (200,200)for(int i=0;i<repeatNr;i++){ rotate(radians(rotationDegrees)); text("N",0,0); pushMatrix(); translate(100,100); scale(0.25); for(int j=0;j<repeatNr;j++){ rotate(radians(rotationDegrees)); text("N",0,0); } popMatrix();}

Rotación, repetición y escala un poco distinto

termina el contexto de transformaciones, las transformaciones dentro de contexto se descartan (en este caso se descarta/revierte el translate, scale y rotate)

empieza el contexto de transformaciones (rotate, translate, scale)

translate(width/2,height/2);for(int i=0;i<repeatNr;i++){ rotate(radians(rotationDegrees)); text("N",0,0); pushMatrix(); translate(100,100); scale(0.25); for(int j=0;j<repeatNr;j++){ rotate(radians(rotationDegrees)); text("N",0,0); } popMatrix();}

repeatNr = 4; rotationDegrees = 90;

Primera vuelta del primer for i = 0. Segundo for se recorre 4 veces con j=0,j=1,j=2,j=3

Primera vuelta del primer for i = 0 (segundo for se recorre 4 veces con j=0,j=1,j=2,j=3)

Primera vuelta del primer for i = 0 (segundo for se recorre 4 veces con j=0,j=1,j=2,j=3)YSegunda vuelta del primer for i = 1 (segundo for se recorre 4 veces con j=0,j=1,j=2,j=3)

Primera vuelta del primer for i = 0 (segundo for se recorre 4 veces con j=0,j=1,j=2,j=3)YSegunda vuelta del primer for i = 1 (segundo for se recorre 4 veces con j=0,j=1,j=2,j=3)Y Tercera vuelta del primer for i = 2 (segundo for se recorre 4 veces con j=0,j=1,j=2,j=3)

repeatNr = 4 y rotationDegrees = 90

Ahora podemos dibujar margaritas

int repeatNr = 20; // repito 20 veces el pétaloint rotationDegrees = 360/repeatNr; size(400,400);background(0);translate(width/2,height/2);fill(255,255,0);ellipse(0,0,100,100);fill(255);for(int i=0;i<repeatNr;i++){ rotate(radians(rotationDegrees)); ellipse(100,0,100,20); }

Ejemplo margarita

int repeatNr = 20; // repito 20 veces el pétaloint rotationDegrees = 360/repeatNr; size(400,400);background(0);translate(width/2,height/2);fill(255,255,0);ellipse(0,0,100,100);fill(255);for(int i=0;i<repeatNr;i++){ rotate(radians(rotationDegrees)); // en cada repetición roto según el valor de rotationDegrees pushMatrix(); translate(100,0); ellipse(0,0,100,20); popMatrix(); }

Ejemplo margarita 2

termina el contexto de transformaciones, las transformaciones dentro de contexto se descartan (en este caso se descarta/revierte el translate)

empieza el contexto de transformaciones (rotate, translate, scale)

¿Y una margarita que gira?

Color en formato HSB

PFont f = createFont("Serif",160);int repeatNr =6; // defino cuantas veces repito la letraint rotationDegrees = 360/repeatNr; // veo los grados entre las letrastextFont(f);textAlign(CENTER);size(400,400);background(255);fill(0);translate(width/2,height/2);for(int i=0;i<repeatNr;i++){ rotate(radians(rotationDegrees)); // en cada repetición roto según el valor de rotationDegrees text("N",0,0);}

Partimos de acá: Rotación y repetición

PFont f;int repeatNr = 6;int rotationDegrees = 360/repeatNr;void setup(){ f = createFont("Serif",160); textFont(f); textAlign(CENTER); colorMode(HSB); size(400,400); fill(0);}void draw(){ background(map(mouseX,0,400,0,255),255,255); translate(width/2,height/2); for(int i=0;i<repeatNr;i++){ rotate(radians(rotationDegrees)); text("N",0,0); }}

Rotación y repetición y HSB

Ahora separaremos las letrasMuy parecido a lo que hicimos con la margarita

PFont f;int repeatNr = 6;int rotationDegrees = 360/repeatNr;void setup(){ f = createFont("Serif",160); textFont(f); textAlign(CENTER); colorMode(HSB); size(400,400); fill(0);}void draw(){ background(map(mouseX,0,400,0,255),255,255); translate(width/2,height/2); for(int i=0;i<repeatNr;i++){ rotate(radians(rotationDegrees)); text("N",mouseY,0); }}

Rotación y repetición y HSB

PFont f;int repeatNr = 6;int rotationDegrees = 360/repeatNr;void setup(){ f = createFont("Serif",160); textFont(f); textAlign(CENTER); colorMode(HSB); size(400,400); fill(0);}void draw(){ background(map(mouseX,0,400,0,255),255,255); translate(width/2,height/2); for(int i=0;i<repeatNr;i++){ rotate(radians(rotationDegrees)); pushMatrix(); translate(mouseY,0); text("N",0,0); popMatrix(); }}

Rotación y repetición y HSB 2

1. Completar los patrones presentados en el ‘ejercicio’ de esta clase. Entregarlos como sketch diferentes.

Tarea 4

2. Presentar un documento con una idea general (texto y referencias visuales) y calendario de trabajo (21.09.21 - 26.10.20, 5 semanas) del proyecto final para discutir en el siguiente encuentro. Calendario debería incluir realización de póster o video que documente el trabajo y una presentación de avances el 12.10.20 (entre todos). El trabajo se hará en grupos de dos (con un grupo de 3 porque hay número impar de estudiantes).

Fecha de la entrega: 21.09.21, hasta las 15:00 hora Uruguay.

Tarea 4

● Visualizador de sonido.● Un vídeo animado.● Un vídeoclip para una canción.● Una instalación interactiva que transforma la imagen

capturada con la cámara.● Un juego.● Una novela visual. ● Tema libre (a coordinar).

Posibles proyectos finales