 |
| 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.
Subscribe to:
Posts (Atom)