/ JavaScript

Some Simple JavaScript Art

I've been seeing this sort of art everywhere, with moving points connected by lines that are more solid the closer the points are to each other. It's fun to watch and seemed like a simple effect to replicate, so here is my take on it.

Click on the animations below to show them individually. If you are on a phone the animations will probably lag when they are all running on this one page.

This was my first attempt, a set of points starting in random positions with fixed, random velocities:

Here I've given the points random masses and introduced gravity between points, so the velocities can change:

Here I've given the points charges, so that like colors repel and opposite colors attract:

For this last one, rather than give the points completely random positions, I have used the HTML5 canvas's isPointInStroke() function to place points randomly within a power symbol:

It would also be cool to make more complex shapes and fill them in with this pattern, maybe even weighting some areas more than others.

Robert Fotino

Robert Fotino

I'm a former computer science student at UCLA, and a game developer in my free time. This site is a place for me to write about whatever I happen to be working on.

Read More