142 Creative Coding
Monday, 6 June 2011
Filming
It proved very hard to get a studio and a good dancer to condribute in my final project. By chance my best friend from Australia who is a world renouned ballet dancer was visiting Auckland and competing in a competition on the same weekend I was back at home. I got permission to film and got help with different camera angles from my friend Daniel Plested. I was able to film her rehursal, warm up and actual stage performance but came to conclusion that the stage performance was the best one, and edited and added my own music that suited.
Writing 200-300words
To explain the methods and techniques of creative coding to a complete, clueless stranger, is a difficult task. It can look very complex and becomes very difficult to understand the in's and out's of the way in which the computer program responds to the data that we insert into it. The project that we have been asked to do is to explain one of these techniques without using words, to someone who has no knowledge in the area. I have chosen to go with loop(). For this particular technique I am going to show it in the format of something that I am very passionate about, and that can be expressed in many different forms. To show the job of a loop() I have gotten a Classical ballet dancer to perform a sequence of movements. Once she has completed the sequence of movements, to the provided music, she stops, as does the music. Then she repeats this, but instead, she goes up a level of difficulty and repeats the sequence at a faster pass, and the music complies. This is repeated 3-4 times. This will show my audience the function of a loop(), as it causes the dancer to excite her sequence of movements continuously. that it and it is clear for them what it is used for by being compared with something that happens in life.
Monday, 16 May 2011
Idea one
Showing the concept of 'loop()'
Relate this into real life situations such as dancing which is a passion of mine.
My idea is to get one ballet dancer to perform a routine that is 8-10seconds long, after this is finished the dancer repeats this therefore showing a loop. But to get this more complex, each time the routine will become faster (going up a level each time).
This will be a simple way to show 'loop()' without using words and will be a self explanitory presentation, so that people who don't know anything about coding will be able to understand and relate.
Relate this into real life situations such as dancing which is a passion of mine.
My idea is to get one ballet dancer to perform a routine that is 8-10seconds long, after this is finished the dancer repeats this therefore showing a loop. But to get this more complex, each time the routine will become faster (going up a level each time).
This will be a simple way to show 'loop()' without using words and will be a self explanitory presentation, so that people who don't know anything about coding will be able to understand and relate.
Project 3
Loop ()
example :void setup() {
size(200, 200);
noLoop();
}
float x = 0;
void draw() {
background(204);
x = x + .1;
if (x > width) {
x = 0;
}
line(x, 0, x, height);
}
void mousePressed() {
loop();
}
void mouseReleased() {
noLoop();
}
Description Causes Processing to continuously execute the code within draw(). If noLoop() is called, the code in draw() stops executing.
Syntax
loop()
redraw()
draw()
Returns None
Usage Web & Application
Related noLoop()
example :void setup() {
size(200, 200);
noLoop();
}
float x = 0;
void draw() {
background(204);
x = x + .1;
if (x > width) {
x = 0;
}
line(x, 0, x, height);
}
void mousePressed() {
loop();
}
void mouseReleased() {
noLoop();
}
Description Causes Processing to continuously execute the code within draw(). If noLoop() is called, the code in draw() stops executing.
Syntax
loop()
redraw()
draw()
Returns None
Usage Web & Application
Related noLoop()
Monday, 2 May 2011
Open processing link
My final - uploaded on open processing
http://www.openprocessing.org/visuals/?visualID=28093
http://www.openprocessing.org/visuals/?visualID=28093
Final
In my final, I experimented with sound and changing the background. I found that when I added a pattern to the background or changed the colour, it took away from the colour and texture of the raindrops. They either got lost in the background or the colours did not compliment each other.So I decided black was hte best option.
With the sound I started off only using 4 harp sounds, but then graduated to using 9. This created a more complex sound and was much more appealing.
My project is clean but looks good with its simple lines and the overall idea. It is effective by the colours used and the way in which the rain fades from dark to light. Also the sounds compliments the feeling and movement of the rain.
With the sound I started off only using 4 harp sounds, but then graduated to using 9. This created a more complex sound and was much more appealing.
My project is clean but looks good with its simple lines and the overall idea. It is effective by the colours used and the way in which the rain fades from dark to light. Also the sounds compliments the feeling and movement of the rain.
Sunday, 1 May 2011
Improvements
For my final coding sounds. I wanted to add a tune that played when the rain drops hit the ground, creating a soft calm sound that was nice to hear. I originally thought that piano keys would work but it was too harsh and became annoying when activated. So I went for a more demure instrument and decided that the harp would be well suited. It is very hard to find someone that owns a harp so I found an online harp and recored each note on my phone and then converted them to wav. files on my computer.
improvements for over holidays:
To improve my interactive game i would like to be able to get one cloud to rain and i clicked and let go but when I let go the cloud stayed in that position so I could form multiple rain clouds. This would effective because at the end of it I would be able to create a whole 'sky' full of rain clouds and maybe a special key could clear the sky and you could start again. Also if you just wanted one cloud raining consistently then another key could be pressed to put you in that mode. this is a complication that I think would be quite effective but very difficult and with my skill and experience level on processing I'm not sure this would be achievable with no help over the holidays, although would be an interesting experiment to try.
Even if this idea doesn't work out I would still learn quite a lot on the way therefore broadening my knowledge which will help me with later projects.
improvements for over holidays:
To improve my interactive game i would like to be able to get one cloud to rain and i clicked and let go but when I let go the cloud stayed in that position so I could form multiple rain clouds. This would effective because at the end of it I would be able to create a whole 'sky' full of rain clouds and maybe a special key could clear the sky and you could start again. Also if you just wanted one cloud raining consistently then another key could be pressed to put you in that mode. this is a complication that I think would be quite effective but very difficult and with my skill and experience level on processing I'm not sure this would be achievable with no help over the holidays, although would be an interesting experiment to try.
Even if this idea doesn't work out I would still learn quite a lot on the way therefore broadening my knowledge which will help me with later projects.
Monday, 11 April 2011
Reference
This is the original code that gave me inspiration and helped me conduct my own code.
http://www.openprocessing.org/visuals/?visualID=2319
http://www.openprocessing.org/visuals/?visualID=2319
Main idea
A developement on my previous ideas has lead me to rain. I found a code with falling dots which really interested me. To make this more interactive and my own, I decided to make the rain appear only when I dragged my mouse, so in the area I dragged my mouse the rain would fall in that block. Also the colour was quite boring so I wanted to make it go from a dark blue to a light blue.By doing this another idea came to mind, that rain falls from clouds. I have been looking at pictures of clouds and the form of them and by using elispses and circles and combining transparencey I will hopefully be able to achieve the realistic idea of a cloud that produces rain. 
Thursday, 31 March 2011
Reference
http://www.youtube.com/watch?v=jZFENVBK1wQ&feature=related
this was a nice reference to my layering idea.
this was a nice reference to my layering idea.
Colour Swatch
The colours I think I am going to use are down the far end of this colour swatch. So I am using the pinks/red and blues. With use of fade and transparency and smooth connecting lines.
Idea 3
Mouse activates flowers on screen ( wherever mouse is clicked). The flower grows from the centre to form an over-all shape. Each petal codes for a differnt colour (semi moving/pulsing), and that codes for a different sound. Also each flower will have different coloured petals with matching sounds but occasionally expressing the same colour so that the sounds compliment each other.
All the sounds work well together so when played they are easy to listen to.
An advance made to this, is that instead of just flowers a over-all pattern could be created, using swirls and circles.
All the sounds work well together so when played they are easy to listen to.
An advance made to this, is that instead of just flowers a over-all pattern could be created, using swirls and circles.
Wednesday, 30 March 2011
Idea 2
For school last year I experimented with ink in water, and running ink down paper and It looked really good. So I thought it would be interesting to try it out on coding. I'm not sure if you can get the same smooth, dark-light/patchy look but worth a try.
I think as you click your mouse you activate a line of ink to fall, and this will make a sound as it decends down the page. As you click more to the left it creates deeper sounds and to the right higher sounds this will also be matched by colours that I feel match each sound. Also to add another dimesion would be to had extra layers in the background and collate both my paint splodges idea with this one. Creating a inky look but in the form of a spoldge (almost as if it has been thrown at the screen).
I think as you click your mouse you activate a line of ink to fall, and this will make a sound as it decends down the page. As you click more to the left it creates deeper sounds and to the right higher sounds this will also be matched by colours that I feel match each sound. Also to add another dimesion would be to had extra layers in the background and collate both my paint splodges idea with this one. Creating a inky look but in the form of a spoldge (almost as if it has been thrown at the screen).
Inspiration
I have always thought splodges of paint look very effective. So for this topic of transformation, I thought that maybe it would be a good idea if I encorprated them in some way. For my first idea, I thought that by clicking your mouse you were able to activate a paint splodge to be created on your screen, Almost as if you are painting your own painting. The background would be a canvis sort of style and each splodge would be a different sound that expressed the motion in which you click. Different colours that complimented each other would be used, and the an over-all picture would be created. To add extra interest to this, another component could be if the splodges had some sort of flash response or flickered a 
little but these ones were only like this as they expressed the same sound? This is all me just typing up ideas.
little but these ones were only like this as they expressed the same sound? This is all me just typing up ideas.
Monday, 21 March 2011
Process overview
I am the type of person that is all about process. My original idea is never the same as my final outcome. I use to think this was a bad thing but I have come to learn that this is what design is all about.
I started off with my original sketches. They were bright, detailed and didn't really match each other. They were four completely different wallpapers, which wasn't the concept that was asked of us. After getting feedback from the class and Ben, I went back to the drawing board and figured out what I wanted to stare in the direction of. This direction consisted of lines (which I refer back to in my previous posts). I ressearched and found some images I could get my inspiration from. This didn't work out too well via coding and the images became to similar and I felt that they weren't very original. Therefore, I moved away from this concept and leaned towards the idea of circles and use of lines and different shades of colour. I played around and found a code that made up one large circle with two circles beside each other inside of the larger circle, and then in each one of those circles another two were placed.
I then repeated the circle and changed the colour around and the size. This really proved to be trial and error but after a while of doing so, I made a few fortunate mistakes. As these happened and as things started to go my way, I evolved my design into something that I thought was really capturing. It is detailed but not confusing or too busy. I like the curve of the lines and how they are outlined in yellow, which made the circles pop and you are able to differnciate each circle from one another due to this. The background was a bit boring once I had done the circles, so I experimented with gradients. I found one that had a grid format which created a nice deatil and added texture to the overall concept. This tied the whole scale of the image together and sort of carried your eyes from right to left with the increasing exposure of the colour and then the gradual change into green. Also as the image moves from board to baord the circles become less complicated and intense which also drags your eyes from right to left. By creating one large image and splitting them up, they all work together and allow the over all flow and dynamic to occur with a punch.
I started off with my original sketches. They were bright, detailed and didn't really match each other. They were four completely different wallpapers, which wasn't the concept that was asked of us. After getting feedback from the class and Ben, I went back to the drawing board and figured out what I wanted to stare in the direction of. This direction consisted of lines (which I refer back to in my previous posts). I ressearched and found some images I could get my inspiration from. This didn't work out too well via coding and the images became to similar and I felt that they weren't very original. Therefore, I moved away from this concept and leaned towards the idea of circles and use of lines and different shades of colour. I played around and found a code that made up one large circle with two circles beside each other inside of the larger circle, and then in each one of those circles another two were placed.
I then repeated the circle and changed the colour around and the size. This really proved to be trial and error but after a while of doing so, I made a few fortunate mistakes. As these happened and as things started to go my way, I evolved my design into something that I thought was really capturing. It is detailed but not confusing or too busy. I like the curve of the lines and how they are outlined in yellow, which made the circles pop and you are able to differnciate each circle from one another due to this. The background was a bit boring once I had done the circles, so I experimented with gradients. I found one that had a grid format which created a nice deatil and added texture to the overall concept. This tied the whole scale of the image together and sort of carried your eyes from right to left with the increasing exposure of the colour and then the gradual change into green. Also as the image moves from board to baord the circles become less complicated and intense which also drags your eyes from right to left. By creating one large image and splitting them up, they all work together and allow the over all flow and dynamic to occur with a punch.
Goals
Is there anything that you would want to improve in your next project? Goal and make a plan of how to achieve this.
I really like my design, but there are a few improvements that I would carry through to my next project. I feel that maybe next time I could read up on specific techniques a bit more, and really drill that knowledge into my head so that I could work more freely and quickly, instead of experimenting and doing it over and over untill I get what I want. I know that processing is about experimenting but as we heard in our lecture today from our guest speaker : you should learn the basics, it takes a while but it is worth it because it gives you a lot more freedom in the future. Another improvement I would make is my time managment. I am one to do things last minute. In this case I planned my time well, but instead of asking questions earlier on, I asked them near the end, so next time I will push this forward a week or two.
My goal and plan to achieve:
My goal for the next project 'transformation', is to allow time for mistakes and to ressearch everything I want to know how to do on processing. To achieve this I will put extra time aside outside of class, therefore allowing myself to learn more and become a stronger more knowledgeable student.
I really like my design, but there are a few improvements that I would carry through to my next project. I feel that maybe next time I could read up on specific techniques a bit more, and really drill that knowledge into my head so that I could work more freely and quickly, instead of experimenting and doing it over and over untill I get what I want. I know that processing is about experimenting but as we heard in our lecture today from our guest speaker : you should learn the basics, it takes a while but it is worth it because it gives you a lot more freedom in the future. Another improvement I would make is my time managment. I am one to do things last minute. In this case I planned my time well, but instead of asking questions earlier on, I asked them near the end, so next time I will push this forward a week or two.
My goal and plan to achieve:
My goal for the next project 'transformation', is to allow time for mistakes and to ressearch everything I want to know how to do on processing. To achieve this I will put extra time aside outside of class, therefore allowing myself to learn more and become a stronger more knowledgeable student.
Reflection
Reflect on your learning process in project one. What have you learned so far, what helped and motivated you to learn?
When I first started creative coding I was very confused and lost. It was all so complicated and I felt like I was going no where and had no idea where to even begin. Other people in my class seemed to be steaming ahead and I felt within the first two weeks I had come up against a brick wall. I knew that I could concor this wall, it was just a matter of how long it would take and much effort I had to put in. I am a hard worker and therefore always strive towards getting things right but I have a tendacy not to ask questions. throughout school I never asked questions and have come to regret this, but have learnt that asking for help isn't a bad thing. From learning this I started to ask more questions even if they may of sounded foolish. By asking Ben, my tutor, I learned a lot and he gave me books and websites to investigate. By doing so, I was able to gain the key techniques that allow you to create designs on pattern maker.
I realised that you have to do a lot of your own work and what you learn in class is what you need to go home and practice untill it is stuck in your mind. Apart from my tutor motivating me, I found some exterior motivation in my ressearch into what my designs were actually about. e.g. I looked up the meaning of colurs and different types of circle patterns. I used these as artist models, and was able to stem my inspiration from them. Also once I had drafted my sketches and had decided on a final design, so I conducted a small survey to see what other views and perseptions I could gather. By getting their positive feedback, this gave me the confidence to follow through with my creation. I also got some constructive critisim, which allowed me to make slight allterations and test out other ideas in which some people expressed.
My design process was very slow. From school I learnt that it is essential to go through a process, no matter what it is. I did multiple sketches with differnt types of colours, weight lines etc. Then tryed them out on pattern maker. By having these variations so that I could physically see them really helped me to develope my over all design.
In the end I got there. I am happy with my design, the use of colour and circles is what I invisioned and I am very suprised that I could actually create something on pattern maker that I initially sketched. I made my 4 wallpapers coalate as one. Therefore when placed together they make one pattern. The first image starts off really intense with a lot of circles and more colour then carrys through to the forth image, where there are less circles and more darker colours.
When I first started creative coding I was very confused and lost. It was all so complicated and I felt like I was going no where and had no idea where to even begin. Other people in my class seemed to be steaming ahead and I felt within the first two weeks I had come up against a brick wall. I knew that I could concor this wall, it was just a matter of how long it would take and much effort I had to put in. I am a hard worker and therefore always strive towards getting things right but I have a tendacy not to ask questions. throughout school I never asked questions and have come to regret this, but have learnt that asking for help isn't a bad thing. From learning this I started to ask more questions even if they may of sounded foolish. By asking Ben, my tutor, I learned a lot and he gave me books and websites to investigate. By doing so, I was able to gain the key techniques that allow you to create designs on pattern maker.
I realised that you have to do a lot of your own work and what you learn in class is what you need to go home and practice untill it is stuck in your mind. Apart from my tutor motivating me, I found some exterior motivation in my ressearch into what my designs were actually about. e.g. I looked up the meaning of colurs and different types of circle patterns. I used these as artist models, and was able to stem my inspiration from them. Also once I had drafted my sketches and had decided on a final design, so I conducted a small survey to see what other views and perseptions I could gather. By getting their positive feedback, this gave me the confidence to follow through with my creation. I also got some constructive critisim, which allowed me to make slight allterations and test out other ideas in which some people expressed.
My design process was very slow. From school I learnt that it is essential to go through a process, no matter what it is. I did multiple sketches with differnt types of colours, weight lines etc. Then tryed them out on pattern maker. By having these variations so that I could physically see them really helped me to develope my over all design.
In the end I got there. I am happy with my design, the use of colour and circles is what I invisioned and I am very suprised that I could actually create something on pattern maker that I initially sketched. I made my 4 wallpapers coalate as one. Therefore when placed together they make one pattern. The first image starts off really intense with a lot of circles and more colour then carrys through to the forth image, where there are less circles and more darker colours.
Design processes
These are some of my designs and processes that got me to my final design and helped me make decisions.
interview 17/03/2011
A picture of my final design that I had drawn was shown to respond to the questions.
1. Architecture Student : Anna Mackay
Question 1: What appeals to you the most?
answer : " I really like the use of colour and the boldness of the lines used. Also The gradient of the green into the yellow."
Question 2 : " What do you dislike?"
answer : " nothing about it really catches my eye as 'bad', it is clean and well presented but also is intenese in places and allows the viewer to engage in its intricate patterns but at the same time not being confused on where to look, the line flows."
2. Carol Henderson - Adult, family friend
Question 1
answer : "I really enjoy the cirtcles and the motion in which they move and create an experience for the person viewing it. It is almost interactive."
Question 2
answer : "I personally don't like the colour green, but in this case. A small amount is used and it isn't a harsh green, it is smooth and blends nicely into the yellow. an overall 'happy' feel is created but also doesn't distract away from the abstract/bold circles."
3. Daniel Plested - friend
Question 1
answer : " The circles are a main feature that really pop out to me. I love the lines used and how the yellow is a outline for the circles instead of just being one colour. The blacks, greys and whites are also nicely done and create a clean feel. The density of the block colours are all paired very well and compliment each other in different ways."
Question 2:
answer : "No. I like it all, maybe try the gradient with differnt colours? Just to see if you like it. But I do like the yellow and green although I wouldn't pick them myself."
1. Architecture Student : Anna Mackay
Question 1: What appeals to you the most?
answer : " I really like the use of colour and the boldness of the lines used. Also The gradient of the green into the yellow."
Question 2 : " What do you dislike?"
answer : " nothing about it really catches my eye as 'bad', it is clean and well presented but also is intenese in places and allows the viewer to engage in its intricate patterns but at the same time not being confused on where to look, the line flows."
2. Carol Henderson - Adult, family friend
Question 1
answer : "I really enjoy the cirtcles and the motion in which they move and create an experience for the person viewing it. It is almost interactive."
Question 2
answer : "I personally don't like the colour green, but in this case. A small amount is used and it isn't a harsh green, it is smooth and blends nicely into the yellow. an overall 'happy' feel is created but also doesn't distract away from the abstract/bold circles."
3. Daniel Plested - friend
Question 1
answer : " The circles are a main feature that really pop out to me. I love the lines used and how the yellow is a outline for the circles instead of just being one colour. The blacks, greys and whites are also nicely done and create a clean feel. The density of the block colours are all paired very well and compliment each other in different ways."
Question 2:
answer : "No. I like it all, maybe try the gradient with differnt colours? Just to see if you like it. But I do like the yellow and green although I wouldn't pick them myself."
Colour Spectrum
Colour Spectrum is how I made sure my colours would work well together, not only to my eye but to the technical side of it as well. Also to ensure my colours were appropriate I asked 3 different people for their opinions: 1.a design student, 2. Adult, 3. friend. Becuase not only is it important for you to think your design looks good, but also for others and to see what different aspects they focus on.Meaning of colours
I find the meaning of colours quite an interesting topic. It is very important to consider this when designing something e.g. If making a bright, positive number the colours black, purple or maroon would not be appropriate. So I researched the meanings of each colour:
Yellow - Yellow is sunshine. It is a warm color that, like red, has conflicting symbolism. On the one hand it denotes happiness and joy but on the other hand yellow is the color of cowardice and deceit.
Yellow is one of the warm colors. Because of the high visibility of bright yellow, it is often used for hazard signs and some emergency vehicles. Yellow is cheerful.
For years yellow ribbons were worn as a sign of hope as women waited from their men to come marching home from war. Today, they are still used to welcome home loved ones.
Green - Life and Renewal, the Nature and Culture of Green:
Green is life. Abundant in nature, green signifies growth, renewal, health, and environment. On the flip side, green is jealousy or envy (green-eyed monster) and inexperience. Green is a restful color with some of the same calming attributes of blue. Like blue, time moves faster in a green room.
Because of all the green in nature the color is reminiscent of Spring.
Overall both these colours represent something good and bad, but in my case I am going to focus on the good side of these.
Sunday, 20 March 2011
Gradients
The second image is just a coalition of various colours that I thought I could end up using. Also you can see how particular colours work with one another e.g. green and yellow, pink and red etc.
Inspiration
I looked around the web and found some circular designs that caught my eye. I like the way the curves create movement and there are so many ways in which you can arrange and dissect the circles to make them into different patterns. I especially like the layered look, which allows depth to be added to a usually 2D object. After doing some sketches and researching a bit more I decided that this is the direction I want my creative coding patterns to be heading in.
Tuesday, 15 March 2011
http://www.youtube.com/watch?v=d6egUsZvWu4
This is a link to a technique called tall painting.
It is really interesting and got me thinking about how to combine a lot of different colours and their relationships with one another. Also the use of line thickness and the vibrant fresh effect that is given.
This ties in with the Missoni patterns I previously posted. I feel they both have that young, bold look about them which is the overall theme I am basing my wallpaper designs around.
This video also shows physical movement, but when the paint is dry, it still creates the same feel of its initial quality.
This is a link to a technique called tall painting.
It is really interesting and got me thinking about how to combine a lot of different colours and their relationships with one another. Also the use of line thickness and the vibrant fresh effect that is given.
This ties in with the Missoni patterns I previously posted. I feel they both have that young, bold look about them which is the overall theme I am basing my wallpaper designs around.
This video also shows physical movement, but when the paint is dry, it still creates the same feel of its initial quality.
This is a designer fashion label that has always been a favourite of mine. I love the abstract patterns that are created by the bold colours and use of shapes. They all come together in the form of visually appealing images, that combine texture and give a sense of movement throughout the garment or object they are placed on. This sense of movement can either create a calm flowing effect or a busy intricate detail. This is why I love this brand and I have followed it for so many years. It was a good inspiration for me, and something that both gave me a stable starting point but also something I was passionate about and interested in, which got my ideas flowing.
Website: http://www.missoni.com/ing.html
Subscribe to:
Posts (Atom)