https://github.com/fecapark/inside-slushy
Interactive slushy machine.
https://github.com/fecapark/inside-slushy
canvas canvas2d interaction interaction-design interaction-design-project interactions interactions-insights
Last synced: 7 months ago
JSON representation
Interactive slushy machine.
- Host: GitHub
- URL: https://github.com/fecapark/inside-slushy
- Owner: fecapark
- Created: 2023-10-18T01:32:59.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-23T09:28:21.000Z (almost 2 years ago)
- Last Synced: 2024-04-18T06:02:48.442Z (over 1 year ago)
- Topics: canvas, canvas2d, interaction, interaction-design, interaction-design-project, interactions, interactions-insights
- Language: JavaScript
- Homepage: https://fecapark.github.io/inside-slushy/
- Size: 54.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Inside Slushy
by fecapark
Interactive project, inspired by slushy machine.
## Demo
[Project Link](https://fecapark.github.io/inside-slushy/)
## Interactive behaviors
- Hold and spin the spinner.
- Create slushy balls as touch background.
## Project behind
### Physics engine
No third party physics engine.
Implements:
- Acceleration (Movements).
- Elastic collision between circles.
- Calculated by replacing the radius by mass.
- Solved multiple circles collision problem ([Like this](https://gamedev.stackexchange.com/questions/104042/2d-multiple-circle-collision-response))
- By moving it back to the way it came before the collision. ([Code](https://github.com/fecapark/inside-slushy/blob/f94fd9d5e9d52c3be5bb57d01a375eab572e0233/src/managers/BallManager.js#L194C11-L194C28))
- Normal force between rotated spinner and moving balls.
### Guides
Spotlight guide for UX.
Using HTML5 Canvas masking.
- Apply `Context2d.globalCompositeOperation = "destination-out";`, you can get same effect.
- To get more information, refer to [my lab project](https://github.com/fecapark/masking-animation)'s code.
### Compatibility
- Compatibility for all devices and browsers has different fps.