recent articles

A particle proximity visualization demo note

I’ve recently encountered several demos on various parts of the web featuring a rather interesting particle effect. The effect is what appears to be a random population of particles with unique velocities. When a particle encounters another within some proximity, a connecting line is drawn between them, attaching the two particle centers. The overall effect appears similar to a dynamic display of constellations constantly re-arranging their patterning, or strands of a spider web connecting and pulling itself apart.

A family member had asked me to describe the technology being used in one such demo backdropping a website banner. His first guess was an animated GIF or PNG of some sort. Upon further inspection, my intuition proved correct. The banner’s effect leveraged an absolutely positioned HTML canvas. One that responds to window resizing to display responsively. Using such an effect as a backdrop to the banner-in-question elevated the content to appear quite tech-savvy, leaving quite a positive impression on me.

So I embarked on re-creating that effect using HTML canvas and Javascript and decided it would be fun to share my results and process.

continue reading

Interactive HTML Canvas Paths code

Creating interactive elements on an HTML canvas can be conceptually challenging when approaching the problem from a DOM-centric perspective. Where the DOM provides built-in support for layers of interaction, the contents of an HTML canvas is essentially a pool of raw pixel data. Interaction with canvas content requires an abstract representation of the data that is to be visualized. Leveraging this, event handling, bounds detection, model and view representations must all be managed explicitly by the developer.

Fortunately the DOM does provide us a starting point from which to build from. While a canvas’s content may be static, the canvas itself provides hooks within the DOM to access some critical information provided by an event reference. With that data, we can begin to answer perhaps the most pertinent question: interaction coordinates.

continue reading

Rendering TopoJSON with Javascript code

Despite the wealth of libraries and APIs available to assist us in writing solutions for otherwise complex tasks, there are times when I enjoy ignoring such conveniences and take a shot at learning how to write my own solutions for such problems. That and sometimes you cannot rely on having access or availability to external resources. As luck would have it, both of these conditions had presented themselves when I was recently tasked to create a map-based tool for a work project.

When wrestling with the logistics of rendering maps, optimal solutions may involve leveraging Google Maps API to greatly simplify your life. If you require greater control over your map styling and behavior, the D3.js data visualization library has hooks that allow for easy rendering of geological data, as well as a variety of supported projection options (with full animation capabilities to boot). Additionally, one could simply add an SVG map file into your markup for hassle-free rendering.

Sometimes we just want to roll up our sleeves and try writing solutions ourselves - you know, for educational purposes. Before diving into the task, it would be of great benefit to first understand the JSON representation formats of our map data. Let’s review.

continue reading

about me

Steve has worked as a mobile game production and freelance artist for over a decade for various startups and studios centered around San Francisco's Bay Area. More recently, he focuses on developing client-side web applications for major pharmaceutical brands. Every now and then he is motivated to share thoughts on his creative endeavors in both art and code.