P3MONA

Here is my mood board for this project. My word is freedom



Freedooom

Archive: Archive

The feel and mode that I was going for is that you could fly through freedom, freedom doesn't normally come with ease but when you have it, it's like a pair of wings have been fixated on your shoulders and you could go anywhere you want. With this website what I tried to do is create the essence of freedom through the way you scroll through the page. Unfortunately I was unsucesful in making a smooth div scroll in my website, but it was a part of the plan, and because that plan didn't work, I had a back up, I learned how to make it so that when you click on an object, it redirects you to another part of the page, almost the same way a smooth div scroll would work except this didn't do any cool swishy sliding, it simply redirects you to another part of the page. This was a simple javascript backup that took a while to figure out but I had to have it because I know how trouble I am with Jquery. That being said, I had some great ideas and fantasies of what this page would look like. I cannot seem to remember the name of the website that Graham showed to me in class but I was quit inspired by that, it was a flash based website for a chinese designer that displayed beautiful chinese artifacts and created a sense of beauty wherever you clicked. I wanted my freedom pages to look like that too. I made my website simple yet interesting, more on the classy side, I added a little grunge to the edges of the cage to create more visual interest and also a very light gradient in the background of the website so that it wouldn't look flat, but it would have a little bit of depth and visual interest to it. I felt like the font that I used was very appropriate for the topic. Here is a rough black and white sketch of what it was supposed to look like and what was supposed to happen when each item is clicked. the border in the middle of the page is what the audience is supposed to see when they first enter the page, then as they click through the rollovers that I have created, the page smoothly flies them to the related sketch that was generated in processing. The writing beside the cage is instructions for the user, and the little birdie under the writing indicates a home button that is in fixed position on the page, so no matter where you scroll to that home button is there so that the user would not have a problem finding their way back to the main sight (the one that is in between the black rectangular border at the moment). I wanted to create the experience of being able to "fly" through the site like a free bird from the person's seat, but due to technical difficulties it did not work. What I have created is a functioning website that redirects the user to different parts of the page when click on an item. The most part I liked about making this website is the fact that I did it for a reason, the reason is that at the moment, back home (the middle east) lacks freedom. I sort of had a fantasy that when I was done with making this site, I would hand it over to the public and make it spread widely throughout social communities like facebook and twitter and so that it would be a dedication to freedom of all countries and not just the middle east.
 * The Initial Plan & behind the scenes.**



My sketches can be seen if you download the Archive and look through them, they are all attached, but I am going to explain them here and have miniature visualizations of what they look like.
 * Processing Sketches**

the first sketch happens when you click the left side of the cage and it is a speech by William Wallace who was played by Mel Gibson in the movie Brave Heart. I took the speech and edited it a little and added a few visuals to it so that as Mel Gibson is speaking, what he says almost matches the pictures that are being displayed. For this one I did not want to do anything too fancy so the viewer could sit and relax and listen to the inspiring speech. The audience would have to click on the sketch to hear the speech. Here is an audio file of the speech if you wish to hear it media type="file" key="FreedomSpeech.mp3" width="240" height="20" and here are some screen shots of what the sketch looked like when it was played:
 * Sketch #1**

The second sketch happens when you click on the right side of the cage, and it is a sketch of a freedom quote that I found really interesting by someone with the initials N.B, and it says "Nothing is more difficult and therefore more precious, than to be able to decide. When this sketch is clicked you could also hear music, but this one is just an instrumental that I found online. For this sketch I wanted to experiment with typography use in processing, I have never used it before and thought it would be handy to know for the future. I learned that you cannot set the size of the font more than once, which was the downside but the good side is that I changed the colour of the font and the leading was made wider/closer to create a sense of hierarchy. Here is an audio file of the instrumental if you wish to hear it media type="file" key="Braveheart Freedom.mp3" width="240" height="20" Here is a screen picture of what the sketch looks like:
 * Sketch #2**

The third sketch happens when you click on the bird, it is an animation with music (when clicked) to a pair of wings escaping a rope. The wings are originally my drawings from a while back, so I thought why not open them up again and use them. I liked this sketch the most because it created an atmosphere when I watched it and listened to the music, a sort of delicate way of thinking of freedom. This sketch took the longest to make because I had to make 32 different pictures to create a continuos animation. Here is the Audio file if you wish to it:media type="file" key="piano.mp3" width="240" height="20" and here are a couple of screen shots of what the sketch looked like: (this isn't the complete 32 sketches because they take way too long to laod, but this is an idea of what it looks like)
 * Sketch #3**



This fourth sketch happens when you click on the hook that holds the cage, and it is a map of the world freedom wise. Yellow represents free, Orange is partially free and purple is not free at all. It starts off with the whole world free then the user has to click through the sketch and after each click the colours of some countries start to change (not in any specific order, just by random). Also a song plays in the background. Here is the Audio file if you wish to hear it: media type="file" key="I Have A Dream.mp3" width="240" height="20"
 * Sketch #4**

This fifth sketch happens when you click on the second part of the title (& People) and It's almost like a game where you have to try to guess who is the famous historic freedom person. Of course they arn't all of the freedom people that there are in the world, but these were the most famous ones, I also added Mel Gibson in his role as William Wallace in the movie Brave Heart in the end. Also music is played when you click on the sketch. Here is the audio file if you wish to hear it:media type="file" key="Dreamer.mp3" Here are some screen shots of what the sketch looked like, first the people are covered in black and the viewer has to try to guess who they are and when they click again the picture changes to show who the person is: After the user clicks: After the user clicks:
 * Sketch #5**

The 6th sketch happens when you click on the first part of the title (Freedom Tunes) and it is actually a visualizer to a really nice song I found called freedom for Maher Zain. It speaks of freedom from all around the world and standing up for freedom with family, friends and community. The original code was taken from Kelsea Cotnam's visualizer for her project 3 and I changed it up so that it would look the way I wanted. I made a flower shaped from squares, because that's what freedom is really, a delicate thing that has many sharp obstacles (squares) along the way. Here is the audio file if you wish to hear it: media type="file" key="Freedom.mp3" And here are some screen shots of what the visualizer looks like:
 * Sketch #6**

The final production of this entire project was quit tricky because I was constantly toggling back and forth between Jquery, HTML, and Processing code and I found myself sometimes using the syntax for HTML in processing and Processing in HTML and so on, but in the end I think I pretty much got my coding the most part of my coding done right. The coding was taken from past projects with HTML and Processing and some from friends as mentioned above, overall I think I explored more coding than I would have wanted to for this project and it is a good thing because that builds more knowledge and experience for the future when I take more interactivity courses and get a good taste of the world of web after graduating. I wanted to build an experience in the user so that they would be almost in awe and remember this word "freedom" and take in an idea of how I displayed it and made them fly through it with just a click of an object. It was a fun project and I really enjoyed it. My dedication turned into a story with visual interactions and may different thoughts and reasons behind it. I am very proud of all my hard work and would love to expand on this project further more in the summer. :)
 * The End**