Dibujar circunferencias y elipses con #processing

Para dibujar circunferencias o elipses con Processing utilizaremos la siguiente función:

ellipse (x,y,ancho,alto);

donde:x, y = centro de la circunferencia / elipse
ancho = ancho de la circunferencia / elipse
alto = alto de la circunferencia / elipse

En la circunferencia ancho = alto = diámetro circunferencia

Vamos a realizar un ejemplo. En una pantalla de 200×200 tenemos que dibujar un circunferencia que tenga su origen en el punto (100,100) y con un diámero de 75. Abre Processing y escribe:

//ejemplo circunferencia
size (200,200); //tamaño ventana
ellipse (100,100,75,75);//circunferencia 

Ejecútalo y comprueba que ocurre. Veras algo parecido a esto, has dibujado una circunferencia:

Ahora vamos a dibujar una elipse de dimensiones 100 de ancho y 50 de alto y con el mismo origen que antes. Modifica el programa anterior y escribe:

//ejemplo elipse
size (200,200); //tamaño ventana
ellipse (100,100,100,50);//elipse

Ejecútalo y comprueba que ocurre. Veras algo parecido a esto, has dibujado una elipse:

Como habrás observado la circunferencia y la elipse se han dibujado con un borde negro y el interior es de color blanco. Esas propiedades se pueden cambiar y podemos modificar el color y grosor del borde así como el color de relleno.

Para cambiar el color y grosor del borde utilizaremos las ya conocidas funciones:

stroke (R,G,B);

strokeWeight (x);

Para cambiar el color de relleno utilizaremos la función:

fill (R,G,B);

Vamos a modificar la elipse anterior. El borde será de color rojo y grosor 5 y el relleno de color verde. Abre Processing y escribe:

//ejemplo elipse
size (200,200); //tamaño ventana
stroke (255,0,0); //color borde rojo
strokeWeight (5); //grosor 5
fill (0,255,0); // relleno verde
ellipse (100,100,100,50);//elipse

Ejecútalo y comprueba que ocurre. Veras algo parecido a esto:

Podemos modificar aún más la elipse, vamos a dibujarla sin relleno. Para ello utilizamos la siguiente función:

noFill ();

Modifica la elipse anterior:

//ejemplo elipse
size (200,200); //tamaño ventana
stroke (255,0,0); //color borde rojo
strokeWeight (5); //grosor 5
noFill (); // sin relleno
ellipse (100,100,100,50);//elipse

El resultado será este:

Ya por último vamos a dibujar la elipse con relleno pero sin borde, para ello utilizaremos la siguiente función:

noStroke ();

Abre Processin y escribe:

//ejemplo elipse
size (200,200); //tamaño ventana
noStroke (); //sin borde
fill (0,255,0); // relleno verde
ellipse (100,100,100,50);//elipse

El resultado será este:

Estas dos últimas funciones, noFill (); y noStroke (); , también son aplicables a las función rect utilizada para rectángulos y cuadrados.

Vamos a practicar lo aprendido:

ACTIVIDADES
1.- En una ventana de 300×300 dibuja:

a) Una circunferencia con centro en (75, 75) y 90 de diámetro, relleno rojo.

b) Una circunferencia con centro en (225, 75) y 90 de diámetro, borde azul, grosor borde 5 y relleno verde.

c) Una elipse con centro en (75, 225), ancho 90 y alto 45, borde amarillo, grosor borde 5 y sin relleno.

d) Una elipse con centro en (225, 225), ancho 45 y alto 90, sin borde, relleno blanco.

2.- En una ventana de 300×200 con fondo azul dibuja:

a) Una elipse con centro en (150, 100), ancho 300 y alto 90, relleno blanco.

b) Una circunferencia con centro en (150, 100), diámetro 80, relleno verde.

c) Una circunferencia con centro en (150, 100), diámetro 40, relleno negro.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.