4 ms·
How do you even get the _feel_ of the device so right? I'm perplexed, such a great project. I started using it unironically to play music, I'd totally pay for a
by smnscu 5y ago
How do you even get the _feel_ of the device so right? I'm perplexed, such a great project. I started using it unironically to play music, I'd totally pay for a Mac/iOS app haha.
- rileytg 5y agoI would pay for the app just to get the haptic feedback!
- y2bd 5y agoiirc there was an iPod-style app on the Apple App Store for a bit around a year ago, but it was shortly after taken down. I don’t know if the developer came out with an official statement, but I imagine Apple had some copyright grievances. It did have haptic feedback on the wheel which was cool, although I think this web implementation actually does a better job of nailing the motion and feel of the click wheel itself.
- btown 5y agoSimpler than one might think - once you do the math to project each touch/mouse event down to an angle, you just need to quantize the angle to a certain number of discrete options (which you can measure on an actual device), look at the event stream of such angle events pairwise, and take the sign of the pairwise difference as right/left or up/down! The much harder part when designing the iPods themselves was to build a robust touch sensor given the hardware of the day, and actually come up with pleasing dimensions and quantization parameters as a designer! Code for this implementation: https://github.com/tvillarete/ipod-classic-js/blob/master/src/components/ScrollWheel/Knob.jsx#L266 https://github.com/tvillarete/ipod-classic-js/blob/master/sr...
- lxe 5y ago> Simpler than one might think > ... you just need to quantize the angle ... look at the event stream ... and take the sign of the pairwise difference This is harder than I thought
- Doxin 5y ago> quantize the angle Round the angle quite severely. E.g. if using 10 degree steps you'd round anything below 5 degrees to 0 degrees, and anything above to 10 degrees. Anything above 15 would get rounded to 20, and so on. > look at the event stream Look at the last two directions the above procedure generated. > and take the sign of the pairwise difference If the new angle is higher it's a counterclockwise motion. If the new angle is lower it's a clockwise motion. Do some special handling if the angle wraps around from 350 to 0 degrees or vice versa.
- corobo 5y ago"just" haha
- jonny_eh 5y agoThat "just" is doing a looot of work.
- mypalmike 5y agoNot really. It's just atan2, modulo, and subtraction.
- btown 5y agoI was going to respond saying "at least it's less work than mimicking modern Apple momentum scrolling..." but in fact I'd argue that's simpler than one might expect as well! https://medium.com/homullus/recreating-native-ios-scroll-and-momentum-2906d0d711ad https://medium.com/homullus/recreating-native-ios-scroll-and...
- jack2222 5y agoTaking nothing away from the maker of this, but cried must also go to Apple for the original UX too and how well designed that is that copying it works so well too.