Monday, 30 May 2011

Hand In

This is my final stop motion movie that I made explaining a 2d array




These are the stills shots of the movie



This here is the explanation of what my movie is about and how 2D arrays work, I wrote what I thought was Pseudo code, which actually turned out to be real code and would work if I put it into processing.:


An array is a vending machine.

My stop motion movie of a vending machine in use depicts a metaphorical 2d array and how they work.

An array is a storage unit for a linear ordered list of data; a vending machine is a storage unit for things, in this case, drinks. Each storage unit has an index number, just like the drinks in this vending machine have an index number. An array only becomes interactive when an index number is referenced in the code, which is the same as a vending machine; the drink will just stay in the refrigerated air doing nothing, unless you put the correct change in and press the right buttons, then you will get the drink you ask for! A vending machine however, is a 2d array, therefore, is a little more complex than just a linear list of data.

Some example code better shows what makes this a 2d array:

//normal array
int [ ][ ] vendingmachine = {drink1, drink2,drink3,drink4}; //one shelf

But because there is more than one shelf (more than one list of data), it creates a 2d array, so would look like this:

//2d array
int [ ][ ]  vendingmachine =
{ {drinkA1, drinkA2 ,drinkA3, drinkA4}, // shelf one
                                         {drinkB1 ,drinkB2, drinkB3, drinkB4}, // shelf two
                                        {drinkC1, drinkC2 ,drinkC3, drinkC4},   //shelf three
                                        {drinkD1, drinkD2, drinkD3, drinkD4}}; // shelf four

Lets say we want drinkC2, an array works like a grid, and drinkC2 is 3 down and two across on the grid named ‘vendingmachine’, in code this is written like this:

vendingmachine[3][2];

This works the same in the real life situation of a vending machine, when you press A3, it will go to shelf A, and get the third drink on that shelf.

Research into arrays..

I had to do some extra research into arrays, as I had done all my research on variables, I found that the processing help site really helped, this is there explanation:




An array is a list of data. It is possible to have an array of any type of data. Each piece of data in an array is identified by an index number representing its position in the array. The first element in the array is [0], the second element is [1], and so on. Arrays are similar to objects, so they must be created with the keyword new. Every array has a variable length which is an integer value for the total number of elements in the array. (People are often confused by the use of length() to get the size of a String and length to get the size of an array. Notice the absence of the parentheses when working with arrays.)

After trying to apply this to my metaphor 'Arrays are vending machines", I found that a vending machine is actually fits a 2d array, so I did some more research into 2d arrays and this example of how they work on Processing help website was really helpful and key into my understanding

An array keeps track of multiple pieces of information in linear order, a one-dimensional list. However, the data associated with certain systems (a digital image, a board game, etc.) lives in two dimensions. To visualize this data, we need a multi-dimensional data structure, that is, a multi-dimensional array.

A two-dimensional array is really nothing more than an array of arrays (a three-dimensional array is an array of arrays of arrays). Think of your dinner. You could have a one-dimensional list of everything you eat:

(lettuce, tomatoes, salad dressing, steak, mashed potatoes, string beans, cake, ice cream, coffee)

Or you could have a two-dimensional list of three courses, each containing three things you eat:

(lettuce, tomatoes, salad dressing) and (steak, mashed potatoes, string beans) and (cake, ice cream, coffee)

In the case of an array, our old-fashioned one-dimensional array looks like this:
int[] myArray = {0,1,2,3};

And a two-dimensional array looks like this:
int[][] myArray = { {0,1,2,3}, {3,2,1,0}, {3,5,6,1}, {3,8,3,4} };  

Monday, 16 May 2011

Presentation

Idea one:
I started my research with looking at youtube videos of kinetic sculptures; I really liked the ones by David C. Roy,



Idea two:
My first idea is basically building a kinetic sculpture that can show how variables work, but I couldn’t really think of a way to define it and explain the variables enough, so I found this Marble track example, I think it would  work if the marbles were the variables and there were different tracks and what not for them to follow. The cost of this would be buying marbles, and buying a material to build the track with, I know I have plywood available for free and I have left over glue and things that would take the price of things down.


Idea three:
My final idea was to do with paper dolls and naming the clothes so that they were variables and giving the people instructions to put them on the dolls.


After listening to peoples idea on Friday, I have reconsidered some of mine, I have come up with two new metaphors, 
1. A variable is a vending machine
2. A variable is a box of chocolates.

I really like the first idea, but I think instead of variable, an array would work better.


Pseudo Code
void setup (){
  (200,200):
 
}

void draw (){
  put dollars in
    2 dollar coin and one dollar coin
    insert into coin place
   
  decide which one I want
    choose letter and number
    a1, a2,a3,a4,a5
    ,b1,b2,b3,b4,b5
  machine will finds it
 
 food or drink drops out the bottom

}


I wrote a time management plan above, I will be able to add to it when i know exactly what it is I'm making. Cost wise, it depends on how I want to portray the vending machine, a series of posters perhaps, and in this case I would cost would be in the printing.

Thursday, 5 May 2011

Project Three - Coding Exhibition

At this stage I have chosen the term 'variable'.  I understand this one well because I have used it a lot in both of the previous projects.
On the Learning Processing web help site, I found this very simple definition:

Variables.

'Variables are used for storing values.'

I think that this is the first and obvious thing that comes to mind when talking about variables, but variables are also useful for saving time, they can change a code a lot - by only changing a number.

A good example of the use of variables is actually from my wallpaper

http://www.openprocessing.org/visuals/?visualID=24713

This link shows the first wallpaper in the series, everything is in order and symmetrical.

http://www.openprocessing.org/visuals/?visualID=24708

The link above shows how by adding variables, the end result changes completely.

A really simple example of a variable changing the way code works is this one :
http://www.openprocessing.org/visuals/?visualID=7724

Sunday, 1 May 2011

Final Hand - in


This is a screen shot of my final app,http://www.openprocessing.org/visuals/?visualID=27919

I'm really pleased with the way it has turned out, it took me a long time to work out how to get the eyes to follow and I had to learn about constraints. I prefer the black on white, rather than the white on black as I think it stands out more. For the little bug I learnt about the Pmouse variables whick meant it looked like it was darting around and made it more alive. I had originally wanted to use one of the monsters from the example Angela gave us, but I found making my own was a better thing to do as I could make him how I wanted and get the noise to play at the right time. I have changed my ideas a lot from my very first story board, I think this was the right move as this is more fun to play with and more interactive. I am very happy with this and enjoy playing with it myself, I have expanded my knowledge on coding by so much.

Thursday, 14 April 2011

Where I am now.

http://www.openprocessing.org/visuals/?visualID=27112

So this is my final sketch to date, instead of drawing a line, I modified the line so it's small, and the pmouseX and pmouseY make the line look kind of insect like as it moves around, and the ball looks like it's trying to catch the insect, the sound is created when the ball catches up with the insect!

import ddf.minim.*;
import ddf.minim.signals.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;
Minim m;
AudioPlayer mySound; 


float x = 250;
float y = 50;
float directionx = 1;
float directiony = 1;

 void setup (){
  size(500,500);
    background(0);
    m=new Minim(this);
  mySound=m.loadFile("Finger-sna.wav");
    
  }

  


 void draw (){
  smooth();
 float d = dist (x, y, mouseX,mouseY);
 background(0);
 ellipse(x,y,50,50);






 x=x+directionx;


directionx=(mouseX-x)/15.0;


  y+=directiony;


directiony=(mouseY-y)/15.0;


    if (mousePressed && d <= 30) {
        mySound.rewind();
     mySound.play();
     
      smooth();
      stroke(255);
      line(mouseX,mouseY,pmouseX,pmouseY);
    }else if (mousePressed) {
      smooth();
      stroke(255);
      line(mouseX,mouseY,pmouseX,pmouseY);
    }
    

   
}

First try at Concept Two.


This is a screen shot of my first try at my concept. The ball was following the mouse and the line wouldn't stay where I drew it, there is no sound at this point. It's not finished obviously but a pretty monumental step for me, getting the ball to move and getting the mouse to draw a line!



float x = 250;
float y = 50;
float directionx = 1;
float directiony = 1;

 void setup (){
  size(500,500);
    background(0);
    
  }

 void draw (){
  smooth();
 background(0);
 ellipse(x,y,50,50);

 x=x+directionx;


directionx=(mouseX-x)/15.0;


  y+=directiony;


directiony=(mouseY-y)/15.0;

 if (mousePressed) {
   
      smooth();
      stroke(255);
      line(mouseX+55,mouseY+55,pmouseX,pmouseY);
    }

   
}


More Research

On OpenProcessing I found this sketch, this image doesn't do it justice but I really enjoy the way it follows the mouse, nice and smooth. Basically two balls follow your mouse around as you move it, if you scroll more balls appear and it forms a chain, the link is below.

http://www.openprocessing.org/visuals/?visualID=1305

Rethink of ideas..

After talking to my tutor and listening at the lectures I have come to the conclusion that my initial idea won't be interesting enough, as I would be over using 'mouse click' function. So I did some very rough sketches of other possible concepts. With these concepts I want to use more of the mouse moving so it's not as much effort for the user.

Research and inspiration

I found this sketch on OpenProcessing, I really liked the way it moved and its fluidity. This is just a screen shot of it but the link is here as well.

http://www.openprocessing.org/visuals/?visualID=8994







Monday, 21 March 2011

Final Wallpaper set

These are my final wallpapers!







I really like the colours I have chosen here, the subtleties of the changing pattern is what I was really working on and I wanted the final image to not really be recognisable from the first. I feel that I've learnt so much, I didn't know anything at all to begin with so I am quite happy with my result.

To see the code in OpenProcessing follow this link: http://www.openprocessing.org/portal/?userID=10593

Initial Ideas and Sketches for Wallpaper



I really wanted to work with the idea of optical illusions for my wallpapers, something that makes you look twice. These two images I found on google are my inspiration for my sketches below...




I have chosen the image with the triangles and diamonds because I think it has the most potential to be developed as a set I want to add colours and code that changes the way the pattern looks. I also want it to look kind of 3D. My first sketches on processing are as follows;

<--- My original sketches to work out my co ordinates
 My first sketch on processing

Testing colours

These are my initial sketches and ideas for my wallpaper set, I've had to play around a lot with colours and the progression of the pattern through the set of four wallpapers.


Monday, 7 March 2011

Progress in my coding skills...

My first go at pattern making...
Here are four of my patterns, starting with my very first one, which I just copied and pasted the codes from the reference list without fully understanding what was happening! Luckily with a lot of practice the rest of my patterns are derived from some sketches and pictures and I actually had control over what was happening, and the outcome of my patterns.

Second attempt, named 'Icecream' 

Even though this looks simple, I had to work out the placement of my lines for the shadow, and the exact colours I wanted. So for me it was difficult, after copying and pasting for my first pattern, I actually had to think about things!

Third attempt, 'Cupcakes'

For this one I wanted it to look a little more complex... I think it still looks easy but it was complex for me. I wanted each shape I created to have a different colour in it, I think it looks like a birds eye view of cupcakes.

My final pattern was inspired but my evil eye bracelet that my brother gave my..

This is my interpretation...


After all these attempts I feel I have a better knowledge of the processing process and fell a lot more confident with it.

Thursday, 3 March 2011

Fun code..

http://www.openprocessing.org/visuals/?visualID=20140

While browsing OpenProcessor I found this, it's so much fun to play with and the idea is just so simple. Something to aspire to...