Progress so far

There are a few glitches and timing issues but here's how it looks so far:
http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_05_Dracula/rnb_kt_index_05_dracula.html
I got some help from a lecturer adding int the flocking algorithm  and it works quite well apart from one part in the animation, the bit that slows down because of a filter used on a movie clip. I have to remove that and use something else.

One month to go

I’ve been trying to resolve some issues I’ve had with my mouseOver event on the home page. I’ve been using code snippets to add some interaction to the main image. The eventhandlers didn’t work because I had not used a bind method. I got some advice from people on Stackoverflow to include ‘on’ and ‘off’ instead of using ‘addEventListener’, the event handler assumes the scope o the object that dispatched the event. I’m playing around with this as only one of the movie clips plays properly so I may need to use the binding method anyway.

The Windup Girl

I’ve decided to take a slightly different approach to animating The Windup Girl. Dracula acts as more of an intro to the book, with the Windup Girl I want to animate an extract from the book to see if it’s something that could work on website or for eBooks. I want to include some simple user interaction that would take the user from one paragraph to the next.

Home Page

I think my animation is pretty simple. I will have to write clearly how and what I’ve spent my time doing. By trial and error, I’ve figured out how to make certain things work and what hasn’t worked so well i.e masking and filters on movie clips. I’ve decided to spend the day working on the home page. I’m still aiming to work on three books–Dracula, The Windup Girl and Peter Pan, if I only manage two I think my write up will have to explain why.

Boids

Adding the Three.js with my flash document is proving harder than I though. The animated birds freeze when I try to add the two elements together. I’ve tried placing the two elements at different z-indexes but I think it’s something to do with setting a time out button, I’m not sure.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_05_Dracula/rnb_kt_canvas_geometry_birds_riona1.html

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_05_Dracula/rnb_kt_index_02.html

Website

Once I was happy enough with the animation I brought it into the website. I had some work to do on the website such as including links and changing the home page. If I only do one book I’ll have to take change it again but that’s something I have to ask my supervisor about.  I also began including boids. I had thought about this for some time. There are some effects such as fog, clouds, rain which would add greatly to my project. I had looked up Mr. Doobs and GitHub for some code to use. I found the code for the flocking algorithm used on the Arcade Fire website http://www.thewildernessdowntown.com/ and thought if I could at least get one of these elements into the project that would make it from being just an animation you look at to something the user can interact with. Also, if I can get this working it might open the doors for the other effects mentioned above.

http://playground.eca.ed.ac.uk/~s1364534/Dracula/rnb_kt_index_04_index.html

http://playground.eca.ed.ac.uk/~s1364534/Dracula/rnb_kt_canvas_geometry_birds_riona2.html

Timing & tweeking

There were certain elements that were too fast and too slow so I spent some time watching the animation and jotting down the time elements faded in at. I looked back at other film titles such as ‘Catch me if you can’ to see what their timing was like, if I had enough time to read the text and how long it took for elements to appear on the screen. I had to do some adjusting but noticed that masking and blurring filters affected the timings no matter how many times I changed them.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_04_Dracula/rnb_flash_trial8.html

More animating

I originally wanted the bats mouth to open, showing sharp fangs but in order to simplify and push ahead with the project I just faded the screen to black and illustrated the fangs at the top of the screen. This is something I might come back to if time permits but for now it will do. I continued on animating blood dripping from the fangs to create the word ‘Dracula’ which would then fade to red.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_04_Dracula/rnb_flash_trial7.html

Masking and morphing in Flash

There is a piece in the captain’s log when the captain first catches a glimpse of Dracula, “I saw it, HIM”. This is a pretty scary encounter and the words alone make you question what form Dracula was in. When the ship first docks at Whitby harbour, the only thing that is seen leaving the ship was a beast in the form of a dog. I decided to morph the words “it” and “him” into a dog. Because Dracula is more famous for bats I then morphed the dog into a bat that flies directly at the camera/viewer. Shape tweening wasn’t working as well as I wanted it to, even when using shape hints. I think if I’d morphed one letter it may have worked better but morphing words, with open spaces in ‘e’ and ‘a’ caused a lot of problems, so I morphed the ‘HIM’ into a dog using frame by frame animation and then masked the bat so it appeared on top of the dog and as the bat flies towards the screen the dog faded out.

I was also concerned still about canvas sizing and didn’t want to go too far without having that sorted, I emailed my supervisor and asked for some suggestions about size and he advised on 16:9 ration to get that cinematic effect.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_04_Dracula/rnb_flash_trial6.html

Fog and filter problems

The captain at the beginning of the Dracula story logs details about the fog, I was hoping to do this using ThreeJS but was having difficulties getting the fog and the canvas stage working together so I decided to continue with flash and try to do it later. Applying masks and blurring filters gave me some warnings when I published it but it worked to a certain level, it caused some delay and I noticed a shift from a smooth vector shape to a pixelated one. This is something I’ll go back to, for now I want to complete the animation and get it working on the website.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_04_Dracula/rnb_flash_trial5.html

Scaling the canvas

I was unsure of what size to make the canvas because I wanted it to take up a large portion of the screen but when scaled down I still wanted the text to be legible. I’m also concerned about how it will look on a tablet, portrait and landscape. I posted on the Adobe forum and asked for some advice, I was told to make my canvas any size and just use the following code:

canvas.style.width = window.innerWidth+"px";

canvas.style.height = window.innerHeight+"px";

This worked however it squashes some elements when viewed portrait so I think I’ll need a fixed height or some way of doing it. I also saw some information about keeping the aspect ratio of the canvas to 4:3 on this website http://blog.toggl.com/2013/05/6-performance-tips-for-html-canvas-and-createjs/

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_04_Dracula/rnb_flash_trial3.html

Animating Waves

After trying the vector and text approach I also began animating the wave creak or crash. I wanted the spray fro the wave to form the next section of text. During this whole process I’ve been publishing my work and checking it on screen to see how it looks and also to go through the timing and rhythm. When I published the wave-crashing scene I kept getting errors and it would not publish a HTML & JS file for me. After some research I found some answers on forums about the animation being too detailed. I continued to explore my options and decided to simplify it and make the words build in height slowly so that the words themselves created a wave. I tried this quickly and published straight away to see if there were any problems and it published for me. I think there were too many illustrations in my original wave-crashing scene and it was too expensive (in terms of size)

http://playground.eca.ed.ac.uk/~s1364534/Flash/rnb_flash_trial2.html

Animating Text in Flash

There were certain parts of the captains log that set a certain tone, ones that were quite visual such as the rough weather, so I imagined the text would create a huge wave that would crash resulting in the text to drip down to create the next sentence. I started animating the text usig motion tweening so it bobbed as if on the water’s surface but it didn’t give the effect of ‘Rough weather’. I then tried creating a vector wave and merging the text with the vector but it looked a bit tacky and I also wanted to animate the words which was the whole point of the project really!

Animating Text in Flash

I began animating in Flash. The start of the scene illustrates notes written by the captain of a ship travelling from Romania to England. The captain keeps a log and describes the weather and the strange incidents taking place onboard. I am trying to set the scene with my animation using kinetic typography and design so I decide to create a handwriting effect for the captain’s letters. I did this my making a shape out of the text, converting it to a movie clip and deleted section of the text, frame by frame, in the same way it would be written if someone was doing it by hand. I then inversed the text so that it played from left to write.

Change in direction

After a meeting with my supervisor, I decided to continue with Flash including more text animation in Flash rather that in javascript. This gave me much more flexibility as Flash, in particular the timeline, is more familiar to me. I drew another storyboard taking into account morphing and masking techniques. I decided to simplify the previous animation I’d done of the ‘Dock’ scene and revert back to a paper background, I took a photo of some handmade paper I’d bought for another project, and I started to focus on placing words on the paper but to make those words coma alive. I realised by trying to animate the whole scene I was not focusing on typography.

Flying text again

I went back and looked at some code my supervisor gave me, which has text flying around randomly on the screen. This worked perfectly on top of the flash animation. However, I need to figure out how to time this text and use fades and entrances to achieve the effect I’d like to.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_04_Dracula/rnb_flash_trial8.html

Clearing the canvas

After getting my canvases layered on top of one another, I began trying to fade the text in and out. Either the text started to flicker or the flash animation was blacked out. I couldn’t figure out why, but I think it has something to do with me not clearing the canvas to draw the text on to it.

I thought of using extracts from the captain’s log to introduce the scene and then show the captain tied to the helm. The dog would then appear and morph into a bat, flying off screen. The text “Dracula would then appear”. I need to get the text working first before adding in flocking bats and bleeding text…but that is the plan.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_04_Dracula/rnb_flash_trial4.html

Layering the canvas

I was struggling to get my flash animation and my text to layer on top of each other. I then created separate id’s and gave them different z-indexes.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_04_Dracula/rnb_flash_trial2.html

Working with Photoshop, Flash and Illustrator

I did the background in Photoshop using some simple wooden textures. The idea is to use simple silhouettes to illustrate the start of the book where Dracula arrives at Whitby Harbour in the form of a giant dog.  I then drew some dog walking and flying cycles in illustrator and brought them into Flash to start animating them. I’m doing this animation in Flash as I find it a lot easier to work with the timeline in Flash. However I’m hoping to animate the text using javascript as I think it will be easier to manipulate.

Storyboarding — Dracula

I began storyboarding and planning the layout of the animation with a few simple sketches

globalAlpha Property

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_02/index_rnb_kt_03.html

When considering what my supervisor suggested about using a flocking algorithm (boids) I also looked into other forms of interaction the user could have and found this alpha mask filter which could be a great form of interaction on the site http://www.createjs.com/#!/EaselJS/demos/alphamask

I played around with different effects on the canvas, I noticed on Chrome I get square shapes around each letter when the effect is applied but in Safari I don't, something I need to figure out.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_01/rnb_text_bounce.html

Textillate

Using animate.css and lettering.js I incorporated textillate.js (http://jschr.github.io/textillate/) to experiment with timing and other text effects. I also included fonts from google fonts. I’m struggling a bit to see the project coming together but I’m hoping that some of these experiments are helping.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_02/index_rnb_kt_01.html

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_02/index_rnb_kt_02.html

Method of my madness

I looked into how methods work and the “this” keyword and also, how to create objects using either literal notation or constructor notation. I hope the time spent on tutorials will benefit me, I've learned a huge amount and finished the Javascript section of Codecademy, so I'm feeling a little more confident in what I'm doing. 

OOP (object-oriented programming)

During the last meeting with my supervisor I was advised to look into object-oriented programming. I did some tutorials using objects and learned how to add keys to objects.

Heterogeneous arrays and jagged arrays

Continued on with tutorials on logical operators and different types of arrays; heterogeneous arrays and jagged arrays.

Switch statements

I decided to do some more javascript tutorials and learn about Math.floor and the switch statements, hoping my mojo comes back....

Back to basics

Struggling to stay motivated so to keep myself occupied I did some tutorials on CodeAcademy, mainly focusing on While Loops and Do/While Loops. I'm doing this to learn and have a good understanding of some of the basics

Interim Presentation

We had the interim presentation with Dr. Martin Parker today. Four sound designers and two others from DDM joined me. It was very useful to get feedback from Martin and others in the course. It was suggested that I look at how this would work on and iPad if people are looking at it landscape or portrait. Other’s wondered weather the website would act as a shop to sell books or was it an app. I was also asked whether it would be interactive or would this be gimmicky? A lot of questions came up that I hadn’t thought of, which made it great to do this type of thing so early on.
It was also suggested that I change my title from “Can the use of kinetic typography enhance the communicative potential of text?” to something like “The Expressive Type: the future of book covers or eReaders” which, I think is a lot more suitable.

HTML5 - text experiments

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_01/rnb_text_effects_seuss3.html

I followed tutorials from my supervisor and from http://learningengineer.com/newwords.html

Automated Kinetic Typography

After speaking with another lecturer today to get some feedback, I was reminded of a site that one of his informatics students worked on http://akt.akineticblog.com using Python and Flash. The website segments text in order so that it is displayed, in a similar way, to the rhythm of speech. Started to get a bit confused as to where I am going with my project and need to make a plan, start writing and dive into HTML5 now rather than later.

Discussion Points

I found that more questions started arising once I started making a plan for my dissertation, here’s a rough draft of some of the points I hope to look at:

·      Theme 1 –

1.     Use of kinetic typography in film and advertising

2.     Animation techniques

3.    Timing and text

4.     Natural and realistic animation effects

5.     Rhythm

6.     Layout

7.     Navigation

8.    Colour and texture

9.     Reusable effects

·      Theme 2 – Methodology

1.     Research

2.     Tools - use of HTML5 – CSS, Javascript, possibly jquery

3.    Review of current kinetic typographic websites

4.     Sampling/experiments

5.     Analysis

·      Theme 3 - Findings and discussions

1.     Analysis of perception to the website.

2.     Where will it fit in to other peoples work?

3.    How will this affect other designers’ work?

4.     How will this affect the work of the author?

5.     Will this increase the emotional response to text?

6.     Could Kinetic Typography assist authors express their ideas and opinions?

7.     Will it limit the readers’ imagination?

8.    As a designer, how will my design style affect the content?

9.     By using code, is art being created with maths? Like poetic mathematics?