Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
ARC
Esta sentencia se utiliza en processing para crear
arcos, pero utiliza un sistema de coordenadas
distinto al del plano...
1. Determinar la posición en X
2. Determinar la posición en Y
3. Determinar el ancho (width)
4. Determinar la altura (heig...
arc(x, y, width, height, arc_start, arc_end);
¿Si se entiende
lo que les digo? ¡NO!
Sistema de coordenadas polares
• Processing por defecto
mide los ángulos en
radianes, El sistema de
coordenadas polares
ut...
A ver, 1π radián
equivale a 180º así
que dos de esos son
360º
Processing nos proporciona las
siguientes constantes:
• PI,
• TWO_PI,
• HALF_PI,
• QUARTER_PI.
Processing define sus arcos...
¿No hay dudas?
¡Siguiente tema!
Ehhhh….
rectMode()
Para crear cuadriláteros se usan el parámetro de Rect (x,y,weight,height);
Cuando se requieren dibujar varios c...
Estoy
grabando ¿Entendiste?
translate()
Mueve cada elemento una distancia dada
en una dirección también dada. TRASLADA
UN OBJETO
Translate( x, y);
Est...
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...
void setup () {
size(900,700);
background(0);
}
void draw () {
rect (50,50,150,150);
translate(150,120);
rect (50,50,150,1...
float x, y;
float dim = 80.0;
void setup() {
size(640, 360);
noStroke();
}
void draw() {
background(102);
x = x + 0.8;
if ...
1.//con estas variables asignaremos diferente color y rotación a cada elemento
2.float n = 0;
3.float h = 0;
4.
5.void set...
Cualquier duda
busquen en
Google
¡GRACIAS!
Por su
atención
Profesor…
¿Cuánto tengo?,
¿Tengo 10?
Webgrafía
• http://processing-
spain.blogspot.com/2015/09/38-dibujar-un-
arco.html
• http://processing-
spain.blogspot.com...
arc, rectMode, translate en Processing
Próxima SlideShare
Cargando en…5
×

arc, rectMode, translate en Processing

40 visualizaciones

Publicado el

Lenguaje de programación Proccesing

Publicado en: Educación
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

arc, rectMode, translate en Processing

  1. 1. 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…
  2. 2. 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
  3. 3. arc(x, y, width, height, arc_start, arc_end); ¿Si se entiende lo que les digo? ¡NO!
  4. 4. 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
  5. 5. A ver, 1π radián equivale a 180º así que dos de esos son 360º
  6. 6. 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
  7. 7. ¿No hay dudas? ¡Siguiente tema! Ehhhh….
  8. 8. 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
  9. 9. Estoy grabando ¿Entendiste?
  10. 10. 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
  11. 11. 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.
  12. 12. 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
  13. 13. 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
  14. 14. 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!
  15. 15. Cualquier duda busquen en Google ¡GRACIAS! Por su atención Profesor… ¿Cuánto tengo?, ¿Tengo 10?
  16. 16. 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

×