30MFF: STARWARS & STARBUCKS

Project description

- The project is a star wars rip-off sponsored by starbucks. The intro consists of the famous star wars crawl along with its music, to convey the "epic" feel and the hype to the audience. The design theme is one that consists of accessibility and simplicity. Four Buttons in a very small window (in which you won't even need to scroll!). Each of the buttons will display content without having to wait for another page to load. It is all wrapped in the same page. Only the intro is in a separate page. The movie in itself is not "epic", although it tries to be.



Process

- Those were the steps I followed vs the steps that (now I know) I should have followed
1* Outline of the website
2* Go through the animation of the barely written intro
3* Entered some content
4* Animated/formatted the content
5* Entered rest of the content
6* Animated/formatted the content
7* Debugged everything that had to do with my disorganized work
8* Created separate css files and names variables with repetitive words
9* Hardcoded (many, many lines of inefficient coding)

- What I should have done:
1* Outline of the website
2* Think of how you want to present the information (animations and whatso)
3* Enter and fill all of the basic content (html and whatso)
4* Creates the necessary divs and organize your html with comments
5* Format
6* Animate
7* Don't force it to work if it doesn't. Think about it, and find the smooth way (no hardcoding!!)

Conclusion

I'm not very good at design, but I learned some basic concepts and do's and don'ts. I learned that the more complicated my website is, the harder it is to make it look aesthetic and sleek. My biggest improvement, however, was in terms of animation. In total, I spent 25 hours in animating my intro. Not because it was hard, no. But because I was even introduced to the animation concepts, I went and tried to do it by myself. I was inefficient, experimented a lot, and failed a lot. But I am glad for my failures, because it allowed me to understand many new options and commands while I was experimenting. It gave me a more "visual" understanding of the concepts behind the code I was typing. Any beginner could have done what I did in less than 8 hours, but I don't think anyone would have learned as much in those 8 hours. In terms of expectations, my website turned to be more or less what I wanted it to be (it's just that it looked prettier in my head). I think I should work really hard on my jQuery, as I feel that I'm still behind and need more understanding of its commands.

COMIC STRIP: WEBCOMIC

Project Description

The project is inspired by a creative writing paper I read in one of my courses in NYUAD. I liked the plot twist at the end, and I immediately knew that that should be my project for the comic strip.

The literary concept was leading the reader through multiple paragraphs of description and false-foreshadowing to think that the setting is a funeral and that the character is mourning his daughter. What was most challenging in here was ripping off the literary identity of the piece and making the idea suit a short 6 panels-long comic. Instead of paragraphs of description and mood setting, there would be background music and images and a gloomy art-style. In the end, the plot twist will be accompanied by a change of background and overall tone, creating the same shock event intended in the written short story. The tapestry animation was meant to simulate the user’s entry to the place where the character walks, and its dark color is a symbol of the character’s mood/perception of the event.

The experience had to preserve the conventional framework of comics, with no interaction between the user and the narration. However, the interactivity was less about the message but about how it was conveyed. The animations had to be relevant to the theme and plot to fully immerse the reader in the story without distracting them—and without being “too extra”.

Process

It was a very simple idea. Straightforward. The execution, however, was hard. We had to rip the short story of many elements to make it fit into the comic framework. And I remember there was a lot of conflict concerning which parts would be discarded and which would remain. But we tried very hard to remain faithful to the author and preserve the overall feel, and I believe we succeeded in that.

Simran was responsible for the art, the animated gifs, and the soundtrack. Omar was responsible for the coding and web design.

Reflection/Evaluation

Aaaah~~

To be very honest, I haven’t learned much about Photoshop, as I was mostly responsible for the coding. Still, I think this experience was the most instructive experience I’ve had in years—mostly because of the tight deadline. Animations, background videos, javascript plug-ins, gif-making, and jQuery in general. I experimented a lot during the making of the website, some concepts failed, some didn’t match the website’s tone, and others were successfully implemented. Overall I think I did the best of my best, I worked hard but enjoyed it, and the website is pretty much how I wanted it to look like, particularly the multiple languages thing, I REALLY didn’t want it to be on separate web pages, and when I found out how to actually make it work, it felt very self-fulfilling.

One regret I have, however, is that I could not animate the captions of my work using the typewriter plug-in, mostly because it conflicted with the method with which I implemented the language bars, and I’d have to change my whole code’s structure. If I could have some feedback on how to do that, I would really appreciate it!

SOUND PROJECT: PODCAST

Project Description

The idea came to me from an anime in which one of the characters' can hear people's thoughts. In the show, many of the ability's weaknesses were showcased in action scenes. I wanted to bring the same concepts and themes back to the context of social routine, and tell a story that shows the world through the lens of a thought-listener. I also wanted to explore the life of a man whose wish has brought him to the verge of insanity, because I thought it'd be interesting to make the voice-over of such a person and put myself in their shoes.

In terms of format, the project is a 4 chapters-long audio story in which I explore some episodes of the character's life and his perspective. The themes were noise, voices, and thoughts. They were represented by a jumble of chaotic wave signals, which was what the character was going through.

Process

Aleksandra was responsible for the webdesign & coding (which I absolutely loved), and I was responsible for the audio.

The hardest part of this project was that I didn't know where to start. Should I first outline the story? List the people I want to record? How do I voice my character? Where do I get the sounds from? Should I make the sound effects myself or get them from the internet? What if I don't find the specific sound effects I want, can I fake them?

The order was chaotic, which created a lot of problems in the final product with some unwanted disruptions in the sound from over-editing.

Sound Effects:

- Chapter 1's Lecture & Thoughts: The lecture was recorded separately in one of my classes, I noise-canceled it then used it in the piece, and also edited it with an envelope. The thoughts are basically 4 separate recordings of people I asked to say certain sentences. I overlapped some of them, ordered them in a way that kind of makes sense, added an echo effect for it to feel like "Thoughts", and tadaaa!

- Chapter 3's Heartbeat: A lot of trials involved (experimental1, heartbeat1, heartbeat 2). The final version was made as such: I pulled a card from its edge and released it against a deck of cards, then repeated the movement at a heartbeat's frequency. After that, I edited it to emphasize very low frequency sounds; a lot of playing around with the equalizer.

- Chapter 3's Thoughts: I initially had my own recordings of D2's talking noises and other noises recorded at random places (Noise1, Noise2, D2). But their quality compromised the whole piece. So I changed it with one I found on youtube (Crowd), which I faded in after I added an echo effect to it.

- Chapter 3's bumping: This was both the sound of a body bump and the falling of headphones. Recorded a few claps with my hands and sounds from my mouth at certain frequencies while trying to imagine what a headphone falling sounded like. It wasn't what I aimed for but the result was satisfying.

Music:

Prologue: Kensuke Ushio - From Here to Eternity
The sound was peaceful, it had this "good morning" vibe, and felt appropriate for starting the story.

Chapter 2: Chopin - Nocturne in E flat major Op. 9 N. 2
I just chose a piece that I would personally listen to when I just want to relax, and that seemed to fit the motives of the character at the time.

Chapter 3: Chopin - Fantaisie Impromptu Op. 66 (Rubinstein)
I found this piece the most representative of "madness". It starts dramatically then wildly increases the pace, like the gradual mental descent of our character.

Recording:

I learned how hard it is for people to sound "natural" when they're not talking to someone—this was particularly true for me. Anyone I recorded would sound very different than their usual selves. It took a lot of time for them to actually put themselves into the roleplaying, and I am very thankful for that (Aya, Aayush, Melika, Louis, thanks peeps!).

My voice over was really hard as I had to put the necessary emotions to convey the character's state of mind. I felt like I really captured it on the 3rd chapter, the voice vibration that marked the character's emotional shakes, and the tone swings that characterized his instable—almost insane—state of mind.

Reflection/Evaluation

I've learned a lot in terms of audio editing, I think I even grasped some of the advanced concepts, and perhaps I'll get more used to using them if I formally study the theory behind them. I don't think, however, that I've done the best work I could do. The order in which I did this project resulted in many problems. I started, for example, with sound effects first, which made me waste a lot of time when I didn't even know where I wanted to go with the story: I should have started with the very first narrative recordings. This left me with very little time—which I thought was more than enough for "just" recording. I made hasty recordings thinking that I could just cancel noise with the experience I earned on audacity. But I was wrong, as I learned (the hard way) that noise cancelling on audacity requires an inhumane level of precision, sometimes requiring you to draw rods of sounds by yourself to repare the damage that was created to the consistency of the sound by deleting the noise. I tried too hard to cancel noise and air blowing manually from my "bad recordings" instead of focusing on getting the best quality pre-edited.

VIDEO PROJECT: FAUX-YOUTUBER

Project Description

The idea came very randomly during a discussion, and it was more of a joke than an actual idea, but we decided to go with it nonetheless. The idea is basically a YouTuber making a funny video about how to land in the moon in 3 easy steps, there are subtle (or at least we tried to make them subtle) references to the USA moonlanding and the flat earth conspiracy theory. At first I wanted it to be so ridiculous that it would mock the conspiracy theories themselves, but then I thought that maybe I could take the person for who they are, without making fun of their opinions, and make that character make a funny video. I personally didn't want to make the character a hyperbole, regardless of whether or not they believe in conventionally accepted facts, and I believe Wahib did a great job portraying that casual character we were trying to build. The initial aim was for the video to be on YouTube but for the purpose of this class we decided to make a YouTube-like platform on which the video would be posted. The interactivity was mostly in the comment section, the gofundme that almost makes you think the video is legit, and the ads for spacesuits.

Process

Filming:

I've personally suggested to take shots from different angles, which I thought would make for a less monotonous video, but I was met with some disagreement and compromised on that. But I think it wasn't too monotonous because it was so short, still I think we might have benefitted from the Thursday feedback had we made our shots before. So, we filmed in 2 days, the first day we went looking for a costume (which we didn't find), so instead of taking a serious costume we just used very random objects we found in the costume shop to create a ridiculous-looking costume, then made it part of the script (that's where the gofundme idea came from!). Then we moved to the green screen and started our shooting, it was quite awkward at first, Wahib was a bit stiff so I asked him to jump on his feet 10 times before every shooting so that he loosens up a bit (that's why in the end of the video, during the bloopers he says "I'll mention this in the documentation", haha). After 2 hours we got our green screen shot and we left the rest for Thursday. On that second day, Wahib was much more natural in his acting and did flawless acting. He mastered his role and memorized his text really well so we were done with all of the footage in a very very short time compared to the 1st day. Mai & I took charge of setting up the room and camera (I was personally very bad at handling cameras because I get confused with the buttons, so Mai helped a lot with that). Wahib & I worked on the script.

In-between anecdote

The night we finished the recordings, I went home to start editing and read the SD card on my PC, but I found no files at all. I thought my PC was bugging, so I re-did it. Nothing. I thought that by mistake I might had doomed the group 5 days before the presentation and erased all the footage (and it was a weekend so no big screen or booking material!!). I couldn't tell them about it, it was 4am and no one was awake. I searched on every forum in the internet about similar issues, and footage missing from the SD card, nothing. I almost bought a 50$ software that allows me to get files that were erased from hardware, but no matter how desperate, I was stingy so I used a free alternative. The free alternative managed to find files from back in 2012 in the SD card, but not a single file of ours. I thought were doomed for good. And I panicked. The next day I tell the group about this and they're all devastated. Wahib asks me to check with him, I tell him that it's no use, that I'm 100% sure it's all gone. He tells me to come to his room nonetheless, and I do. We insert the sd card: no files. Then Wahib asks: did you try the second SD card? I didn't know there was a 2nd SD card. I try that one on, we were desperate and didn't expect it to work. But the files showed up. And we screamed so hard the sound probably reached D1.

Editing

I was in charge of the editing, while Wahib & Mai provided feedback on each video uploaded, at first I just thought I'll put the videos together and add some nice transitions. But I wanted to make it seem like a REAL youtube channel, with a nice intro and everything. I looked up some websites and found renderforest for making intros, but it cost 20$ per month to use, which for a second I considered but just gave up on. But I really wanted that intro. So I went to Youtube, watched a couple tutorials, opened Paint 3D (which I think is an absolutely amazing FREE tool) and made the logo. Then I went to use Aftereffects, increase the spread of the particles making the logo at time=0, then set the spread to 0 at time=5seconds. I set the motion to rotation so that it'd give a spiral, then used the lens effect to make it seem as if there is a ripple when the logo comes together. I moved the file to Premiere, imported 5 different sounds from freesound.org (great website!), and combined everything to a 5s intro to give the illusional sound of a rotation and a ripple effect.

The rest of the editing wasn't too hard, I had to cut some of the speech from Wahib when he's voicing-over his actions in the green screen scene to make the video and the audio synchronized. Then I added "step" separators, lowered the volume for some of the sounds that were disturbing on audacity, then put a background music that I thought had the YouTube vibe. Then there was the green screen, which went "okay" (our costume was light-reflecting, so I had trouble fixing the color so that parts of wahib wouldn't disappear with the background). The smoke effect I found as a youtube free footage, which was filmed on a black screen and therefore had to be used the same way the green screen was. I used to sounds for that, (again from freesounds) a NASA rocket sound, and an explosion-impact sound when the screen would switch to the moon. I also wanted to create a white-flickering screen that would make the transition smoother. So I made a white object that flickered from opacity 0 to 1 to 0 to 0.6 and so on. After I watched some Youtuber videos, I got a better grip on how to do the editing, and after the feedback we got I tried to make some shots work better (but since that was not accounted for during the shooting, I only had limited room to work). So that will have to be worked on: always having a plan BEFORE the shooting.

Website

I set up the gofundme and added some personality to it through update posts and a "story" (although it was not very elaborate, I didn't feel it needed to be). All of the website was done by Mai & Wahib, I've only provided feedback on how it should look, but was not involved in the coding. Which I specifically asked for since I had a coding-heavy workload from other courses, and Mai & Wahib openly accomodated for me and I'm very grateful they did.

Reflection/Evaluation

I don't usually praise myself a lot, but I think I've done a great job. The script was good, I thought it could be shortened up but we got positive feedback nonetheless so I think Wahib's decision of keeping it as it is was right. I'm very satisfied with the work on the intro and the audio, and the overall flow of the video didn't seem chunky to me (perhaps I'm biased since I've watched the video over 30 times). Perhaps I had less issues this time because of the experience I gained from the other projects, but anyhow, I am satisfied with myself.