Hacker News new | comments | show | ask | jobs | submit login
Ask HN: What knowledge is required to create a simple 2d animation software
3 points by askertasker 11 months ago | hide | past | web | favorite | 2 comments
What knowledge is required to create a simple 2d animation software something "exactly" like https://www.creativelab5.com/

Please explain in a programming language agnostic way.

I will be thankful if anyone can give algorithms, required maths and terminology, googling which I can get more information.

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.

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).

try googling: html5 canvas animation tutorial

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact