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