Timeline tangível [PT]

1. Introdução

Neste mini projecto iremos construir um protótipo que simula a experiência de utilização de uma timeline tangível. O contexto de interação poderá ser o de um espaço expositivo ou um museu.
A ideia subjeacente ao projecto é dar a possibilidade do visitante explorar visualmente uma timeline circular a partir de um controlo físico, interagir com os conteúdos de uma forma rápida e directa.

2. Materiais

Placa Arduino
Potenciómetro de 10kA
Tampa de potenciómetro
Fios eléctricos (3x20cm)
Cartão (cerca de 40x30cm)
Fita-adesiva

3. Adequar o Potenciómetro

-Corte o bastão do potenciómentro de modo a ficar com cerca de 2cm de comprimento.

-Solde os 3 fios ao potenciómetro, de preferência, aplique manga térmica nos contactos.

-Caso não esteja com disposição para soldar pode recorrer a 3 shunts fémea também conhecidos por jump wires.

4. Construir máscara em cartão

– No ecrã em que irá instalar o protótipo, abra esta imagem modelo que contém o contorno que define a área de exibição.

– Com a ajuda de um compasso, marque no cartão o contorno da futura área de exibição.

– Recorte o contorno para obter a respectiva máscara.

5. Instalar o potenciómetro

– No passo anterior, ao marcar os círculos que definem a área de exibição, o compasso fez um pequeno furo no centro do cartão. Com o bico de uma esforagráfica ou uma tesoura, alargue o orifício e introduza o potenciómetro por trás do cartão. Na parte da frente, fixe-o apertando a porca.

– Instale o manípulo do poténciometro (knob). Dependendo do modelo, comece por retirar a tampa colorida. No seu interior encontrará o parafuso que fixa o cilindro do potenciómetro. Fixe o cilindro ao manípulo ajuste a tampa.

– Conecte o potenciómetro ao arduino. Os pinos das extremidades deverão correspondem ao pino 5V e o GND, enquanto que o pino do centro é conectado ao pino Analógio nº1.

6. Código do Arduino

O arduino necessita de um programa que leia o valor do potenciómetro no pino an0 e envie o valor pela porto de comunicações série.

– Programe o seu arduino com o seguinte código.

int pot=0;
int val;
void setup() {                
   Serial.begin(9600);
}
void loop() {
  val = analogRead(pot);
  delay(25);
      Serial.print(val);
      Serial.print(',');
      Serial.println("");
}

Processing, exemplo nº1 – rotação

Neste primeiro exemplo, o processing exibe uma infografia da evolução humana. O valor do potenciómetro é calibrado e convertido num ângulo. Por sua vez este último valor é usado para aplicar uma rotação à imagem “monkeys.jpg”.
Por cima dessa imagem, é posicionada uma imagem fixa em formato PNG, a qual, é transparente na região central, e tem por objectivo suavizar visualmente as extermidades da animação.

– No windows, use a versão estável do Processing (1.5.1); o módulo Serial não funciona correctamente nas últimas versões (>2.0).

– Crie um novo sketch no Processing e insira o seguinte código:

PImage img;
PImage msk;
import processing.serial.*;

Serial myPort;
String mensagem = null;
int val=0;
float valf=0;
void setup() 
{
  size(1200, 600);
  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 9600);
  img=loadImage("monkeys.jpg");
  msk =loadImage("mascara.png");

 background(0);
 frameRate(120);
}

void draw()
{
   background(0);
   while (myPort.available() > 0) {
    mensagem = myPort.readStringUntil(10);
    if (mensagem != null) {
      int[] pot = int(split(mensagem, ','));
      val=360*pot[0]/1024;
    }
  }
  
// suavizar os dados do potenciómetro
  valf=int(0.7*valf + 0.3*val);
  float ang=2*PI-PI*valf/180;

// rodar a imagem
 pushMatrix();
   translate(width/2,height);
   rotate(-valf*TWO_PI/360);
   translate(-width/2,-height);
   image(img,0,0);
 popMatrix();
// render da imagem superior
 image(msk,0,0); 
}

– Grave o projecto.

– Copie as seguintes imagens para o interior da pasta do projecto:


Processing, exemplo nº2 – rotação da máscara

O segundo exemplo que apresentamos neste mini projecto consiste é sobrepor duas imagens quase idênticas e, com os valores provenientes do potênciométro, rodar em tempo real a máscara que está associada à imagem superior, criando a ilusão que é o movimento de rotação do potenciómetro que desvenda a imagem.
O progrma permite explora entre 3 cenários diferentes (3 pares de imagens), para tal, deverá pressionar a tecla 1, 2 e 3, respectivamente.

– No windows, use a versão estável do Processing (1.5.1); o módulo Serial não funciona correctamente nas últimas versões (>2.0).

– Crie um novo sketch no Processing e insira o seguinte código:

PImage fg;
PImage bg;
PGraphics msk;

import processing.serial.*;

Serial myPort;
String mensagem = null;
int val=0;
float valf=0;
void setup() 
{
  size(1200, 600);
  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 9600);
  loadImgs(1);
  msk = createGraphics(1200, 600, P3D);
 background(0);
 frameRate(120);
}

void keyReleased() {
  int k=int(key)-48;
  if (k>=1 && k<=3)loadImgs(k);
}

void loadImgs(int i){
  bg=loadImage("bg"+i+"1.jpg");
  fg=loadImage("fg"+i+"1.jpg");
}

void draw()
{
   background(0);
   while (myPort.available() > 0) {
    mensagem = myPort.readStringUntil(10);
    if (mensagem != null) {
      int[] pot = int(split(mensagem, ','));
      val=360*pot[0]/1024;
    }
  }
  
  valf=int(0.7*valf + 0.3*val);
  float ang=2*PI-PI*valf/180;
  
  println(valf);
 
  msk.beginDraw();
    msk.background(0);
    msk.fill(255);
    msk.arc(600, 600, -1200, -1200, 0, ang);
  msk.endDraw();
  fg.mask(msk);
  image(bg,0,0);
  image(fg,0,0);
  
      fill(0); 
      stroke(0);
      line(600,600, 600+600*cos(PI+ang),600+600*sin(PI+ang));

}

– Grave o projecto.

– Copie as seguintes imagens para o interior da pasta do projecto:

Anúncios