Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
Colores, figuras geométricas, setup y draw, interacción con el mouse y teclado
Lenguaje de programación
Funciones predefinidas (size, background, line, stroke, strokeWeight)
Sistema de coordenadas
Repasando la clase anterior
Colores
Espacio de colores RGB y HSB (o HSV)
background(0) // color de fondo negro
stroke(0) // contorno negro, para dibujar sin contorno usamos noStroke()
fill(0) // color de relleno de las figuras negro, para dibujar sin relleno usamos noFill()
Funciones que reciben colores
background(r, g, b); // si la función recibe 3 parámetros Processing asume que el primero es el valor de R, segundo de G, tercero de B
background(valorGris); // si es un parámetro solo Processing asume que trabajamos con la escala de grises donde 0 significa negro y 255 blanco
background
stroke(r, g, b); // si la función fill recibe 3 parámetros Processing asume que el primero es el valor de R, segundo de G, tercero de B
stroke(r, g, b, opacidad); // si son cuatro parámetros, el cuarto es la opacidad, dónde 0 es totalmente transparente y 255 totalmente sólido
stroke(valorGris); // si es un parámetro solo Processing asume que trabajamos con la escala de grises donde 0 significa negro y 255 blanco
stroke(valorGris, opacidad); // si son dos parámetros, el primero es valor de gris y el segundo la opacidad
stroke
fill(r, g, b); // si la función fill recibe 3 parámetros Processing asume que el primero es el valor de R, segundo de G, tercero de B
fill(r, g, b, opacidad); // si son cuatro parámetros, el cuarto es la opacidad, dónde 0 es totalmente transparente y 255 totalmente sólido
fill(valorGris); // si es un parámetro solo Processing asume que trabajamos con la escala de grises donde 0 significa negro y 255 blanco
fill(valorGris, opacidad); // si son dos parámetros, el primero es valor de gris y el segundo la opacidad
fill
Selector de colores
Figuras geométricas
Line (ya vimos)
Rect
Quad
Ellipse
Arc
Triangle
Vertex
Figuras geométricas
rect(x, y, ancho, alto);
rect(x, y, ancho, alto, radio);
rect x = 30
y = 20
ancho = 55alto = 55
x=0, y=0
size(600, 500);noStroke(); // no dibujo contornofill(255,210,60); // relleno de figura amarillorect(320,110,110,110); // cabezarect(200,230,230,120); // cuerpo
rect(215,350,15,80,4); // pata traserarect(235,350,15,80,4); // pata traserarect(375,350,15,80,4); // pata de adelanterect(395,350,15,80,4); // pata de adelante
fill(255,0,0); // relleno rojorect(320,220,110,10); // collarrect(365,190,15,15); // lengua (la parte cuadrada)
Perrito (rect)
quad(x1, y1, x2, y2, x3, y3, x4, y4);
quad
quad(320,115, 275, 130,300,195,320,145); // oreja izquierdaquad(430,115,430,145,445,195,470,130); // oreja derecha
Perrito (quad)
ellipse(xcenter, ycenter, ancho, alto);
ellipse
50
50ellipse(50, 50, 60, 60);
ancho
alto
fill(255);ellipse(350,150,20,30); // ojo izquierdoellipse(395,150,20,30); // ojo derecho
Perrito (ellipse)
arc(x, y, ancho, alto, start, stop);arc(x, y, ancho, alto, start, stop, modo);
arc (= recorte de ellipse)
0 grados
90 grados
50
40
arc(50, 40, 100, 80, 0, radians(90));
arc(50, 40, 100, 80, 0, radians(90), PIE);
arc(50, 40, 100, 80, 0, radians(90), OPEN);
arc(50, 40, 100, 80, 0, radians(90),CHORD);
arc
0
90 grados
50
50
5050
40
40
40 40
fill(255,0,0);arc(372.5,205,15,15,0,radians(180)); // lengua (la parte redonda)fill(0);arc(350,150,15,15,radians(45),radians(360)); // pupila izquierdaarc(395,150,15,15,radians(45),radians(360)); // pupila derecha
Perrito (arc)
45 grados
360 grados
triangle(x1, y1, x2, y2, x3, y3);
triangle
triangle(360, 165, 375, 185, 385, 165); // la nariz
Perrito (triangle)
beginShape();vertex(30,20);vertex(85,20);vertex(85,75);vertex(30,75);endShape(CLOSE);
vertex
fill(255,210,60);beginShape(); // empieza la colavertex(205,230);vertex(160,180);vertex(140,195);vertex(155,195);vertex(150,205);vertex(160,205);vertex(155,215);vertex(205,240);endShape(); // termina la cola
Perrito (vertex)
stroke(0);strokeWeight(2);line(360,190,385,190); // boca
Y la línea final!
Ejercicio: Imitar las siguientes banderas
Rep. Checa Bangladesh Chile
¡Y no se olviden que el orden de los comandos importa!
fill(255);ellipse(mouseX,mouseY,20,30); // ojo izquierdoellipse(mouseX+45,mouseY,20,30); // ojo derecho
fill(255,0,0);arc(372.5,205,15,15,0,PI); // lengua (la parte redonda)fill(0);arc(mouseX,mouseY,15,15,radians(45),radians(360)); // pupila izquierdaarc(mouseX+45,mouseY,15,15,radians(45),radians(360)); // pupila derecha
El perrito mueve los ojos
fill(255);ellipse(350,150,20,30); // ojo izquierdoellipse(395,150,20,30); // ojo derecho
fill(255,0,0);arc(372.5,205,15,15,0,PI); // lengua (la parte redonda)fill(0);arc(350,150,15,15,radians(45),radians(360)); // pupila izquierdaarc(395,150,15,15,radians(45),radians(360)); // pupila derecha
¿Qué pasó?
Setup y draw
void setup() { size(200, 200);}
void draw() { background(255,0,0); rect(mouseX,90,20,20);}
Setup y draw
- Definición de tamaño de dibujo- Definiciones iniciales (colores de rellenos y contornos de las figuras, grosor de la línea de contorno, etc.)
Se ejecuta constantemente
Tamaño de dibujo en píxelessize(ancho, alto)
Dibujo rectángulo que sigue el cursor
3.1: Flow (setup and draw) - Processing Tutorial
https://www.youtube.com/watch?v=o8dffrZ86gs&list=PLRqwX-V7Uu6by61pbhdvyEpIeymlmnXzD
Setup y draw con Daniel Shiffman
void setup(){ size(600, 500);}void draw() { noStroke(); fill(255,210,60); rect(200,230,230,120); // cuerpo rect(320,110,110,110); // cabeza
[...] stroke(0); strokeWeight(2); line(360,190,385,190); // boca}
Un poco mejor pero no de todo bien
!
void setup(){ size(600, 500);}void draw() { background(80,190,230); noStroke(); fill(255,210,60); rect(200,230,230,120); // cuerpo rect(320,110,110,110); // cabeza
[...] stroke(0); strokeWeight(2); line(360,190,385,190); // boca}
¡Ahora si!
Ahora moveremos al perro entero
Agregamos al sketch “perritoConDraw”void setup(){ size(600, 500);}void draw() { background(80,190,230); noStroke(); fill(255,210,60); translate(mouseX,mouseY); rect(200,230,230,120); // cuerpo rect(320,110,110,110); // cabeza[...]}
Interacción con el mouse y teclado
mouseXmouseYpmouseXpmouseYmousePressed // es una variable, podemos preguntar “¿Está apretado el mouse?” mousePressed() // función que se ejecuta cuando apretamos el mousemouseReleased()mouseClicked()mouseMoved()mouseDragged()mouseButtonmouseWheel()
Eventos de mouse
Posición en el frame anteriorpmouseX = 10pmouseY = 30
Posición en el frame actualmouseX = 80mouseY = 80
Posición del mouse10 80
30
80
void setup(){ size(400,400); stroke(0,127); background(255);}void draw() { line(mouseX,mouseY,pmouseX,pmouseY);}void mouseClicked(){ // cuando hacés click con el mouse el fondo se pinta de blanco // el resultado visual es que se borra el dibujo antes creado background(255);}
Líneas con el mouse
void setup(){ size(400,400); stroke(0,127); background(255);}
void draw() { strokeWeight(dist(mouseX,mouseY,pmouseX,pmouseY)); line(mouseX,mouseY,pmouseX,pmouseY);}
void mouseClicked(){ background(255);}
Líneas con el mouse
agregamos
void setup() { size(600, 600); background(0); fill(255);}
void draw() { ellipse(mouseX,mouseY,60,60);}
Círculos que siguen el mouse
¿Cómo dibujar un único círculo que sigue el mouse?
void setup() { size(600, 600); background(0);}
void draw() { background(0); fill(255); ellipse(mouseX,mouseY,60,60);}
Círculo que sigue el mouse
agregamos
¿Habrá algo en el medio entre “siempre borrar” y “no borrar nunca”?
void setup() { size(600, 600); background(0); noStroke();}
void draw() { background(0); fill(0,10); rect(0,0,width,height); // un rectángulo con muy poca opacidad de tamaño de la ventana de dibujo genera efecto estela fill(255); ellipse(mouseX,mouseY,60,60);}
Círculo con estela que sigue el mouse
borramos
agregamos
agregamos
keykeyCodekeyPressedkeyPressed()keyReleased()
key == 'a', 'A', 'b', 'B', … + BACKSPACE, TAB, ENTER, RETURN, ESC, and DELETEkeyCode == UP, DOWN, LEFT, RIGHT, ALT, CONTROL, SHIFT
Eventos del teclado
void setup() { size(600, 600); background(0); noStroke();}void draw() { fill(0,10); rect(0,0,width,height); // un rectángulo con muy poca opacidad de tamaño de la ventana de dibujo genera efecto estela fill(255); ellipse(mouseX,mouseY,60,60);}void keyPressed(){ // cuando apreto una tecla el fondo se pinta // de un color definido al azar background(random(255),random(255),random(255));}
Círculo con estela con fondo de color
¿Qué hace este código?
void setup(){ size(600,600);}
void draw(){ ellipse(300,300,100,100);}
int x,y;void setup(){ size(600,600); x =300; y = 300; }
void draw(){ ellipse(x,y,100,100);}
¿Qué podría hacer este código?
int x,y;void setup(){ size(600,600); x =300; y = 300; }
void draw(){ ellipse(x,y,100,100);}
void keyPressed(){ if(keyCode == UP){ y -=10; }else if(keyCode == DOWN){ y +=10; }else if(keyCode == RIGHT){ x +=10; }else if(keyCode == LEFT){ x -=10; }}
Mover con las flechasvariables
Estructura condicional if/else if
4.1: Variables - Processing Tutorial
https://www.youtube.com/watch?v=B-ycSR3ntik&list=PLRqwX-V7Uu6aFNOgoIMSbSYOkKNTo89uf
Variables con Daniel Shiffman
Ejemplos de código:
● https://processing.org/examples/ ● http://learningprocessing.com/examples/● https://natureofcode.com/book/
Tutoriales:
https://processing.org/tutorials/
Ejemplos y tutoriales para ver más ejemplos
Buscar una imagen que les guste, e intentar replicarla en un sketch de mínimo 700 x 700 píxeles, con los siguientes requerimientos:
1. por lo menos 16 formas, dentro de las 16 formas debería haber por lo menos un line, arc, rect, ellipse, triangle y una forma compuesta por vértices
2. por lo menos 6 colores sólidos y 6 con transparencia
Al menos una de las figuras de la pantalla deberá moverse siguiendo el mouseX y otra moverse verticalmente siguiendo mouseY.
Se entrega por Eva. Fecha de la entrega: 07.09.21, hasta las 15:00 hora Uruguay.
Tarea 2
Dato útil: Sketch -> Tweak