Labs

Here are some of the experiments I work on during my free time, you can find most of them on my Github profile.


WebGL experiments

/Nebula

Nebula

An HTML5+JS nebulosa effect, it displays text by making circles float inside it. Using Pixi.js internally for the WebGL rendering.

For more information read the article about it.


/WebVisualizer

Tree Generator

Watch the web using WebGL

The aim of this experiment is to generate large graphs (10000+ nodes) about the web, such that each node is a website, and it's linked to other websites if they are related or something like that. Still under development, deployed into Heroku.

The screenshot was taken on a very early version, it may have changed by now.


Canvas experiments

/line-art Chrome Experiment

Line Art

JavaScript and HTML5 Canvas experiment, I wanted to learn about canvas rendering so I started doing some experiments

Line-Art creates a sine wave (Only one period) using a number of points controlled by a slider at the bottom. The more points the more exact it will be. It then joins the corresponding points from each half period of the sine.


/HTML-Clock

HTML Clock

HTML5+CSS3+JS functioning clock, the exact time is shown by the offset of each number.

It uses some HTML+CSS3 to create the stripes, and then a little bit of JavaScript to animate the whole thing. I also want to try to achieve the same result using only CSS3, which might actually be possible.


/TreeGenerator

Tree Generator

2D trees with JavaScript, just because why not? Although by tweaking the settings you can get pretty much any kind of drawing.

I thought about it one day, and after some tweaking and coding I managed to get a recursive function to draw 2D trees. The different settings the function takes allow it to draw pretty much anything you want, so it's quite a lot of fun to play with. I also wrote an article about it.


Libraries

/smart-area

smart-area

An Angular Directive to turn any textarea into a smart element with autocomplete based on text/regex triggers. It can be used for many different purposes, I originally developed it as an advanced Cypher editor (Neo4j's "SQL") that would dropdown text versions of foreign keys.

/sonar.css

sonar.css

A Sass/CSS library to easily add attention seekers to any element It was my first Sass project, and I reckon I fell in love with it.

More to come... :)