Midterm Project-Interactive Canvas

Tianyu Wang
Measuring the Great Indoors
4 min readOct 30, 2019

Guiding IDEA

Since it’s not possible to create an indoor environment that makes all the users feel comfortable and the need for human comfort may vary from space to space, the reasonable way is to create an environment for a specific indoor space that allows a high percentage of users to gain comfort. However, there are so many elements(temperature, smell, lighting, color..) controlling the environmental condition, test and feedback from people is needed. I am interested in creating a system that can allow people to vote for the environment they are in, then using different devices to change the conditions of the indoor space. Through the system, I am able to study how different combinations of environmental elements affect human comfort and then there may be a way to keep approaching the “perfect” environment for a specific indoor space.

Midterm Project: interactive canvas

As above mentioned, measuring the people’s action is more important to me than only measuring the indoor environment. So this prototype is attempting to achieve the goal of giving people the power of changing indoor environments and collecting people or objects’ movement data in the space.

Equipment

Webcam; Projector; Laptop

Software

Processing 3; Tuio; ReacTIVision

“It’s like sex o’clock when they turn on the light of a night club. All this left are the cups, cigarettes and other things. That’s what left. It’s not the actual party. It’s the ghost of the interaction of people that are left on the wall.”

Code:

import TUIO.*;
TuioProcessing tuioClient;
float cursor_size = 15;
float object_size = 60;
float table_size = 760;
float scale_factor = 1;
PFont font;
float csize;
float r;
float g;
float b;
float id;
boolean verbose = false; // print console debug messages
boolean callback = true; // updates only after callbacks
public void settings() {
size(1920, 1080);
}
void setup()
{
background(255);
// GUI setup
noCursor();
//size(1920, 1080);
noStroke();
fill(0);

// periodic updates
if (!callback) {
frameRate(60);
loop();
} else noLoop(); // or callback updates

font = createFont("Arial", 18);
scale_factor = height/table_size;

// finally we create an instance of the TuioProcessing client
// since we add "this" class as an argument the TuioProcessing class expects
// an implementation of the TUIO callback methods in this class (see below)
tuioClient = new TuioProcessing(this);
}
// within the draw method we retrieve an ArrayList of type <TuioObject>, <TuioCursor> or <TuioBlob>
// from the TuioProcessing client and then loops over all lists to draw the graphical feedback.
void draw()
{
//fill(255,255,255,5);
//noStroke();
//rect(0,0,1920,1080);
textFont(font,18*scale_factor);
float obj_size = object_size*scale_factor;
float cur_size = cursor_size*scale_factor;

ArrayList<TuioObject> tuioObjectList = tuioClient.getTuioObjectList();
for (int i=0;i<tuioObjectList.size();i++) {
TuioObject tobj = tuioObjectList.get(i);
id=tobj.getSymbolID();
if(id%3==0){
r=255;
g=0;
b=0;
}else if(id%3==1){
r=0;
g=255;
b=0;
}else if(id%3==2){
r=0;
g=0;
b=255;
}
pushMatrix();
translate(tobj.getScreenX(width),tobj.getScreenY(height));
//rotate(tobj.getAngle());
float x= -obj_size/2;
float y= -obj_size/2;
x += random(-20,20);
y += random(-20,20);
csize= random(20,300);
noStroke();
fill(r,g,b,20);
ellipse(x,y,csize,csize);

//rect(-obj_size/2,-obj_size/2,obj_size,obj_size);
popMatrix();
//fill(255);
//text(""+tobj.getSymbolID(), tobj.getScreenX(width), tobj.getScreenY(height));
}
}
// --------------------------------------------------------------
// these callback methods are called whenever a TUIO event occurs
// there are three callbacks for add/set/del events for each object/cursor/blob type
// the final refresh callback marks the end of each TUIO frame
// called when an object is added to the scene
void addTuioObject(TuioObject tobj) {
if (verbose) println("add obj "+tobj.getSymbolID()+" ("+tobj.getSessionID()+") "+tobj.getX()+" "+tobj.getY()+" "+tobj.getAngle());
}
// called when an object is moved
void updateTuioObject (TuioObject tobj) {
if (verbose) println("set obj "+tobj.getSymbolID()+" ("+tobj.getSessionID()+") "+tobj.getX()+" "+tobj.getY()+" "+tobj.getAngle()
+" "+tobj.getMotionSpeed()+" "+tobj.getRotationSpeed()+" "+tobj.getMotionAccel()+" "+tobj.getRotationAccel());
}
// called when an object is removed from the scene
void removeTuioObject(TuioObject tobj) {
if (verbose) println("del obj "+tobj.getSymbolID()+" ("+tobj.getSessionID()+")");
}
// --------------------------------------------------------------
// called when a cursor is added to the scene
void addTuioCursor(TuioCursor tcur) {
if (verbose) println("add cur "+tcur.getCursorID()+" ("+tcur.getSessionID()+ ") " +tcur.getX()+" "+tcur.getY());
//redraw();
}
// called when a cursor is moved
void updateTuioCursor (TuioCursor tcur) {
if (verbose) println("set cur "+tcur.getCursorID()+" ("+tcur.getSessionID()+ ") " +tcur.getX()+" "+tcur.getY()
+" "+tcur.getMotionSpeed()+" "+tcur.getMotionAccel());
//redraw();
}
// called when a cursor is removed from the scene
void removeTuioCursor(TuioCursor tcur) {
if (verbose) println("del cur "+tcur.getCursorID()+" ("+tcur.getSessionID()+")");
//redraw()
}
// --------------------------------------------------------------
// called when a blob is added to the scene
void addTuioBlob(TuioBlob tblb) {
if (verbose) println("add blb "+tblb.getBlobID()+" ("+tblb.getSessionID()+") "+tblb.getX()+" "+tblb.getY()+" "+tblb.getAngle()+" "+tblb.getWidth()+" "+tblb.getHeight()+" "+tblb.getArea());
//redraw();
}
// called when a blob is moved
void updateTuioBlob (TuioBlob tblb) {
if (verbose) println("set blb "+tblb.getBlobID()+" ("+tblb.getSessionID()+") "+tblb.getX()+" "+tblb.getY()+" "+tblb.getAngle()+" "+tblb.getWidth()+" "+tblb.getHeight()+" "+tblb.getArea()
+" "+tblb.getMotionSpeed()+" "+tblb.getRotationSpeed()+" "+tblb.getMotionAccel()+" "+tblb.getRotationAccel());
//redraw()
}
// called when a blob is removed from the scene
void removeTuioBlob(TuioBlob tblb) {
if (verbose) println("del blb "+tblb.getBlobID()+" ("+tblb.getSessionID()+")");
//redraw()
}
// --------------------------------------------------------------
// called at the end of each TUIO frame
void refresh(TuioTime frameTime) {
if (verbose) println("frame #"+frameTime.getFrameID()+" ("+frameTime.getTotalMilliseconds()+")");
if (callback) redraw();
}

--

--