You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
2.0 KiB
46 lines
2.0 KiB
6 years ago
|
# Application Name
|
||
|
|
|
||
|
|
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
|
||
|
|
|
||
|
|
- [ ] Allow the user to specify the length of the line and it's velocity
|
||
|
|
- [ ] Allow the user to specify the multiple lines within the window, all
|
||
|
|
moving along different trajectories and velocities
|
||
|
|
|
||
|
|
## Useful links and resources
|
||
|
|
|
||
|
|
- [Using Multistep Animations & Transitions](https://css-tricks.com/using-multi-step-animations-transitions/)
|
||
|
|
- [Animation Basics](https://www.khanacademy.org/computing/computer-programming/programming/animation-basics/a/what-are-animations)
|
||
|
|
|
||
|
|
## Example projects
|
||
|
|
|
||
|
|
This project is very close, but has a small enclosing window and is monchromatic.
|
||
|
|
[Daniel Cortes](https://codepen.io/dgca/pen/dpxreO)
|
||
|
|
|
||
|
|
This project is similar, but contains multiple lines and is monochromatic
|
||
|
|
[Brendan Mcintosh](https://codepen.io/BrendanMcintosh/pen/eBvRpy)
|