Easy Circle Slider on Canvas without Library
Generative Design Drill
Introduction
The Generative Design Drill Series is all about interactive and generative designs in JavaScript. In this post I implemented a quick and dirty circular slider as shown in the original image below.
How to Calculate Position
I think there are various approaches to achieve to create such an image, but this circular slider draws on a Canvas object. The first difficulty is controlling the slider along the mouse movement. Since normal sliders represented in vertical slider and horizontal slider only need to slide vertically or horizontally, all you have to measure is the y-coordinate or x-coordinate of the mouse movement. However, with this circular slider, it cannot determine where the current cursor is on the slider because the mouse cursor and slider position is not as parallel position as they are. So how should the mouse cursor and slider move together? My methodology is like this.