Tangible Timeline [EN]

1. Overview

We propose to build a prototype that offers the user an experince of a tangible timeline. The context of interaction could be a museum or any other exhibition space.
The idea behind the project is to give the visitor the opportunity to explore and interact physically with the digital media in a fast and direct way.

2. Materials

Arduino board
Potentiometer 10kA
Cover potentiometer
Wiring (3x20cm)
Cardboard (about 40x30cm)
Tape
scissors

3. Setup Potentiometer

– Cut the cylinder potentiometer until about 2cm long.

– Solder the 3 wires to the potentiometer, preferably, apply heat shrinkable sleeves to contacts.

-If you are not in the mood to solder than you can always use 3 female jump wires.

4. build the cardboard mask

– On the monitor you will install the prototype, open this image that contains the outline that defines the display area of the timeline.

– With the help of a compass, mark the outline of the mask on the cardboard.

– Cut out the outline.

5. Install the potentiometer

– In the previous step, the itp of the compass made ​​a small hole in the center of the card. With the tip of a pen or scissors, widen the hole and insert the potentiometer behind the card. On the front side, secure it by tightening the nut.

– Install the rotary potentiometer (knob). Depending on the model, first remove the colored cap. Inside you will find the screw that secures the cylinder potentiometer. Attach the handle to adjust the cylinder cover.

– Connect the potentiometer to the arduino. The outside pins should match 5V and GND while the pin in the center should be wired to arduino’s an0

6. Code for Arduino

The arduino needs a program that reads the value of the potentiometer (an0) and forward the value throught the serial communications port.

– Program your arduino with the following code.

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, example nº1 – Image Rotation

Overview
In this first example, the processing displays a graphic of human evolution. The value of the potentiometer is calibrated and then converted into an angle. In turn, the latter value is used to apply a rotation to the image “monkeys.jpg.”
On top of it, a still image (in the PNG format) is placed. The PNG image is transparent on his central region and aims to visually soften the edges of the animation.

– use Processing stable version (1.5.1), because Serial module is not working yet on last versions (>2.0).

– Create a new sketch on Processing and insert the following code:

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); 
}

– Save the project.

– Copy into project’s folder the following images:


Processing, example nº2 – Image mask operations

The second example we present consists of superimposing two almost identical images. Using The values ​​from the pot the mask associated with the top image is rotated in real time and unravels the bottom image.
The program allows to explore between 3 different scenarios (3 pairs of images). For this one should press 1, 2 and 3, respectively.

– use Processing stable version (1.5.1), because Serial module is not working yet on last versions (>2.0).

– Create a new sketch on Processing and insert the following code:

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));

}

– Save the project.

– Copy into project’s folder the following images:

Anúncios