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:
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:
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.
The logo animation is ready. Send me if you create any. Happy Reading.