For Interim

Something Working

My mouse toy aims to enable the user to create an experience that is interactive but also which the user has some control over. The control comes from the placement of eyeballs onto a canvas, the interaction comes from the reaction of the eyeballs as a result of the movement of the mouse.
Mouse movement will relate to where the eyeballs are looking. Frantic movement will irritate the eyeballs causing them to change colour into a deep red.

Eyeballs are creepy. There is something pleasantly unpleasant about them. Eyeballs have many symbolic meanings, from sight, to clairvoyant visions of the past and future. In Egyptian myth the eye was not the passive organ of sight but more an agent of action, protection or wrath.

Currently I am also studying film at the Kelburn Campus and we have recently covered horror movies, In horror films the eyeball is used in many ways, as an indication of terror and pain in victim characters, and of control by the main antagonist. The eyeball is also a vulnerable part of the body and is easily irritated and/or pained. The sight of a hurt eyeball can cause us to experience imagined pain in our own eyes.

The point of all this is that hopefully my final mouse toy will be a little bit disgusting but will also keep someone entertained for a while.




////////Here is the working code I have so far.

void setup() {
  size(500, 500);

}

void draw() { }

void mousePressed() {

if (mousePressed == true){
//Eyeball gets bigger/values for eyeball size increases/value for eyeball
//size copies the value for the timer which is increasing
} else {
 //eyeball stops growing/
}
 
int X=mouseX;
int Y=mouseY;
int s=20;
float r=random(1);

//scale();                      //some sort of differing number
  fill(203,169,159);
  ellipse(X,Y,8*s*r,5.5*s*r);
  fill(190,164,103);
  ellipse(X,Y,7*s*r,5.4*s*r);
  fill(42,14,10);
  ellipse(X,Y,5*s*r,5*s*r);
  fill(0);
  ellipse(X,Y,s*r,s*r);
 
 }

////////

Starting Flash

The following pictures are all symbols that will be used as buttons for my Navigation Interface. They are all hand drawn and then digitally edited so that any blank space is clear, this is effective when they are placed on the buttons though not so effective on a dark background like this blog post.

 

Map Ideas

On my navigation interface I want to show the floor plans / maps of the Kelburn campus in a way that uses the correct dimensions and suits the type of technology that it is being presented on, i.e. a fold-up digital pirate map.

Here is an example of a map from of the  Kelburn campus.

I would like to group all maps of the Kelburn Campus so they align with a map of Kelburn Parade and a map of the greater Wellington region.

As my digital pirate map is made out of a material similar to photograph paper I thought that the colour scheme could be mostly black and brown as is similar to photographic negatives, this could change, but here is a sample map with this colour scheme.

This colour scheme is quite dark yet the black outlines of buildings still standout as visible. and the main thing that I want to stand out is the icon of the user and their destination which will be red.

Googly Eyes

The following is a code that I found and have addapted slightly, I plan to incorporate something similar into my final code so that many eyeballs can have moving pupils.

float x, y;
float easing = .5;
PVector circle = new PVector(250, 250);
int radius = 200;

void setup() {
  size(500, 500);
  x = y = width/2;
  noStroke();
  smooth();
}

void draw () {
  background(51);
  fill(255);
  ellipse(circle.x, circle.y, radius+50, radius+50);

  PVector m = new PVector(mouseX, mouseY);
  if (dist(m.x, m.y, circle.x, circle.y) > radius/2) {
    m.sub(circle);
    m.normalize();
    m.mult(radius/2);
    m.add(circle);
  }

  fill(0, 0, 255);
  ellipse(m.x, m.y, 0, 0);

  x = x + (m.x - x) * easing;
  y = y + (m.y - y) * easing;

  fill(0, 0, 0); 
  ellipse(x, y, 60, 60);
}



Some static images of the program:

Arrays Tutorial

// I am learning how to use an array. This is what we did in class:


int dotcount=10;

float [] xn = new float [dotcount];
float [] yn = new float [dotcount];
float [] s = new float [dotcount];


void setup (){
 size (500,500);
 
  int i=0;
  while (i < dotcount){
 
  xn[i] = random (500);
  yn[i] = random (500);
  s[i] = random (40);
  i=i+1;
  }
}
  void draw(){
    background(255,255,255);
   
    int i=0;
  while (i < dotcount){
 
    ellipse (xn[i],yn[i],60,10);
    xn[i]=xn[i]+s[i];
    if (xn[i]>500){
      xn[i]=0;
    }
   
  i=i+1;
 
  }

}

Also these videos are helpful for learning code:
http://www.youtube.com/playlist?list=PL632BB8C3F7E776BA&feature=plcp&fb_source=message

Current 25/9/2012

 //Here is some of my code, it is developing slowly.
 //I plan for it to do more than just move one eyeball but I am learning as go so it is taking some time.
 //My next step is to figure out how to produce many eyeballs.
 //I then want to change the scale of the eye as the mouse button is pressed; move the eye pupil
// towards the mouse; and change the colour of the eyeballs as the mouse moves faster.

float [] circle_x = {};
float [] circle_y = {};

 int z=0;
 int a=0;

void setup(){

 int count = 0;
  size (500,500);

}

void draw()
{
   background (255);
  int x=20; 
 
 
int i=0;
while (i<circle_x.length){
  i=i+1;
   fill(203,169,159);
  ellipse (z,a,8*x,5.5*x);
 fill(190,164,103);
  ellipse (z,a,7*x,5.4*x);             //My eyeball shape
 fill(42,14,10);
  ellipse (z,a,5*x,5*x);
 fill(0);
  ellipse (z,a,x,x);
 
}
while (i<circle_y.length){
  i=i+1;
   fill(203,169,159);
  ellipse (z,a,8*x,5.5*x);
 fill(190,164,103);
  ellipse (z,a,7*x,5.4*x);             //My eyeball shape
 fill(42,14,10);
  ellipse (z,a,5*x,5*x);
 fill(0);
  ellipse (z,a,x,x);
}
}

void mousePressed(){
 circle_x = append(circle_x,mouseX);
 circle_y = append(circle_x,mouseY);
  z=mouseX;
  a=mouseY;
}

Interim Maps

For interim presentation we had to come up with a paper copy of some of our interfaces screens, here are some of my screens, these require furthur development.

My interface will have a top and bottom toolbar that holds all of the quick links and functions.






I wanted a zoom in and out button and a button that navigated the floors up and down. It has since been suggested that I remove the buttons and change this to a touch screen command.

When typing is needed a qwerty keyboard will appear.

Eyeballs - A Concept

The above is a screenshot for a concept for my interactive toy.
How it works:
. When you click the left mouse button an eyeball appears where the mouse was.
.The longer you hold the left mouse button the larger the eyeball will be.
.As you move the mouse around the screen the eyeballs will look towards the mouse.
.If you move the mouse faster so the eyeballs follow it faster they will become agitated and their colour will change from what started as a serene blue (maybe) into a violent red.

In this there are two interactions, the placement of the eyeballs and the movement of mouse so that they follow its gaze.
I think that both interactions are interesting enough to hold a persons attention for a certain amount of time, when the person has figured out what it does there are still new possibilities of placement and size that can be created and therefore the user is more likely to play with it for longer.
I think that if it were just a geometric shape being created it would be rather boring, but because they are eyeballs they are creepy enough and bizarre enough to be enjoyable to arrange and explore.

Wind/Tornado

 

An idea that I have had for my mouse interaction is to create a wind elemental. When you move the mouse you create a breeze, thiscould be displayed by grass or hair or pins. When the mouse is movedin a circle it creates the beginnings of a tornado, as the mouse moves faster the wind gets faster. You can create an unruly tornado by making circles faster with the mouse, this will burn itself out if you stop using the mouse.

This has potential to be created, it will be time consuming to figure outhow but it is doable.

Spaceship!

 

Spaceship!!!

Everyone loves playing with spaceships, so one of my ideas involves an awesome spaceship,and an interactive maze.

 

The interaction is in making the spaceship goup and down while the screen whizzes past using only the mouse wheel to create the up and down action.

This interaction however is almost a game, I would have to abstract it away from being a game and ensure that there were no game elements like goals or a timer if I were to continue using this idea.

Keyboard and Mouse

Making a mouse toy, can involve the left and right mouse buttons, the movemnt of the mouse, the mouse wheel, and on special ocasions the keyboard. [If you want to use the keyboard you miust have an amazing interaction].

So far I think that the best actions using the mouse are rolling the mousewheel and movement of the mouse, another good action is the length of the click.

I will try to incorporate at least twoof these interesting actions into the interaction I create in procesing.

Navigation Interface - Concepts

I have had several ideas for a futuristic deisgn.

Navigation interface for deaf people, will tell you how to navigate rather than show you.

Snap lock screen shot photograph, you find the map (or any screen for that matter) and snap the film over the screen creating a physical copy of the screen.

Hologram technology, projections come from rings, bracelet and palm.

3D Projections come up and can be interacted with.

 

A pen that can write hologram messages, it can recognise when certain commands are written.

Paper thin digital pirate map, can be interacted with by touch.

Modes Of Communication

Today's lecture was about the organization of our project.

We also hear of some modes of communication. This is relevant because our project asks specifically for a way of communicating location to us.

Some suggested forms of communication that could be useful to the project are:
Speech
Sign Language
E-mail
Txt Message
Morse Code
Semiphore
Carrier Pigeon

The lecturer suggested that carrier pigeons are more reliable than some high tech GPS systems as they can adapt to ever changing conditions whereas GPS relies upon the maps being currently updated and the roads being constant and not needing road works.

I don't think I will be needing carrier pigeons, but it is some food for thought.

Interaction

Our first studio for coding since the break, we have been given our next project which involves creating what is called an interactive mouse toy using processing.

An interaction is any action that occurs between two things. eg a person saying hello to another person. Sometimes interactions result in a reaction such as the second person responding.

I thought back to an interactive flash application I played with many years ago and thought was quite amusing:     Singing Horses  

The horses each sing a different tune when you click on them. You can choose to play them one at a time or overlap each horse and its sound, creating an eccentric sounding choir.

Before Friday I must draw 3 short storyboard/timelines that each tell of a different interaction. These can be as simple or complex as I like.

For these interactions I must ask the following:
    What does the user learn?
    How long does it take for the user to learn it?
    Does it still remain interesting when the user has learnt it?

 Image form: http://www.ebaumsworld.com/flash/play/744309/#7BpSA9wPU65EZ0td.15