Aplicaciones gráficas

Zenón no sólo mide longitudes, es también un geómetra de superficies. ¿Cuál es pues la superficie del Peloponeso? La misma razón recomienza. Supongamos un paso al cuadrado. La superficie de la península es el producto del número de tales cuadrados por su superficie media. Pero este cuadrado bien plano, bien llano, raras veces se pone de plano sobre el suelo. Si es grande, las montañas le hacen obstáculo; si es más pequeño, las colinas; si es aún más reducido, las rocas; y las motas de tierra, justamente, a escala del paso. Y en lo muy pequeño, las partículas de polvo, los cristales, y así sucesivamente. Idéntico resultado pues: ¿acaso tendría el mundo un volumen finito para una superficie infinita? La cosa resulta paradójica para su representación, como se suele decir, en el mapa (Serres 1991, 95)

La programación creativa, por su vinculación a las artes visuales y el diseño, contemplan una respuesta amplia a cuestiones visuales y espaciales. En este contexto, el primer elemento a comprender es el propio espacio de representación que queda definido por la ventana de salida. Sea cual sea su soporte, -tipo de monitor o proyector de vídeo- debemos entenderlo como una matriz de puntos luminosos (pixels) que, según los casos, albergará una representación 2D ó 3D de las formas visuales, y cuyo origen o punto cero se expresa mediante las coordenadas (0,0) ó, (0,0,0) y está situado en el vértice superior izquierdo de la ventana.

Centrándonos de momento en las formas 2D, para dibujarlas dentro de esa matriz es necesario pensar cuál será su ubicación, expresada en coordenadas (x,y), y las cualidades que permiten definirla. Hay funciones internas que facilitan el dibujo de figuras geométricas e incluyen en sus parámetros las coordenadas y cualidades de la forma.

Formas geométricas básicas

La siguiente tabla muestra las funciones de openFrameworks más comunes para dibujar figuras geométricas planas, lo que en programación se denomina Primitivas.

Punto

of.drawCircle(x, y, 1)

círculo de 1 pixel de radio

(coordenadas del centro (x, y), 1)

Línea

of.drawLine(x1, y1, x2, y2)

(coordenadas punto inicio, punto final)

Triángulo

of.drawTriangle(x1, y1, x2, y2, x3, y3)

(coordenadas punto 1, punto 2, punto 3)

El triángulo equilátero puede hacerse también con of.drawCircle()

Rectángulo

of.drawRectangle(x, y, w, h)

(coordenadas vértice superior izq. (x, y), alto, ancho)

Puede cambiarse la asignación del vértice, ver RECT_MODE

Círculo

of.setCircleResolution(valor)

of.drawCircle(x, y, radio)

Para un círculo  “valor” debe ser alto (60), si no dibuja polígonos.

(coordenadas centro (x, y), radio)

Elipse

of.drawEllipse(x, y, w, h)

(coordenadas del centro (x, y) , ancho, alto)

Polígono

of.setCircleResolution(valor) 

of.drawCircle(x, y, radio)

Los polígonos regulares se pueden dibujar con un círculo a baja resolución.

el “valor” en la resolución define el nº de lados del polígono, en el ejemplo (6)

Antes de dibujar hay que tener en cuenta las características del fondo y particularidades de las formas: color de fondo, así como el color y ancho del borde y si ese color las rellena o no.

Características de las funciones gráficas

Los siguientes ejemplos relacionan las funciones para generar formas geométricas básicas (o primitivas) con sus características particulares.

--
--	----------------------------------------------------------
--	Mosaic | OF Visual Patching Developer Platform            E-4-1
--
--	Copyright (c) 2018 Emanuele Mazza aka n3m3da
--
--    Mosaic is distributed under the MIT License. This gives everyone the
--    freedoms to use Mosaic in any context: commercial or non-commercial,
--    public or private, open or closed source.
--
--    See https://github.com/d3cod3/Mosaic for documentation
--	----------------------------------------------------------
--
--
--	OF_RECT_MODE. Cambia el punto de referencia
--      en rectángulos y cuadrados
--


mouseX = 0
mouseY = 0
----------
pos = 300   -- variables globales					
lado = 400

----------------------------------------------------
function setup()

end

----------------------------------------------------
function update()

end

----------------------------------------------------
function draw()
        -- draw background first
        mosaicBackground(255,255,255,255)      -- fondo blanco sin transparencia
	
        of.setRectMode(of.RECTMODE_CENTER)     -- referencia: centro	
        of.setColor(126)
        of.drawRectangle(pos, pos, lado, lado) -- cuadrado gris
	
        of.setRectMode(of.RECTMODE_CORNER)     -- referencia: vértice superior izq.
        of.setColor(0, 0, 0, 100)
        of.drawRectangle(pos, pos, lado, lado) -- cuadrado negro transparente

end
----------------------------------------------------

Tras los comentarios y las variables de sistema, hay dos variables globales, la primera se usará para situar las coordenadas de las formas, y es así porque en ambos cuadrados el valor de la coordenada x e y va a ser el mismo (300, 300). La segunda variable indica el lado del cuadrado. Si queremos modificar el tamaño, manteniendo las proporciones de la imagen, simplemente se cambia el valor de esas variables.

El programa tiene datos solo en el bloque function draw(). Las primeras líneas de código determina el color del fondo; la primera función  of.setColor() tienen solo un parámetro, lo que indica que actúa en escala de grises, la segunda tiene cuatro parámetros, los tres primeros iguales, indicando color negro y el cuarto implica una transparencia próxima al 40%. Los valores están compensados por lo que aparentemente dibujan el mismo color.

Por defecto las coordenadas de la función of.drawRectangle() tiene como referencia el vértice superior izquierdo, que corresponde al parámetro OF_RECTMODE_CORNER, la  variable  OF_RECTMODE_CENTER cambia esa referencia al centro del cuadrado, por eso aunque los parámetros de posición de las dos funciones  son iguales, los cuadrados se ubican en lugares diferentes.

Cuando se utiliza una función que define características de las formas, se aplica a todas formas (funciones de las formas) que están situadas debajo y en las que puede incidir, si el color va a ser el mismo en todas, solo se pondría una vez .

El sistema lee el código de arriba a abajo, esto afecta al orden de superposición de las formas: lo último escrito es lo que se sitúa al frente y las formas de las primeras líneas de código quedan más al fondo. En el ejemplo, el código del cuadrado negro está escrito después del gris, y por tanto se le superpone, aunque la transparencia disuelve el gradiente de profundidad por superposición y crea visualmente otro cuadrado.

En el siguiente ejemplo, once capas de círculos se entremezclan visualmente por transparencia disolviendo el gradiente de profundidad con las superposiciones. Todos tienen el mismo color of.setColor(0, 0, 0, 40) definido desde el principio, color negro con una opacidad próxima al 15% porque los parámetros de esta función van de 0 a 255.

--
--	----------------------------------------------------------
--	Mosaic | OF Visual Patching Developer Platform            E-4-2
--
--	Copyright (c) 2018 Emanuele Mazza aka n3m3da
--
--	Mosaic is distributed under the MIT License. This gives everyone the
--    freedoms to use Mosaic in any context: commercial or non-commercial,
--    public or private, open or closed source.
--
--    See https://github.com/d3cod3/Mosaic for documentation
--	----------------------------------------------------------
--
--
--	Estructura repetición for
--  



mouseX = 0
mouseY = 0
----------
inc = 30
radioDec = 50   -- variables globales					

----------------------------------------------------
function setup()
	of.enableSmoothing()
	of.setCircleResolution(60)
end

----------------------------------------------------
function update()
     
end

----------------------------------------------------
function draw()
   -- draw background first
   mosaicBackground(255,255,255,255)    -- fondo blanco sin transparencia
   
   of.setColor(0, 0, 0, 40)	
   radio = 300	            -- variables locales
   x1 = OUTPUT_WIDTH/2      -- vuelven a tener su valor inicial cada frame
   x2 = OUTPUT_WIDTH/2
   y0 = OUTPUT_HEIGHT/2
   for i= 0, 5 do           -- hace 6 repeticiones, de 0 a 5
      x1 = x1 + inc         -- incrementa los valores en un mismo frame
      x2 = x2 - inc
      y0 = y0 + inc
      radio = radio - radioDec
      of.drawCircle(x1, y0, radio)  -- dibuja 6 pares de círculos con los datos
      of.drawCircle(x2, y0, radio)
   end
end
----------------------------------------------------

Las coordenadas del centro del primer círculo son (OUTPUT_WIDTH/2, OUTPUT_HEIGHT/2), que corresponden al centro de la ventana de salida. Los centros de los otros círculos mantienen relaciones con ese punto, desplazándose 45º hacia abajo a ambos lados, sus coordenadas varían de forma regular: los que se desplazan hacia la derecha suman 30 px en dirección X e Y, y los que lo hacen hacia la izquierda -30 px en la X y 30 px en la Y, por lo que resulta fácil resolverlo con una estructura de repetición for.

Formas irregulares

 Las formas lineales irregulares requieren las funciones:

of.beginShape() -- sin parámetros, indica inicio forma
of.vertex(x, y) -- coordenadas x, y, del vértice
of.endShape(booleano) -- true o false para cerrar, o no, la forma

of.beginShape() se utiliza como aviso de que se va a  iniciar una nueva forma, esta forma estará definida por una serie de vértices con of.vertex(x,y) y  tras ellos debe terminar con la función of.endShape(). Su variable booleana indica si la forma se cierra, es decir si el último vertex se une al primero, cuando es true, o si queda abierta cuando es false.

--[[
Lua-Mosaic E-4-4
------------------------------------
Formas irregulares lineales
]]

function setup()
of.enableSmoothing()
end

function draw()
    -- draw background first
    mosaicBackground(255,255,255,255) -- fondo blanco

    of.noFill()            -- sin relleno
    of.setLineWidth(3)     -- grosor línea
    of.setColor(0)         -- color negro
    of.beginShape()        -- aviso empieza forma
        of.vertex(146, 75) -- coordenadas de los vértices
        of.vertex(210, 117)
        of.vertex(210, 589)
        of.vertex(226, 589)
        of.vertex(190, 217)
        of.vertex(254, 132)
        of.vertex(310, 117)
    of.endShape(false)     -- fin forma: abierta
end

Para las  formas irregulares no lineales hay dos opciones: curvas o bezier, y en ambos tipos se construyen con vértices. Las funciones son:

of.drawCurve(cx1, cy1, x1, y1, x2, y2, cx2, cy2)
of.curveVertex(x, y)

of.drawBezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2)
of.bezierVertex(cx1, cy1, cx2, cy2, x2, y2)

La función of.curveVertex(x,y) también necesita señalar el principio y fin de la forma, y lo hace con las mismas funciones: of.beginShape() y of.endShape(). Deben utilizarse al menos cuatro funciones of.curveVertex(x,y) porque en la primera y la última, los parámetros (x,y) corresponden a los puntos de control, siendo los parámetros de las otras funciones los que definen los vértices de la curva,

El siguiente ejemplo compara la función of.curveVertex() con el anterior de formas lineales realizado con of.vertex(), desplazando el valor de las coordenadas x, además se repiten la primera y última función por ser las de control.

--[[
 Lua-Mosaic ejemplos        E-4-5
 --------------------------------
 Compara ofVertex y ofCurveVertex

]]
-- pegad aquí ejemplo anterior
-- sin el end final

  of.beginShape()
    of.curveVertex(446, 75)		-- define punto de control 1: no se dibuja
    of.curveVertex(446, 75)		-- inicia la curva
    of.curveVertex(510, 117)
    of.curveVertex(510, 589)
    of.curveVertex(490, 217)
    of.curveVertex(554, 132)
    of.curveVertex(610, 117)	        -- termina la curva
    of.curveVertex(610, 117)	        -- define  punto de control 2: no se dibuja				
  of.endShape(false)			-- fin forma: no cierra          					
end

Las funciones of.drawCurve() y of.drawBezier() no requieren señalar el inicio y final de una forma. En ambas, sus 8 parámetros indican dos coordenadas de principio y fin de las curvas  (x1, y1, x2, y2)  y dos coordenadas de puntos de control (cx1, cy1, cx2, cy2), desde los que se genera la curva o el trazado de la bezier. El orden de estos parámetros no es el mismo en las dos funciones. Veamos un ejemplo con las mismas coordenadas en ambas funciones para observar sus diferencias:

--[[ 
Lua-Mosaic               E-4-6
 -----------------------------
 comparación ofCurve y ofBezier

]]

function setup()
end

function draw()
     -- draw background first
     mosaicBackground(255,255,255,255)  -- fondo blanco
	
     of.setColor(0)
     of.noFill()                     -- representan los puntos de control	
     of.drawCircle(25, 254, 4)       -- para ver dónde va punto control1 (cx1, cy1)
     of.drawCircle(115, 350, 4)      -- y dónde el punto de control2 (cx2, cy2)
     of.drawLine(25, 254, 188, 208)  -- representa linea control1, inicio curva
     of.drawLine(115, 350, 300, 370) -- representa linea control2, fin curva
     of.setLineWidth(3)              -- grosor línea	
      -- of.drawCurve(cx1, cy1, x1, y1, x2, y2, cx2, cy2) para ver orden coordenadas
     of.drawCurve(25, 254, 188, 208, 300, 370, 115, 350)         -- curva color negro
     of.setColor(255, 0, 0)
      --of.drawBezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2) para ver orden coordenadas
     of.drawBezier(188, 208, 25, 254, 115, 350, 300, 370)        -- bezier color rojo
end

Por último, la función of.bezierVertex(cx1, cy1, cx2, cy2, x2, y2) como tiene sólo 6 parámetros, debe estar precedida siempre por of.vertex(x,y) cuyas coordenadas indican el inicio de la curva. Los 4 primeros parámetros (cx1, cy1, cx2, cy2,) de of.bezierVertex() posicionan los dos puntos de control, y los dos últimos, (x2, y2), el final de la curva. Si se encadenan varias funciones seguidas, esta última coordenada indica dónde empezará la siguiente. También deben situarse entre of.beginShape() y of.endShape().

--[[
 Lua-Mosaic          E-4-7
 -------------------------
 Curvas bezier encadenadas

]]

function setup()
  of.enableSmoothing()
end

function draw()
     -- draw background first
     mosaicBackground(255,255,255,255)    -- fondo blanco

     of.setColor(0)
     of.noFill()                     -- representan los puntos de control  
     of.drawCircle(25, 254, 4)       -- para ver dónde va punto control1 (cx1, cy1)
     of.drawCircle(115, 350, 4)      -- y dónde va punto control2 (cx2, cy2)
     of.drawLine(25, 254, 190, 210)  -- representa linea de control1, inicio curva
     of.drawLine(115, 350, 300, 370) -- representa linea de control2, fin curva
     of.setLineWidth(3)              -- grosor línea 
 
         --of.curve(cx1, cy1, x1, y1, x2, y2, cx2, cy2) para ver orden coordenadas
     of.curve(25, 254, 190, 210, 300, 370, 115, 350)           -- curva color negro
     of.setColor(255, 0, 0)
         --of.bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2) para ver orden coordenadas
     of.bezier(190, 210, 25, 254, 115, 350, 300, 370)           -- bezier color rojo
end