Explanation of my 'Coding Exhibition' Project

Photos of my Final Outcome for 'Coding Exhibition'

A sketch of How I will execute this idea

Time Plan and Material Costs for Project 3

Coding Exhibition (Project 3) "First Three Ideas"

This is my 3rd idea which is similar to my first one as it is to do with day and night but is slightly more developed. This loop is an indicator of what to do on a cold/hot day or a cold/warm night. As there are two sets of options in this code, the code would consist of an if, else statement inside another if, else statement. This will be set out on a 4 page piece of folded card. The front will be flat and unfolded and divided into two sections, day and night. You choose what time of day it is and then you would flip one side of the paper over from the left if it was a cold day or flip the other side over from the right if it was a hot one. If you choose a cold day, once you have flipped over the card there will be 2 activities to choose  from depending on if its a hot/cold day or a warm/cold night. The examples will be if its a hot day go to the beach, else (if its cold) watch a movie. Or if its warm night go and watch the sunset else (if its a cold night) go to bed. The way these will be shown is like in the image above with an arrow you can turn which will indicate what activity to do depending on what the weather is like. 

In coding language it will appear like this:

if (day = true)   

{if (temperature >= warm)

{go to the beach;}

else {watch movie;}

else; if (day = false)

{if (temperature > warm)

{watch the sunset;}

else {go to bed;}

}

I think I will use this idea as I feel it is the best metaphor that conveys an if,else loop. It is also interesting for the viewer as it is interactive.  

  

Coding Exhibition (Project 3) "First 3 Ideas"

These are my first two ideas for project 3 'Coding Exhibition.' All my ideas convey a visual metaphor for the loop 'if, else.' My first idea above on the left is called "The Loop of Life." This idea consists of a plant which requires water in order to grow. In coding terms of how this "if, else" loop is said will be: if there is water in the watering bucket the plant grows, else plant dies. The code will look like this:

{if (bucket > Empty)

{growing = true;}

else

{growing = false;}

Bucket = Bucket + 1;  //refers to amount of water decreasing each time from bucket.

Growing = Growing + 1;  //refers to the size the plant grows each time after being watered.

}

I think this idea would be best displayed as a stop-motion video where the bucket of water would slowly reduce while the plant is growing and then the water would eventually run out and the plant would die.

I do like this idea, however compared to my other ideas I do not think this metaphor will be easily understood to someone who knows very little or no code.

My second idea on the right is more simple and is also an "if,else" loop. I have called this the Day & Night Loop.

In code language terms this idea can be explained as: if it is daylight you are awake, else you are sleeping. 

The way this card works is the city buildings stay in the same place and when the card turns a night sky replaces the daylight sky. So the page that flips over has half the city cut out of it and fits the other page nicely. 

If I decide to choose this idea it will be of created from a 4 sided fold piece of card. 

'Transformation' project- (Final)

This is the final outcome for DSDN 142 'Transformation' (project2). I feel that I have created an effective interaction, that is based on a simple idea. As the main goal was to create patterns which transformed with sound I think I have achieved this by creating circles which change in size and sound. In the lecture Ben said it is important that you dont have full control over the pattern as it is much more interesting when it is unpredictable. In my design you control the intitial size of the circle, however you cant control the colour or sound throughout the interaction. I like this as you dont understand exactly how this pattern works straight away when you play it, also it takes a while to figure out why the balls choose to go bigger or smaller after each bounce. I had thought about adding something to the background as it is only plain black, however when I did try with subtle background textures, it was not in harmony with the bright overlapping colours from the circles. Therefore I think the black background is best for really bringing out the circles vibrantly. The sounds I have incorporated for each ball size gives you a perception of what the ball is like e.g light, heavy, dense, bouncy etc.

'Transformation'- project (in the making)

I have now changed the background to black as I feel this makes the balls a lot more vibrant, almost like a disco theme. Also I have changed the code so depending on the size of the ball when you release the mouse it will either grow smaller or bigger after each bounce. If it is bigger than half the maximum size the ball when grow smaller after each bounce and if it is less than half the maximum size it will grow bigger after each bounce. I have also incorporated sound although this is not possible to show on here. The sound is similar to a basketball bounce and the smaller balls have a lower pitch sound while the bigger balls are more higher pitched. I chose this sound arrangement because I wanted to make the smaller balls seem more heavy and dense and as the ball grows larger it becomes more lighter and balloon-like. The ball will eventually pop like a bubble once it reaches its maximum size. I feel I have related sound with interaction appropriately to suit the theme of Transformation.

'Transformation'- project (in the making)

At this stage I was able to change the colours as you hold down the mouse. By clicking and holding down the mouse the ball smoothly transitions from red to orange to yellow. Although in my storyboard sketch I have a variety of colours which the ball changes into, I believe it is important that the colours are in harmony with each other hence the reason I have only used red, orange and yellow as my colour scheme. As of now I am trying to sort sound that can relate to these balls changing in size as this is the key idea for the 'transformation' project. I have experimented with quite a few sounds such as popping, boing, bubble, bounce but still do not feel I have come up with one that appropriately fits the composition as a whole, therefore I will continue playing around with sound.   

'Transformation'- project (in the making)

In this development I made all the balls slightly transparent. Therefore when the balls pass through each other they are a lot more visually interesting. Also at this stage I have been able to apply velocity to the balls so they bounce up and down. I had to write a variable for y in order to create the bounce effect. 

'Transformation'- project (in the making)

This is my first step on processing. What I wanted to do here was first figure out how to draw several balls throughout the processing template. This was hard at first as every time I wanted to draw a ball in a different spot the balls would constantly draw wherever the mouse moves, and not when I clicked the mouse. What I had to do was create another class just for the ball and an array list for each ball. This means that every time I click and make a ball grow it saves its position and carries on redrawing itself. I also set the max size of the ellipses to 150 so if it reaches that size while the mouse is being held down it will reverse and start reducing.

My First Ideas for "Transformation" project

This is my idea for the next project for DSDN 142 called 'Transformation,' arranged in a storyboard format. By reading it you can get a general understanding of how it works. First by clicking and holding down the mouse a ball grows. Depending on how long you let it grow for it will change colours from orange-red-blue-green-yellow. When the mouse is released the ball drops and bounces back up like a normal ball would. I also have made the circles transparent so when a circle crosses through anothers path its quite, it creates other visually appealing colours. How I want to incorporate the idea of transformation in this with interaction and sound is by having a sound effect everytime the ball bounces but it changes pitch depending on its size. After it reaches a maximum size which I will set, the ball will pop. I think this is a good idea to begin with and Im sure it will change slightly when I am in the process of making it. It is a simple idea, however it will be a challenge to create as well as a learning process.

Notes on "Programming, the bigger picture"

These are some notes that I found interesting and informative on "the bigger picture" file. 

-       - Programming is an ideal when you are trying to use variation, interaction, generation, repetition, calculation or scalability. 

-       - Trying to create realistic-type images are much better done on programmes like Photoshop, however if you are trying to create a repetitive pattern then programming is one of the quickest software’s to do so.

-       - It is very important to acknowledge other peoples work, which you incorporate into your own design. If you don’t do this your work can be considered as plagiarism.

I found the file very informative on the background of programming. Although it doesn’t explain techniques to learn programming it gave me an insight on what programming is and is not used for. Also I learnt the pros and cons of the programming language.  

What I have learned and Goals for Creative Coding

After completing the first assignment for DSDN 142 I am gradually grasping an understanding of the open processing software. At the beginning of this course I was only able to plot points on the sketch with no knowledge of methods to create sketches faster or tools to make the designs more dynamic. Now after reading more and a little bit of trial and error I could use lerpColour confidently, write variables in some but not all cases and use the transparency tool effectively. Obviously I still have a lot of learning to do but I now feel I have the basics of open processing covered.

What I would like to improve on is writing variables and creating loops for more complex patterns. As of now I can write basic pattern loops though it would give me a lot more flexibility as a designer to know to write specific equations for difficult design patterns, movements and transformations. For the following project, which is associated with transformation, I think it is essential I learn how use more advanced loops and equations in order to gain a good outcome. Therefore my goal for the next week is to create loops that involve the pattern moving interestingly and possibly unpredictably, and also incorporating the mouse as a means of determining what part of the design you see when it is moved across the screen. 

Processing Wallpaper 4

This is my 4th wallpaper. I made some minor changes in this wallpaper from the 3rd one using the stroke tool and lerpColor tool. I made the stroke transparency the same value to its corresponding as transparent square. I believe this gives the pattern a more natural flow of colour from left to right. I then used lerpColor to blend the pink and orange together on the right side of the pattern. I found this quite difficult at first, however managed to create an aesthetically pleasing transition from colour to colour which I am very happy with. Overall the composition has a nice colour flow throughout the many series of squares. 

Processing Wallpaper 3

This is my 3rd wallpaper design. I decided to go with the very pale pink as a background colour as this is subtle and does not distract the viewers eye from the pattern. Also the pink I added to the right side of the pattern adds another dimension to the design. It gives the pattern more vibrance and energy, I feel in the following wallpaper I could blend the pink and orange together more smoothly.   

Experimenting with Colours

Here I am just experimenting with background colour. The pattern alone consists of light to dark shades of orange with a hint of pink also. Therefore I need to try different tones of background colour that compliment the pattern and that are in harmony with the other colours. By doing this it will make the overall design more dynamic and intriguing.

Processing Wallpaper 2

This is my 2nd wallpaper. This is the same in the shape style as as my first wallpaper because I want to keep my set of 4 very similar in shape and formality. What I incorporated in this pattern was fill and transparency. I found fill easy to use, however I did have to rearrange the code to allow the transparency to work the way I wanted it to. This design emphasises the colour values between orange and white. From the left of the pattern the orange fades in. The fill of the white against the opaque orange shows the contrast between the two.

Processing Wallpaper 1

This is my first wallpaper on processing. This took me quite some time as I could write some variables with the middle three lines that are full, however I had to write each code for every other rectangle on the screen. I wanted to start off simple so the 4 wallpapers show a development of this similar shape. I like the zig-zag and uneven pattern this displays. I positioned the centre rows of the squares to the right slightly as I wanted to follow the rule of thirds technique. The rule of thirds helps to add weight, intensity and interest to the overall composition by placing the majority of visuals to one side.

Concept Sketch 3 & 4

Concept Sketch 4

What inspired me to do this design was when I was turning the volume on my stereo, a series of digital square bars move up and down which correspond to the pitch of the sound. I thought this look very interesting and I knew it could definitley be possible to create on Processing. What I like about it is how it represents a digital/technological world.

I think this is the sketch I will develop on processing out of the 4 as I believe this has the most potential. My goals for this design on processing is to learn how to use the transparency tool in order to create a fade-out effect on the squares. In addition to this I want to learn how to use the LerpColor tool so I can merge the pink and orange together in a more natural and organic sense. I am excited about modifying this concept as I believe the finished design will look fascinating.

Concept Sketch 3

This pattern is based on a series of lines which follow random paths. What inspired me to do this was a maze-like pattern I wanted to emulate, however the grey background and white lines did not come out very crisp on the scan so it is hard to get a good understanding of how I wanted it to look. I like this idea because the nature of the lines are arranged in a random and unpredictable type way and the viewers eye unconsciously follows the pattern. 

If I was to modify this design on Processing I think I could make the design more abstract with more variety of line stroke. Also I could change he colour scheme as it is quite subtle at the moment. By utilising bright highlighter colours that smoothly transition into other colours along the lines could look really effective.

Concept Sketch 2

This pattern is similar to my first concept as it is a composition based on duplicated shapes. My inspiration for the shapes was a window in my house which has that diamond texture you usually see in church windows. Then for the colours, I experimented with light and dark. I quite like this colour scheme as it similar to Louis Vuitton which I feel has a funky yet sophisticated appearance.

If I choose to modify this pattern on Processing I would think about fading the colours in and out between the diamonds making it look more dynamic. Learning how to use transparency and loop on Processing will be essential in order to execute this design pattern.

Concept Sketch 1

This pattern as you can see is based on a series of repeating circles. The idea for this came to me from just playing around on a piece of paper with a compass, experimenting with stroke sizes, as well as circles drawn inside and outside of each other. I like the colour scheme I have chosen for this as the majority of the composition consists of heavy and light tones of brown creating an overall sense of harmony in the design.

Processing Sketch 4 (The Beautiful One)

This is my favourite Processing design of all as I feel it just glows with beauty and importance. I created this by drawing lines on each top corner, coming diagonally to the centre. Then I drew an ellipse in the centre of the design. What I found out about when creating this is that when you continuously repeat lines and closely together also, the pattern begins to form illusions that your not intending to do.

Processing Sketch 3 (The Interesting One)

After playing around and experimenting with code, I learnt how to duplicate lines and other patterns which ended up saving alot of time and effort. This pattern was formed by drawing two triangles which met in the centre of the composition. By finding an equation suitable, I was able to duplicate each line downwards 10 pixels to create this vibrant and futuristic pattern. I find this design interesting as you can use your own imagination for this one. To me it appears as though the green lines are being stretched downwards by the tip of the white triangle. I think the repitition and glowing green look very effective also.

Processing Sketch 2 (The Fancy One)

For this pattern I wanted to create a design that looks neat and tidy. By neat and tidy I mean a design that has symmetry and balance throughout the composition. I used orange and white as my two colour schemes as they compliment each other and produce a vibrant appearance. The pattern is simply made up of ellipses and squares which gradually come together from both sides of the composition to form a flower-like symbol down the middle. I made the white line quite thin as this gave the overall design more elegance.

Processing Sketch 1 (Hand-drawn Sketch)

Design Influence:

This is an image which I was fascinated by and wanted to use as an influence for my hand-drawn sketch. It is a series of lines which create overlapping rectangles and squares. I wanted to create something which looked quite confusing and hard to comprehend and I thought this was the ideal image.

Hand-drawn Sketch:

This is my hand-drawn concept which I created after the lecture. I made this drawing slightly different to my influence by adding small and large squares throughout the composition. I also changed the length and the direction of the lines. I believe this makes the design appear like a maze and when created on Processing it will look like an interesting illusion.

Final Sketch (On Open Processor):

This is my modified concept which has been created on Processing. It is very similar to my original drawing. Although I could have experimented with different colours, I feel the black and white conveys the powerful relationship between positive and negative space. I also the sense of balance in this design as well as the different paths of line which allow your eyes to wander.