Tuesday, 30 December 2008

Kinetic scrolling with Processing - part1

I've been toying with an idea for a timeline based project; it hasn't got much traction.
I did give the interface some thought and decided to try and implement a kinetic scroller.

It's pretty difficult to find a definitive explanation of Kinetic Scrolling or Flick Scrolling, but I think this pretty much sums it up:

"Kinetic scrolling is the popular term to denote the scrolling of a long list with a bit of physics so that user feels like moving a wheel. Such a list view is then often referred as a flick list, caused the scrolling involves some sort of flicking gestures. " [1]

Apple have a tutorial showing how to use their implementation here [2]


The physics are an illusion, and the approach I used is simple.
  • Click and hold the background to drag.
  • When drag is released, note how far it moved since the last draw.
  • Use that distance as the speed (or energy) of the scroll.
  • Continue moving in the same direction, but start reducing the speed (decay).
  • When the speed slow below a threshold, stop the scrolling.
I made a demo using Processing [3], click the image or here to start.
The coloured bars are just for showing the movement clearly.




[1] http://labs.trolltech.com/blogs/2008/11/15/flick-list-or-kinetic-scrolling/
[2] http://support.apple.com/kb/HT1636
[3] http://processing.org/

5 comments:

Delly News Blog said...
This comment has been removed by a blog administrator.
皮東 said...
This comment has been removed by a blog administrator.
reshma M said...
This comment has been removed by the author.
Vishva Bhraman said...
This comment has been removed by a blog administrator.
Vishva Bhraman said...

Nice article..

Online Bus Ticket booking
Low Cost Air Tickets Online Booking
Online Hotel Reservations
Holiday Packages India