added Trello Board to String Art

pull/12/head
Florin Pop 7 years ago
parent 482270be9d
commit 2a0e034650

@ -8,33 +8,31 @@ 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" end touches a side of the enclosing window. At the point it touches a "bounce"
effect is applied to change it's direction. effect is applied to change it's direction.
A ripple effect is created by only retaining 10-20 images of the line as it 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. moves. Older images are progressively faded until they disappear.
Animation libraries are not allowed. Use only Vanilla HTML/CSS/JavaScript. Animation libraries are not allowed. Use only Vanilla HTML/CSS/JavaScript.
## User Stories ## User Stories
- [ ] Start by drawing a multicolored line at a random position within the - [ ] Start by drawing a multicolored line at a random position within the boundary of it's enclosing window
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
- [ ] Each 20ms draw a new copy of the line at a new position based on a - [ ] When either endpoint of the line touches the boundary of the enclosing window change it's direction and randomly alter its angle
trajectory - the incremental distance from the previous line based on the - [ ] 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"
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 ## Bonus features
- [ ] User can specify the length of the line and it's velocity - [ ] User can specify the length of the line and it's velocity
- [ ] User can specify the multiple lines within the window, all - [ ] User can specify the multiple lines within the window, all moving along different trajectories and velocities
moving along different trajectories and velocities
## Trello Board
You can track your progress by cloning this [Trello Board](https://trello.com/b/1pyCZmkb/string-art)
## Useful links and resources ## Useful links and resources
- [Using Multistep Animations & Transitions](https://css-tricks.com/using-multi-step-animations-transitions/) - [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) - [Animation Basics](https://www.khanacademy.org/computing/computer-programming/programming/animation-basics/a/what-are-animations)
## Example projects ## Example projects

Loading…
Cancel
Save