This weekend I have tested out the "Trackmate" library for Processing which is perfect for my project because it enables webcams to track objects simply by printing out small tags and sticking them to the objects I want to track. This enables me to use physical objects as tools for the user to decrypt my interactive display. I can implement as many track able objects as I want into my project which is great if I want to vary the difficulty of the decryption.
The ways in which my project can be decrypted could either be by rotating the objects much like a briefcase combination lock or by using the values generated by calculating the distance between two objects to change the colour of the background which would therefore reveal a hidden image.
So far i've coded the library in a quite simple way so that I know it's functioning correctly, the sketch at the moment will just fill the background in the colour black until one of the trackable tags are detected by the camera in which case the background would turn white.
// we need to import the LusidOSC library and declare a LusidClient variable
import lusidOSC.*;
LusidClient lusidClient;
// setup: this gets called once when the application starts.
void setup() {
// setup the processing display window size and type
size(640,480);
// Create an instance of the LusidClient. The LusidClient expects
// an implementation of the 3 LusidOSC callback methods (see below).
lusidClient = new LusidClient(this);
}
// -------------------------------------------------------------------
// these methods are called whenever a LusidOSC event occurs.
// -------------------------------------------------------------------
// called when an object is added to the scene
void addLusidObject(LusidObject lObj) {
println("Hello");
}
// called when an object is removed from the scene
void removeLusidObject(LusidObject lObj) {
}
// called when an object is moved/updated
void updateLusidObject (LusidObject lObj) {
}
void draw(){
// try to get the object if it is present...
LusidObject lObj = lusidClient.getLusidObject("0x08D03B05BA29");
if(lObj != null){
println("Object is present! -- x:"+lObj.getX()+", y:"+lObj.getY());
background(255,255,255);
}else{
println("Object was not found.");
background(0,0,0);
}
}
Monday, 1 December 2014
Tuesday, 25 November 2014
Exploding image (Processing)
In this week's workshop we compiled all of the code we learnt from the "Agents" and "Vectors" workshop and was tasked to create an image which exploded on mouse click and then the pixels would disperse by forces such as velocity and gravity. The code basically involves firstly declaring variables and loading the image with img = loadImage("apple.jpg"); and setting the size of the canvas as same size as the image. You can see that's its coded so that gravity, position and velocity are linked together which means when velocity is bound to y it has all of the forces.
PImage img;
PVector grav;
ArrayList agents;
int p = 2;
float r,g,b;
void setup(){
background(255);
img = loadImage("apple.jpg");
size(img.width,img.height);
agents = imageToAgents();
}
void draw(){
background(255);
for (int i = 0; i < agents.size(); i++) {
Agent tempA = (Agent)agents.get(i);
if (mousePressed){
tempA.update();
}
tempA.draw();
}
}
ArrayList imageToAgents() {
ArrayList agents = new ArrayList();
img.loadPixels();
for(int x = 0; x < img.width; x += p){
for (int y = 0; y < img.height; y += p){
int loc = x + (y * img.width);
color c = img.pixels[loc];
Agent pixel = new Agent(x,y,c);
agents.add(pixel);
}
}
return agents;
}
class Agent {
PVector pos,vel,grav,force;
float x,y;
color c;
Agent(int x, int y, color c){
this.x = x;
this.y = y;
this.c = c;
grav = new PVector (0,random(0.5,1));
pos = new PVector (x,y);
force = new PVector();
vel = new PVector(random(-9,9),random(-9,9));
}
void update(){
force.set(grav);
vel.add(force);
vel.mult(0.99);
pos.add(vel);
}
void draw() {
fill(c);
noStroke();
rect(pos.x,pos.y,p,p);
}
}
Pseudo Code For Previous Projects
One part of the planning process when considering whether a project is feasible or not is to create pseudo code. Pseudo code is normally produced by designers as a way of conveying the desired functionality of a project to coders in a way a text they understand.
Here is some pseudo code i've produced for two projects while I was at college;
This Pseudo code has been created with knowledge that the
game will be created in the Stencyl game engine so any code relating to animations has been
excluded. The pseudo code was useful because it enabled the level designers to understand roughly how the game functions for example they know that the jump height of the playable character is fixed meaning that the space between jumpable platforms shouldn't exceed a certain length or height. We also used pseudo code when developing a board game as its a very useful method for clarifying the mechanics of a game which then enables the members of the group who focus on the aesthetic elements of the project to design according to the technical specification in the pseudo code.
Variables
Running
Jumping
Collisions
GUI
For the IT project the pseudo code was initially produced and then shown to the client pending their approval. If the client was happy that the pseudo code met the requirements of their brief it would then be passed onto the coder who would implement it.
Repeat Duration 10 Seconds
Wait 10 seconds
Here is some pseudo code i've produced for two projects while I was at college;
2D Platform game using Stencyl (3 person project)
Variables
Var Player
Var Player2
Var runningspeedleft:
number
= 10
Var
runningspeedright:number =10
Var Jumpingheight:number = 15
Var GoldCup
Var Score:number = 0
Var Health:number = 1
Var Enemy
Running
{
If
Right Key is down
Player.X > runningspeedright
}
{
If
Left Key is down
Player.X<runningspeedleft
}
Jumping
{
If
Up Key is down
Player.Y >Jumpingheight
}
Collisions
{
When Player collides
with GoldCup
Set Score + 100
RemoveChild(GoldCup);
Create Player2 at Player.X + Player.Y
Set Health =+1
}
{
When Player collides with Enemy
Set Health =-1
Set Score =-300
If Health = 0
Player.X = 0
Player.Y = 0
}
GUI
{
Print Score.txt at X =20 + Y = 20
Print Health.txt at X =20 + Y =30
}
IT Security Robot
For the IT project the pseudo code was initially produced and then shown to the client pending their approval. If the client was happy that the pseudo code met the requirements of their brief it would then be passed onto the coder who would implement it.
NXT Brick 1
(Message Sender Robot)
Run “Door Alarm”
Repeat Duration 10 Seconds
If Target is within 30 centimetres then
Status is “True”
Else Continue
running till Status is set to “True”
If Status set =
“True”
Run
Block
“Send Message”
Wait 10 seconds
Loop Duration “Unlimited”
NXT Brick 2
(Message Receiver Robot)
Run “Receiver”
If Logic is “True”
Run Receive Message
Run
Text “Alarm”
Run Sound
“Alarm”
Wait 10 seconds
Else Wait till Logic is “True”
Monday, 24 November 2014
Metaio Face Tracking
An augmented reality company called Metaio has developed a piece of software which enables users to trigger various different interactive features simply by the software detecting a face. The software can import 3D models onto faces such as masks, glasses and hats. This feature could be used by clothing retailers as a way in which their users can preview clothing in the comfort of their own home. The software could be developed further so that it can link to a users social media profile simply by identifying your face, this could be used as a way to personalise shopping suggestions to customers. Currently there are simple interactive features such as links to YouTube channels and webpages. There is a video showing this software creating a 3D reconstruction of a users face which is an interesting feature which could be adapted further so that it stores the user's face and uses them in interesting ways.
These type of interactions would be useful to incorporate into my public display as a way to engage the audience further and endorse my own work. There is an JavaScript API for Metaio on their website which I researched to determine if there is a way to implement some of it's features into my Processing sketch however due to it being relatively new there was very little support available therefore I determined it wouldn't be feasible to continue with this idea.
Sunday, 16 November 2014
Interactive Display Research
One piece of software which I found on Steam called FaceRig I found very interesting, after conducting some research into the requirements of making custom avatars I found out that it's very similar to the 3D output used by FaceGen Modeler which I use for my DAZ3D renders.
The software requires the user to show their face in a webcam which is then tracked and overlayed by the software with a 3D character's face. This enables you to create interactive displays where you pretend to be a virtual character. A video on youtube shows an installation someone made using this software during Halloween.
This is a technique I would like to replicate for my public display project however in the project brief it states that i'm required to use processing so will need to research ways in which I could replicate a similar effect using processing.
The software requires the user to show their face in a webcam which is then tracked and overlayed by the software with a 3D character's face. This enables you to create interactive displays where you pretend to be a virtual character. A video on youtube shows an installation someone made using this software during Halloween.
This is a technique I would like to replicate for my public display project however in the project brief it states that i'm required to use processing so will need to research ways in which I could replicate a similar effect using processing.
Media Concept Idea for Public Screen Project
For the design iteration project i'm required to create a piece of interactive work which will be displayed in a public space. The interactive work must revolve around a digital design concept for example ideas such as surveillance, abstraction and compression are all acceptable concepts to work with. The concepts I'm going to be working with are 'distortion' and 'decryption'. Distortion is somewhat similar to encryption as they both involve the process of hiding information from users.
Distortion is a process when something like an image is altered in a certain way which causes it's visual clarity to be hindered. Distortion is sometimes used in the media industry to hide a person's face which therefore makes it very difficult to identify someone. Distortion is often used on news channels when interviewees want to speak out about something but remain anonymous, the visual distortion of the face as well as the distortion of the voice ensures the interviewee remains anonymous.
Distortion can also be a technique utilized by artists in order to convey emotions such as confusion or uncertainty. Anamorphosis is a distortion technique which basically requires the audience to view a painting or installation at a certain angle to see it clearly as viewing it at any other angle will cause it to be distorted. A painting by Hans Holbein's called the "Holbein Skull" uses the technique of Anamorphosis, the image is completely distorted if not viewed at the correct angle.
Distortion is a process when something like an image is altered in a certain way which causes it's visual clarity to be hindered. Distortion is sometimes used in the media industry to hide a person's face which therefore makes it very difficult to identify someone. Distortion is often used on news channels when interviewees want to speak out about something but remain anonymous, the visual distortion of the face as well as the distortion of the voice ensures the interviewee remains anonymous.
The second concept I will be utilizing in my project is that of decryption. decryption is the process of revealing encrypted data, decryption is normally done using a password or key which when inputted correctly causes the hidden data to be revealed. My idea for a project is to present the audience with a distorted image or piece of information and its the role of the audience to interact with either physical objects linked to the installation or to interact with virtual objects on the screen. The user is required to put the objects in a particular order or interact with the objects in a particular sequence to decrypt the distorted image. The objects being interacted with would be something significant to digital media for example one idea is to use storage devices such as a floppy disk, memory stick and hard drive. I may present the user with a direct question which will aid them in solving the puzzle or another idea would be to instead leave it to the user to decide whether they are supposed to put the objects in order of storage capacity or order of introduction.
Holbein, H. (1533). The anamorphic skull. Available: http://en.wikipedia.org/wiki/The_Ambassadors_(Holbein)#mediaviewer/File:Holbein_Skull.jpg. Last accessed 16th Nov 2014.
Friday, 7 November 2014
Inspirational Audio Visualization
I have previously blogged about this visual audio visualization when conducting research into animation however now that i'm researching data visualization I thought I'll revisit this as it's one of my favorite visual animations and has inspired me to create a data visualization with similar properties as this.
When analysing this video one of the most appealing elements of the visualisation is the effect of synchronising the music with the movements of the dynamic particles. The music has a sudden beat which serves as a trigger for a sudden change in direction for the particles however the movements of the particles during the majority of the song is seamless. The visualisation starts quite slowly however as the tempo of the music increases so does the complexity of the particle effects.
The elements of the video which I would like to replicate in my work are the ways in which the particles transition into interesting shapes and colours.
Subscribe to:
Posts (Atom)






