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(){
  img = loadImage("apple.jpg");
  agents = imageToAgents();

void draw(){
  for (int i = 0; i < agents.size(); i++) {
     Agent tempA = (Agent)agents.get(i);
     if (mousePressed){

ArrayList imageToAgents() {
  ArrayList agents = new ArrayList();
  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);
 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(){
    void draw() {

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;

2D Platform game using Stencyl (3 person project)

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.


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


    Right Key is down
         Player.X > runningspeedright
   Left Key is down


   Up Key is down
        Player.Y >Jumpingheight


When Player collides with GoldCup
     Set Score + 100
          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


   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.

After testing the software it seems that Facerig tracks all of the movable parts of the face such as eyes, eyebrows and mouth. I would need to research examples or libraries which track such movements, I would then be able to determine if its a feasible task in 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.

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. 

Müller, M. (2010). Entering The Stronghold | Audio Visual Animation. Available: http://matthiasm.de/. Last accessed 18th Feb 2014.