Primitivas de dibujo con MobileProcessing

De las cosas de MP que tenía pendiente revisar, aunque ya se han utilizado en varios ejemplos publicados hasta ahora, son las primitivas de dibujo que nos permitirán crear gráficos basados en puntos, lineas, triángulos, cuadrados, etc.

Estas son las funciones primitivas que provee MobileProcessing.

point(x, y)
Muestra un punto en la coordenada (x, y).
line(x1, y1, x2, y2)
Traza una línea desde (x1, y1) hasta (x2, y2).
triangle(x1, y1, x2, y2, x3, y3)
Dibuja un triángulo cuyos vértices se ubican en

(x1, y1), (x2, y2) y (x3, y3).

rect(x, y, ancho, alto) Dibuja un cuadrilátero cuya coordenada orígen es (x, y)

y se extiende con el alto y el ancho especificados.

quad(x1, y1, x2, y2, x3, y3, x4, y4) Dibuja un cuadrilátero cuyos cuatro vértices corresponden

a las coordenadas (x1, y1), (x2, y2), (x3, y3) y (x4, y4).

ellipse(x, y, ancho, alto)
Dibuja una elipse cuya coordenada orígen es (x, y) y se

extiende con el alto y el ancho especificados.

A continuación se muestran ejemplos de estas funciones primitivas.

Puntos Líneas Triángulos Cuadrados
Cuadriláteros Elípses Poligonos

Los polígonos, conjunto de vertices unidos por líneas, pueden crearse de manera libre utilizando la función vertex(x, y). Los llamados a esta función para crear los vértices deben ir inscritos este dos llamados a las funciones: beginShape() y endShape() respectivamente, las cuales enmarcan el inicio y el fin de la definición del polígono. La primera de estas últimas funciones viene con diferentes opciones de configuración según el tipo de polígono libre a generarse, consulte su documentación para información adicional.

La función color() permite crear variables de tipo color. La forma mas utilizada es basada en las definiciones RGB (Rojo – Verde – Azul) de los colores:

color c = color(102, 85, 34);  // Café utilizado en el triángulo del ejemplo.

Existen otras combinaciones de parámetros para manejar una escala de grises y el nivel de opacidad (alpha).

Las siguientes funciones gráficas se encuentran relacionadas con el manejo de colores.

background(color) Modifica el color del fondo.
fill(color) Hace que la figura dibujada por la primitiva esté rellena (si aplica) del color especificado.
noFill() Hace que la figura dibujada por la primitiva NO se encuentre rellena.
stroke(color) Modifica el color del contorno de la figura dibujada al especificado.
noStroke() Hace que la figura dibujada por la primitiva NO tenga contorno.
strokeWeight(grueso) Modifica el ancho de la línea de contorno (si aplica) al especificado.

Téngase en cuenta que las funciones fill hacen referencia al relleno del dibujo mientras que las funciones stroke hacen referencia a la línea exterior, es decir, su contorno.

Después del desarrollo del programa de ejemplo para este artículo concluyo lo siguiente con respecto a las funciones anteriormente mencionadas.

  1. La acción de la función fill aplica para rect, ellipse, triangle, quad y poligonos. No aplica para line o point.
  2. La acción de la función stroke aplica para todas las primitivas, en el caso de line y point les modifica su color.
  3. La acción de la función strokeWeight aplica para triangle, quad, line y poligonos. No aplica para rect, ellipse ni point, al menos con la versión 0007 de MP.

Para desplegar mensajes de texto a través de las primitivas de dibujo se deben realizar los siguientes pasos.

PFont fuente = null; Se crea el objeto que representará la fuente a utilizarse en el texto.
fuente = loadFont(familia, estilo, tamaño); Carga la fuente a utilizarse.

La familia puede ser FACE_SYSTEM, FACE_MONOSPACE o FACE_PROPORTIONAL.

El estilo puede ser STYLE_PLAIN, STYLE_BOLD, STYLE_ITALIC o STYLE_UNDERLINED.

El tamaño puede ser SIZE_SMALL, SIZE_MEDIUM o SIZE_LARGE.

Existen varias variaciones de esta función, consulte su documentación.

textFont(fuente); Asigna la fuente especificada como fuente activa.
text(mensaje, x, y, ancho, alto); Muestra en pantalla el texto mensaje ubicado en las coordenadas x, y de orígen y con un espacio disponible máximo de ancho x alto.

La aplicación de ejemplo para este artículo da uso de las funciones aquí expuestas mediante las siguientes instrucciones.

  • Las teclas izquierda (LEFT) y derecha (RIGHT) cambian la figura actual: rect, ellipse, triangle, quad, line, point y poligonos.
  • Las coordenadas de las figuras line, point y poligonos son generadas al azar, las demás son constantes.
  • Los colores, tanto de relleno como de contorno, son siempre calculados al azar.
  • Las teclas arriba (UP) y abajo (DOWN) aumentan o disminuyen el ancho de las líneas de las figuras (según aplique), esto es visible en modo sin relleno.
  • La tecla asterisco (*) modifica el modo de la figura entre con relleno y sin relleno. Inicialmente el modo con relleno se encuentra activo.
  • La tecla número (#) refresca la grafica que se muestra actualmente en la pantalla.

Enlace: ShapesDemo.

One thought on “Primitivas de dibujo con MobileProcessing”

  1. Pingback: Espiral dorada

Leave a Reply

Your email address will not be published. Required fields are marked *