Motion Design: Rotating Lines Animation

Overview

This project demonstrates fundamental motion design principles through an animated visualization of rotating vertical lines. It creates a mesmerizing, organic effect by applying independent rotational motion to parallel lines distributed across the canvas, combined with a trailing fade effect to emphasize movement over time.

Concept: Motion Design

Motion design uses animation and movement to communicate ideas, create visual interest, and guide user attention. This project explores several core motion design principles:

Key Motion Design Principles Demonstrated

1. Independent Motion

• Each vertical line rotates independently around its own center point
• The rotation angle is determined by both elapsed time (frameCount) and the line's horizontal position (x / width)
• This creates a phase-shifted wave effect where lines near the left rotate differently than those on the right

2. Temporal Layering (Trails & Persistence)

• Instead of clearing the canvas each frame, a semi-transparent rectangle is drawn
• This creates a "fade trail" that gradually diminishes previous frames
• Emphasizes the path of motion and creates a sense of velocity and continuity

3. Rhythm & Pacing

• The rotation speed is controlled by frameCount * 0.01, establishing a consistent, measurable rhythm
• The consistent timing creates predictable, danceable motion that feels intentional rather than random

4. Endpoint Emphasis

• Circles drawn at the endpoints of each line serve as anchor points
• These visual markers help track the motion of each line and emphasize the rotation points

5. Responsive Scale

• The animation adapts to window dimensions, maintaining the motion design across different viewport sizes
• Lines are evenly spaced with a consistent interval, scaling the number of elements to fit the screen

Technical Implementation

Technologies

• p5.js: Creative coding library for drawing and animation
• D3.js: Included for potential data visualization extensions
• HTML5 Canvas: Renders the animation to the browser

How It Works