A.23 DIY Phone Speaker

Today I began sketching ideas for the DIY Phone speaker gif. What I have in mind is essentially a quick vector transition from form to form. Something that would stylistically look like this:

Contract Transform by Fredrik Andresen on Dribbble

Below are my sketches, there are many ingenious ways to amplify the sound from your mobile with objects found around the house. I chose the glass tumbler, the toilet roll tube, the coffee cup and the beer cans.

Thinking about the way they will all transition into each other depends heavily on the order. Here in my storyboard, I established one and elected to cut out the toilet roll tube model and instead incorporate that into the beer can model.


On the phone screen, i’d like to display an equaliser to help sell the idea quickly (as this will be only 4 seconds long). From the Jailbreaker gif, i’ve learned that considering something like what to display on a mobile screen is a decision best made at the beginning of a project.


These sketches are super crude, but this gif will have a quick turnover and all the assets will be rebuilt in Illustrator. So its good enough to enable the beginning of my production

Screen Shot 2017-04-04 at 12.34.16


A.22 Information Return

After figuring out how to make processing play a video and return the time code while its playing, I was able to add and animate text using the timecode as a constraint. I defined the timecode (shot00.time) as mt and used it with If statements to make the text appear, disappear and move.


Here, however I have hit a wall, my code is messy and incredibly precarious. It also currently does not have the capability of loading a custom sequence of shots. I will need to start using functions to modularise (and organise) what I have got.

A.21 Jailbreaker (Production part 2)

Choosing an opening style for the phone involves consideration of how the inside will animate out of the centre of the phone covering the base and all four sides. To help with this visualisation, I took inspiration from pop up book engineer Matthew Reinhart.

In his creations, Reinhart builds with folds on top of folds. This enables the pop up to utilise one force (the opening of the central fold) and make it cause linked movement in other directions further away from the central part of the book. This is what I need to do too, since the animations can only originate from inside the phone and need to spread out over the sides.


Reinhart also delays part of the animation by creating 3 different trigger folds in the centre of the book, all at different sizes. This gives the animation longevity, something i’m sure I can easily achieve by keyframing different parts to set off in cannon.

Choosing a style

I won’t use the toolbox style of opening because it doesn’t utilise the space above the phone very well. I’m currently torn between the inward and outward flap movements. Although now after analysing all my renders together, I think it would be worth returning to the drawing board, to make another new style.

Firstly because the way I chopped up the phone makes for a final shape much longer than it is wide. Secondly, I think that combining the toolbox approach with the flap approach could yield a more interesting and complex animation, providing me with many levels to play with.

A.20 Jailbreaker (Production part 1)

Today I began production of my Jailbreaker Gif. Since I am now fairly certain that the whole shot will be produced in Cinema4D, I built the blocks straight into this software. When I first started laying out the scene I tested the isometric view against the perspective one and preferred the perspective projection. Since completing the scene and making these screenshots however, I have changed my mind and now prefer the exact iso projection.

Perspective at 45 degrees

Next, I moved on to the phone itself and the mass of colourful abstract shape that will appear to grow out of it as it is jailbroken.


Above is what I produced and showed at my group crit this afternoon:

Below is the original idea sheet (blue ink)  with annotations (black ink) from the feedback I received.



1. Colours
The colours are currently quite playful and friendly. They should be fun, but these pastel hues are easily associated with childishness. I should consider colours that are more closely associated with hacking and digitally.

2. Context
Currently the abstract shapes move well but, it would be nice to see some moving parts that are associated with the theme of jailbreaking. A roller coaster for example could nicely display how jailbreaking is done for fun. A rocket could represent advancements in the phone’s existing tech enabled by jailbreaking.

3. Phone opening
Having all of these animated assets sit on top of the phone, does not really communicate the ‘-break’ aspect of the jailbroken phone. Even if you were to animate the pieces growing out of the phone, this still wouldn’t quite hit the mark. Consider animating the phone busting open, or coming apart like a tool box.


USB Arduino Setup

This was an extra session held by spencer to introduce processing through an Arduino to those who were interested.


USB Port

Screen Shot 2017-04-01 at 17.24.09

Line 3: The serial library is what allows processing to receive data from the USB port.
Line 4: Serial myport is the path of communication to the Arduino

Line 117: The serial myport is setup here. Serial.list()[3] defines which USB port to use and 9600 is the speed of communication.


Println reveals that the serial.list array only has 2 drawers. Because I don’t have an arduino plugged in and serial list()[3] is out of bounds.

To catch this error we wrote a for loop…


with a new variable called havearduino (we had to define this at the top)


…and apply it with an if statement at the beginning of void draw so our check reader() function only runs if the arduino is plugged in

The next line down in void draw calls the function to replace the old ID with a new one.


Now the sketch runs, bypassing the need for an arduino because there is already some functionality built in that works based of keypresses.


Check reader function


Check reader needs to figure out the new ID

336: Listen for information from the arduino and store it in dat
338: We use asterisks to separate the id numbers so the if statement checks to see if the current character is an asterisk. It will use this break to store non-asterisk characters in thisreading.
342: If the character IS and asterisk, that means we have come to the end of the id, and it can now be compared with the lastreading. If they are not the same, then thisreading replaces lastreading.

348: Int stpos6 is about applying the numbers to a string UID: 01 23 45 67


Get data function

This function searches within the data and makes arrays from chunks of it. We end up with 3 arrays based on the FMP, Special Study and Dissertation data. The way you write this function will vary depending on the data that you are reading.


Applying Interactivity

Now, to apply the connection with the Arduino to an existing sketch. For this, we used the generative letter project we had been working on in Tuesday sessions.


For this we work by pasting the necessary parts of the code across part by part.


First import the library.


Then copy over the havearduino variable and all the other strings utilised in the checking and receiving parts of the code


create the link to card reader

check the card reader each frame at the beginning of void draw, note that you’ll also need to paste in the checkreader() function.

Now the id and new id values are being picked up.

Screen Shot 2017-01-26 at 12.10.14

paste across the if statement that compares the new and old id. Remember to paste in the getdata function AND copy across the data text file too.

Screen Shot 2017-01-26 at 12.13.11

some of the variables in get data are undeclared, we could declare them but a lot of them are not necessary, since the only part of the data we are using in this sketch is the name.

Screen Shot 2017-01-26 at 12.14.53

Strip down the get data function accordingly.

Now paste your original variables into get data and redeclare them to link them up with getdata

This works, except we need to add asterisks onto the end of currentname

A.19 Structure 04: The Gif Library Fiasco

With the structure of the quiz now working, I moved on to replacing the images that load into the end of the structure with gifs.

First I started by building in the gif library, the same way we had learned to use it in A.06: Processing Week 4. However, I  was faced with an error, stating that the library was out of date.


To try to rectify this, I moved back to version 2 of Processing from version 3 as it didn’t seem to matter much to my project which version I used. Unfortunately, this was not the case, processing threw out a more complicated error which I couldn’t debug.

I decided to try again in Processing 3, firstly because I felt the gif library would be easier to fix than this unknown error, and secondly because I know it is good practice to work with the most up to date version of the software.

I continued to look through processing.org, GitHub and other sites and forums for the gif library compatible with Processing 3. I found one and replaced gif library, but this didn’t work either. I later discovered, while talking to Spencer, that this had actually also been a library for Processing 2 and was published is 2015.

Next, I rearranged my sketch so that the gif would load as an image sequence. After exporting the video as jpegs, I made an array to contain all the images and then a for loop to load them in.


This for loop had to load in 120 images for just one shot, this slowed down the quiz significantly. I knew that this was not going to be a viable option.

With no more options or ideas left, I brought the issue to Spencer. Following his instructions, I checked the built in contribution manager for processing 3 and it showed that P3 doesn’t have a compatible gif library available.


This is clear now, since I remember that extrapixel was the name of the site where we were able to download the version 2 gif library in the Week 4 Processing session.

Processing.org has no gif library for processing 3, but it does have a Movie Library. I downloaded and added it, but still the video would not play. I checked through the code, using the example given on the site to make sure i’d utilised the library correctly.

Spencer recommended I isolate the vital piece of code from the main sketch, seeing if it would work by itself, this still did not load the video, which points out that there is something wrong with the code. Sure enough, there was a missing function called void movieEvent and some wrong syntax.


Frustratingly the video would still no load. I resorted to opening the test sketch to see if the sample video played through. The original works but when replaced with my video, it doesn’t play. Making a reduced test reveals that the file type is the issue, here.

With the fixed file type, my sketch finally works. Here is a screen recording of the video playing within the reduced test file.


After trying the same shot in many forms (gifs, images and videos) I finally had a working sketch. Now to put it into the full quiz.

A.18 Jailbreaker (ideas)

This gif is to accompany the AdHac question No.4: Have you ever jailbroken a mobile phone or device? For this treatment, I immediately thought of the following gif from PANIC because of its wobbly wires…



The only thing I know about jailbreaking (mobile phones) is that it involves hooking the phone up to a computer with a wire and unlocking the phone from there. I think the association of hacking through a wire brought me visually to this conclusion.

I’d also like to create something where the phone in my gif literally unlocks and folds open like a treasure chest or pop up book, revealing intricate details inside. Currently, I envision the unlocked phone looking like one of these abstract C4D scenes from Danny Jones.



While sketching some ideas, I’ve also considered the possibility of utilising an isometric approach. The piece below I feel could do well as something that would come out of the phone as it is unlocked as it seems to hover on those flat translucent squares on the bottom.


I also like how monument valley handles isometric projection by utilising blocks and levels.


Colour Treatment Reference