
Ask HN: What knowledge is required to create a simple 2d animation software - askertasker
What knowledge is required to create a simple 2d animation software something &quot;exactly&quot; like https:&#x2F;&#x2F;www.creativelab5.com&#x2F;<p>Please explain in a programming language agnostic way.<p>I will be thankful if anyone can give algorithms, required maths and terminology, googling which I can get more information.<p>Some background story: I am currently in 2nd year of University (CS course). I want to do this project for next year project. So I want to learn as much as I can about this topic. But because of no knowledge of the terminology, googling returns nothing useful.
======
jmts
I'll see if I can break this down a bit and keep it reasonably concise.

At a glance, the sort of thing this is doing is key frame animation of vector
graphics primitives.

Vector graphics primitives tend to be simple geometric shapes (polygons) or
curves (lines, arcs, bezier) that can be described using a small set data
which are needed by an algorithm to draw that particular shape. For example, a
triangle is described by its three corner vertices, and a circle by its center
and radius. In this case, it appears that the circles may described by a set
of bezier curves. This is different to raster graphics which describe an
object as a set of pixels (a tile, or sprite), as was used for early video
games. For display, vector graphics are rasterised from their mathematical
description before they can be displayed on a screen.

Key frame animation is animation where an animation is described by a series
of frames called key frames. The key frames are displayed in order at a
specified time, with all other frames between key frames generated by some
assortment of transformations or interpolations of the objects between frames.
Key frame animation lends well to animations of vector graphics where the
graphics primitives are described primarily using vectors, as vectors are
easily manipulated using linear algebra, allowing an assortment of
transformations and interpolations of primitives between frames.

A simple animation might work something like this:

    
    
      1. Define key frame 1, containing 10 rectangles
      2. Define key frame 2, containing 10 different rectangles
      3. Define a one-to-one mapping of transitions between the rectangles in both frames
      4. Specify a time interval for the transition from frame 1, to frame 2
      5. At time t, interpolate/transform the corner vertices, and colours of the rectangles in frame 1 toward those in frame 2 proportional to t to create a new frame.
      6. Rasterise the new frame to pixel data into a frame buffer for display.
    

There is a lot that goes into this. I recommend you do some reading on linear
algebra, for the math. Particularly transformation matrices. You will be doing
the majority of your work with linear algebra. Some existing technologies like
the SVG standard will help with concepts, and potentially Adobe Flash will
give you some idea of the keyframe animation (it used to do this very thing,
but I haven't looked at it in many years).

------
tiredwired
try googling: html5 canvas animation tutorial

