Dibujar cuadrados y rectángulos con #processing

Para dibujar cuadrados o rectángulos con Processing utilizaremos la siguiente función:

rect (x,y,ancho,alto);

donde:

x = posición inicial en el eje x
y = posición inicial en el eje y
ancho = ancho del rectángulo
alto = alto del rectángulo

En la siguiente imagen vemos que se ha dibujado un rectángulo cuyo origen está en el punto (1,2) y tiene 4 de ancho y 3 de alto.

Vamos a realizar un ejemplo. En una pantalla de 200×200 tenemos que dibujar un cuadrado que tenga su origen en el punto (50,50) y con una longitud de 100 de lado. Abre Processing y escribe:

//ejemplo cuadrado
size (200,200); //tamaño ventana
rect (50,50,100,100);//cuadrado

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

Ahora vamos a dibujar un rectángulo de dimensiones 100 de ancho y 50 de alto y con el mismo origen que antes. Modifica el programa anterior y escribe:

//ejemplo rectángulo
size (200,200); //tamaño ventana
rect (50,50,100,50);//rectángulo

Ejecútalo y comprueba que ocurre. Veras algo parecido a esto, has dibujado un rectángulo:

Como habrás observado el cuadrado y el rectángulo 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 el rectángulo anterior. El borde será de color rojo y grosor 5 y el relleno de color verde. Abre Processing y escribe:

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

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

Podemos modificar aún más el rectángulo redondeando los bordes. Para ello modificaremos la función “rect” de la siguiente forma:

rect (x,y,ancho,alto,radio);

radio: radio de los bordes.

Modifica el rectángulo anterior con los bordes redondeados a 25:

rect (50,50,100,50,25);//rectángulo

El resultado será este:


Vamos a practicar lo aprendido:

ACTIVIDADES
1.- En una ventana de 300×300 dibuja 2 cuadrados, uno de 150 de lado y otro de 75 de lado.

2.- Modifica los cuadrados anteriores con diferentes grosores y colores de bordes así como relleno de colores diferentes. A uno de ellos ponle los bordes redondeados.

3.- En una ventana de 300×300 dibuja 2 rectángulos:

a) Ancho 150 y alto 50

b) Ancho 75 y alto 175

4.- Modifica los rectángulos anteriores con diferentes grosores y colores de bordes así como relleno de colores diferentes. A uno de ellos ponle los bordes redondeados.

5.- A partir de una ventana de 200×200:

a) Dibuja un cuadrado con origen en (0,0), 100 de lado y relleno de color verde.

b) Dibuja un cuadrado con origen en (100,0), 100 de lado y relleno de color rojo.

c) Dibuja un cuadrado con origen en (0,100), 100 de lado y relleno de color azul.

d) Dibuja un cuadrado con origen en (100,100), 100 de lado y relleno de color amarillo.

Ejecútalo y comprueba que sale una figura como esta:

6.- A partir de una ventana de 600×400:

a) Dibuja un rectángulo con origen en (0,0), 600 de ancho, 100 de alto y relleno de color rojo.

b) Dibuja un rectángulo con origen en (0,100), 600 de ancho, 200 de alto y relleno de color amarillo.

c) Dibuja un rectángulo con origen en (0,300), 600 de ancho, 100 de alto y relleno de color rojo.

Ejecútalo y comprueba que has dibujado la bandera de España:

7.- Siguiendo el ejemplo anterior realiza un programa para dibujar la bandera de Francia.

8.- Realiza un dibujo libre incluyendo todas las funciones que hemos visto hasta ahora: puntos, lineas, cuadrados, rectángulo, grosores, colores, rellenos, …

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.