Transformar: traslación, rotación, escalar

Ahora bien, sabemos, por un conocido pasaje de la República, que el espín de la peonza le había planteado a Platón el difícil problema del reposo y el movimiento. Porque dando vueltas es estable, contradicción. Platón se las ingenia para afirmar que ésta está en reposo en relación con lo recto, y en movimiento en relación con lo redondo, lo cual es verdadero sólo a condición de ignorar que su eje es tanto más estable cuanto más rápido gira. Los mecánicos griegos no conocían, por cierto, el teorema, pero el hecho, supongo, jamás fue ignorado por los niños. Éstos juegan con la contradicción que retrasa al filósofo. Gozan del reposo en y por el movimiento circular. De ahí que se pueda gozar de lo que da miedo, para volver al texto de Platón. La peonza no es un mal fármaco, veneno y remedio (Serres 1991, 166)

Sintaxis:

          of.pushMatrix(), of.popMatrix()

          of.translate(float, float, float), of.rotateDeg(float), of.rotateRad(float) 
          of.scale(float, float, float)

La matriz de píxels en la que se representan las formas mediante coordenadas, puede transformarse trasladándola, girándola, o escalándola, es decir, no giramos y trasladamos los objetos sino la textura de salida en su conjunto.

Por esta particularidad antes de hacer estas transformaciones se debe (se recomienda) utilizar las funciones of.pushMatrix() y of.popMatrix() para controlar ese desplazamiento. Estas funciones siempre se usan  marcando el inicio de los elementos a transformar y el final del proceso. Es como si se generara una textura paralela sobre la ventana de salida donde se aplica la transformación de las funciones.

La función of.translate(x, y, z) mueve la textura de salida desde su coordenada (0, 0, 0) hasta el punto que se indiquen los parámetros, si se está trabajando en 2D la coordenada z es 0. Solo las figuras situadas después de la función se verán afectadas por la translación.

En las transformaciones de rotación suelen utilizarse tanto las funciones of.pushMatrix() y of.popMatrix(), como of.translate(), que traslada el punto (0, 0) de la pantalla al eje de rotación. Se pueden apilar tantas superposiciones de la textura de salida como funciones se pongan en el código. Las funciones of.rotateDeg()  y  of.rotateRad() pueden tener uno o cuatro parámetros float, con uno se especifican los grados a girar en el eje Z, cuando tiene cuatro parámetros el primero son los grados y los tres últimos las coordenadas X, Y, Z del vector de rotación: of.rotateDeg(float degrees, float vecX, float vecY, float vecZ). También existen las funciones:  of.rotateXDeg(float)  of.rotateYDeg(float)  of.rotateZDeg(float), cuyo parámetro es los grados de giro en la coordenada que indica cada función, las mismas opciones están para of.rotateRad() .

Retomamos el ejemplo Rotating Disc de Duchamp para ver estas funciones con la espiral en movimiento.

--[[ Lua-Mosaic 		E-4-15
 -------------------------------------
  Duchamp Rotoreliefs en movimiento
  creado por mj & n3m3da
]]

radio = 15
spiralFactor = 15
numCircles = 23
inc = 15									
counter = 0
radioMax = (radio*(numCircles+1)) + (spiralFactor+1)

function setup()
    of.enableSmoothing()
    of.setCircleResolution(50)
end

function update()
   
end

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

  of.setColor(0)
  of.noFill()
  of.setLineWidth(3)
  of.drawCircle(OUTPUT_WIDTH/2,OUTPUT_HEIGHT/2, radioMax)
  radio = 15
  of.pushMatrix()
  of.translate(OUTPUT_WIDTH/2,OUTPUT_HEIGHT/2, 0.0)
  of.rotateZDeg(counter)
  for i = 0, numCircles do
             angulo = i* math.rad(360)/((numCircles/2) +1)
             x = (math.cos(angulo) * spiralFactor)
             y = (math.sin(angulo) * spiralFactor)
             of.drawCircle(x, y, radio)
             radio = radio + spiralFactor
  end
  of.popMatrix()
  counter = counter + 1
end

La estructura for que dibuja los círculos está después de las funciones of.pushMatrix(), of.translate(), of.rotate() que, traducido de forma simplificada es, emula una nueva capa de textura de salida, traslada su punto cero al centro y gira un número de veces (counter) que se va incrementando cada vez que el for ha terminado (counter +1), después se resitúa la textura de salida con  of.popMatrix() y vuelve a empezar el loop del bloque draw().

Algunas veces las funciones of.translate() o of.rotate() pueden ir sin of.pushMatrix() y of.popMatrix(), e incluso situarse dentro de un for, de modo que la translación se repita en cada paso del loop. En el siguiente ejemplo esa translación da la sensación de 3D, siendo una imagen 2D.

--[[
 Lua-Mosaic         E-4-16
 -------------------------
  Repetición de translación
  Basado en: (Ira Greenberg 2007, 411)
]]

angulo = 0
posY = 0
amplitud = 3

function setup()
  of.enableSmoothing()
  of.setCircleResolution(50)
end

function update()
  
end

function draw()
   -- draw background first 
  mosaicBackground(255,255,255,255) -- fondo blanco sin transparenciaT)
  of.setColor(204, 116, 5)
  of.noFill()
  radio = 0
  radioInc = 0.6
  for i = 0, OUTPUT_WIDTH do
    angulo = math.rad(i)
    posY = (math.sin(angulo) * amplitud) + radioInc
    of.translate(4, posY, 0.0)
    of.drawCircle(radio, radio, radio)
    radio = radio + radioInc
  end
end

La función of.scale(float,float,float) se utiliza para escalar el tamaño, sus 3 parámetros indican el factor de escala en los ejes X,Y, Z (si se trabaja en 2D el parámetro de Z es 1), lo que permite un escalado no uniforme.

Otra forma para escalar valores individuales (también llamado mapear) lo proporciona la función:

of.map (valor, inputMin, inputMax, outputMin, outputMax, bool)

El primer parámetro es el valor de entrada que vamos a utilizar para mapear, el segundo y tercero corresponden al rango actual de valores mínimo y máximo de esa entrada de datos. Los dos siguientes parámetros son el rango al que deseamos escalar los valores de entrada, y el último parámetro permite fijar los resultados o no, mediante la opción booleana  true o false.