The Processing and Processing.js web sites include a Scrollbr example by Casey Reas and Ben Fry. The Clickable package allows simplifying the code because it takes care of much of the declaration, creation, drawing, and mouse click code.
|
This is the rewrite of the Casey Reas and Ben Fry Scrollbar sketch that is available on the
Processing and Processing.js website. It uses SimpleScrollBars in order to best match the
original version. It is 90 lines long compared to 118 in the original. But 11 lines of the
rewritten version are just change the SimpleScrollBar defaults to match the size and color
or the original version. (See the third version below.)
While the rewritten and original sketches look nearly the same there are two significant differences. The rewritten version releases the drag on a scrollbar whenever the cursor moves over the other half of the image. The other is that when one drags a scrollbar on the original version the image lags a bit. The Clickable scrollbars do not have that feature and image movement directly corresponds the dragging operation. The rewritten source code: Scrollbar.pde. |
|
|
|
|
|
Here is the original Scrollbar example has found on
http://processingjs.org/learning/topic/scrollbar/.
It has 120 lines but 4 of those line duplicate the constrain(...) method which was
added to Processing after the example was written.
This original source code: ScrollbarOriginal.pde. |
|
|
|
|
|
Rewritten using default SimpleScrollBars This version uses the default Clickable SimpleScrollBars. The bars are kind of wide for the small sketch but otherwise work fine. The version has only 78 lines of code. This version with standard SimpleScrollBars source code: ScrollbarStandard.pde. |
|
Revised: 04/12/2014