by fecapark
Interactive project, inspired by slushy machine.
![](https://private-user-images.githubusercontent.com/101973955/277273789-8f2e1f70-d933-48b2-9970-a5e1a41e357f.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1ODY5NjMsIm5iZiI6MTczOTU4NjY2MywicGF0aCI6Ii8xMDE5NzM5NTUvMjc3MjczNzg5LThmMmUxZjcwLWQ5MzMtNDhiMi05OTcwLWE1ZTFhNDFlMzU3Zi5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNVQwMjMxMDNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03YzBiYTI4MTdmNjdkMjM0MmYxNDhmNzdiNDE1NWYyZTIzNzg3ZWNlM2JhZGY2MDI2ZTM0MjliNDdiNDNkZGNkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.pk9YXYzC6KwjwSXPtDyLCCAxIrIgktqDuM08iRXFSKg)
- Hold and spin the spinner.
- Create slushy balls as touch background.
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)
- By moving it back to the way it came before the collision. (Code)
- Normal force between rotated spinner and moving balls.
![](https://private-user-images.githubusercontent.com/101973955/277280762-3c16c0f9-0919-42b4-9795-821ef329c2ae.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1ODY5NjMsIm5iZiI6MTczOTU4NjY2MywicGF0aCI6Ii8xMDE5NzM5NTUvMjc3MjgwNzYyLTNjMTZjMGY5LTA5MTktNDJiNC05Nzk1LTgyMWVmMzI5YzJhZS5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNVQwMjMxMDNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wODhmYWU5MWM1NDE3NmI5MmQ0ZDYyNjE3MDdlOTQ5NGM2OWU5NGViZDkwOWU2MWYwZDUzODk0NmJiMWM2MmY3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.NItroJteJHowPORPy5X6uAjsKZ0DTzTafcQ06d0d_Q4)
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's code.
- Compatibility for all devices and browsers has different fps.