2.1 KiB
StringArt
The purpose of String Art is to provide the developer with practice creating a simple animated graphic, using geometry in the animation algorithm, and creating something that's visually pleasant to watch.
String Art draws a single multicolored line which smoothly moves until one end touches a side of the enclosing window. At the point it touches a "bounce" effect is applied to change it's direction.
A ripple effect is created by only retaining 10-20 images of the line as it moves. Older images are progressively faded until they disappear.
Animation libraries are not allowed. Use only Vanilla HTML/CSS/JavaScript.
User Stories
- Start by drawing a multicolored line at a random position within the boundary of it's enclosing window
- Each 20ms draw a new copy of the line at a new position based on a trajectory - the incremental distance from the previous line based on the endpoints
- When either endpoint of the line touches the boundary of the enclosing window change it's direction and randomly alter its angle
- Progressively fade the intensity of old lines so that only the most recent 10-20 lines are visible to create the sense of movement or "ripple"
Bonus features
- User can specify the length of the line and it's velocity
- User can specify the multiple lines within the window, all moving along different trajectories and velocities
Trello Board
You can track your progress by cloning this Trello Board
Useful links and resources
Example projects
This project is very close, but has a small enclosing window and is monchromatic. Daniel Cortes
This project is similar, but contains multiple lines and is monochromatic Brendan Mcintosh