3 Sided Cube: Android Development Course- Week 2

This week we learned how to make a list view to display a scrollable list of items and create layouts. We also learned about keyboard shortcuts to quicken our workflow methods. CTRL + SPACE gives suggestions on the variable you are typing and documentation for that selection. ALT + ENTER is a quick fix shortcut that can do things like importing missing classes. CTRL + ENTER opens the Generate menu which allows you to override methods or generate getters and setters. CTRL + P shows what parameters a method takes.

Layouts use xml to arrange views on screen, it is very similar to html. App development uses dp (density pixels) for measurement as it scales between different devices.

To display a list we used an array adapter and then added some parameters to this in order to be able to get information from and manipulate the list items later.

Animation Project: Scribble Animation Storyboard and Tests

To help come up with some ideas and to test out my animation techniques I devised some storyboards which helped me plan what more to do.



These are very quick and rough, but they have a basic narrative. I scribble on a piece of paper then the scribble then becomes “alive”. It runs across the desk and up my hand, then I flick it away. I like this idea because it fits my theme for a “bête noire” and the concept is quite short and simple. It also means I have a reason to play around with overlaying 3D motion capture onto film. I don’t think the basics of it should be hard to do, modelling a scribble should be quite easy, but making sure the camera is mapped properly might be quite hard.

scribble test

Here’s some tests of different scribble designs I did. Although it seems quite pointless, you can really get a different sense of emotion from the different strokes and volumes of the scribbles.

scribble gif

I decided to test out animating the scribble using stop motion and drawing it on different  layers of paper then hiding them. I think it has worked really well, and the scribble really looks like it is alive. Although one thing I would change is I would use a tripod next time. As I took these pictures on my phone the camera is quite shaky and this does hinder the illusion quite a bit.

hand gif

Another thing I tried out is drawing whilst taking  pictures in order to speed up the process and have shots of my hand. However I soon realised that taking pictures one handed is not a smart idea and I failed to get much out of this test.

fox walk fox run fox run fox walk 4

As the scribble test was quite sucessful, I tried out some walk and run cycles using the scribble fox design. Hopefully this should work really well using these techniques I have just tested and I could use Flash or Photoshop to digitally over the drawn fox onto my hand.

The next thing to try is getting some videos of my hand and me drawing as I think this would be easier to do than if I were to do it using stop motion.  I would also like to try creating a 3D scribble and animating it on my hand. I would love to also animate a 3d scribble fox but I realise that I probably won’t have time to do that within the scope of this project.

Animation Project: Interactive Picture Keyboard Website


Following on from the photography assignment, Luke Monet decided to continue developing the project and asked me to collaborate with him. The idea is an interactive website where the user would press a keyboard key and a photograph corresponding to that letter would appear on the site. Luke worked on the design and idea of the website and I helped him with the code to make it work.

As I had not coded a program like this before I started by creating a flow chart to help visualise how the program would work:

First step: User presses key

Second step: Key code pressed is logged

Third step: Key code is linked to photograph

Fourth step: Photograph is displayed

As each keyboard key relates to a keycode this can be used by the computer to relate to another event. However first the script must have an event listener to check when a key is pressed. I also added all the photographs into an array to store them. The photographs are hiden initally in css (display: none;) and arranged on top of one another using z-indexing. The function alphabet then listens for the window event. If it finds one it takes the key code  (luckily key codes are in alphabetical order or this method wouldnt work, I was being lazy and I should have used a more transferrable method to do this) and minuses 65 to get the array number of the photograph of the letter of the pressed key. It then changes the css display to block to show the letter. I realised after this there needed to be a timeout to this function to allow other letters to be pressed afterwards. I added one set to 500 which makes the photograph display for half a second.

Here is the code I came up with:


And here’s a link to the website:


There are a few bugs with the program, such as only the “top” letter being shown when two keys are pressed at the same time and the bottom one “sticking” and not disappearing till pressed again. I am not quite sure what causes this bug however I am pretty certain that the problem can’t be fully fixed without changing the method that the letters are hidden and displayed using css styles.

The next idea we would like to try is extending the typing feature to allow more letters to be shown, allowing sentences to be written. However the code for this would be completely different to the one above and the layout could be quite complicated, especially if the typing were to be done in real time and not direct the user to another page for the outcome. I can predict it would probably need to store the photographs a library of sorts and a grid system would have to be used to “put” the photographs onto space on the website whilst the user is typing, however I would need to do a lot of research and development before I could sucessfully realize this idea. Although the time scale of this project is probably too short to fully develop this, I would like to try this idea to furthern my programming skills and might work on it over the Easter break.

Another idea we had, which can be done on a much smaller timeframe is adding a sound that would be played each time a key is pressed. As this would probably only add a line or two of code to the one above, this should be quite easy to add in.

Animation Project: Hand Drawn Animation Further Ideas

I decided to devise a mini project to combine the techniques I’d learned so far in this project. As I’d like to develop the ideas explored in my earlier work with hand drawn animation I chose to explore that area to produce a longer piece.

As I had looked at canine locomotion before I decided to vary this slightly by exploring fox designs. Foxes are anatomically very similar to wolves, however they are a bit less stocky and more flexible. They are sharper in their features and have a more “sulking” gait.



I did some quick doodles to figure out the body shape I would like. Through different iterations I realised a lean slender look was what I wanted, even if this wasn’t at all anatomically correct.


I also scribble out some strecthing and squashing poses to work out the form a bit more. I also played with the idea of bi point colouring which is typical of many animals, however it can be hard to keep consistent during simple animations.



Next I experimented with facial feature designs, even though im not sure if I would use something this complicated in an actual animation as this project has quite a short timescale.

Something that I would like to become a theme of sorts for this project is the phrase and concept “bête noire” which is French for a personal bugbear or pet peeve. Something which is a pet peeve of mine is my very messy penmanship and scribbling style as you can quite clearly see above! To show this through the character design I decided to make the figure more messy and scribbly. I tried doing some poses with this style to try and figure out if this would work as a longer animation.I’d have to be quite careful with my posing as some of the forms become very indistinguishable when they overlap in this scribbly style.



Overall I think the character could work but I would have to be really careful with placement of limbs and other things to make sure the movement is conveyed properly. Next I will do some animation tests and do some quick sketches of what a walk and a run cycle would look like.


3 Sided Cube Android Course: Week 1

The app development company 3 Sided Cube is offering  a free Android app development course at University. I was lucky enough to get into the course and I am really excited to get started, although a little apprehensive as I don’t have much development experience.

The first lesson mainly focused on the documentation specific to Android development. Using a native language such as cpp or Java is far more advantageous than using web based technologies such as html 5 as they are far slower and aren’t optimised for the device. We are using Android Studio and programming in Java. Andriod apps are made up of contexts, mainly activities, fragments and layouts.

An activity is a source file that is responsible for interacting with and displaying the UI and UX of an app.

Layouts are made up of views, which is an object that is visible on screen and has a specific pupose, ie a button or a text view.

Layouts are a specific way to lay out views, such as scroll layout or linear.

The first app we made simply had an activity that displayed the text view “Hello World”.



Animation Project: Kinetic Typography Review

I began working on kinetic typography using After Effects to create the video.The audio clip we were given was part of the trailer for the film Gravity.

The first thing I considered was the font  to be used. I decided to use only two fonts, not only to create consitency throughout the video, but also to differenttiate between the two voices. Below is a test I did with type. Although the first typeface was quite effective as being bold it emphasizes the urgency of the voice, the second typeface I used was far less legible and I changed it in the final version. I initially chose it as it looked “computery” as it was based off early computer fonts (the voice it matches is the mission control contacting the astronaut) I also tested the timing during this test, and I turned off the sound to fully check if the speed the text appeared allowed it to be legible.

Here’s the final result. I found the voice clip very hard to work with as there was not much dialogue and what was said was very repetitive short sentences. The background audio also muffled some of the sound, especially of the mission controller and I tried to replicate this by blurring his text. I made this increase at the piece went on the symbolise the astronaut feeling more and more scared and lost. I decided not to use much camera movement as I personally dislike this effect, though in hindsight some camera motion might have added more value to my work.

I found the end of the piece particularly troublesome as there was not enough clearly dialogue to animate which left the last line “hanging” on the screen too long. As an attempt to rectify this I added an effect to make it zoom into the camera, however this looks somewhat cheesy and lasts for far too long. Perhaps a fade to white or black would have been more effective but again it the effect is quite over used and is by now quite cliche. If given more time I would like to look into animating simulated jitter and wobble to add something tintereting to the last line of text as it is on the screen for so long.

The end results were quite simple as I have not worked with After Effects before and the process was very time consuming. If  I were to do the project again, knowing what I know now I would probably add some more effects to the text, such as to simulate screen static and some more complex movement to the text. I would also pick a different audio clip to work with. I would probably pick some audio from a speech, audiobook or monolgue as it would be far easier to animate a longer piece of prose and visualising metaphors and turns of phrase would be quite interesting to work with.