Interactividad por eventos de ratón

En las fases de desarrollo de un proyecto de arte interactivo es común ensayar los resultados buscados mediante pruebas de interacción con eventos de ratón y teclado, técnicamente más simples, tanto a nivel de programación como de las condiciones de instalación física de los dispositivos (por ejemplo en los casos de tracking video).  De esta forma se puede comprobar su funcionamiento mediante una simulación de la posición del espectador con la posición del ratón, o de los diferentes estados que plantea el proyecto con eventos de ratón.

Para que se comuniquen estos datos el objeto Lua script tiene que conectarse al objeto Output Window por el cable azul que transmite la textura, y también con el cable rojo que transmite los datos de ratón y teclado con la ventana de salida. Es solo sobre esa ventana de salida o de proyector donde se produce la interactividad.

Interactividad por eventos de ratón

A través de la programación el sistema informa cuál es la posición del ratón, si se ha movido, si tiene el botón presionado, si lo ha soltado o se está arrastrando.

En la plantilla de Lua script de Mosaic se articulan los eventos de ratón a través de bloques de función que permiten programar acciones que serán efectuadas cuando esos eventos sucedan.

function mouseDragged(x,y)   -- Cuando se arrastra el ratón con el botón apretado
        mouseX = x 
        mouseY = y
end

function mouseMoved(x,y)     --  Cuando se mueve el ratón
         mouseX = x          --  Estas líneas preconfiguradas dan la posición del ratón
         mouseY = y
end

function mouseReleased(x,y)  -- Cuando se suelta el botón del ratón
         mouseX = x          
         mouseY = y
end

function mouseScrolled(x,y)  -- Cuando se hace scroll con el botón específico
                             -- del ratón o del trackpad
end

Las variables de sistema mouseX, mouseY están preconfiguradas , vinculadas directamente a esos bloques por lo que nos da la posición x e y del ratón.

Estas variables, mouseX, mouseY, nunca se sitúan en el bloque setup() porque cuando el programa se pone en marcha la posición del ratón es (0,0) y el código escrito en el bloque setup() solo se lee una vez.  Desde los bloques mouseMoved(x,y) mouseDragged(x,y)  se informa al sistema de la posición actualizada del ratón en cada frame.

Para establecer relaciones de interactividad básica entre la posición del ratón y la de una forma, el código es sencillo:

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

          of.setColor(0)
          of.drawCircle(mouseX, mouseY, 50) -- el centro vinculado a la posición del ratón
end

Aunque también se pueden establecer relaciones menos evidentes si se combinan operadores matemáticos que aumenten o disminuyan determinados valores, por ejemplo un ligero desplazamiento:

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

          of.setColor(0)
          of.drawCircle(OUTPUT_WIDTH - mouseX, OUTPUT_HEIGHT - mouseY, 50)
end

La relación inversa entre la dimensión de la ventana de salida respecto a la posición del ratón hace que el movimiento responda a direcciones con sentido contrario. También puede aplicarse el valor de las coordenadas X,Y del ratón a las dimensiones de las formas que cambiarán de tamaño según el movimiento del ratón.

El siguiente ejemplo plantea el control de las imágenes a proyectar en función de la posición del ratón, como una posible simulación del movimiento del espectador.

---------------------------------- MOSAIC SPECIFIC CODING INFO


----------------------------------- MOSAIC VARS (DO NOT TOUCH)

-- variables for mouse interaction
mouseX = 0
mouseY = 0

-- variable for storing _mosaic_data_inlet size
mosaic_data_inlet_size = 0
----------------------------------- MOSAIC VARS (DO NOT TOUCH)

----------------------------------- MY VARS

imag1 = of.Image()
imag2 = of.Image()
imag3 = of.Image()
imag4 = of.Image()

----------------------------------- MY VARS

----------------------------------------------------

-- main methods

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

	------------------------------------------------ MY CODE

	imag1:load(SCRIPT_PATH .. "/image1.jpg")
	imag2:load(SCRIPT_PATH .. "/image2.jpg")
	imag3:load(SCRIPT_PATH .. "/image3.jpg")
	imag4:load(SCRIPT_PATH .. "/image4.jpg")

	------------------------------------------------ MY CODE

end

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

	------------------------------------------------ MOSAIC CODE
	mosaic_data_inlet_size = getMosaicDataInletSize()
	------------------------------------------------ MOSAIC CODE

	------------------------------------------------ MY CODE

	-- add here your update code

	------------------------------------------------ MY CODE

end

----------------------------------------------------
function draw()

	------------------------------------------------ MOSAIC CODE
	checkMosaicDataInlet()
	------------------------------------------------ MOSAIC CODE

	------------------------------------------------ MY CODE

	-- draw background first
	mosaicBackground(0,0,0,255)

	of.setColor(255)
	if mouseX > 0 and mouseX < OUTPUT_WIDTH/4 then 
             imag1:draw(0, 0, 317, 320) 
        elseif mouseX> OUTPUT_WIDTH/4 and mouseX < OUTPUT_WIDTH/2 then 
             imag2:draw(OUTPUT_WIDTH/4, 0, 317, 320) 
        elseif mouseX > OUTPUT_WIDTH/2 and mouseX < (OUTPUT_WIDTH/4)*3 then 
             imag3:draw(OUTPUT_WIDTH/2, 0, 317, 320) 
        elseif mouseX > (OUTPUT_WIDTH/4)*3 then
		imag4:draw((OUTPUT_WIDTH/4)*3, 0, 317, 320)
	end
end

----------------------------------------------------
function exit()

end

----------------------------------------------------

-- input callbacks

----------------------------------------------------
function keyPressed(key)

end

----------------------------------------------------
function keyReleased(key)

end

----------------------------------------------------
function mouseMoved(x,y)
	mouseX = x
	mouseY = y
end

----------------------------------------------------
function mouseDragged(x,y)
	mouseX = x
	mouseY = y
end

En el código hay acciones repetidas que podrían simplificarse utilizando estructuras de programación más complejas, en este caso las imágenes conforman una tabla (array de imágenes) que se cargan como se ve en el tema Scripting Lua para archivos de imagen, texto, audio y video.

Las condicionales vinculadas a la posición del ratón también podrían estar en el bloque mouseMoved() que actualiza los datos cada vez que se mueve el ratón.

Aquí otra versión del código en el que las imágenes, con mucha transparencia, están siempre proyectadas y, en función de la posición del ratón, se ilumina (sin transparencia) la imagen que corresponde.

----------------------------------- MOSAIC VARS (DO NOT TOUCH)

-- variables for mouse interaction
mouseX = 0
mouseY = 0

-- variable for storing _mosaic_data_inlet size
mosaic_data_inlet_size = 0
----------------------------------- MOSAIC VARS (DO NOT TOUCH)

----------------------------------- MY VARS

images = {}         -- declara tabla de imágenes
currentImage = 0    -- imagen actual
numImages = 4
posx = 0

----------------------------------- MY VARS

----------------------------------------------------

-- main methods

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

    ------------------------------------------------ MY CODE
    for i=1,numImages do                            -- carga todas las imágenes
     images[i] = of.Image()
     file = string.format("/image%i.jpg",i)
     -- of.log(of.LOG_NOTICE,SCRIPT_PATH .. file)   -- para monitorizar que la carga ha ido bien
     images[i]:load(SCRIPT_PATH .. file)
 end
    ------------------------------------------------ MY CODE
end
----------------------------------------------------
function update()

    ------------------------------------------------ MOSAIC CODE
    mosaic_data_inlet_size = getMosaicDataInletSize()

    ------------------------------------------------ MOSAIC CODE
    ------------------------------------------------ MY CODE
    ------------------------------------------------ MY CODE
end

----------------------------------------------------
function draw()

    ------------------------------------------------ MOSAIC CODE
    checkMosaicDataInlet()
    ------------------------------------------------ MOSAIC CODE

    ------------------------------------------------ MY CODE
    -- draw background first
    mosaicBackground(0,0,0,255)
    of.setColor(255, 255, 255, 60)
    x = 0
    for i=1,numImages do
        images[i]:draw(x, 0, OUTPUT_WIDTH/numImages, 320)
        x = x + OUTPUT_WIDTH/numImages
    end

    of.setColor(255)
    if mouseX > 1 then
        images[actuaImage]:draw(posx, 0, OUTPUT_WIDTH/numImages, 320)
    end

    ------------------------------------------------ MY CODE
end

----------------------------------------------------
function exit()

end

----------------------------------------------------

-- input callbacks

----------------------------------------------------
function keyPressed(key)

end

----------------------------------------------------
function keyReleased(key)

end

----------------------------------------------------
function mouseMoved(x,y)
    mouseX = x
    mouseY = y

    if mouseX >1 then
        if mouseX > 0 and mouseX < OUTPUT_WIDTH/4 then
            actuaImage= 1
            posx = 0
        elseif mouseX> OUTPUT_WIDTH/4 and mouseX < OUTPUT_WIDTH/2 then
            actuaImage= 2
            posx = OUTPUT_WIDTH/4
        elseif mouseX > OUTPUT_WIDTH/2 and mouseX < (OUTPUT_WIDTH/4)*3 then
            actuaImage= 3
            posx = OUTPUT_WIDTH/2
        elseif mouseX > (OUTPUT_WIDTH/4)*3 then
            actuaImage= 4
            posx = (OUTPUT_WIDTH/4)*3
        end
    end

end

----------------------------------------------------
function mouseDragged(x,y)
    mouseX = x
    mouseY = y
end

----------------------------------------------------