Assignment 2: Animating with Code
Peep is a web site for learning how to be creative with code using Processing.js. The web site features a large animated banner with the tag line "Learn to program. Creatively". This is an example of how processing can be used to integrate dynamic content in a webpage.
In this assignment you will be required to create a generative logo for the design lab. That is a logo that animates continuously.
Your job as a designer is to understand the needs of the logo, e.g., the message it needs to convery, and design an animation that fits both expresses the mission of the faculty and fits in with it's look and feel. The logo, should continuously animate without repeating so that it is always fresh.
Develop a sketch that expresses the mission of the Design Lab and animates continuously without repeating itself. The sketch should fit with the vision, purpose and look of the existing style as seen on the design lab website and around the building. It should show off what is possible using the tools available in Peep but it should not distract unduly. The design and implementation of the sketch should satisfy the following requirements:
- the logo will need to be re-scaleable as necessary, and include in your portfolio examples of your logo at different resoultions.
- the logo has to display the words "Design Lab" in the font provided.
- images, fonts and/or vector shapes may be loaded from files but should be done sparingly, the animation should be predominantly generated using drawing primitives to emphasise the generative nature of being creative with code
- The palette should be limited to that of the web site, i.e. black, white and yellow. Transparent versions of these colours at various levels of opacity are allowed. The actual colors of the design should be white, yellow and blcak.
Download the Assets
The Assets (font and image files) are located at:
The following may provide inspiration for this assignment but you should not limit your research to them:
- Casey Reas - see also Reas' earlier works (before Processing) at http://www.groupc.net/
- Ben Fry - see also Fry's designs and illustrations at his company Fathom
- Jared Tarbell - see also Tarbell's works not done in Processing can be found at http://www.complexification.net/
- Karsten Schmidt (a.k.a. Toxi) - see also Schmidt's design at his company PostSpectacular
- Marius Watz - see also Watz's earlier works at http://www.unlekker.net/, http://www.evolutionzone.com/ and his blog at http://www.generatorx.no/
You will be assessed on your ability to use the technical material cover so far in class, to produce aesthetically/conceptually engaging animation. Designs that address the needs of the web site intelligently and/or explore interesting themes (related to the goals of the Design Lab) will be judged highly. PASS will be given to students who can show that they are able to produce an animation that runs continuously without repeating and satisfies the design requirements above. HIGH DISTINCTION will only be given to students who can demonstrate that they can produce appropriate, interesting and engaging animations.
The assignment submission will consist of a portfolio post that includes:
- A sketch that shows the final version of the your design
- A description of your sketch, explaining the design concept together with references to inspirational material and any sketches that you developed during development
Submission of the assignment will be via Blackboard. To submit your assignment you first need to "export" you portfolio post, which will create a ZIP file. You can then upload the ZIP file to Blackboard.
Please refer to your course outline (in the 'outline' tab)