6 Bucle for, variables, imágenes
Transcript of 6 Bucle for, variables, imágenes
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