Upload

Loading icon Loading...

This video is unavailable.

pointerpointer.com's use of voronoi, canvas, and javascript

Sign in to YouTube

Sign in with your Google Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to like Paul Irish's video.

Sign in to YouTube

Sign in with your Google Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to dislike Paul Irish's video.

Sign in to YouTube

Sign in with your Google Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to add Paul Irish's video to your playlist.

Published on Jun 11, 2012

I explain a little bit behind how pointerpointer.com was built.
Thx to @markwithasee to showing the site to me

Just to be clear about the canvas. it's offset in the page because its used as a buffer canvas, mouse positions within the picture frame are sent over to it, and the offsets are determined relative to the canvas. So when I turn on the canvas, it looks like its in the wrong place but technically it doesn't need to be.

Lastly, the colors used in the canvas are there because in order to find which shape encloses your pointer, we can just just look up the pixel data and see what color is under the cursor, and thus the connection from color to shape to image. (thx rhys!)

Loading icon Loading...

Loading icon Loading...

Loading icon Loading...

The interactive transcript could not be loaded.

Loading icon Loading...

Loading icon Loading...

Ratings have been disabled for this video.
Rating is available when the video has been rented.
This feature is not available right now. Please try again later.

Loading icon Loading...

Loading...
Working...
Sign in to add this to Watch Later

Add to