 |
| light is ON. Array of images near the start of the ON index |
 |
| light is OFF. Array of images near the end of the OFF index |
 |
| light is ON. Array of images is at the last image index of the ON array |
31.5.11
ScreenShots of my Processing application
Next stage of progress
By this point I decided to reconsider what the ultimate goal of this project was.
I am well aware of how complicated and detailed I make some of my projects - while at the same time bypassing the whole point of the project.
I put my foot down, and decided to make my interactive application with fewer options
to the user.
The fewer there are, the more likely the point will get across.
The point being - 'if'/else' loops are simple and
come with conditions to be met before the loop is entered.
Below is my description of an 'if/else' loop to a non-programmer:
***************************************************************
If it is raining, it is a week day, and I have work – I will drive my car to work.
Else if it is sunny, it is a week day, and I have work – I will walk to work.
***************************************************************
Okay... now, after talking to my lovely, funny and smart tutors (Ben and Luke, Luke and Ben) ...hee hee -
I made the decision to start my application with a picture on the screen of an artist and his easel.
Instead of having options to - change the type of material paint on, and whether the lamp is on or off - on a separate tool bar down the bottom of the screen, one of my tutors suggested I incorporate those functions into my image. There for, I made the lamp, three rolls of paper on the ground all interactive.
To turn the light on and play through the different levels of the painting, one must simply left click on the lamp, else if you right click and the light is off, you see the result of a painter painting in the dark!
The three paper options lying on the ground for the user to choose are clickable too.
Initially I would have liked to have drawn the sketch of the artist and his easel with great detail but sooner , rather than later (lucky), found it would take away that special 'oomph' of the painting illustrated on the canvas placed on the easel.
Below is my description of my project:
***************************************************************
***************************************************************
The above description was written and submitted before I finished writing the code for this project on Processing. I suppose the development stage isn't over until the second you hand in the end result.
Between submitting the Exhibition Description, and handing in the end result at the exhibition, I had successfully changed a few major things within my processing code.
I changed the automatic animation of the array of painting images, to one image per click. This means it would be less messy when the user decides to switch the light on or off. Effectively, when the state of the lamp changes, it starts pulling images from a completely different array of images. One array is the 'lamp on array', and the other is the 'lamp off array'.
With regards to the three paper options, I made them single separate images which are placed on the easel. It actually places the paper on top of the painting but this is how I designed it. I've made the arrays of images slightly transparent there for revealing some of the texture of the paper below.
Also, I did have a minor hic'up when it came down to painting the glow of light surrounding the lamp in 'on' position. Firstly I had trouble removing that circle of light once it was switched on, but I figured I could just replace the image at half transparency of the background right over everything to minimize the glow.
This didn't pose any issue in relation to illustrating the painting on the canvas. Each time the lamp is clicked, the code knows which array index it got to on the last click and it starts with the next in the index whether it is from the same array or the other.
YAY! It was eventually finished!!!
I am well aware of how complicated and detailed I make some of my projects - while at the same time bypassing the whole point of the project.
I put my foot down, and decided to make my interactive application with fewer options
to the user.
The fewer there are, the more likely the point will get across.
The point being - 'if'/else' loops are simple and
come with conditions to be met before the loop is entered.
Below is my description of an 'if/else' loop to a non-programmer:
***************************************************************
An ‘if/else’ loop is only one of many types of loops within programming. Loops are blocks of code that run in order from top to bottom over and over again before moving onto the next bit of code. With an ‘if/else’ loop, there are conditions to be met before the computer can run through that block of code.
Some loops can run infinitely but most loops aren’t designed to.
For the ‘if/else’ loop, the computer will run through the ‘if’ block of code if one condition is met, else it will run through the ‘else’ block of code. Regardless, it will run through one of the options. An example of a real life ‘if/else’ loop would be as follows:
Some loops can run infinitely but most loops aren’t designed to.
For the ‘if/else’ loop, the computer will run through the ‘if’ block of code if one condition is met, else it will run through the ‘else’ block of code. Regardless, it will run through one of the options. An example of a real life ‘if/else’ loop would be as follows:
If it is raining, it is a week day, and I have work – I will drive my car to work.
Else if it is sunny, it is a week day, and I have work – I will walk to work.
***************************************************************
Okay... now, after talking to my lovely, funny and smart tutors (Ben and Luke, Luke and Ben) ...hee hee -
I made the decision to start my application with a picture on the screen of an artist and his easel.
Instead of having options to - change the type of material paint on, and whether the lamp is on or off - on a separate tool bar down the bottom of the screen, one of my tutors suggested I incorporate those functions into my image. There for, I made the lamp, three rolls of paper on the ground all interactive.
To turn the light on and play through the different levels of the painting, one must simply left click on the lamp, else if you right click and the light is off, you see the result of a painter painting in the dark!
The three paper options lying on the ground for the user to choose are clickable too.
Initially I would have liked to have drawn the sketch of the artist and his easel with great detail but sooner , rather than later (lucky), found it would take away that special 'oomph' of the painting illustrated on the canvas placed on the easel.
Below is my description of my project:
***************************************************************
***************************************************************
The above description was written and submitted before I finished writing the code for this project on Processing. I suppose the development stage isn't over until the second you hand in the end result.
Between submitting the Exhibition Description, and handing in the end result at the exhibition, I had successfully changed a few major things within my processing code.
I changed the automatic animation of the array of painting images, to one image per click. This means it would be less messy when the user decides to switch the light on or off. Effectively, when the state of the lamp changes, it starts pulling images from a completely different array of images. One array is the 'lamp on array', and the other is the 'lamp off array'.
With regards to the three paper options, I made them single separate images which are placed on the easel. It actually places the paper on top of the painting but this is how I designed it. I've made the arrays of images slightly transparent there for revealing some of the texture of the paper below.
Also, I did have a minor hic'up when it came down to painting the glow of light surrounding the lamp in 'on' position. Firstly I had trouble removing that circle of light once it was switched on, but I figured I could just replace the image at half transparency of the background right over everything to minimize the glow.
This didn't pose any issue in relation to illustrating the painting on the canvas. Each time the lamp is clicked, the code knows which array index it got to on the last click and it starts with the next in the index whether it is from the same array or the other.
YAY! It was eventually finished!!!
23.5.11
Progress on Project Three:
Wow... so, I've spent a few days drawing in Photoshop, saving, and drawing some more!
Here is the end result of all that drawing and painting:
I came across a few issues.
The first issue was regarding the subject to paint. I needed something that meant something but at the same time wound up quite pretty. I figured, and some of you may not understand this the first time round (sorry, if that is the case), that if I had an enchanted forest, with two fairies - one locked up in a cage and one free fairy - it would illustrate something along the lines of "IF I had no freedom, I'd feel like I were locked away in a cage, ELSE I'd roam the forest"... I don't really know, I'm working on the "if/else" line.
The second issue was to do with the Processing interactive program I was planning on creating with these images. The plan was to have separate images for every change I made to the photoshop image, as well as have separate folders within the image folder with colour coding to separate the orange changes to the green, etc. This I found was going to prove difficult when creating a bunch of arrays, each with a different collection of these images, whether it be blue, orange, red, purple, black outline only, no black outline but with colour...
Here it got COMPLETELY complicated. I reckon if I had a week to efficiently file each image with each change, I could make arrays that work around each other in the program.
The plan has changed now... but to what?
I have around 100 separate jpg images to work with.
Here is the end result of all that drawing and painting:
 |
| Illustration for my "if/else statement' exhibition. |
I came across a few issues.
The first issue was regarding the subject to paint. I needed something that meant something but at the same time wound up quite pretty. I figured, and some of you may not understand this the first time round (sorry, if that is the case), that if I had an enchanted forest, with two fairies - one locked up in a cage and one free fairy - it would illustrate something along the lines of "IF I had no freedom, I'd feel like I were locked away in a cage, ELSE I'd roam the forest"... I don't really know, I'm working on the "if/else" line.
The second issue was to do with the Processing interactive program I was planning on creating with these images. The plan was to have separate images for every change I made to the photoshop image, as well as have separate folders within the image folder with colour coding to separate the orange changes to the green, etc. This I found was going to prove difficult when creating a bunch of arrays, each with a different collection of these images, whether it be blue, orange, red, purple, black outline only, no black outline but with colour...
Here it got COMPLETELY complicated. I reckon if I had a week to efficiently file each image with each change, I could make arrays that work around each other in the program.
The plan has changed now... but to what?
I have around 100 separate jpg images to work with.
16.5.11
Metaphor description and Time management
Metaphor is the concept of understanding one thing in terms of another (Wikipedia, 2011).
Time Management –
Today = 13th May
Chosen if/else statements.
Concepts ready for interim presentation.
Like a particular concept, and would like to start developing to the next stage.
Concepts ready for interim presentation.
Like a particular concept, and would like to start developing to the next stage.
Sunday = 15th May
Developed next stage of sketches for metaphor.
Researched examples of animation-included code for processing
Experimenting with code.
Researched examples of animation-included code for processing
Experimenting with code.
Friday = 20th May -----> Sunday = 22nd May
Create and record entire photoshop speed painting process.
(Between these two dates (above and below), the code will be created on Processing and animation images will be imported into code)
.
Completion date = 27th May
Complete 200-300 word description of exhibition
Exhibition complete with a few days left to fix last minute issues.
Exhibition complete with a few days left to fix last minute issues.
Concept Three
This was actually the first idea that popped into my head when researching for ideas on 'if/else' statements.
The kid that loves chocolate/but only a certain type of chocolate.
This would be a game created on processing.
It would consist of animation/a boy/a box of chocolate.
The idea of this is if the user/audience chooses the right chocolate from that box - so that when the boy bites into it, it displays its contents (ie, gooey caramel or peppermint), if this chocolate is the type the animated boy is searching for, he remains happy and you continue to search for his chocolates in the box.
If somehow you choose a turkish delight, and he happens to dislike them, you loose the game and the animated boy starts to have a tantrum (all displayed via priorly made animated responses).
The kid that loves chocolate/but only a certain type of chocolate.
This would be a game created on processing.
It would consist of animation/a boy/a box of chocolate.
The idea of this is if the user/audience chooses the right chocolate from that box - so that when the boy bites into it, it displays its contents (ie, gooey caramel or peppermint), if this chocolate is the type the animated boy is searching for, he remains happy and you continue to search for his chocolates in the box.
If somehow you choose a turkish delight, and he happens to dislike them, you loose the game and the animated boy starts to have a tantrum (all displayed via priorly made animated responses).
Concept Two
Creating an animation on a few hundred cards and making a machine to flick through them quickly for the exhibition. I know once all the cards have flicked through, it would have to restart. That is exactly what it would do.
Imagine - hundred or so cards (size of a large open hand), on one side of these cards is a black outline sketch that changes slightly on each card (therefor creating the animation on quick flick through). The other side of the card will be a sketch that changes with movement too.
The if/else kicks in...... now!
If the audience/user stands to the left of the card flicking machine, in open view of the one side of the pack of cards, they will view the if statement.
For example, 'if I were to walk to work today, I would take a scenic route but it would take longer'.
Now, if the audience were to stand on the other side of the deck of cards, they would view the 'else' statement.
For example, 'else, if I were to take my car to work today, I would get there quickly and start work earlier'.
I think this would definitely explain what if/else statements do.
This concept would cost more than concept One. It requires a machine to handle and flick through cards quickly while keeping them in view of the audience. This would have to be thoroughly researched before could be made or found. However, the card/animation aspect would be less time absorbing than Concept One.
Imagine - hundred or so cards (size of a large open hand), on one side of these cards is a black outline sketch that changes slightly on each card (therefor creating the animation on quick flick through). The other side of the card will be a sketch that changes with movement too.
The if/else kicks in...... now!
If the audience/user stands to the left of the card flicking machine, in open view of the one side of the pack of cards, they will view the if statement.
For example, 'if I were to walk to work today, I would take a scenic route but it would take longer'.
Now, if the audience were to stand on the other side of the deck of cards, they would view the 'else' statement.
For example, 'else, if I were to take my car to work today, I would get there quickly and start work earlier'.
I think this would definitely explain what if/else statements do.
This concept would cost more than concept One. It requires a machine to handle and flick through cards quickly while keeping them in view of the audience. This would have to be thoroughly researched before could be made or found. However, the card/animation aspect would be less time absorbing than Concept One.
 |
| This is a film strip, not a card animation but it shows what I mean. |
Concept One
I started thinking...again, yes, I do think. I can illustrate a 'if/else' term by creating a animation on processing but giving the user/audience the tools to create the end result.
For example:
 |
| There are tools on a tool panel created by me on the screen. The user selects the tools of choice and the animation responds accordingly. |
 |
| The lower image is just a simple example of a sketch created within the animation. |
This idea will be labour intensive to create but attached to no extra cost. All that is needed for thisexhibition to work is a computer and processing.
The reason I say this would demonstrate a 'if/else statement' is because, if the user chooses a tool but not another tool sitting next to it, it will create a completely different result from the 'else'/'other' tool.
If I choose a black outline pen, paper, and lamp - it will produce a sketch on a piece of paper with a light to display it/and help with the creation of it, but no colour will be sued. It will end up being a black outline and detailed image.
else if, I choose colour pencils, paper, lamp - it will create a sketch of the shaded colour on paper. No black outline.
else, I choose colour pencils, paper, black pen - it will not have a light to create anything, therefore the end result will be a slight mess (as if someone were sketching in the dark) and the process of animation would be dark too (until the user selected the lamp tool).
Research and Mind-Mapping
The start to a whole new project - Project Three:
We were told to come up with a programming term, for example - array, or if/else statements - and create an exhibition to explain to others how this term works/what it is used for, but without directly telling the audience what it is we are talking about.
We must create a metaphor in place of the term and build something with code, physical utensils, or sound - anything really! Personally, I think this makes the project so much harder. We have guidelines to follow but not many. We can virtually create anything using anything we want, as long as it does not consist of words, spoken or written.
This got me thinking... loooooooong and hard...
I figured in the end, programming something would be in my best interest, considering I'm doing a computer science degree. Next... What term am I going to use and why? How will I create a metaphor?
Hmm...
Below is some of the mind mapping I did while throwing ideas onto paper.
As above, I have a mind map of 'if/else & conditional statements'. I chose this term because it is something that is used soooooo often in programming, and it is generally the first you learn, before arrays or anything else.
The following are some images that I thought I could be inspired by in some way for this particular project.
 |
| Beginning stage of mind mapping |
 |
| continue of beginning stage of mind mapping |
As above, I have a mind map of 'if/else & conditional statements'. I chose this term because it is something that is used soooooo often in programming, and it is generally the first you learn, before arrays or anything else.
The following are some images that I thought I could be inspired by in some way for this particular project.
 |
| Animation vs Animator - I love the idea of animation, but simple stick figure line animation. This is just a single screen image of the animation. I recommend you have a look at the movie. Search on google for Animation_vs_Animator |
 |
| A simple outline of a dog watching a butterfly. Resembles the above animation some what. I think my brain is trying to tell me to create a program on processing with a bunch of animation. |
 |
| Another anime sketch from google search, again just with outline detail. |
12.5.11
2.5.11
Water ripples
When I first started on this sketch, I had big plans of creating real water for the lower half of the screen. This has proven more difficult than I realised. I understand to a certain point how it is done, but then I have to take into consideration that I am not creating a water surface that we look straight down into. Instead, this surface has to disappear into the far distance and operate appropriately.
Second solution - create water ripples on the click of the mouse. These ripples must move towards the user and appear to disappear behind the boat. These ripples must get larger in time and weather the mouse is placed over the left half of the screen or the right half of the screen, the ripple shall move more in that direction as it appears closer and closer to the boat.
This appeared to work, but only in response to the press of the mouse. It would disappear as soon as the mouse button was released. This was very inappropriate and had to be changed.
Unfortunately I cannot move these newly coded ripples move towards the boat in sync with the movement of the ceiling and boat.
However, I have coded the ripples to be more transparent the further away the ripple is created and less transparent the closer they are to the boat.
Oh yeah! Another thing that came to mind was the state of the boat. This boat needed to change in some way according to the users input.
Now, when the mouse is moved closer and closer to the boat (the mouse is the torch), the boat appears to radiate the torch glow (orange). I used a black tint for the boat image when the torch was furtherest away from the boat, and a orange tint that became stronger as the mouse moved closer.
The last issue posing is lag!!
Why does my sketch work perfectly at home on processing and then as soon as it is loaded to openprocessing.org, it lags dramatically??? ARGH!
Second solution - create water ripples on the click of the mouse. These ripples must move towards the user and appear to disappear behind the boat. These ripples must get larger in time and weather the mouse is placed over the left half of the screen or the right half of the screen, the ripple shall move more in that direction as it appears closer and closer to the boat.
This appeared to work, but only in response to the press of the mouse. It would disappear as soon as the mouse button was released. This was very inappropriate and had to be changed.
Unfortunately I cannot move these newly coded ripples move towards the boat in sync with the movement of the ceiling and boat.
However, I have coded the ripples to be more transparent the further away the ripple is created and less transparent the closer they are to the boat.
Oh yeah! Another thing that came to mind was the state of the boat. This boat needed to change in some way according to the users input.
Now, when the mouse is moved closer and closer to the boat (the mouse is the torch), the boat appears to radiate the torch glow (orange). I used a black tint for the boat image when the torch was furtherest away from the boat, and a orange tint that became stronger as the mouse moved closer.
The last issue posing is lag!!
Why does my sketch work perfectly at home on processing and then as soon as it is loaded to openprocessing.org, it lags dramatically??? ARGH!
Working with sound
The sound in my sketch obviously isn't musical - rather it's more environmental. I think this is a downfall. I feel I should have created a wind chime soft musical piece to match the magical glow worm environment. Although, I'd then be asked 'But one doesn't find wind chimes in caves... why does this one have them?'...
Anyway, getting back to my point. I have worked on my individual sound bites. I've decreased the volume of some, created continual loops for the rain in the background and have attached the Drips and Torch sound to match clicks of the mouse or movement over an area.
The water droplets/ripples originally created more than one drip sound. I have reduced this to a single drip along with a single ripple. This leaves more power to the user to control where the drips occur. In addition to this. The sound of the drip gets fainter and fainter the further you click up the screen(over the water section). This is to represent depth and distance.
I had a frog croaking to the side of the screen somewhere but have removed this as it was unnecessary.
I've played and played and pondered over the idea of moving the boat from left to right. I had this originally coded in, but removed it after the Friday night presentation. Since then, I have added it. When the boat moves side to side it creates a boat rocking sound. Unfortunately, the is a bug I just cannot get around with the playing of this sound bite. If the keyboard buttons are pressed for a duration of time to move the boat from side to side, it thinks this is a collection of lots of keyboard taps. Due to this, it plays the sound bite over and over again but restarting every quarter of a second. This is silly, but unfixable.
Anyway, getting back to my point. I have worked on my individual sound bites. I've decreased the volume of some, created continual loops for the rain in the background and have attached the Drips and Torch sound to match clicks of the mouse or movement over an area.
The water droplets/ripples originally created more than one drip sound. I have reduced this to a single drip along with a single ripple. This leaves more power to the user to control where the drips occur. In addition to this. The sound of the drip gets fainter and fainter the further you click up the screen(over the water section). This is to represent depth and distance.
I had a frog croaking to the side of the screen somewhere but have removed this as it was unnecessary.
I've played and played and pondered over the idea of moving the boat from left to right. I had this originally coded in, but removed it after the Friday night presentation. Since then, I have added it. When the boat moves side to side it creates a boat rocking sound. Unfortunately, the is a bug I just cannot get around with the playing of this sound bite. If the keyboard buttons are pressed for a duration of time to move the boat from side to side, it thinks this is a collection of lots of keyboard taps. Due to this, it plays the sound bite over and over again but restarting every quarter of a second. This is silly, but unfixable.
Minimising
The question is 'where is that line between too little and too much?'.
Okay, so I have decided - the horizon in my cave was a stupid idea. This has been removed! Yay for the cave!!
I've actually gone as far as removing the water too. I thought this may pose as an issue but it doesn't. It actually makes you wonder where the water stops and the cave ceiling begins. I have perlin noise on the lower half of my screen to create glow worm reflection. But instead of directly mirroring the ceiling, I've rather created wave lines of perlin noise to represent moving water.
The fire torch - I have had night mares over this silly torch. I can get the particle smoke system working (sort of) in place of the temporary torch... but I can never actually get it to look realistic. Eventually I put my foot down (okay, it wasn't my foot, it was my finger) and removed all the tens of tens of lines of code in charge of the 'smoking fire torch'. Instead, I have now created the affect of moving flames and varying transparency of the glow from the fire to illuminate the screen. This isn't what I originally fantasized about but I got into too much trouble from the grumpy boyfriend for spending too much time on this sketch. Moan moan moan...
Have I mentioned how much I hate arrays?? No I don't think I have. Well, I HATE dealing with arrays!
My dreaded goal is to become more familiar with them and use them without issues in future projects.
Okay, so I have decided - the horizon in my cave was a stupid idea. This has been removed! Yay for the cave!!
I've actually gone as far as removing the water too. I thought this may pose as an issue but it doesn't. It actually makes you wonder where the water stops and the cave ceiling begins. I have perlin noise on the lower half of my screen to create glow worm reflection. But instead of directly mirroring the ceiling, I've rather created wave lines of perlin noise to represent moving water.
The fire torch - I have had night mares over this silly torch. I can get the particle smoke system working (sort of) in place of the temporary torch... but I can never actually get it to look realistic. Eventually I put my foot down (okay, it wasn't my foot, it was my finger) and removed all the tens of tens of lines of code in charge of the 'smoking fire torch'. Instead, I have now created the affect of moving flames and varying transparency of the glow from the fire to illuminate the screen. This isn't what I originally fantasized about but I got into too much trouble from the grumpy boyfriend for spending too much time on this sketch. Moan moan moan...
Have I mentioned how much I hate arrays?? No I don't think I have. Well, I HATE dealing with arrays!
My dreaded goal is to become more familiar with them and use them without issues in future projects.
Creating this glow worm cave and the little extras
For the Friday night presentation before the uni break, we had to finish our Transformation Project up to a stage it could be used, but unpolished. During the break we were to use the constructive critism given by our tutors to polish up our projects.
Above is the very laggy development final.
a= turns left
b=turns right
right mouse click=water drips and circles are created in area of water
left mouse click=torch sounds
This was yet to have fire flies added, using a particle system, plus the torch was going to be replaced with a realistic torch, leaving a smoke trail.
Something I didn't have quite enough time to figure out was why my hidden leap frogs didn't appear out of the water when I placed my mouse over that region of the screen.
This was planned to be fixed by the next stage of developement until I was advised to tone it down, and that less was possibly more in my case.
The sounds are too blatant in this sketch, and this is something I had to work on for my final hand in.
Another question that arose was "why is there a horizon in a cave?". The reason I created the light at the end of the tunnel (yeah yeah, it doesn't look like much of a tunnel), was to give the illusion that you were going somewhere. You could call it false hope. :)
I have removed this for the next development sketch.
Above is the very laggy development final.
a= turns left
b=turns right
right mouse click=water drips and circles are created in area of water
left mouse click=torch sounds
This was yet to have fire flies added, using a particle system, plus the torch was going to be replaced with a realistic torch, leaving a smoke trail.
Something I didn't have quite enough time to figure out was why my hidden leap frogs didn't appear out of the water when I placed my mouse over that region of the screen.
This was planned to be fixed by the next stage of developement until I was advised to tone it down, and that less was possibly more in my case.
The sounds are too blatant in this sketch, and this is something I had to work on for my final hand in.
Another question that arose was "why is there a horizon in a cave?". The reason I created the light at the end of the tunnel (yeah yeah, it doesn't look like much of a tunnel), was to give the illusion that you were going somewhere. You could call it false hope. :)
I have removed this for the next development sketch.
9.4.11
Processing development
I'm currently working on my perlin noise cave ceiling. I've experimented with both P3D and OPENGL in the size parameter... I've found P3D to keep the image smoother than OPENGL.
Update on concept stage!
At this very moment, I am looking at using perlin noise, although, I plan to control the perlin noise, and restrict it's output to create the cave ceiling AND reflection under/on the water below.
I also plan on using another kind of perlin noise to create a swarm of glowing fire flies.
Now, after thinking (yes I do a lot of that surprisingly), I realise if I use perlin to create the cave ceiling, there may not be any point to designing glow worms. This is because the cave will already look like it's covered in glow worms. That is why I'd like to introduce perlin glowing fire flies instead.
The water I plan on creating with ripples etc, but to create the reflection of the ceiling in the water, I will have to create an mirror image of the ceiling under the layer of water. This way it should appear to be a reflection rather than a mere cheat.
Bats... how do I create bats hanging off a perlin cave ceiling? Hmm... This could pose as an issue at this point.
I am thinking of creating the illusion of the end of the cave/tunnel coming nearer and nearer (without actually reaching the end ofcourse!). This may relax the mood a little in the sense it creates hope.
I also plan on using another kind of perlin noise to create a swarm of glowing fire flies.
Now, after thinking (yes I do a lot of that surprisingly), I realise if I use perlin to create the cave ceiling, there may not be any point to designing glow worms. This is because the cave will already look like it's covered in glow worms. That is why I'd like to introduce perlin glowing fire flies instead.
The water I plan on creating with ripples etc, but to create the reflection of the ceiling in the water, I will have to create an mirror image of the ceiling under the layer of water. This way it should appear to be a reflection rather than a mere cheat.
Bats... how do I create bats hanging off a perlin cave ceiling? Hmm... This could pose as an issue at this point.
I am thinking of creating the illusion of the end of the cave/tunnel coming nearer and nearer (without actually reaching the end ofcourse!). This may relax the mood a little in the sense it creates hope.
Rainforest sound bite
Sounds | Effects | Sound Bites | Sound Clips from SoundBible.com
This may be useful in a cave environment, it will suffice as background ambience
This may be useful in a cave environment, it will suffice as background ambience
Torch sound bite
Torch Sounds | Effects | Sound Bites | Sound Clips from SoundBible.com
As you move forward through the cave, imagine moving your torch to see what is lurking to the right of you. This is the sound you should hear!
As you move forward through the cave, imagine moving your torch to see what is lurking to the right of you. This is the sound you should hear!
Rowing your boat through water - sound bite
Sounds | Effects | Sound Bites | Sound Clips from SoundBible.com
I'm not sure if this sound might be overwhelming in project two. Floating through a cave, and constantly hearing the water turning might be distracting in some cases...
I'm not sure if this sound might be overwhelming in project two. Floating through a cave, and constantly hearing the water turning might be distracting in some cases...
Rain sound bite
Rain Sounds | Effects | Sound Bites | Sound Clips from SoundBible.com
Okay... so I do understand that it doesn't rain in caves, but if you listen to this sound bite, it could sound like there is a storm outside and the rain is running through the cave, plus it sounds like there must be an end to the cave somewhere close?
Okay... so I do understand that it doesn't rain in caves, but if you listen to this sound bite, it could sound like there is a storm outside and the rain is running through the cave, plus it sounds like there must be an end to the cave somewhere close?
Tiny Frog sound bite
Tiny Frog Sounds | Effects | Sound Bites | Sound Clips from SoundBible.com
Yay for tiny frogs!
To prevent my project from sounding too gloomy and scary, maybe some frog input would be soothing (for the soul... yeah, couldn't help myself, had to add 'for the soul').
Yay for tiny frogs!
To prevent my project from sounding too gloomy and scary, maybe some frog input would be soothing (for the soul... yeah, couldn't help myself, had to add 'for the soul').
Water Fountain sound bite
Water Fountain Noise Sounds | Effects | Sound Bites | Sound Clips from SoundBible.com
I know it's not often you find a water fountain in a cave :)
Oh well... it actually sounds like running water in my opinion
I know it's not often you find a water fountain in a cave :)
Oh well... it actually sounds like running water in my opinion
Paper Development
 |
| Cave Starting Point |
 |
| Shows movement through the cave... tunnel ahead |
 |
| But then I realised, most caves have pools of water in areas. So... I added water... and will import an image of the front of a rowing boat to give the impression the view/user is sitting in a boat. |
 |
| Here is my scribble at the top after talking with Ben during our lab session! |
 |
| Rough sketch of walking/floating closely by a spider and web... |
 |
| Passing bats sleeping on cave top |
 |
| Brain storming while discussing ideas with Ben! Things to use, and things not to do... |
7.4.11
More concept development and thoughts
Hmmm...
I found this:
Perlin landscape! (use [a] and [d] to rotate use [w] and [s] to change the gap (the space between the dots)
Wouldn't it be amazing to move about a cave made of perlin??
I found this:
Perlin landscape! (use [a] and [d] to rotate use [w] and [s] to change the gap (the space between the dots)
Wouldn't it be amazing to move about a cave made of perlin??
Concept Developement - idea developement more like!
Okay, so I was set to create this whole story line for the user to follow with my storyboard for project two... how ever, I have been told it will be too much work and instead, to focus on one environment.
Due to this, I have changed my idea dramatically. I feel that neither one of the three/four environments in my original story board are exciting enough to work on. I have taken one concept though, and changed the story line behind it.
Imagine a cave, it's dark... but beautiful at the same time.
Your point of view will be from someone walking forward through the cave interacting with the environment.
Looking at the glow worms, moving from side to side... walking through cobwebs, dodging bats.
You can hear drips of something in the background, as well as flapping and squeaking of bats. As you walk through cobwebs, the sounds of them breaking is faint but there.
The question now is how to create a 3D cave environment?
Maybe the answer is to make it 2D using parallax?
Parallax is layering of objects/images to create a 3D look but a flat 3D look.
The idea is to divide the distance by 2 (I think?) between the layers of objects and have them move accordingly
to give the idea of movement.
An example of parallax is as follows:
Due to this, I have changed my idea dramatically. I feel that neither one of the three/four environments in my original story board are exciting enough to work on. I have taken one concept though, and changed the story line behind it.
Imagine a cave, it's dark... but beautiful at the same time.
Your point of view will be from someone walking forward through the cave interacting with the environment.
Looking at the glow worms, moving from side to side... walking through cobwebs, dodging bats.
You can hear drips of something in the background, as well as flapping and squeaking of bats. As you walk through cobwebs, the sounds of them breaking is faint but there.
The question now is how to create a 3D cave environment?
Maybe the answer is to make it 2D using parallax?
Parallax is layering of objects/images to create a 3D look but a flat 3D look.
The idea is to divide the distance by 2 (I think?) between the layers of objects and have them move accordingly
to give the idea of movement.
An example of parallax is as follows:
Initial Story Board for Project Two
 |
 |
| Just imagine: You're stuck in a dark mouldy room with a dim light swinging back and forth from the ceiling. At this point, you just want to get out of there, anything is better than this! You have three doors to choose from. |
 |
| The warm inviting light from Door One gets your fingers moving. You click your mouse on the door. It slowly creaks open... |
 |
| It's open, but the light is too bright. What can possibly be on the other side. The only way is to walk through and find out. |
 |
| You are transported to a tropical jungle. In the background you can hear exotic birds, bugs and a waterfall. With the move of your mouse, the leaves of the bush move and butterflies flutter. |
 |
| It doesn't stop there... Why not change the colour of the waterfall to suit your mood? If you can change the mood led lights in a spa, then why not a waterfall? Right? After all, this is not your reality, it's your matrix. |
 |
| Or... What if you picked Door Two? There is no better place than to be sitting along the shore line the ocean with the sun setting behind an the outline of an island. The is an air of history though, with a supporting posts of an old wharf mostly submerged in the water. With the move of the mouse from right to left, you have the power to bring on more heavy cloud. |
 |
| As the clouds get bigger and thicker, it starts to rain. Now you can control the power of the rain by the vertical movement of your mouse. The soothing sounds of distant wind chimes and rain hitting the ocean surface calm you. |
 |
| Door Three however would have taken you to a glow worm filled cave. The movement of your mouse lights of different areas of the cave. In fact, your mouse is actually a fire torch. As you sway your fire torch from side to side you can hear it hiss and crackle. |
 |
| The question is, what else is lurking in the cave with you? |
 |
| Eventually everyone has to go back to reality unfortunately... |
28.3.11
Reflections - So Far...
Project One -
Where do I start? I found this project both tiring (too many hours put into it) and exciting.
I love the idea of finding a concept/emotion or message I want to portray through design/art.
This Wallpaper project gave me the opportunity to do this through code; to create something on Processing, that would have been almost impossible to create on paper.
I think that was one of the ideas behind project one - to get us to understand how much easier it is to create some images/patterns by code rather than by hand on paper.
During this project though, I had way too many ideas. I don't know where to draw the line. This is an area I need to continue to work on. I need to do my research, find something I like, and stick to it.
With my final concepts and the development stages, I found out how to pointillize an image on Processing.
My aim in this project was to produce sketches with a 3d look. I wanted images to jump out at you. To make the viewer reach out and touch it. Or look in between the layers.
I first looked at filtering the image using filter() -maybe invert filter?
But searched some more and found exactly what I was looking for. Well, I found two versions of what I was looking for.
One source is Pointillism on www.processing.org plus https://gist.github.com/814187 and http://www.learningprocessing.com/examples/chapter-15/example-15-14/.
I also looked at 'exploding' an image to create a 3d look. I was unsuccessful. No matter how much time I put into it, the code just didn't want to obey.
The things I learnt over the week of creating my wallpaper sketches:
Example of use: Pointillism is used in sketches reflecting and magnifying single pixels at random from an underlying (invisible) photo, or image. This technique can vary and alter dramatically to create different affects from another pointillized image.
I found out that when creating a fill set colour, one can simply input 'pix' if an image is uploaded to the sketch. This will create varying colours stolen from the uploaded image from random pixels. Oh yeah, 'pix' stands for 'pixel'. :) Another thing, it isn't just shapes 'pix' for the fill set colour option is good for, you can create lines with this fill(pix....)...
I love the mouse function in sketches. The fact that each time I open up one of my wallpaper sketches, I can create a different image just by moving my mouse in a certain direction, whether it be left or right. In my sketches this creates smaller or larger shapes. In others, the sky is the limit!
Another major factor in designing sketches for print on Processing is the size of the file you end up with at the end. I had a big issue when it came down to getting the sketches printed at a print shop. I was turned down a number of times from many print shops, simply because my 20x40cm pdf file was way too large to print. I recommend PrintStop by the way. They were the only guys to take my usb stick and print these sketches.
Next time, I will ensure my large pdfs are converted to nice big clear jpegs for printing purposes.
For the next project - I would like to step even further outside of the 'box'; explore many options within the realm of 'transformation'.
I found this example of transformation on openprocessing:
"As a general rule you need to use programming whenever you need: variation, interaction, generation, repetition, calculation or scalability" Extracted from 'Programming, the bigger picture' by Ben Jack.
I also love this one:
PopMatrix! I see the sketch above uses popmatrix plus includes a whole bunch of variables, if statements. Lots of shapes used (consists of only shapes) rotated etc to make up the end object.
I noticed that 'cols' which is one of the boxtree parameters was used here; fill(col,255,255);
I thought that was interesting.
Where do I start? I found this project both tiring (too many hours put into it) and exciting.
I love the idea of finding a concept/emotion or message I want to portray through design/art.
This Wallpaper project gave me the opportunity to do this through code; to create something on Processing, that would have been almost impossible to create on paper.
I think that was one of the ideas behind project one - to get us to understand how much easier it is to create some images/patterns by code rather than by hand on paper.
During this project though, I had way too many ideas. I don't know where to draw the line. This is an area I need to continue to work on. I need to do my research, find something I like, and stick to it.
With my final concepts and the development stages, I found out how to pointillize an image on Processing.
My aim in this project was to produce sketches with a 3d look. I wanted images to jump out at you. To make the viewer reach out and touch it. Or look in between the layers.
I first looked at filtering the image using filter() -maybe invert filter?
But searched some more and found exactly what I was looking for. Well, I found two versions of what I was looking for.
One source is Pointillism on www.processing.org plus https://gist.github.com/814187 and http://www.learningprocessing.com/examples/chapter-15/example-15-14/.
I also looked at 'exploding' an image to create a 3d look. I was unsuccessful. No matter how much time I put into it, the code just didn't want to obey.
The things I learnt over the week of creating my wallpaper sketches:
Example of use: Pointillism is used in sketches reflecting and magnifying single pixels at random from an underlying (invisible) photo, or image. This technique can vary and alter dramatically to create different affects from another pointillized image.
I found out that when creating a fill set colour, one can simply input 'pix' if an image is uploaded to the sketch. This will create varying colours stolen from the uploaded image from random pixels. Oh yeah, 'pix' stands for 'pixel'. :) Another thing, it isn't just shapes 'pix' for the fill set colour option is good for, you can create lines with this fill(pix....)...
I love the mouse function in sketches. The fact that each time I open up one of my wallpaper sketches, I can create a different image just by moving my mouse in a certain direction, whether it be left or right. In my sketches this creates smaller or larger shapes. In others, the sky is the limit!
Transparancy = depth!
Another major factor in designing sketches for print on Processing is the size of the file you end up with at the end. I had a big issue when it came down to getting the sketches printed at a print shop. I was turned down a number of times from many print shops, simply because my 20x40cm pdf file was way too large to print. I recommend PrintStop by the way. They were the only guys to take my usb stick and print these sketches.
Next time, I will ensure my large pdfs are converted to nice big clear jpegs for printing purposes.
For the next project - I would like to step even further outside of the 'box'; explore many options within the realm of 'transformation'.
I found this example of transformation on openprocessing:
"As a general rule you need to use programming whenever you need: variation, interaction, generation, repetition, calculation or scalability" Extracted from 'Programming, the bigger picture' by Ben Jack.
I also love this one:
PopMatrix! I see the sketch above uses popmatrix plus includes a whole bunch of variables, if statements. Lots of shapes used (consists of only shapes) rotated etc to make up the end object.
I noticed that 'cols' which is one of the boxtree parameters was used here; fill(col,255,255);
I thought that was interesting.
21.3.11
19.3.11
FINAL WALLPAPER CONCEPTS
My set of four wallpapers comprise of Wellington scenes/themes.
I started off this assignment looking into either working with lines or alternatively with dots.
During the assignment I decided to work with both dots and lines.
The issue was finding the balance between enough lines and
enough dots/circles.
I also played with dot/circle size.
Eventually, I tried adding triangles.
This was one big mistake. Triangles are the devil!
I wound up using squares to spice things up.
The idea between using shapes (circles and squares) at varying transparency
was to give depth for the 3D look.
I want each image to look as if you can see in between layers of pixels.
I started off this assignment looking into either working with lines or alternatively with dots.
During the assignment I decided to work with both dots and lines.
The issue was finding the balance between enough lines and
enough dots/circles.
I also played with dot/circle size.
Eventually, I tried adding triangles.
This was one big mistake. Triangles are the devil!
I wound up using squares to spice things up.
The idea between using shapes (circles and squares) at varying transparency
was to give depth for the 3D look.
I want each image to look as if you can see in between layers of pixels.
The use of lines in each composition is to:
1.) shed light on the subject.
2.) give the "protruding" pixels a path from which they came from.
1.) shed light on the subject.
2.) give the "protruding" pixels a path from which they came from.
3.) Symbolise a wealth of history.
 |
| Tepapa |
 |
| Green Wand |
 |
| Beehive |
 |
| Civic Square |
Processing Concept Development
It all started off with circles.
I wanted dots/circles to randomly slot themselves on the
screen to reveal an image - a 3D image.
I played with transparency, sizes, shapes... including triangles
which I think was a complete fail.
I introduced lines eventually to shed light and movement.
The following are examples of different stages I got to
while playing with each concept.
 |
| Found this one too dark. I liked the overlaying of circles though. |
 |
| Introduction of squares as well as circles. I like this. |
 |
| Here, lines were added starting at the top left corner. This however lightens the image. I haven't decided whether it is a good or bad thing. |
 |
| O.kay... Too much line work. Gotta get rid of it. |
 |
| The contrast between the orange and purple works well but the lines don't work. |
 |
| Playing with 'symbolism' here. The lines exiting from the centre of the image are meant to symbolise light; wealth of history. |
 |
| Good contrasting bright colours but is missing something. |
 |
| Here, the lines darken the image too much. I've tried using fewer lines, lighter lines and different colours. |
 |
| I wonder where the green wand has gone? White lines possibly a bit too much? I think so. |
 |
| This image was originally meant to look similar to this. The white was meant to illustrate a calm, pure, and peaceful environment. Although, I realised the colours didn't combine well with the other three wallpapers. Two images above reveals this image but with black/grey lines. I mentioned it made the image too dark. The white in this concept is the direct opposite of the black in the other. I found a mutual replacement which has been posted on the "final" posting of my final four wallpapers. Blue was the replacement colour. The reason I chose blue - Blue also represents 'calm' and 'purity'. It reminds me of the ocean. Can you get any more pure than that? |
 |
| Lots and lots of circles. Once again, good bright contrasting colours but still missing something. |
 |
| Circles and lines. |
 |
| Circles, lines and squares. I know I was missing something. It was the squares! |
Subscribe to:
Posts (Atom)