Zeukkari

@Zeukkari·5 public vizzes

Gist c08a235f038fea8e1aed05be87241736

This animated WebGL shader piece generates a sequence of vibrant, radial visual effects. Using fragment shaders, it computes pixel colors in real time based on normalized coordinates, time, and mouse position. The first effect creates a pulsing red-orange ring with rotating angular patterns, while the others layer polar modular repetitions, wave distortions, and sine-based color modulation to produce intricate, evolving mandala-like forms. The result is a dynamic, abstract composition with flowing shapes and shifting hues.

Nov 12, 2019

Loading thumbnail…

Gist bdb9a7efbe3ac42b6ad2

This example combines React with OpenLayers to build an interactive map preview for Geoserver, integrated through the City of Helsinki’s geoserver-preview project. It uses the `react-leaflet` and `ol3-react-example` patterns to render map layers, with state managed via Redux and connected through `react-redux`’s `Provider` and `connect`. The code references Bower for client-side component management and CoffeeScript with React (Cjx). Data comes from Helsinki’s open API endpoints, displaying tile layers and feature vectors, though the planned click-to-inspect vector content is not yet implemented.

Nov 13, 2015

Loading thumbnail…

Gist 45c4a11439291901ab6c

This example presents a step-by-step terminal guide for installing the RobotJS library from a local source archive. It shows the exact shell commands used to download, unzip, rebuild, and link the module into a project directory, including the use of `wget`, `unzip`, `npm install`, and `node-gyp rebuild`. The visualization documents the installation workflow as plain text, with each command and its purpose clearly separated.

Sep 25, 2015

Loading thumbnail…

Star Wars 3D Scrolling Text in CSS3 (with music)

This example recreates the iconic Star Wars opening crawl as a CSS3 3D scrolling text effect, using the Finnish Civil Service Act as the displayed text. A hidden YouTube embed provides background music and an autoplaying video, while the page uses nested divs and CSS transforms to create the illusion of text receding into the distance. The visualization is forked from Scott Bram’s CodePen and includes the original "A short time ago..." intro and STAR WARS title with subtitle.

Sep 10, 2015

Loading thumbnail…

Gist 70aa9843db736bfad529

This example demonstrates automated UI testing for a web application’s navigation and search features. The code uses the WebDriver API via the `wd` library with Mocha and async.js to simulate user interactions. It verifies that the top-level category “Terveys” appears in the service tree, that the typeahead suggestions show “Kallion kirjasto,” and that a full search returns that same result. The tests rely on XPath and CSS selectors to locate elements and assert their displayed text.

Jul 23, 2015