Browsed by
Category: Javascript

Scroll position indicators

Scroll position indicators

OSX doesn’t show scrollbars for a while. Although this saves another 16px of space it could be hard to determine how long you need to scroll for the end of the page. Zachary Olson came up with a clear idea: use small dots to indicate the scroll position on a page.

The dot stick to a header in the text. When the header is out of the screen it will stick at the top of the container. The same goes for the headers which are still to view, these stick at the bottom of the container.

scroll-position-indicators

Grabbing the colour palette from an image with Javascript

Grabbing the colour palette from an image with Javascript

Color Thief is a script which grabs the colour palette of an image programmatically. It uses canvas and Javascript in order to process the image. You can either get the most dominant colour or the complete colour palette.

If you prefer a web application instead, there is a tool called Pictaculous where you can upload an image and receive the palette and matching Kuler and COLOURLovers suggestions.

color-thief

Four ways to floor a number in Javascript

Four ways to floor a number in Javascript

When I was developing my own HTML5 game engine, I needed to focus on performance to have the fastest processing of frames to draw. On of the most used methods within the drawing loop was rounding the pixel coordinates to avoid half pixel coordinates.

After some reading I figured out using floor() instead of round() could be a big performance gain. The most common known method to floor a number in Javascript is Math.floor() However there are three other less known methods which could be used instead. Some of them are faster than Math.floor().

This method uses double-not bitwise operator ~~ to round the number 9.5.

r = ~~9.5;

Another option is to use the bitwise or operatornot to confuse with the logical or which we use in our if statements.

r = 9.5|0

The third option is to use the Cached Math.Floor() function

r = f(9.5)

These three functions turned our to show different on performance when ran at jsperf.com

javascript-floor

As one can see the bitwise OR operator turned out to be the fastest. In daily use we could argue Math.floor() is sufficient and more readable. For the HTML5 game engine, which does a lot of floor operations every second, this is a performance gain.