Create animations using variables (position control)

20 Animation – Position Control

Learning Outcomes (Cambridge International AS & A Level IT 9626 – Topic 20)

• Describe the main families of animation and the typical workflow for creating digital motion.
• Explain frame‑rate, timing, and the role of interpolation (linear, quadratic, cubic) in smooth motion.
• Design and implement a position‑control algorithm that uses variables for position, velocity, acceleration, and easing.
• Apply boundary handling, gravity, friction and multiple‑object management in a working animation.
• Evaluate at least two authoring tools, their output formats and the trade‑off between file‑size and visual quality.
• Discuss ethical and legal considerations when using animated media.

1. What is Animation?

• Definition: The illusion of motion produced by displaying a rapid sequence of still images (frames).
• Families of animation
  • 2‑D raster – frame‑by‑frame or sprite‑sheet (pixel‑based).
  • 2‑D vector – key‑frame (tweening) and path‑based interpolation.
  • 3‑D – model‑based, motion‑capture.
  • Stop‑motion – photographed physical objects.
• Key‑frame vs. frame‑by‑frame
  • Key‑frame (tweening): Only the start and end frames are drawn; intermediate frames are generated by interpolation.
  • Frame‑by‑frame: Every frame is drawn individually; gives maximum artistic control but is labour‑intensive.
• Typical application domains – video games, interactive web pages, UI effects, e‑learning, advertising, film & TV.

2. Frame‑Rate, Timing & Interpolation

Choosing a frame‑rate balances visual smoothness against processing power and file size. For most A‑Level projects 30 fps (smooth) or 60 fps (high‑performance) is recommended.

Interpolation functions

• Linear: f(t) = t
• Quadratic (smoothstep – ease‑in/ease‑out): f(t) = 3t² – 2t³
• Cubic (ease‑in/out with stronger curvature): f(t) = t³ · ( t · (6t – 15) + 10 ) (also known as “smoothstep3”).

Here t is the normalised progress (0 → 1). The output replaces the simple linear factor Δt in the position update, giving more natural start‑and‑stop motion.

3. Motion Fundamentals (Physics)

Uniform linear motion (constant velocity):

$$ x_{\text{new}} = x_{\text{old}} + v_x \,\Delta t,\qquad y_{\text{new}} = y_{\text{old}} + v_y \,\Delta t $$

When acceleration is present (e.g., gravity, friction):

$$ v_{x,\text{new}} = v_{x,\text{old}} + a_x \,\Delta t,\qquad v_{y,\text{new}} = v_{y,\text{old}} + a_y \,\Delta t $$

Friction can be modelled as a simple scalar multiplier on velocity each frame (e.g., vX *= 0.98).

4. Authoring Environments & Output Formats

• HTML5 Canvas / JavaScript – full control, vector‑friendly, easy to embed.
• Scratch – block‑based, ideal for rapid prototyping.
• Adobe Animate – timeline‑based, supports both raster and vector, exports to HTML5 Canvas, SWF, GIF, MP4.
• Unity (2‑D) – game‑engine workflow, C# scripting, exports to WebGL.
• Processing – Java‑based, good for teaching algorithmic animation.

Export formats

5. Variables for Position Control

6. Position‑Control Algorithm (Flowchart)

1. Initialise all variables (position, velocity, acceleration, friction, timing, canvas size).
2. Start the animation loop (e.g., requestAnimationFrame).
3. Calculate Δt from the timestamp supplied by the loop.
4. Update velocity
   • velX += accX * Δt
   • velY += accY * Δt
   • Apply friction: velX *= friction, velY *= friction
5. Compute easing (optional)
   • Determine normalised progress p = elapsed / duration (clamp 0‑1).
   • Calculate easingFactor = f(p) using the chosen interpolation.
6. Update position
   • posX += velX * Δt * easingFactor
   • posY += velY * Δt * easingFactor
7. Boundary handling (optional)
   • Reverse, clamp or stop velocity when the sprite reaches canvas edges.
8. Render the object at (posX, posY).
9. Loop back to step 3 until the animation is stopped.

7. Full Pseudo‑Code (Horizontal Motion with Easing, Gravity & Boundary Bounce)

// -------------------------------------------------
// 1. INITIALISATION
// -------------------------------------------------
let canvasWidth = 800, canvasHeight = 600;
let objectWidth = 50, objectHeight = 50;

let posX = 0;
let posY = 150;

let velX = 120;          // px/s
let velY = 0;            // px/s

let accX = 0;
let accY = 200;          // px/s² – simple “gravity”

let friction = 0.99;     // slight air resistance
let deltaTime = 1/60;    // fallback value
let useEasing = true;
let duration = 4;        // seconds for a full travel
let elapsed = 0;

// -------------------------------------------------
// 2. INTERPOLATION FUNCTION (quadratic smoothstep)
// -------------------------------------------------
function easeInOut(t) {
    // t is clamped between 0 and 1
    return 3*t*t - 2*t*t*t;
}

// -------------------------------------------------
// 3. ANIMATION LOOP (requestAnimationFrame)
// -------------------------------------------------
let previousTimestamp = performance.now();

function animate(timestamp) {
    // ---- 3.1 Calculate real Δt (seconds) ----
    deltaTime = (timestamp - previousTimestamp) / 1000; // ms → s
    previousTimestamp = timestamp;

    // ---- 3.2 Update velocity (acceleration + friction) ----
    velX += accX * deltaTime;
    velY += accY * deltaTime;
    velX *= friction;
    velY *= friction;

    // ---- 3.3 Easing factor (optional) ----
    let easingFactor = 1;
    if (useEasing) {
        elapsed += deltaTime;
        let progress = Math.min(elapsed / duration, 1); // 0 → 1
        easingFactor = easeInOut(progress);
    }

    // ---- 3.4 Update position using easing ----
    posX += velX * deltaTime * easingFactor;
    posY += velY * deltaTime * easingFactor;

    // ---- 3.5 Boundary detection – bounce back ----
    if (posX > canvasWidth - objectWidth) {
        posX = canvasWidth - objectWidth;
        velX = -Math.abs(velX);
    }
    if (posX < 0) {
        posX = 0;
        velX = Math.abs(velX);
    }
    if (posY > canvasHeight - objectHeight) {
        posY = canvasHeight - objectHeight;
        velY = -Math.abs(velY);
    }
    if (posY < 0) {
        posY = 0;
        velY = Math.abs(velY);
    }

    // ---- 3.6 Render ----
    clearCanvas();                                   // implementation‑specific
    drawRectangle(posX, posY, objectWidth, objectHeight, 'steelblue');

    // ---- 3.7 Request next frame ----
    requestAnimationFrame(animate);
}

// -------------------------------------------------
// 4. START THE LOOP
// -------------------------------------------------
requestAnimationFrame(animate);

8. Extending the Basic Model

• Multiple objects: Store each sprite in an array of objects (e.g., sprites[i].posX) and loop through the update/render steps.
• Sprite‑sheet animation: Combine the position algorithm with a frame‑index that cycles through a sprite sheet (change sourceX / sourceY each render).
• Key‑frame tweening: Define start‑ and end‑positions, compute normalised t based on elapsed time, then apply any interpolation (linear, quadratic, cubic).
• Collision response: Detect overlap between objects and adjust velocities (elastic bounce, stop, or trigger an event).

9. Sample Boundary‑Logic Table

10. Ethical & Legal Considerations

• Respect copyright – only use assets you have permission for or that are openly licensed.
• Avoid deceptive motion (e.g., mimicking hazardous real‑world behaviour without warning).
• Consider accessibility – rapid flashing or high‑contrast motion can trigger seizures; follow WCAG 2.0 guidelines.

11. Assessment Checklist (AO2 & AO3)

• Can the student declare and initialise all required variables (position, velocity, acceleration, friction, deltaTime, easingFactor)?
• Does the student correctly compute Δt = (currentTimestamp‑previousTimestamp)/1000 and use it in the motion equations?
• Is the animation loop clearly structured: update motion → apply easing → boundary handling → render → request next frame?
• Can the student extend the basic code to demonstrate at least two of the following:
  • Boundary detection / bouncing
  • Gravity or other constant acceleration
  • Easing or key‑frame interpolation
  • Multiple independent objects
  • Sprite‑sheet frame switching
• Can the student compare two authoring tools (e.g., HTML5 Canvas vs. Adobe Animate) in terms of:
  • Supported output formats
  • Typical file‑size vs. visual quality trade‑offs
  • Suitability for the intended audience and platform
• Does the student discuss at least one ethical or legal issue related to the animation they created?

12. Suggested Diagram – Animation Loop Flowchart