Hey all,

Have you ever wondered about logo animations at the end of advertisements. Well I have and I think they are amazing. Here's a tutorial to make one for yourself. We are going to use Processing as our developing environment. Processing is an open source programming language and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching the fundamentals of computer programming in a visual context. I chose processing because its the best way a beginner can learn programming. Moreover there are lots of Refrences, Libraries and Tutorials available. These days there are lots of animations built on processing (example: MIT Media lab logo).

Here is the final logo animation that we are going to make in this instructables. I made an instructables animation because I think instructables.com is awesome and they are doing a great work.

As I am a beginner to processing, I have written this tutorial so that all beginners will be able to understand this instructable. Ok so lets get started.

Step 1: What You Will Need?

Programming projects usually do not require anything more than a laptop (material wise). Programming such an animation requires:

A lot of patience
Passion and determination
Rigorous debugging
Knowledge of programming language
Internet connection
A little knowledge about physics of mechanics.

Other than that you will need resources that you will import into your program. Normally resources comprise of images, videos, fonts etc.

If you are a beginner then you will need to practice making basic shapes and their motion. To give you an idea I have made a simple pendulum in the next step.

Step 2: The Simple Pendulum

In this step we will try to get a feel of how its like to writing a code in processing. We are going make simple pendulum visual simulation in which we can vary the acceleration due to gravity(g=9.8m/s^2 by default). So this means we will get to know how a simple pendulum will react if taken to some other planet of different gravitational constant.

For this project you wont be needing any resources as we will be making use of basic shapes such as circle and lines which are available already in processing. One of the nicest features of processing is that you can directly export application to work on windows, iOS etc. I have attached the Win64 application and code for simple pendulum as an attachment.

Step 3: The Instructable Logo Animation

For this project we will be needing resources such as image of instructables robot, jpeg of alphabets I,N,S,T,R,U,C,T,A,B,L,E,S and customized font. I have compressed all of these into a .rar file which you can find in attachments. You need to extract these resources into the same folder where your code is located otherwise it wont work.

Next thing is the code. I will explain the pseudo code of this project in steps:

Declare image objects (example:PImage imgrobo;)
Declare Font (example: Pfont font;)
Write void setup ( instructions that you place in setup are initialized once)
Set size of the window (in our case we have set it to 1080 by 720 pixels)
Import images (example: imgrobo = loadImage("imgrobo.gif");)
Load font and set font size
Set values to variables
Setup ends. Declare variables
Write void draw (instructions that you place in setup are initialized in loop)
Set background color ( its white in this project, 255 is RGB code)
Translate origin to center
Using a if condition and a counter variable translate instructables robo.jpeg from right to left
After that translate alternate letter image of INSTRUCTABLES vertically using translate function
Once that is done write Explore Share Make and shake it when mouse is placed on it. This can be achieved by setting up and if condition such that when mouseX and mouseY is on the text x,y coordinate of text will change randomly by +or-1. You can use random function (random(-1,+1);).

Now that we have written the code, its time to make a video of it. This is really simple and can be done from processing application itself. First introduce this line at the end of draw function (saveFrame("Frame/####.png");). What this does is that every time draw function runs it captures the visual frame into a .png file and save it to a folder named frame in the same folder where your code is saved. To create a movie go to processing application then TOOLS--> Movie Maker. Provide the location of Frame folder and add any audio if you want to. I have attached screenshot of this step in photos above.