Tag Archives: PaperJS

SEC Cross-divisional Games Diagram

sec_ncWhile watching some uninspiring NCAA football games today (I’m looking at you, OSU/Michigan and Georgia/Vanderbilt), I had a chance to wonder about this year’s SEC cross-divisional games. Each year, each SEC team plays two games against teams in the opposite division (i.e. each SEC West team plays two SEC East opponents).

Here is a diagram showing who’s playing who in 2015.


PaperJS Voronoi Diagrams


I’ve been tinkering around with Voronoi diagrams, inspired by the example on the PaperJS site. My example (here) uses Raymond Hill’s Voronoi Javascript implementation and PaperJS to derive the diagram from a point distribution. Note: the redraw animation is a bit backwards, as the point locations are determined first, driving the placement of the Voronoi diagram.

Another, more festive example, can be found here, which shows the distribution of lights on our Christmas tree. Falalalala-la-la-la-la.

Magical Mystery Contours (raster to contour algorithm)


I added contour lines (map here) to my IDW map (read here). The map has contour breaks at 25, 50, and 75. I was really flying by the seat of my pants coming up with this algorithm – it’s pretty computationally intensive, but it does run (at least on Firefox), so don’t panic if the “This script is non-responsive” pop-up pops up. If there’s any demand for it, I’ll write up an explanation of what’s going on, but until then you’ll have to figure it out from the source code (good luck). And, if you’ve got a more streamlined raster to contour routine, I’d love to hear about it!

IDW on Google Map


Inspired by bad weather this afternoon, I made this basic Inverse Distance Weighted interpolator, written in JavaScript, displayed by PaperJS objects on top of a Google Map. It makes several randomly placed points with random values, then interpolates the colored surface based on the distance-weighted influence of the points. There are lots of geographic applications that may use this technique (rain, temperature surfaces, etc.), but I’m not feeling too inspired to go further right now. Let me know if you do!

Antipode Code


Last night, lying in bed, I found myself wondering what was on the far side of the Earth (apparently that point is called an antipode). So, today, I made this map to find out. It actually turned into a pretty amazing ride down a CSS-riddled rabbit-hole, and now the map is complete with flipped and mirrored maps, jQuery opacity slider (at the bottom), and animated PaperJS lat/long display.

There are surprisingly few places where you could dig straight through the centre of the Earth and emerge on dry land. If you’re going to try it, here are a few relatively safe places:

  • Fiji to Mali
  • Auckland, NZ to Seville, Spain
  • A large portion of Argentina/Chile to China/Mongolia
  • Bermuda to Perth, Australia (you’ll emerge in shallow water, so bring some swimming trunks)
  • Philippines to Brazil
  • Hawaii to Botswana

Disappointingly, if I dug straight through the Earth to other side, I’d end up about far as possible in the middle of the Indian Ocean.

There are lots of similar maps out there, but I’ve yet to find another one with interactive transparent overlay maps (possibly by design – it gets a little overwhelming). If you find other cool antipode maps, feel free to link to them here.

edit: now includes custom map style!

edit: does not seem to work in Safari or IE.

PaperJS-based Minimum Convex Polygon


Even though I’m at home sick today (or maybe due to the boredom of it), I’ve been working on improving my PaperJS-based minimum convex polygon (MCP) script (now found here, previously found here). Now, the algorithm is as follows:

  1. Find the point that is the farthest right
  2. Draw a large circle that encompasses the entire possible field, centred on that point. My circle has a radius of 720px (the field is 500x500px). The circumference of the circle is split every 18px. When those vertices are connected to the centre, there are 252 spokes.
  3. Loop through the spokes, starting with the spoke pointing straight down and moving clockwise. Does the spoke pass through another point (within 5px)? No? Move to next spoke. Yes? Connect the circle centre on that point (a new boundary line of the MCP), move the circle and all spokes to that point. Continue with next spoke to find the next MCP boundary point.

This method isn’t perfect, but it works fairly well. Problems arise when two or more points fall within the tolerance of the spoke hittest (5px). But like I said, I’m sick, so instead of fixing it, I’m going to watch Community.

edit: I’m very grateful to SparkGeo’s lab, which finally clued me in to how to interact with a map underneath a canvas element. Hint: canvas CSS = “z-index: 1; pointer-events:none”