The Video Machine

Overview

The Video Machine is a video controller, powered by an Arduino, that controls the playback of videos presented on a web browser. By pressing a button on the controller, the correlated video is being played on the screen and heard through the speakers.
Videos are being played in an infinite loop.
Only the videos that are being played, are being heard.

I was lucky enough to work on this project with the super talented Mint for our Physical Computing class mid-term.
Working with Mint not only was a great learning experience, but also a lot of fun! I hope I’ll be able to work with her again on our next project (more on that below).

The Video Machine from Dror Ayalon on Vimeo.

Many thanks for Joe Mango, our beloved resident, who assisted a lot with finding the right technologies for the project, and helped us on one critical moment, when suddenly nothing worked.

The Video Machine – Split Screen from Dror Ayalon on Vimeo.

The building process

The process of building The Video Machine went through the following stages:

  • Prototyping – Once we had a broad idea about what we want to make, we wanted to test how hard would it be to build such interaction, and if the interaction feels ‘right’ to us.
  • Understanding the complications The prototyping stage helped us understand what could be the possible complications of this product, and what might be the limitation. We analysed what could be the limitations of the serial communication between the Arduino board and our laptop computer, and what types of video manipulations could be easily achieved using JavaScript.
    Understanding what’s possible helped us shape our final design, and the different features
  • Designing the architecture – Before we started to build the final product, we talked about the technical design of the product under the hood. These decisions basically defined the way the end product would operate, and the way users would interact with it.
  • Picking up the technologies – To apply our technical design, we needed to find the right tools.
    For the video manipulations, we decided to use vanilla JavaScript, because its easy to use video API. The biggest discussion was around the implantation of the buttons, on which the user needs to press in order to play the videos. After some research, and brainstorming with Joe Mango, we decided to use the Adafruit Trellis. That was probably the most important decision we took, and one that made this project possible to make, given the short amount of time we had at that point (four days).
  • Building, and making changes – We started to assemble the project and the write the needed code. While doing that, we changed our technical design a few times, in order to overcome some limitations we learned about along the way. And then came then moment where everything worked smoothly.
The Video Machine - Final product
The Video Machine – Final product

Some code

The entire code can be viewed on our GitHub repository.

Reactions

The reactions to The Video Machine were amazing. The signals started to arrive on the prototyping stage, when people constantly wanted to check it out.

When we showed the final project to people on the ITP floor, it appeared that everyone wants to put a hand on our box.

The Video Machine
The Video Machine

People were experimenting, listening, looking, clicking, laughing, some of them even lined up to use our product.

The Video Machine
The Video Machine

Further work

I hope that Mint and I will be able to continue to work on this project for our final term.
I cannot wait to see the second version of The Video Machine.
I believe that the goals for the next version would be:

  • To add more functionality, that will allow better and easier video/sound manipulation.
  • To make playing very easy for people with no knowledge of music or playing live music. Beat sync could be a good start. The product should allow anyone to create nice tunes.
  • To find a new way to interact with the content, using the controller. This new interaction needs to be somethings that allows some kind of manipulation to the video or the sound, that is not possible (or less convenient) using the current and typical controller interface.
  • To improve the content so all videos will be very useful for as many types of music as possible.
  • To improve the web interface to make it adjustable for different screen sizes.
The Video Machine - Controller
The Video Machine – Controller

The colors of my life

The following photos summarize 3 days of my recent week:

A walk on Bedford Ave., Brooklyn –

Bedford Ave., Brooklyn

Working on my pomp homework –

Arduino at work

Shopping with my parents in mid-town Manhattan –

colors_pic02

Recurring photos in my photos

A quick look at my photos made it very clear that the recurring colors in them are different tones of grey, black (or other dark colors), and brown.

After looking at broader spectrum of photos I took during the recent days, it is very clear that the unrepeated colors are the green, ceylon, and pink.

rgb

Colors as a reflection for my life

At this point, it is very hard to me to say if the recurring colors in my photos reflect my interests and / or my ideals. I recently moved to NYC from Tel-Aviv. Not only that the colors of my day-to-day life changed, but also my day-to-day activities. From walking to work on the Green and blooming Rothschild Boulevard, and spending most of my day at the office, to commuting to NYU near from Bedford Ave, Brooklyn, through the Subway, to spending the rest of my day on the ITP floor.

So I guess I could say that the recurring colors in my photos, comparing to the colors on older photos I took, reflect the change I had in my life, and my new (creative) environment.

My life in colors

my_colors

Typography

Typefaces that say something about me

Typefaces fascinate me for years. I believe that the design of a typeface contains a vast amount of different design and communications aspects. A good typeface can make me handle any content differently.

There are so many signals and messages within each and every typeface. The ability to communicate rich messages in such a small space (the graphical representation of text), is preserved to the most talented, high-end, and well educated designers. Therefore, I would not pretend to be able to unlock these messages, and to use them correctly to empower my messages. Instead, I’ll just use my humble interpretation of typefaces to express a few of my personal characteristics. The descriptive text of each typeface and personal characteristic is much needed in this case, I believe.

 

shyAlthough I tend to be talkative and expressive, I see myself as a very shy person, who doesn’t reveal his deep thoughts, fears, and complications.

The Lato typeface, specially in its Hairline style, always feels in the right place, doing what it was suppose to be doing. He helps me to communicate my message, but more often then not, I ask myself “what is Lato’s message? what’s his take on the content?”. I always end-up thinking that I really don’t know what was Lato actual affect on the text. This typeface is somewhat transparent to me. Useable, present, but not really there.

 

learnI love to learn. I feel that these delicate lonely hours are the building blocks of my personality. I learn mostly (but not solely) using my laptop, my iPad, or any other electronic device. Designed to be used on digital interfaces, the Palatino typeface is very readable, and to me, very calming. I feel like I can look at it for hours and hours without any need for a break.

humanAs much as I love computers and computation, I’m always triggered by the human work behind them. The decision making that made a product the way it is, or the personal story behind the design, are the things that get me attached to these experiences. The human touch makes me feel closer to things, and I always look for these signals. The Sketch Rockwell is a (very) humane take on the classic industrial looking Rockewell font, designed on 1934.

 

analyticI’m very analytic. I try to think about life from an analytic stand point, and not from an emotional stand point. More often than not, I fail to do that. The Courier typefaces is one of the fonts I really hate. It’s a monospace typeface, that doesn’t look monospace at all. It was designed to look like the letters of a typewriter, but these types of letters are very hard to read on digital displays. It was meant to be practical, but has serif lines attached to the letters. To me, this typeface looks like it is failing in being analytic and practical.

 

optimisticI tend to be very optimistic. Not because I always think positively, but because I tend not to think negatively.
In my opinion, the Raleway typeface emphasize that pretty well. It is very clean, but sometimes curvy, which makes me want to smile when I look at it. It is very hollow and breezy, which makes me think about the future, but also very elegant, which makes my feel thankful about the present. It is not at all stiff, which emphasise the lack of negative thinking patterns.

 

eng_vs_dsgCategorization is very important sometimes. Specially, when there is not proper category for you. I’m always in the conflict between looking at myself as an engineer or as a designer. Sometimes I think of these two categories as very close, even overlapping, and sometimes they look to me as if there’s an ocean between them.
The Letter Gothic Std typeface tells a similar story. It is very practical, clear, and somewhat looks like a product of computer or some sort of machine. On the other hand, some of its letters show design decisions, such as the sharp capital ‘A’ versus the ‘n’ or ‘y’, or the rounded, almost hand written ‘r’, versus the geometrical ‘l’, that could only be made by a human. These decisions seem so arbitrary that it feels to me that only one who felt the conflicts I feel could have done them.

Typeface manipulation

The following images of typeface manipulation should be self explanatory. I hope they are.

font-manipulations

Composition as a window to an artistic process

As a long time Wes Anderson fan, I always pay close attention to the graphic design in his films. To me, Anderson’s wonderfully crafted frames are not only a very good reference for aesthetics, symmetry, and story telling, but also, work that seem both enjoyable to watch and to make.


Wes Anderson // Centered from kogonada on Vimeo.

To emphasize these ideas, I will analyze a movie poster designed for one of Anderson’s latest films – Moonrise Kingdom (2012).

Moonrise Kingdom: Movie Poster // Wes Anderson
Moonrise Kingdom: Movie Poster // Design: P+A, Director: Wes Anderson

Composition

A movie poster is graphic design piece that its major objective is to promote a movie. And therefore, by analyzing a movie poster we can get a unique perspective about the way the movie creators (and promoters) looked at the cinematographic outcome.

The Moonrise Kingdom poster composition really tells a story. To me, it’s not only the story of the movie, but also the story of the making the movie and promoting it.

On first sight, it seems like the Moonrise Kingdom poster cherish the regular Wes Anderson symmetry, that can be seen in any one of his movies. In fact, this poster composition shows the growth process Anderson went through as a director, and a story teller, and the confidence he (and his talented crew of designers) felt about this movie before its release.

The Moonrise Kingdom poster: A grid that puts the story in the front row
The Moonrise Kingdom poster: A grid that puts the story in the front row

When we look at this poster, first, our eyes are being attracted to the title of the movie, floating in the middle of the frame in big letters. This alone tells us that, for the makers of this film, and the designers of this poster, the movie or the story, is the most important thing. As if they believe that the story is so good, that it will sell itself.

As you can see, in then center of the piece the designer places the two main characters of the film – Sam & Suzy – played by Jared Gilman & Kara Hayward, two relatively unknown young actors. Anderson (or the designer of this poster) doesn’t promote the movie using his big stars. Instead, he puts all characters at the same level, in terms of graphical hierarchy, and the main character of the story are right there in the middle — this story is not about big movie stars, it’s about two young people and their fantastic adventure.

In fact, we can say that Anderson was so confident about this movie, that on the promotional poster, that was published before the movie premier, the big star do not appear visually at all. Again, it’s all about the story this time.

The Moonrise Kingdom 'coming soon' poster: The big starts are not even there. It's all about the story.
The Moonrise Kingdom ‘coming soon’ poster: The big starts are not even there. It’s all about the story.

Between personal development and poster composition

We can clearly use Anderson’s movie poster designs as a reference for his growth has as a director. Let’s have a look a few movie posters from Anderson’s earlier works – From the star-heavy The Royal Tenenbaums (2001), to the latest The Grand Budapest Hotel (2014).

On The Royal Tenebaums (2001), we can see the Anderson uses his league of stars as the main selling point for the movie. The actors appear in the middle of the frame, and their name is highlighted at the top of the poster. The movie title appears at the lower part of the frame, makes it easily ignored.

The Royal Tenenbaums movie poster: The names of the actors is the focus. The movie title comes second.
The Royal Tenenbaums movie poster: The names of the actors is the focus. The movie title comes second.

On his next movie, The Life Aquatic with Steve Zissou (2004), we can see that Anderson (or his promoters) is still somewhat  not confident about the story itself as a good selling point for the movie. The poster composition is more focused on star of the show, Bill Murray, than on anything else. The character is placed in the middle of the composition, and our eyes our being attracted to the title of the poster – “Bill Murray”. The title of the movie is blended into the yellow submarine.

The Life Aquatic with Steve Zissou movie poster: Focuses more on Bill Murray than anything else.
The Life Aquatic with Steve Zissou movie poster: Focuses more on Bill Murray than anything else.

Anderson gains a lot of confidence towards his next full feature movie, The Darjeeling Limited (2007). Here, the movie poster composition puts the three fabulous actors as equal, in terms of hierarchy, to the movie title itself. Both the actors and the title of the movie are shown in the middle of the frame, and do not compete over the viewers’ attention. It feels like one cannot stand without the other, which in some weird way, tells the story of this movie, which would not be the same with different characters or different actors.

The Darjeeling Limited movie poster: The story and the title are as important as the famous actors.
The Darjeeling Limited movie poster: The story and the title are as important as the famous actors.

Let’s jump to Anderson’s latest feature – the Golden Globe and Academy Awards winner – The Grand Budapest Hotel (2014). As usual on Anderson movies, The Grand Budapest Hotel features a few of the most desired actors in the business. But even though the movie is rich with talented personnel, Anderson shows full confident in his new movie, and world he created. On the movie poster, Anderson puts only the movie title, and place on which the story happens. That’s it. Anderson is fully focused on storytelling and the fantastic world he created. Not only that we don’t see the fancy cast, their names do not even appear on the poster. As viewers, we are totally focused on the amazingly designed hotel, and on the stories that happen inside it.

The Grand Budapest Hotel movie poster: Anderson focuses on the story and the world he created.
The Grand Budapest Hotel movie poster: Anderson focuses on the story and the world he created.

Color palette

Let’s get back to the Moonrise Kingdom. This movie is all about teen spirit and adventures. To emphesize that, the movie poster is using  a color pallete full of greens and browns, colors that we usually see in the nature.

Moonrise Kingdom movie poster: Color palette
Moonrise Kingdom movie poster: Color palette

Also, the poster tones of the blue and yellow, give the entire image its aesthetic youth spirit. The yellow color of the titles is similar to the scounts’ yellow neckerchiefs. This similarity makes the two connected, as if the designer is trying to say that “this movie is about these scouts”.

Typography

The handwriting font of the titles on the Moonrise Kingdom poster is usually associated with note taking or a writing of a journal. The usage of this font gives the impression that the movie will tell us about an adventure, as it was written by one of the characters.