Tangram is a map made of math. But sometimes a map needs a little chaos and randomness to make it seem human.

Mapzen’s Patricio Gonzalez Vivo was inspired by Ryoji Ikeda to make a map using pseudo-random functions. Ikeda is an electronic composer and artist who “elaborately orchestrates sound, visuals, materials, physical phenomena and mathematical notions into immersive live performances and installations.”

Ryoji Ikeda :: data.path, 26 SEP 2013 – 5 JAN 2014, Espacio Fundación Telefónica, Madrid, ES from ryoji ikeda studio on Vimeo.

I asked Patricio about Ikeda’s work:

“It is amazing and inspiring in itself. I enjoy the process of learning from it. He use real data, big data, and remixes it and blends it in this beautifully minimalistic way that speaks so much about our digital era… one where devices hold more information that we can process, and is too easy to get lost in it.”

Patricio applied three pseudo-random procedural patterns atop OpenStreetMap data to create this Ikeda-style map:

Using random can be hard; it is both too chaotic and sometimes not random enough. – Patricio Gonzales Vivo

The math behind these procedural patterns is described in chapter 10 of Patricio’s “The Book of Shaders”, Generative designs.

The patterns on the streets and walls of buildings are defined using these pseudo-random functions:

http://thebookofshaders.com/edit.html#10/ikeda-00.frag

http://thebookofshaders.com/edit.html#10/ikeda-03.frag

http://thebookofshaders.com/edit.html#10/ikeda-04.frag

Zooming out, you can better see the grid and the number counters (coordinates plus seconds).

As if this were not impressive enough, Patricio added functions to simulate tilting and rotating a Tangram map within Leaflet. Leaflet is a 2D map engine, and Tangram is built on top of it, like a plug-in. We use a camera that uses matrices to skew the geometry and give the illusion of perspective. Although we don’t officially support tilting in the Javascript version of Tangram like we do in Tangram ES, it is possible to tilt the entire world’s coordinates by rotating each vertex of the geometry using matrices calculations.

mat3 rotateX3D(float phi){
    return mat3(
        vec3(1.,0.,0.),
        vec3(0.,cos(phi),-sin(phi)),
        vec3(0.,sin(phi),cos(phi)));
}
mat3 rotateZ3D(float psi){
    return mat3(
        vec3(cos(psi),-sin(psi),0.),
        vec3(sin(psi),cos(psi),0.),
        vec3(0.,0.,1.));
}

We hope you are as excited about Tangram and Patricio’s styles as we are. FastCompany described Patricio’s map as “This Brooding Cityscape Is What Google Maps Dreamt About Last Night” and CityLab said “Patricio Gonzalez Vivo, a graphic engineer at Mapzen, has channeled Ikeda to create a spinning, 3-D view of the city torn from a universe of pure data.”

Follow @mapzen on Twitter to stay up to date as we push the boundaries of maps with Tangram!