Warning: Declaration of Jetpack_IXR_Client::query() should be compatible with IXR_Client::query(...$args) in /home/clients/7267bc096562fcdb78c0ab60d3ac51fb/web/blog/wp-content/plugins/jetpack/class.jetpack-ixr-client.php on line 91
{"id":1001,"date":"2017-01-03T09:10:36","date_gmt":"2017-01-03T09:10:36","guid":{"rendered":"http:\/\/barradeau.com\/blog\/?p=1001"},"modified":"2017-01-03T17:55:33","modified_gmt":"2017-01-03T17:55:33","slug":"woven-maps","status":"publish","type":"post","link":"https:\/\/barradeau.com\/blog\/?p=1001","title":{"rendered":"woven maps"},"content":{"rendered":"

last christmas I\u00a0offered\u00a0a series of prints and plots as gifts to my family & relatives. for some\u00a0of them, I used vector maps as a way to\u00a0seed<\/em> a graphic post-processor. it looked like this:
\n\"pics0\"<\/p>\n

rue Lecourbe, Paris.<\/p>\n

\"pics1\"<\/p>\n

rue Pelleport, Paris.\"pics3\"<\/p>\n

l’op\u00e9ra de Paris.<\/p>\n

\"pics2\"<\/p>\n

detail<\/p>\n

\"untitled-1\"<\/p>\n

Notre-Dame de Paris<\/p>\n

\"pics4\"<\/p>\n

these are the steps I followed:<\/p>\n

    \n
  1. collect a set of points<\/li>\n
  2. triangulate the set<\/li>\n
  3. compute the triangles’ edges’ lengths<\/li>\n
  4. draw the gradient. for a given height:\n
      \n
    1. translate the canvas vertically and give it a\u00a0small opacity<\/li>\n
    2. render only the edges which length is below a given threshold<\/li>\n<\/ol>\n<\/li>\n
    3. draw a given amount of extra wireframes as 4 with a higher opacity<\/li>\n
    4. overlay an additive picture<\/li>\n
    5. render white wireframes & glow<\/li>\n<\/ol>\n

      it may seem complicated\u00a0but apart from the triangulation, it is mostly a canvas<\/em>\u00a0work.<\/p>\n

      the first 3 steps work together\u00a0in a function called process()<\/em>, the 4 last steps are grouped under render().<\/em><\/p>\n

      first the code of the process()<\/em> function<\/p>\n

      \/\/#1 we collected some points\r\nfunction process( points ) {\r\n\r\n    \/\/not enough points: bail out\r\n    if (points.length < 3)return;\r\n    \r\n    \/\/there are enough points to compute something\r\n    \/\/first make sure there are no duplicates ( create a point set )\r\n    points = cleanup(points);\r\n\r\n\/\/#2 second compute the delaunay triangulation on the set\r\n    var tris = delaunay.compute(points);\r\n\r\n\/\/#3 compute the edges lengths and associate the endpoints\r\n    edges = [];\r\n    for (var i = 0; i < tris.length; i += 3) {\r\n        var p0 = points[tris[i]];\r\n        var p1 = points[tris[i+1]];\r\n        var p2 = points[tris[i+2]];\r\n        edges.push(\r\n            [distance(p0, p1), p0, p1],\r\n            [distance(p1, p2), p1, p2],\r\n            [distance(p2, p0), p2, p0]\r\n        );\r\n    }\r\n    render();\r\n}<\/pre>\n
      1 collect a set of points<\/h3>\n
      this is a variably trivial task, in the demo below I collect the X\/Y corrdinates of the mouse\/finger. for the actual pieces, I used the vector data of the Mapzen API<\/a>,\u00a0it could basically be anything in 2D. One restriction though, because of the next step, we need a\u00a0set <\/em>and not only a list<\/em> ; the difference being that a set<\/em> doesn’t contain duplicates.\u00a0cleanup()<\/em> is a method that removes duplicate\u00a0points from a list.<\/p>\n
      2 triangulation<\/h3>\n
      the heavy lifting, I used this delaunay triangulation<\/a> lib, even though it’s not extra robust, it works in most cases.<\/p>\n
      3 compute the triangles’ edges’ lengths<\/h3>\n
      again, not much to say, only storing the lengths of each edge and the 2 vertices they’re made of in an array to batch draw\u00a0them without having to compute their length each time (computing edges’ lengths all the time is not necessary as\u00a0they\u00a0don’t change from a render to the next).<\/p>\n
      when process()<\/em> is over, we call the render()<\/em> method<\/p>\n
      function render() {\r\n\r\n    \/\/reset the canvas\r\n    ctx.restore();\r\n    ctx.save();\r\n    ctx.globalAlpha = 1;\r\n    ctx.fillStyle = \"#FFF\";\r\n    ctx.fillRect(0, 0, w, h);\r\n\r\n\/\/#4 draw the gradient\r\n    ctx.save();\r\n    var max = config.height;\r\n    for (i = 0; i < max; i++) {\r\n\r\n        \/\/#4.1\r\n        ctx.translate(0, 1);\r\n        ctx.globalAlpha = ( 1 - i \/ max ) * 0.05;\r\n\r\n        \/\/#4.2\r\n        renderEdges(edges, i);\r\n    }\r\n    ctx.restore();\r\n\r\n\/\/#5 render the wireframes\r\n    if (config.wireframe) {\r\n\r\n        var m = config.wireCount;\r\n        for (i = 0; i < m; i++) {\r\n\r\n            var t = ( i \/ m );\r\n            ctx.save();\r\n            ctx.translate(0, max * ( 1 - t ));\r\n            ctx.globalAlpha = .05 + .15 * t;\r\n            renderEdges(edges, (i * 10) );\r\n            ctx.restore();\r\n        }\r\n    }\r\n<\/pre>\n
      steps 4 & 5<\/h3>\n
      both work the same : the loops will translate the canvas by a certain amount, change the opacity and call the renderEdges()<\/em>\u00a0method many times.<\/p>\n
      renderEdges( edges, min )<\/em><\/p>\n
      \/\/the method to render edges \r\nfunction renderEdges(edges, min ){\r\n    if( edges.length == 0 )return;\r\n    ctx.beginPath();\r\n\r\n    \/\/for each edge of the list\r\n    for( var i=0; i < edges.length; i++ ){\r\n        var edge = edges[ i ];\r\n\r\n        \/\/if the edge's length is inferior to the given threshold\r\n        if( edge[ 0 ] < min ){\r\n\r\n            \/\/draw a line between endpoints\r\n            ctx.moveTo( edge[ 1 ].x, edge[ 1 ].y);\r\n            ctx.lineTo( edge[ 2 ].x, edge[ 2 ].y);\r\n        }\r\n    }\r\n    ctx.stroke();\r\n}<\/pre>\n
      for each computed edge, we check its length against a min<\/em> value and, if the edge is shorter than the value, we\u00a0draw it otherwise, we continue.<\/p>\n
      in the #4 loop, min<\/em>\u00a0is slowly incremented while in #5 it jumps from 10 to 10. the smaller the value of min, the denser<\/em> the mesh, the bigger the value of min<\/em> the sparser <\/em>the\u00a0mesh.<\/em><\/p>\n
      this does most of the work, the rest is a cosmetic layer:<\/p>\n
      \/\/#6 draw a color overlay\r\n    var cw = canvas.width;\r\n    var ch = canvas.height;\r\n    ctx.save();\r\n    ctx.globalAlpha = 1;\r\n    ctx.globalCompositeOperation = \"screen\";\r\n    \/\/draw the image over the whole image\r\n    ctx.drawImage(img, 0, 0, img.width, img.height, 0,0,cw,ch);\r\n    ctx.restore();\r\n\r\n\/\/#7 white wireframe\r\n    if( config.glow ){\r\n        ctx.globalCompositeOperation = \"source-over\";\r\n        ctx.strokeStyle = \"#FFF\";\r\n        ctx.globalAlpha = .2;\r\n        renderEdges(edges, config.glowSize \/ 2);\r\n\r\n        \/\/white glow\r\n        ctx.globalCompositeOperation = \"screen\";\r\n        ctx.globalAlpha = 1;\r\n        ctx.filter = \"blur( 6px )\";\r\n        renderEdges(edges, config.glowSize );\r\n    }\r\n\r\n}<\/pre>\n
      6 overlay<\/h3>\n
      this is a single context.drawImage()<\/a> call\u00a0with the context’s globalCompositeOperation\u00a0<\/a>set to\u00a0“screen”. the 9\u00a0arguments of the drawImage call are: the image to draw, the 4 value of the source rectangle and the 4 values of the destination rectangle. I’m using a variety of images from this license free website<\/a>\u00a0and consequently downscale\u00a0them. this is the one I use in the demo below\u00a0\"pattern\". as the image is very small and is stretched over a big area, the bilinear interpolation used by drawImage() prevents the\u00a0end result from pixelating\u00a0(it could be nice though…)<\/p>\n
      7\u00a0glow<\/h3>\n
      the glow can be obtained by drawing 2 versions of the edges: one\u00a0regular, the other with a wider strokeStyle & a blur filter.<\/p>\n
      here’s a demo if you want to try it out:
      \n