El documento explica dos métodos para crear arcos en Processing. El primer método utiliza la función "arc()" y coordenadas cartesianas, mientras que el segundo método utiliza coordenadas polares. También se describen algunas constantes como PI y TWO_PI que Processing provee para trabajar con radianes al dibujar arcos.

2. ARC
Esta sentencia se utiliza en processing para crear
arcos, pero utiliza un sistema de coordenadas
distinto al del plano cartesianos, lo hace usando
radianes. Existen dos formas de crear arcos en
processing:
• arc(x, y, width, height, arc_start, arc_end);
• Sistema de coordenadas polares
Jeje, no van
a entender…

3. 1. Determinar la posición en X
2. Determinar la posición en Y
3. Determinar el ancho (width)
4. Determinar la altura (height)
5. Determinar el comienzo
6. Determinar el final del arco
x
Y
20 80
20
80
START
END
arc(x, y, width, height, arc_start, arc_end);
¡Espera, espera!
Estoy grabando
esa cosa

4. arc(x, y, width, height, arc_start, arc_end);
¿Si se entiende
lo que les digo? ¡NO!

5. Sistema de coordenadas polares
• Processing por defecto
mide los ángulos en
radianes, El sistema de
coordenadas polares
utiliza una estructura
diferente al sistema
cartesiano.
• Los puntos son definidos
en relación a un ángulo de
rotación (q) y una
distancia a un origen
central.
Oh… el conocimiento
es poder

6. A ver, 1π radián
equivale a 180º así
que dos de esos son
360º

7. Processing nos proporciona las
siguientes constantes:
• PI,
• TWO_PI,
• HALF_PI,
• QUARTER_PI.
Processing define sus arcos en la dirección a las agujas del reloj. Podemos utilizar las
constantes que nos ofrece Processing, aunque es difícil calcular con radianes. Por ese
motivo podemos utilizar grados para calcular el comienzo y el final de nuestros arcos,
utilizando la función radianes().
Recuerden que π
equivale a 3,14

8. ¿No hay dudas?
¡Siguiente tema!
Ehhhh….

9. rectMode()
Para crear cuadriláteros se usan el parámetro de Rect (x,y,weight,height);
Cuando se requieren dibujar varios cuadriláteros en distintos modos de dibujo, se
recurre a rectMode, que usa las variables:
CORNER: Es el modo por defecto, y el que hemos aprendido arriba. (x, y, width,
height).
rectMode(CORNER);
CORNERS: 1º y 2º parámetro = esquina superior izquierda. 3º y 4º parámetro =
esquina inferior derecha.
rectMode(CORNERS);
CENTER: Utiliza el primer y el segundo parámetro para establecer el centro del
rectángulo, y el tercer y el cuarto parámetro como la anchura y la altura.
rectMode(CENTER);
Imaginen el
buscatrazos de
ilustrator, es
poner cuadros
encima del uno
y del otro

10. Estoy
grabando ¿Entendiste?

11. translate()
Mueve cada elemento una distancia dada
en una dirección también dada. TRASLADA
UN OBJETO
Translate( x, y);
Esto es muy
fácil, se copian
y se mueven
figuras

12. 10 30 50 70 90 110 130 150
10
30
50
70
90
rect(50,10,50,50);
translate(70,20);
rect(10,10,50,50);
y
x
Esto es lo más
fácil, no digan que
no entienden.

13. void setup () {
size(900,700);
background(0);
}
void draw () {
rect (50,50,150,150);
translate(150,120);
rect (50,50,150,150);
translate(300,120);
rect (50,50,150,150);
translate(90,100);
}
Ahora haremos
unos ejercicios

14. float x, y;
float dim = 80.0;
void setup() {
size(640, 360);
noStroke();
}
void draw() {
background(102);
x = x + 0.8;
if (x > width + dim) {
x = -dim;
}
translate(x, height/2-dim/2);
fill(255);
rect(-dim/2, -dim/2, dim, dim);
translate(x, dim);
fill(0);
rect(-dim/2, -dim/2, dim, dim);
}
Ya quiero ver a
los cuadros
moviéndose

15. 1.//con estas variables asignaremos diferente color y rotación a cada elemento
2.float n = 0;
3.float h = 0;
4.
5.void setup() {
6.size(300, 300);
7.//cambiamos cómo definiremos el color y el rectángulo
8.colorMode(HSB, 100);
9.rectMode(CENTER);
10.//asignamos un tono cualquiera al color
11.h = random(100);
12.}
13.
14.void draw() {
15.//reseteamos el fondo para evitar que los elementos 'dibujen'
16.background(h, 50, 35);
17.//comienzan los bucles
18.//primero reseteamos el bucle a cada ciclo
19.float y = 0;
20.//este bucle hace copias verticales del segundo
21.while (y < height) {
22.//reseteamos el segundo bucle
23.float x = 0;
24.//y este hace copias horizontales de una función propia llamada 'modulo()'
25.while (x < width) {
26.//cada módulo se traslada a su posición en la red
27.translate(10+x, 10+y);
28.//y se gira un ángulo diferente según su posición
29.rotate(n+x+y);
30.//llamamos el módulo del que se harán las copias
31.modulo((n+x+y)/10);
32.//y reseteamos la traslación y el giro para que no se acumulen de un elemento a otro
33.resetMatrix();
34.//esta es la separación horizontal entre cada módulo
35.x = x + 35;
36.//y aumentamos la variable 'n' a cada ciclo para animar el giro y el color
37.n= n+0.001;
38.}
39.//separación vertical entre cada línea de módulos
40.y = y+35;
41.}
42.}
43.
44.//definimos nuestra función módulo, que toma un parámetro: 'col'
¡El padre de los
códigos!

16. Cualquier duda
busquen en
Google
¡GRACIAS!
Por su
atención
Profesor…
¿Cuánto tengo?,
¿Tengo 10?

17. Webgrafía
• http://processing-
spain.blogspot.com/2015/09/38-dibujar-un-
arco.html
• http://processing-
spain.blogspot.com/2015/09/36-dibujar-un-
rectangulo-rectx-y-width.html
• https://processing.org/examples/translate.ht
ml
• https://processing.org/reference/translate_.ht
ml
• https://riuma.uma.es/xmlui/bitstream/handle
/10630/14225/PROCESSING%20CAP.5%20ART
E%20ELECTRONICO.pdf?sequence=3
Pude grabar toda
la clase