Welcome to TRON 2.0 by Geraldine Sarmiento and Patricio Gonzalez Vivo. Rebuilt from the ground up to take advantage of the latest features of Tangram (JS and ES) graphics engine and conventions.
TRON is an exploration of scale transformations in the visual language of TRON with the use of Tangram blocks. On this new version, visual forms and elements transform per zoom, revealing new cartographic details and a new experience of scale.
Beside the design challenges we want to make the source more approachable by dividing the scene file in multiple smaller pieces. So instead of having a single monolitical .yaml
scene file you will find smaller modules that focus on a particular aspect of the map scene.
The main elements are:
-
tron-style.yaml
: is the main.yaml
file that mix and hold all together. There you will find the definition of thesources
,cameras
andscene:background:color
, together with the imports that glow and conects thelayers
,styles
andcomponents
resources. -
layers/
folder: layers on Tangram are the set of rules that filter the data (comming from thesources
) into different style rules. Tell how each component on the map should be treat. If it'stext
,points
,lines
orpolygons
. What's the defaultsize
andcolor
, etc. In this folder you will find different.yaml
scene files that carefully make sense of the data and display it in a cartographical intuitive way. This meticulus work was made by Geraldine Sarmiento and Nathaniel V. KELSO. At the end of each one of this layer-files you will find also astyles
secction where the custom shaders are defined and crafted by me (Patricio Gonzalez Vivo). Shaders are not a simple thing, but at Mapzen we are trying to make them more aproachable. Tangramstyles
can be mix, so for this map style we try to use that property to reduce the complexity and size of the shader by reusing them as much as possible. -
styles/
folder: contain all thestyles
that are shared across layers. Is defenetly a more abstract layer. This folder sorts thestyles
by theirbase
geoemtry (points
,lines
orpolygons
). Also for thosestyles
common to all the other geometries can be found incommon.yaml
. You will note that most shader styles "extends" from blocks. As part of the efford on making GLSL Shaders more aproachable in Tangram. I had start a tool box library of shaders snippets that can be mix together, call Tangram Blocks. -
components/
folder: This folders holds some of the global resources use in the scene, likefonts
andimages/
. Also there you can find theglobals.yaml
. This particular file is very interesting because holdsglobals
variables and JS functions that control the map. From it is possible to customize the map, like turning on or off the animations or changing the language.
Having the scene file distributed accross different smaller modules creates more network calls. To solve this you will find in this repository a bundle.py
script that construct a ZIP file (tron.zip
) that will hold all the files needed.
To use it you will:
- first to clone locally the repository:
git clone https://github.com/tangrams/tron-style.git
cd tron
- Load the Tangram Blocks submodule:
git submodule update --init --recursive
- Install some Python modules:
pip install pyyaml
- Then finally run the script
python <(curl -s https://raw.githubusercontent.com/tangrams/bundler/master/bundler.py)
One of the nice things of running a local instance of a Tangram scene is the hability to modify it and learn from it! We defenetly encourage to do it. You can host the style by doing:
python -m SimpleHTTPServer 8000
Althought we also have been working on a way to edit Tangram scene files and see it change inmediatly. The project is call TangramPlay and can be found here.
A quick way to start playing with Tron2.0 is by importing the scene file and inmediatly start editing on top of the scene file. For that:
-
Once you finish you can download it or copy it back to your local file, but remember to take out the first line
import
.
Here are some resource we share and sketch Geraldine Sarmiento and I during the development of TRON2.0. We hope you enjoy it.
Generative Tron Palette
Glow lines
Highways
Grid animation
Grid animation
Stripes
Stripes animation
Simplex Grid animation
Dots pattern
Mosaic-dots transition
Stripes
Stripes-char transition
Contours
Hill Shading
Buildings window
Generative Icons
Animated Icons
Animating Icons w POIs SDF's
Animating Icons w POIs SDF's