Canvas 2D triangle grid

The next interesting effect I found on https://loudsrl.com/, pretty simple triangle grid. Looks like a Delaunay triangulation, hmmm….

It’s obvious that it made by canvas graphic, so we need to check site’s .js file to understand what’s going on with this canvas.

Firstly, we will go to the source tab in the google chrome console and search for .js file.

Searching of .js file at the source tab of google chrome console

Then, press a curly braces at the bottom of .js file window to prettify code and try to search any refer to canvas… but fail. There is no even methods of canvas API, hmmm(2)…

No canvas API methods

Maybe we should find scripts that load asynchronously ? Yep, here we are! Searching of ‘.js’ string gives us desired result, mysterious script “background.js”, that can be taken from the network tab.

Async .js file loaded by jQuery

Content of background.js file

After copying it to your IDE (because chrome doesn’t understand that it is a .js file and we can’t prettify it), we find an interesting facts:

It is a something that uses Delaunay triangulation

Is has specific namespace FSS in code (unambiguously worth to google it)

Mention about Delaunay triangulation

FSS namespace

And google gives us results! http://matthew.wagerfield.com/flat-surface-shader/, lightweight library with 2D canvas transformations, as we like.

Thanks for attention. See you soon in the next articles.