Final Design - Explaining the Metaphor

This exhibition piece is a metaphor for the term “variable” used in the computer programming language Java. The metaphor plays with the idea that a computer variable is much like a symbol that can be used in mathematics to refer to a given value. An example of this is p, which equals a circle’s circumference divided by its diameter, one can then use p at any time and it will refer to its given value.

In my metaphor, instead of using something like p which already has a value, I gave the variable the name x. This is because x is commonly used in mathematics to show that a value goes there, without defining what it is. The x can then be given a value, defining the so far undefined variable. The interesting part is that the value of x can then be changed again, replacing its value with a new one, which thus changes the outcome of the equation. In both Java and mathematics this is an extremely useful tool used to update your code or an equation.

Some of the less obvious features of this metaphor are that the variable can only have one value at a time and that the value of the variable can range from a simple integer, a complex equation or even a decimal number, while if nothing is set for the variable it equals zero.

Another awesome link. This is where I found the the code for the letter box - and where I learnt how to use it. Plus it's really really cool!

First Ideas

My favorite first ideas are of a sandwich where the variable is the bread or meat or something. It can only hold one bread or meat at a time, and whatever you choose will change what the sandwich will turn out like.



My second ideas is to have a screen that reacts to people. Both the quantity and and movement of the crowd would change how much static is one the screen, this means the value of the variable is the actual spectators. I really like the idea of how people can passively become a part of my "programme" - even by just walking past. I think This would make people interested in it and want to have a closer look.

Variables

We were asked to explore the term we have chosen and try to really understand what it does/means. I think explaining the term Variable and what it encompasses can best be described by answering the three following questions. Each new question moves into a deeper understanding of the term, the first I knew before I started this project the second two moves much further.

What: What is a variable?

A variable is a word or letter/s that represents a number. This number can be changed or updated as the application plays out, thus the name

Why: Why use a variable?

A variable is used to represent a changing number (for example: the distance between mouseX, mouseY  and the centre of the screen) using an long equation could do the same job though however variables can easily repeat an equation many times using less space and making the code more comprehensible in the same process. To summarize: A variable can be used to organise (esp. if using long or complicated equations or lots of code) your code, this can make it more comprehensible and thus easier to edit later or easier for someone unfamiliar with your code to edit it. Similarly it can be use to make your code less comprehensible and thus harder for someone else to mess with your code – if you are that way inclined.

Where: Where should I put a variable instead of using an array or class or something?

This is a question about how a variable relates to others in processing and comparing what would be the most effect of the two. As such, it takes a certain amount of intuition and understands of the nature of variables, as described above, but I will give a small explanation that will most likely have exceptions. A variable should be used anywhere where the code is slightly complex/long  ( if the amount of code used decreases with the use of the variable than you are on the right track, although is not necessary) and uses equations that update or change, so long as a class wouldn’t use less code to do the same thing.

Here is a little treat for anyone still reading!

Project 3 - Coding Exhibition

The third and final project for DSDN 142 is an extremely open one where we are asked to create a metaphor about a term we were using during the first two projects. We are able to do this in any medium so the design possibilities are nearly endless. My first thoughts are to do either if/else or variables.

Reflection

Above is my final design (click on it for a link to my actual programme), it has come a long way since my initial ideas, and I am very happy with how it has turned out. The most important thing I learned during this project was to actually ask for help - sometimes. Perhaps it's my stubborn nature but at certain points during this project, as I am sure is true of everyone during this project, I got stuck on something I was trying to do. The problem is that in one instance I ended up spending several days trying to do something that couldn't be done. Or at least couldn't be done the way I wanted, while still using minim. If I had of asked a tutor I could have saved a lot of time, but the thing was I always felt so close to cracking it, and I didn't want to ask for help if I could do it myself.
Overall I really enjoyed the freedom of this project and look forward to the next.

Final Design

I used the morphological matrix with a collection of interesting colours , shapes and styles (i.e. with/without fill, white/black background ect.) to find the best looking shape for my sound shape. Some were more aesthetically pleasing than others, some related better with the sound and others showed how the differing pattern the sound-shape made better. Needless to say, it was a balancing act and not an easy thing to chose one over another. I ended up choosing a gold colour because it fitted the sound well, I gave it a  strong stroke for aesthetics and a slightly see-through fill to help illustrate  the evolving patterns made when moving the sound-shape.

Fixing my background turned out to be relatively easy, the problem was that I had made a background then layered a rectangle over it with a slight transparent. Removing the background fixed the original problem but presented a new one. When I made the rectangle black, it meant that the programmed starts with a light background and fades to black, this is an annoying problem and I am unsure of how to resolve it.

Sound Updates

I decided the sound for my sound-shape should be thesound of playing wine glasses. I chose that sound because it is a soft and harmonic sound that sounds like a spinning object, like my design.  A rather cool feature I have also added is a volume pan from left to right, which I decided was necessary because when the design is moved around the screen in a circle there was no change in the sound. It also gives the programme a more dynamic interaction. I then added a frequency oscillator that change with the mouses speed to make my programmes sound more consistent with the image when the mouse is shaken or rapidly moved around the screen.

New and Improved

The interactive programme has change slightly in intention than my first ideas. Now the sound shape is more of what the wind chimes would sound like if you spin them really fast around a center point. A really cool thing I did with this new version is made it change rotation speeds depending on how far away it is from the center, not from the top left which I learnt how to use from here. I also added sound which I tried to make sound like the shape, I first added sounds I made in GarageBand, but after getting help from a tutor I learnt how to make sounds in processing which was great for me because the sorts of sounds I wanted to make were precisely the sort of sounds processing lets you make. What I have is the best I can do so far.
Possible things to improve on would be aesthetics, sound quality and diversity – or rather making the programme respond to several different things i.e. the mouse’s speed. Other things that could change could be it’s colour and or shape as it moves around. To a certain extent I have tried all of these things, but nothing was to the quality I would expect in a final presentation so they were left out. Click here for a link, I don't think having a sound-shape (as cool as it is) is a good thing to have running on your blog site all the time.

My first interactive sound-shape

Several steps later I have made a sound-shape that interacts as the mouse moves and I have an idea of what the sound should be. I’m thinking of using a wine glass playing sound, a link to the idea is here. The problem I have now is that it interacts with where the mouse is but only from the top left to bottom right, and it’s super sensitive so putting sound to it would be very, very difficult. Also there is this faint imagine left behind where ever the sound-shape has been and I don’t know how to get rid of it, more work I guess.I also add a little bit of code which means that the sound-shape starts in the middle and spinning - I just thought it made the programme slightly more appealing.

I'm not sure why it is slightly to the side in blogger...

Fisrt Attempt; darn translate function

My first attempt at making a sound shape was not very successful as I had not idea how to make the thins rotate around a point and I kept getting an error with the translate() function. I found an existing programme and had a look at how they got there’s to work. I then got the idea to make the sound-shape react, not with the mouse knocking against it but by the mouse moving around – the sound-shape also move with the mouse. How far I got can be seen below.

First Ideas

The best ideas I came up with and showed at the interim were basically an abstract way of showing how an existing sound-shape behaves, in my case, wind chimes. The best fitting the project criteria was a set of slightly awkwardly sized boxes that if interacted with, would react in an interesting and slightly random way, but each time unique. It essentially would have been a programme that would behave in a similar way to a wind chime. I really like this idea but didn’t feel it would be aesthetically pleasing and as I found with my last project, it is important to not get too attached to your ideas. So I came up with a new design that would be a wind chime if all the ends of the strings were attached, and the body or the rest of the wind chime spun around the center. I could then make the wind chime end parts a more literal analogy of the sound they created. My idea is that the will be able to be interacted with, with the mouse which would cause the wind chime ends to knock against each other and then settle back to there normal state.

Inspiring Video

 

This was just a really clever and inspiring video I found, click here for a link to video. 

Transformation Design - Inspiration

I really like the style of this coder. Some of their other designs are pretty amazing also; if you like this one you should check out some of their others.

Interactive Design

Here is an interactive design I made using some simple code.

Final Designs

Sampling

 

After trying several samples and comparing them side-by-side I have deiced to make my elliptical design progressive. By that I mean, unlike my other designs, I will use variables to change the size and thus nature of the main elements throughout the image as shown above. I believe this the best way to show the relation between the ellipses and the spaces between them.

 While other designs I have tried a different aprouch at illustrating the relationship between different elements and the spaces between them. You can see some of the other things I have tried throughout the other pictures.

Inspiration

The picture to the right is interesting to me because it challenges your intuition of what a tree or a face look like. In doing so it creates something very special from the tree branches, but more interestingly to me, the spaces between them.

The essence of this is fundamentally what I will be basing my wallpapers patterns on, they will however, look nothing like the actually picture. I intend to do this by taking simple shapes/symbols and organizing them in such a way (with the use of the right colours, sizes etc.) that the original shape is a secondary feature. Effectively, I wish to swap what would conventionally be the focus of a picture with what wouldn't, like the spaces between the shapes and the way they relate. I believe that would, just like the picture shown above, create very interesting wallpaper patterns.

Hopefully once I have finished I will have turned something very mundane and unoriginal into something that will make people stop and think.

Adding a little Colour

If you are familiar with some of my work so far with Processing, you may have notice a lack of colour. This wasn’t actually unintentional; I felt I needed to really understand how to create good works of art in Processing without the need of lots of colour, before I introduce it.

As a first test, I used variables we learnt in class on Tuesday the 8^th  to make a sort of colour swatch, as can be seen to the right. If anyone would like to use or play around with this piece of script you can find it here. The only condition I have is you send me a link of anything cool you do with it.

Thanks.

My first lesson in Creative Coding

My first session with the program Processing was relatively successful, although still being in the process of working out the fundamental programming principals, it would be fair to say my work wasn’t particularly original. By my over emphasizing the importance of learning the scripting language it seems my designs were disadvantaged. I did however learn a lot about the scripting language and I feel the session was well used. The most important lesson I learnt, however, was not to forget the creative side of scripting. It doesn’t matter how well scripted the image is if it doesn’t look good.

The next thing I did was to design a new range of patterns, with a new approach and new goals, as can been seen above. The idea was to use very simple shapes and lines in a dynamic and interesting way. This was kind of a test of both my creative abilities and my ability to control the script. The designs I submitted for the first section of my first Creative Coding project, which can be seen here, you will notice look nothing like those designs. This is because although they are interesting, at some point you have to ask yourself “would I want this in my home?” sadly, for my first designs the answer would be a resounding NO.

So for my first designs submitted I tried to make interesting patterns that could conceivably be appreciated in a home or workplace environment. Next will be to take the abstract side further and incorporate a common element. I particularly like this idea of disguising common elements (shapes, symbols etc.) in interesting ways so it isn’t immediately obvious what the original element was. I would also like to add more colour to my next set of designs.