Well, It's the end of the project! Officially, at least. I haven't blogged what I've been doing today because from the moment I woke up, I've been working on assembling the second chart. I really wanted to get this piece done as I feel it really expresses the potential of my idea, and I wanted the final animation to do justice both to the idea, and to the research and painting that I had done so far.
As with all such projects, it has expanded to fill the time available, and heredity turned out to be rather a large topic to tackle. I found it very interesting though, and greatly enjoyed making the scripts, with their changes in space and time.
I was inspired by the title screen for the flash game Samorost 2, where the vines which grow into the title flex and straighten with mouseover, and by the Monet 2010 project, which has the most beautiful spreading watercolour effects.
Alas, even for an animation student something along either of those lines is somewhere of the mangnitude of a major project, and so I haven't been able to live up for my dreams. It does the job though, and given that I was restricted to using open-source software that'd run on Ubuntu, I'm very proud of what I've achieved in such a short space of time.
Only for those interested in the process: I drafted the script by hand, created it on multiple pages in OpenOffice Draw, and exported to html which created .png for each page as a by-product. I used Gimp to change the white background of each of these to an alpha transparency. I also used Gimp to clean and separate my scans. I then assembled the project in Pencil (which I heartily wish was further along in development, and could actually export any kind of animation instead of stand-alone image frames). First I added the frames of the script, then added interleaving frames, added and removed the scribbles (there are a couple of errors I haven't had time to fix), added and edited the backgrounds, and added a transparency layer to fade the image behind the text (much, much harder than you'd think it would be). I then exported the animation to a series of .png files, uploaded them, and used a bash script to create entries for each of the 85 frames in the html/javascript files which display the final animation.
I wish I'd had a single piece of software to do all that... I wish you could get Flash for Linux for $cheap...
It may still be crude, but I love it dearly.
I'm also immensely glad that I've created the website to hold these Charts in an expandable, future-proof way. The concept I've tried to convey is a message close to my heart, and the medium one which is very useful to know. I think that expanding this project further will be a good way to practice and hone animation skills as I acquire them. I also feel that the design and layout of the site suit the content quite well.
I don't believe the project has yet grown to achieve my goal of self-dissemination through beautiful, elegant simplicity, but I've taken a major step in the right direction, and it's something I hope to pursue in future.
It's no Information Is Beautiful, but it's an accessible look at the history of an idea, and I hope it will inspire people to think about science in a new way.
Monday 4 July 2011
Sunday 3 July 2011
Pigments and proteins
Today's been... long.
I've been working on my second chart, and this one is so far beyond the last there will hopefully be little comparison. I researched it in the morning (learnt rather a lot!, spent all afternoon writing the script (25 stages, compared to about 8 for the last one!) and since about 5pm I've been painting. It's now... nearly 1.30am. They're not the most complex, finished images in the world, and they're prone to my usual fault of over-working, but I'm so proud of these 8 little watercolours. My glamorous assistant is going to scan them in the morning (a version clash means the scanner won't work with my machine), then it's non-stop editing, layering, animating and coding until I can share it all with you.
Fingers crossed I can do it without exploding...
I've been working on my second chart, and this one is so far beyond the last there will hopefully be little comparison. I researched it in the morning (learnt rather a lot!, spent all afternoon writing the script (25 stages, compared to about 8 for the last one!) and since about 5pm I've been painting. It's now... nearly 1.30am. They're not the most complex, finished images in the world, and they're prone to my usual fault of over-working, but I'm so proud of these 8 little watercolours. My glamorous assistant is going to scan them in the morning (a version clash means the scanner won't work with my machine), then it's non-stop editing, layering, animating and coding until I can share it all with you.
Fingers crossed I can do it without exploding...
Saturday 2 July 2011
Polish
Chart display lightbox - now smallinated!
Some user-testing (thanks Phish, Pippa!) helped my fatigue-addled brain realise that my beautiful in-line lightbox didn't entirely solve the problem of my stupidly huge slideshow. On a screen smaller than my gargantuan one, the 'play' button is pushed off the bottom of the screen, and you can't move the lightbox around.
Remastered 'naked' frame
As a result, I'm working on replacing the images in the Mars chart, and I thought I'd take the time to use the Gimp's Curves tool to remove the paper texture and prominent edges which annoyed me about the rough slideshow. It's tedious but simple work, but I think it'll make a big difference to the feel of the piece. Similarly to abstracting the content from the page, I hope that abstracting the art from the physical bit of paper will be another step towards making the message immersive, absorbing, and stand-alone.
Friday 1 July 2011
Sharing
As sharing is a critical part of my site's idea, I've added a neat little sharing widget to the sidebar - when clicked, it offers up a menu with all sorts of sharing means. I would like to have it a little more prominently displayed, but I think there's an issue with the buttons.
Revamped content display
It's complete! Well, the display pages are. I'm really happy with the massive improvement to the content display which has come from separating the charts into a lightbox display.
I've made a few modifications to the 'post' page layout: giving it a dark background similar to the slider on the front page, changing the text to white (though I might need a heavier font, shall user-test that) and linking the chart via a centered thumbnail image.
This shot gives you an idea of how I have the chart set up to display at the moment in a lightbox. Similarly to iframe, it grabs external content and displays it in an overlay window. The slideshow player works!
I'm very happy with using Thickbox - it's straightforward to use (just add some extra code to a link to open in a lightbox instead of the same/another page), and 'just worked', which is what I'm looking for right now! There is also an addition to the WYSIWIG post editor which makes everything easier and gives straightforward access to its more powerful features, but as the WYSIWYG editor isn't working right now, it's just as well I don't need it!
New 'post' page
I've made a few modifications to the 'post' page layout: giving it a dark background similar to the slider on the front page, changing the text to white (though I might need a heavier font, shall user-test that) and linking the chart via a centered thumbnail image.
The chart displayed in a lightbox
This shot gives you an idea of how I have the chart set up to display at the moment in a lightbox. Similarly to iframe, it grabs external content and displays it in an overlay window. The slideshow player works!
I'm very happy with using Thickbox - it's straightforward to use (just add some extra code to a link to open in a lightbox instead of the same/another page), and 'just worked', which is what I'm looking for right now! There is also an addition to the WYSIWIG post editor which makes everything easier and gives straightforward access to its more powerful features, but as the WYSIWYG editor isn't working right now, it's just as well I don't need it!
Battle of the lightboxes
Well, after quite a few hours of wrestling with code, testing, re-testing, and an exciting interlude in which I accidentally installed every application available with '5' somewhere in the details (the hyperventilating was mighty),, I have switched to using Thickbox plugin for wordpress, which does the same thing, but actually works and isn't ugly. I highly recommend Thickbox! It is also available
Hoorray for study-buddies too, my friend managed to diagnose a z-layering problem and suggest the solution in 10 minutes, which would otherwise have taken me another few hours. Phew.
Now that works, it's time to improve the look of chart supporting pages.
Hoorray for study-buddies too, my friend managed to diagnose a z-layering problem and suggest the solution in 10 minutes, which would otherwise have taken me another few hours. Phew.
Now that works, it's time to improve the look of chart supporting pages.
Lightbox!
I got some useful feedback from the presentations on Tuesday, and have been mulling them over since.
One thing which I really did not like about my site was the way in which the charts operate as an object within a page. Maria solidified this for me, and after some discussion with Pippa we worked out that the best way around this would be to have the charts displayed in a stand-alone way, which will prevent the website from distracting the user while the display is in progress. It will also mean I can design the charts to optimise the user's experience, rather than having those needs compete with the factors which constrain the site's design.
A friend found me a very nice Lightbox plugin for Wordpress - Lightbox Plus - which allows you to display any kind of content in a modal window overlaying your current page. Modal windows are child windows, which appear over the usual graphical interface of a program, and disable interaction with the parent until the modal is dealt with (eg. error messages). In website design, the most familiar implementation of this is a Lightbox, traditionally a javascript-implimented window which overlays the current page in order to display highlighted content - usually high-resolution versions of photographs.
I love lightboxes - they allow you to explore visual content in all their glory, without being restricted by fitting within a website's design. By fading the website behind the content their location and route back to the website is clear, but all that 'spatial' information fades as the user is invited to concentrate on experiencing the content which they have selected.
I had been using iframes anyway, and this plugin purports to work with them, so it's time to give it a go, using these demos.
One thing which I really did not like about my site was the way in which the charts operate as an object within a page. Maria solidified this for me, and after some discussion with Pippa we worked out that the best way around this would be to have the charts displayed in a stand-alone way, which will prevent the website from distracting the user while the display is in progress. It will also mean I can design the charts to optimise the user's experience, rather than having those needs compete with the factors which constrain the site's design.
A friend found me a very nice Lightbox plugin for Wordpress - Lightbox Plus - which allows you to display any kind of content in a modal window overlaying your current page. Modal windows are child windows, which appear over the usual graphical interface of a program, and disable interaction with the parent until the modal is dealt with (eg. error messages). In website design, the most familiar implementation of this is a Lightbox, traditionally a javascript-implimented window which overlays the current page in order to display highlighted content - usually high-resolution versions of photographs.
I love lightboxes - they allow you to explore visual content in all their glory, without being restricted by fitting within a website's design. By fading the website behind the content their location and route back to the website is clear, but all that 'spatial' information fades as the user is invited to concentrate on experiencing the content which they have selected.
I had been using iframes anyway, and this plugin purports to work with them, so it's time to give it a go, using these demos.
Subscribe to:
Posts (Atom)