Tag: Javascript

Another New Old Project: Cellular Automata

John Winkelman

[CLICK HERE to see the 2d Cellular Automata project in the Labs]

Being over twenty years into my career, and having a little downtime, coupled with the back-to-school energy of September, I have been having the time of my life revisiting old visual and math experiments from the early 2000s. This is one of my favorite – a tool/toy for visualizing 2D cellular automata as described by Stephen Wolfram in his book A New Kind of Science.

I first created this tool in Macromedia Flash back in January of 2003. This was about the time that Actionscript became a useable development language, and it was close enough to Javascript syntax that it was easy to pick up. This was fortunate, as my career for the next seven years depended entirely on my Actionscript programming skills. Then I took a sharp left turn into Drupal, about which the less said, the better.

The patterns are created by iterating through an array of ones and zeroes, and choosing the pattern of the next line by applying simple rules to the cells of the previous iteration. As with the earlier Javascript projects, you can save interesting patterns as a .png by right-clicking on the canvas.

I put this together in my spare moments on Codepen.io. You can see the pen with fully-editable code here.

Another New Old Project: Langton’s Ant

John Winkelman

Click here to see Langton’s Ant in the Labs.

I probably could have posted this project before the 3D version, but the 3D version was already done in Javascript, and besides: 3D is just cool!

The above screenshot is taken at just over 10,000 iterations into the animation. Langton’s Ant will, if undisturbed, create a “highway” which will proceed off into infinity unless the world it is crawling wraps at the edges, as this one does.

If you have seen one Langton’s Ant animation you have probably seen them all, though in this one I added a heat map which shows the number of times the Ant has visited each cell. It will take a while to begin to see different colors, and everything will look blue for quite some time. The above screenshot of the heat map was taken at approximately 100,000 iterations.

As with all of my experiments, all of the code is contained in a single page for easy download and modification. I did not use any external libraries and I commented the Javascript for ease of reading and interpretation. Enjoy!

Another Resurrected Project: The Trigonometron

John Winkelman

Click here to access the Trigonometron.

Much to my surprise, when browsing old(!) versions of this site using the Wayback Machine, I found the source code to the Trigonometron, one of the very first experiments I posted online, back at the beginning of 2002. This predates almost all of my Flash experiments, and indeed I ported this one to Flash a few years after I built the original in Dynamic HTML.

(Dynamic HTML, for you youngsters, it what we used to call it when you used Javascript to modify the HTML in a page without having to reload the page.)

Note that the version in the Laboratory section of this site is 99.99% unmodified from the original created almost twenty years ago. The only changes I made were to update the Javascript for positioning the elements so it works in modern browsers, and to change the balls from using a .gif image to using pure CSS for the graphics. Everything else is exactly as it was, including a check to see if the user is accessing the site with Netscape Navigator.

I may do a complete update to this project, as it was built for browsers running at 800×600 resolution following an early-2000s aesthetic, which means tiny, tiny text.

You can View Source of the Trigonometron to see what coding looked like in all its glory, back in 2001 and 2002.

A Blast From the Past: Langton’s Ant in 3D

John Winkelman

Langton's Ants in 3D

This is an update to a post from March 2, 2012.

From 2002 to around 2012 I devoted most of my creative energy to programming. I created well over a hundred visual toys and simple games, and kept the momentum going until a series of life events sucked the mental and emotional energy from me. When I got my life back I turned my creative energies to writing fiction and poetry, and my decade-plus of experiments in mathematics, geometry, cellular automata and game design fell by the wayside.  Most of those experiments were in Flash and though I still have the source code rebuilding them in Javascript would be an extremely time-consuming project.

But some of those experiments were in Javascript, particularly after I saw the writing on the wall for Flash and Actiosncript. This is one of those experiments – a 3D version of the Langton’s Ant cellular automation, created using hand-rolled Javascript, with an assist from the Three.js 3D rendering library.

Click here to access the Langton’s Ants in 3D experiment. Once there, you can right-click on the animation and select “save image as…” to take a screenshot of the Ant trail.

The original post from March 2, 2012, with code breakdown and explanation is here.

Here are a couple more screenshots from later iterations of the algorithm:

Langton's Ants in 3D

Langton's Ants in 3D