Assignment 2: Animating with Code

Design Brief

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:

Design Constraints

  1. the logo will need to be re-scaleable as necessary, and include in your portfolio examples of your logo at different resoultions.
  2. the logo has to display the words "Design Lab" in the font provided.
  3. 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
  4. 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:



Assessment Standards

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:

  1. A sketch that shows the final version of the your design
  2. 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)


    Brittany Klaassens a few years ago

    If we are calling the font from a file on our laptop, how will it be viewable on peep? or when we export it to blackboard? thats what Im having trouble with

    Chris Green a few years ago

    My design is struggling abit on peep but works fine on processing. Do we have to submit it as an exported portfolio post? Or can I just send the processing sketch with a portfolio including images and research in a word doc?

    ----Edit---- Never mind just saw your email, Cheers

    Last Updated: 6-May-2016 4:26 PM
    Rocio Rosas a few years ago

    My design is not working on peep. It works perfectly fine on procesing. Could I just upload my processing folder?

    David Bunton a few years ago

    Ladies and bros what the fudgestickles!

    I've done my assignment IN PEEP and it looks rock and roll and everything, then when I go to export it into HTML it loses the beautiful font?!

    Police asplain if anyone knows! Thank you muchly!