6 bucle for, variables, imágenes
TRANSCRIPT
![Page 1: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/1.jpg)
Bucle for, variables, texto, rotate, color en formato HSB, ejemplos integradores
![Page 2: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/2.jpg)
Motivación
![Page 3: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/3.jpg)
Bucle for
![Page 4: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/4.jpg)
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
![Page 5: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/5.jpg)
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
![Page 6: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/6.jpg)
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
![Page 7: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/7.jpg)
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
![Page 8: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/8.jpg)
for (int i=0 ; i<6 ; i++){ rect(i*100, 50, 100, 100); }
inicialización condición actualización
![Page 9: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/9.jpg)
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);
![Page 10: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/10.jpg)
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
![Page 11: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/11.jpg)
y = 100
y = 200
y = 300
y = 400
y = 500
![Page 12: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/12.jpg)
¿Cómo logro esto?
![Page 13: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/13.jpg)
y = 100
y = 200
y = 300
y = 400
y = 500
![Page 14: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/14.jpg)
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?
![Page 15: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/15.jpg)
Ya vimos todo que se precisa para armar este dibujo
![Page 16: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/16.jpg)
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 }}
![Page 17: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/17.jpg)
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
![Page 18: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/18.jpg)
¿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);
![Page 19: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/19.jpg)
¿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); }
![Page 20: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/20.jpg)
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
![Page 21: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/21.jpg)
Ejemplos
![Page 22: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/22.jpg)
Reproducir los siguientes patrones:
Ejercicio
![Page 23: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/23.jpg)
Texto
![Page 24: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/24.jpg)
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
![Page 25: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/25.jpg)
¿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
![Page 26: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/26.jpg)
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
![Page 27: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/27.jpg)
rotate y scale
![Page 28: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/28.jpg)
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
![Page 29: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/29.jpg)
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))
![Page 30: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/30.jpg)
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
![Page 31: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/31.jpg)
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
![Page 32: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/32.jpg)
60 grados
120 grados
180 grados
240 grados
300 grados
360 grados
![Page 33: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/33.jpg)
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)
![Page 34: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/34.jpg)
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
![Page 35: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/35.jpg)
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
![Page 36: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/36.jpg)
Ahora podemos dibujar margaritas
![Page 37: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/37.jpg)
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
![Page 38: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/38.jpg)
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)
![Page 39: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/39.jpg)
¿Y una margarita que gira?
![Page 40: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/40.jpg)
Color en formato HSB
![Page 41: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/41.jpg)
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
![Page 42: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/42.jpg)
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
![Page 43: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/43.jpg)
Ahora separaremos las letrasMuy parecido a lo que hicimos con la margarita
![Page 44: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/44.jpg)
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
![Page 45: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/45.jpg)
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
![Page 46: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/46.jpg)
1. Completar los patrones presentados en el ‘ejercicio’ de esta clase. Entregarlos como sketch diferentes.
Tarea 4
![Page 47: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/47.jpg)
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
![Page 48: 6 Bucle for, variables, imágenes](https://reader035.vdocuments.site/reader035/viewer/2022080210/62e7ce6c6bf16050207d9360/html5/thumbnails/48.jpg)
● 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