AWSS2028: Final Site
Here are some screenshots from my Web Art and Design major project, it focuses on user generated content and its artistic value as well as social reflection. I took the first and last 10 pages of lolbender.tumblr.com posts, a tumblr for internet images and fanart based on 'Avatar: The Last Airbender' (ATLA). I then categorised them into;
Crossover (references to other shows as well as ATLA)
Real World Crossover (cosplay and photos)
Fanart/comics
Memes (demotivational, captions, lolz)
Special (some that didn't fit in the other categories)
Above shows the beginning stages of the visualiser. I used Dan Shiffman's flocking library to control the movement of the images and then created five separate flocks for the categories.
After time the pattern emerges and the images can easily be compared and contrasted whilst at the same time revealing a broader picture of the aesthetic composition within the categories. The mouse repels the images so it can be used to disrupt the images and even separate one by 'herding' it.
Below the visualiser is a brief description of the site and two collapsed 'accordions' containing all the images, one for the first 10 pages and one for the last, with posted videos at the end.
Each accordion has a show all, hide all link that controls all five categories at once. The categories can also be controlled individually, making it easy to compare the memes, for example, from the beginning posts to the ones from the end posts.
The images expand when hovering, allowing the audience to inspect the images closely and read text without disturbing the overall layout of the site.
Technical:
Visualiser - Processing exported to Java applet, using Dan Shiffmen's flocking library http://www.shiffman.net/teaching/nature/steering/
Accordions - Javascript using a library from http://www.dynamicdrive.com/
Styling and mouseover - CSS
Background - Illustrator







