A Variable is a Cloning Machine

Variables are like cloning machines. The value assigned to the ‘int’ or ‘float’ variable is like the shape which you wish to clone. The shape is placed in the left compartment of the machine. The red button is pressed, causing the machine to begin the process of cloning. This is akin to the act of typing the variable into the code after the value has been assigned to the variable. The shape can be cloned as many times as the user desires. Therefore, you can clone the red shape infinite times to create interesting results. 

           

The left compartment stores the initial shape, so that cloning is always possible. This is like the ‘memory’ or ‘storage’ of the variable. In this case, an abstract form will be retrieved from the machine when it is needed. The red shapes act as the medium which construct free-flowing patterns. These are like the numbers which build code. By a press of the button, more shapes can be cloned, just as the same value can be used several times within a code through the use of variables. Without the cloning machine, the shape would have to be manufactured every time the user wanted to add another one to the pattern. Without variables, the same situation occurs. The required code would have to be typed out each time it is necessary. Variables are vital in creating interesting programmes with less lines of code, just as a cloning machine is essential in the building of an interesting form composed of multiple identical shapes.

Time Management and Cost

These are my time management and budget plans for the next weeks:

Refining My Idea

After giving my interim presentation, I settled on the second concept. I have made some alterations to it. I am still going to make it into a short stop motion video, but have rethought the cloning machine. I have changed its appearance, so it is more akin to those seen on TV shows or science-fiction movies.

Kim Possible, Disney Channel

The Human Duplicators, 1965

I drew out a rough storyboard for my clip. 

The hand introduces a narrative into the video, but I am unsure about whether it should remain there or not. I will try it with and without the human interaction. The red circles represent the code that you assign to the variable. I have written out new pseudo code for this specific video:

cloneMachine shape = redCircle; //this is the act of putting the shape into the cloning machine

void draw() {

clone shape = 5; //cloning the shape five times

}

This code describes the setting up of the cloning machine, which is the variable. The red circle is put into it when you type out the code. There is then a clone funciton, which is the retrieving of the variable later in the code. You can determine how many times the variable is used, as it is always stored in the left compartment of the cloning machine. Therefore, you can 'clone' the variable infinite times to create interesting programmes with fewer lines of code. Rather than having to write out every shape that comes out of the cloning machine, you can store other shapes in the left compartment and clone those. In my video, I will only represent the cloning of one variable (the red circle), so that the idea is not over-complicated. It is like using int or float. In this case, the variable that can be stored is a red circle, rather than a whole (int) or decimal number (float).

I have chosen to do a stop motion because it is the most effective way to depict the act of cloning. An interactive installation with this idea would be unsatisfying unless I devised of something that hasn't existed in mankind's history (inventing a cloning machine). I want to exhibit a moving image, and decided a stop motion with a handmade clone machine model is the method which will have a more impressive result.

Pseudo Codes

In order to better understand my three ideas, I wrote out some pseudo code. This is the code for the first design:

int a = circle;
int b = square;

void grab(); {

arm a; //arm retrieves the 'a' from the variables at the top (storage)
arm b; (move faster); //dictates the speed the shape moves down the arm

}
The middle section is the programme. The speed and frequency with which the variables are used changes the design in the centre. The arms retrieve the shape indicated by the variable form the outer edges of the posters. The shapes could move through the arms and into the centre.

This is the code for the second idea:

int a = circle;
int b = diamond;

void draw() {

machine a; //being put through the machine
machine b;

}
After writing this code I realised the cloning machine acts as the memory. When you place the first shape in (eg circle) the machine, the machine stores it in its memory. You can then get infinite clones of the shape, depending on how many you wish to use.

This is the code for the third idea:

int diamond = colour1; //variable represents different reaction
int square = colour2;

void setup(){

waterContainer (100, 100);

}

void draw() {

drop diamond; //this specific variable creates unique colour/reaction
drop square;

}
Dropping the shape triggers the reaction in the water. This represents the triggering of the code's memory, so that it retrieves the variable from the top of the code and implements it in the programme.

First Three Ideas

Once I had chosen my term 'variables', I researched them online. I read the Wikipedia article about the coding term, and it was relatively helpful. After reading it I brainstormed what I understand about variables and refined them into metaphors.

I then sketched out each of the ideas. I will write out a cost plan underneath each sketch, and will create a time management plan once I have decided on one of the designs.

Card for the posters - $5

Coloured card - $5

Unsure of what aspects of the design will be moveable and still image. 

Card - $5

Coloured card - $5

I already have a camera and a tripod, so I would just need to construct the 'time machine', which I would hope to do before Friday 20th. I would also hope to have the card shapes created by then. Afterwards it would be a case of taking the photos, which may be too time-consuming to do before the 29th.

Filter paper - $5

Plastic - $4

Dye - $6

I haven't yet decided on what I would use as containers, if the containers of water were to look like this. This idea could be implemented in other ways, such as having no water and colouring the plastic so that the coloured shapes would fill up the container. I would like to have this decided by the 18th, so that I can construct the small shapes by the 20th. I would spend the next week refining the design so that it functions well, and write the description during the middle of the week (24th, 25th, 26th).

Analysing Code

For the third project, I have chosen the coding term 'variables'. In this post I will pinpoint the instances in which the programmes make us of variables.

Code One:




In this code, float has been used. This tells us that the numbers used will contain decimals. The beginning of the code looks like this:

float diam; // width of ellipse and weight of line
float dripRan = random(1); //random size of drips
float dripWidth = random(1); //drip width

The function of each variable is given. The size of the drips and the width of them will be a random number. This means that when 'dripRan' and 'dripWidth' are used later in the code, a random number will be retrieved. Thus creating the inconsistency of the final spray can effect. diam is used later in this line:

diam = abs(mouseY - height/2)*.18;

This variable has not been assigned a specific number, which allows the code to 'constantly recalculate diameter as a distance from the mouse to the center, and make it 10% of that'. This creates the variation of sizes of circles, adding to the randomness the other two variables establish. They are implemented like this:

dripRan = random(10, 300);
dripWidth = random(.1, 3);

There are some limits being put down here, to achieve the desired length of drips and width of the 'spray'. The float variables have enabled the code to take up few lines, as there is a randomness stored in them which is used to create the ever-changing design. You can alter the length of the drips easily, as well as the width, because variables allow you to input less code to achieve a significant change.

Code Two:



This code is begun with numerous int variables. These are:

int W = 400; // screen Width (should be evenly divisible by S)
int H = 300; // screen Height (should be evenly divisible by S)
int S = 2; // ca cell Size or Scale in pixels when rendered
int C = W / S; // number of Columns in the ca
int R = H / S; // number of Rows in the ca
int mode=1; // which "variation" is currently active
int [][] curr; // current generation of ca
int [][] prev; // previous generation of ca

The purpose of each variable is written beside it. The code will require the placement of numbers so that the complex, changing design can be created. W, H, S, C and R have been implemented in various places in the code. For example, C and R have been given the screen width/ screen height divided by scale of pixels. This is so that the number of columns and rows do not remain stable, creating the moving effect of the green and black pixels.

Through analysing this code, I was able to realise that variables can be the sum of two or more variables divided by each other, multiplied, added, subtracted etc. Variables can have an effect on the number other variables represent. This puts me in mind of hybrid objects/tools and animals, but I'll get to the metaphors in a later post...

Code Three:



This code consists of various moving triangles, which can change colour depending on the type of mouse click. This is at the start of the code:

float x = random(400,width);
float y = random(300,height);
float w = random(0,200);
float h = random(0,200);
float d = random(0,200);

These variables are used later in the 'void shake' function. Lines such as this 'x = x+random(-1,1)*speed;' are used to create the moving shapes. Here, the random with 400 pixels height and random width is shown with an x, to which random is added, coordinates are given and a speed is assigned. This is effectively creating the speed of the moving triangles. Beneath it the same is done with variables x, y, w and h. Similar coding is used to constrain the area of movement and the scale of the triangles.

All three of these codes use variables to indicate something random. Numbers are arbitrarily chosen so that the movement of each of these interactive designs is never exactly the same as the last movement (some exception in Code Two as it will only change if you click/type a number). Variables are also used to input numbers which stay the same and can be added onto, sometimes using other variables. The codes retrieve these numbers from the int or float variables in several places, making each code intricate, but not excessively long.

Final Transformation

Over the break, I researched imagery relating to triangles and the sound waves they create. There were a limited amount of images, but these two inspired some sketches that I thought could be used in an interactive programme.

Drawing from these images and earlier sketches, I created my final Transformation. The colours and triangular imagery in the sketch in my post 'Transformation' inspired my own design. The accumulation of my drawings and my experimentation with arrays allowed me to end up with this programme.

Interactive Sketch

This design is interactive, and there is a subtle, short sound that plays when the mouse is clicked. I used the colour scheme in the triangle sketch (featured in my post 'Transformation') as inspiration for the final colours. I have not yet combined arrays with this code, which will be my next goal, in order to create more movement and interest in the next iteration.

I would like my final result to reflect this design in some manner, so I want to keep the initial star shape as part of the programme. I would also like the triangle sound to reflect the imagery more, so I may combine more triangular shapes, or look at the way the sound waves of a triangle might move. I imagine them as being repetitive and subtle. Thin lines are often used to represent sound waves, and I think this would effectively portray the sound of a triangle being hit. I have done this to some extent in the sketch below, but it is overly simple.

First Experiments

These are my attempts at understanding code, in order to create an interactive design. Initially, I took my storyboard drawings as the basis for my design. This allowed me to create the most basic interactive elements it involved. I used mouseX and mouseY as positions, to enable movement with the mouse, a code I was not previously familiar with. This enabled me to create this basic shape, which follows the mouse and has a mousePressed function.



After experimenting with this code, I was able to create variations on the repetition of the shape. After a lengthy look into Arrays, I tried to integrate that into my code. Subsequent to this decision, I realised my time would be better spent getting to grips with Arrays in an entirely alternate sketch. This is what I came up with.

Finalising Ideas

I drew out a morphological map, because I was unsure of the cohesion of my chosen storyboard. The effect was not simple enough, so I decided to focus on the hexagon shape and the possible movement of and interaction with it.

After completing these plans, I was able to finalise my ideas and pinpoint the shapes that I found the most attractive. There were a few designs which I thought could look effective with dart-like designs integrated into them, so I made a few more storyboard sketches.

I will now attempt to create these in Processing. I want to experiment slightly with each idea, but I like the interaction possibilities with the top concept the most. In the top storyboard, the shape is transformed by the small circles that circulate certain points. The space around the star-shape is transformed by the darts, which interrupt the empty space.

In regards to sound, I want to take my findings in the last post and apply them here. This is that a clean geomoetric can prompt an ambient, layered sound.

Storyboards

In order to form the ideas of whole interaction designs with sound, I sketched two storyboards. After presenting them, I was able to expand on these ideas, and devised of more coherent designs with a clearer vision of what sounds may be relevant to the imagery. Here are the two initial storyboards

The interim presentation led to my decision to further the second one on Processing. Both ideas elaborate on the first panel of my wallpapers. Darts, by the nature of the game, encourage interaction. By hovering over the hexagonal design, you create the targets that the darts hit. I have yet to establish a sound to accompany this visual, but I have a few ideas...

Subsequent to the lecture on synaesthesia, I scanned my interpretations of the two songs that were played for us. The associations I made with the pitch and beats enable to see the links my mind makes between the audible and the visual. This will prove integral to my attempts to integrate sound into my interaction design. It is interesting that the simpler, more minimalistic song prompted the more complex drawing (the first). This demonstrates that a simple image can create an ambient, intricate sound, and vice versa.

Here is my drawing of the first song,

and the second song

Transformation

Technically, transform means to 'change markedly the appearance or form of'. In the case of Processing, you must create a code that allows a change in appearance and form. After browsing sketches on OpenProcessing, I was able to gauge which transformations I preferred, and selected a few of them to look at more closely.

Although this animation is not interactive, I find the colours and shapes pleasing to look at. The build-up of the design is very watchable, as it slowly becomes a 3D optical illusion through a well made, attractive process. The transformation from beginning to end is clear.




What I appreciate about this design is the difference between the starting shape and the end design. The sketch begins as a grey, unassuming rectangle and transforms into a hexagonal pattern. The design you are left with after you have moved the mouse is quite reminiscent of some wallpapers made for the last project...

Both programmes demonstrate what I think of as transformation. Although the first one is not interactive, the empty space of the screen becomes filled with small triangles. The second one transforms the shape within the space. To me, transformation means to alter both fields; the space and the shape.


I haven't yet analysed the codes of the design. I have chosen them purely on aesthetics and personal interest. My next task is to figure out what makes these codes function, so that I can start to form my own concepts of transformation.

Project One: Reflection

This project taught me some of the theory behind coding. I was able to see the complexity and simplicity that can be created by lines of code. Initially, this was extremely daunting. After reading through tutorials and attending lectures, I was able to gain some knowledge of variables, loops and various other coding tools.

This first project also enabled me to realise what Processing is best suited to. This is repeating patterns. My final wallpapers employed this to some degree, but I feel I could have taken it to further limits. For example, I could have used random, to achieve more exciting, surprising outcomes. I was also able to note that some mathematical prowess is useful, but not necessary, as I initially thought.

For my next project, I will try to make a more interesting design. I will try to make use of and get to grips with more advanced coding.

Before and After: Final Four

After making my accurate, coloured drawings of potential wallpapers, I created the designs in Processing. This resulted in almost identical replicas of the hand-drawings. Seeing the images on screen allwoed me to see that the colour scheme was not as cohesive as I thought it would be. The colours did not compliment each other in a manner ideal to me. 

Initial Sketches

I deliberated and came to the conclusion that the hues of second design could be transferred onto each panel. The first design also looks quite mismatched to the rest of the set, so I decided to continue the horizontal lines into each of the panels. The interim presentation we gave enabled me to appreciate the value of a matching set, in terms of the shapes, colours and theme of the wallpaper.

Final Four

I made use of variables and  loops in order to align the parallel horizontals. Without this programming knowledge, it would have been much more difficult to be certain of the consistency of the lines. This also allowed me to create separate functions to overlay non-repeating images (darts in the first and squares in the second).

I am pleased with the result. I fulfilled the goals I set for myself, and have a much better understanding of Processing. There are aspects of my design I would improve, however. The cohesiveness of the set is still somewhat unsatisfactory, although I do think the colour scheme is much more akin to my design aesthetic. I feel I now know what I would do to remedy this, if I were proposed the same task.

Four Wallpapers

Inspiration for the four potential patterns arose from music. I admire countless album covers, and decided to use this as visual fodder for my own patterns. The four albums I will be using are:

Modest Mouse - Good News For People Who Love Bad News

TV On The Radio -  Dear Science

Broken Social Scene - You Forgot It In People

MIA - Kala

My drawings based on these images are not dissimilar to the original covers. One of my goals for the week  is to modify the colours so that the change in hues between each wallpaper page is not abrupt. I'd like the links between the four pages to be gradual. I will use parallel horizontal lines as a common element to make the four pages more cohesive as a set.

Second Inspiration

Still on my first set of designs, I was looking to all mediums for new concepts. I recalled Momiji dolls, and their basic yet memorable forms. After reacquainting myself with images of the Momiji figures I attempted to construct my own pattern...

All of my own Processing 1.2.1 designs can be found on my OpenProcessing portfolio: http://www.openprocessing.org/portal/?userID=10137

First Inspiration

A trip to the Te Aro library provided me with some handy wallpaper books for a touch of visual inspiration. I came across many images which I thought could be transformed into a Processing design. Luckily I had my camera with me, and was able to snap a few shots of my favourite wallpapers

One of the last designs I saw looked the most promising, so I converted it into a pattern. The repetition of short lines in the background were arduous to recreate, as I am still unable to loop patterns with ease...

Confronting Coding

My first attempts at creating wallpaper using Processing were bland. Black on grey with lines that had no order, due to my lack of understanding. After I read through tutorials, I was able to add colour and shapes to my designs. This technique resulted in initial designs such as the ones below.

  

I experimented with bezier curves, opacity and pattern repetition. My next task is to employ a slightly increased Processing knowledge to adapt inspiring images into my own designs.