Javascript

Command-Click Prevent Default

javascript

I often command-click links in order to open them in a new tab. I find it very irritating when a site’s JS usurps that functionality.

It turns out that click events have a boolean attribute – event.metaKey – that is true on command-click. So, you can event.preventDefault() your heart out and still easily retain the expected command-click behaviour.

$(".something").click(function(event){
    if (!event.metaKey) {
        event.preventDefault();
        // etc
    } else {
        //other stuff
    }
})

UPDATE: Delaunay Triangulation

javascript math svg

Make your delaunay triangulation squirm in the updated version of this project, here.

This version also allows you to toggle between wallpaper and wireframe mode.

I decided to build in this functionality because I wanted to make my polygonal background wallpaper be constantly moving slightly, but it’s way too computationally expensive to do that atm. In other words, be warned: your fan will spin up.

Delaunay Triangulation in JS

javascript math svg

My initial goal was to make a dynamically generated triangle pattern for a site, like so:

The pattern.

That site will generate a new pattern on each visit.

Here you see a set of points, randomly generated, that has been triangulated. In other words, every generated point has become the vertex of a triangle and all triangles are non-overlapping.

The demo.

In the demo, drag points to see the triangulation recalculate.

Double Slider Widget

css javascript

Random Normally Distributed Values in JS

javascript math

I want random data! But…I want them to be distributed normally!

The ability to generate random data that are normally distributed is very useful. Here’s how you do it in Javascript:

SVGPathInfo Web Interface

javascript svg

I made this site so that SVGPathInfo can be used online. Just paste in your path string and convert it to JSON, relative, absolute or cubic Bézier.

SVGPathInfo.js

javascript svg

I made a little Javascript library to quickly get info on an SVG path element. Check it out:

Math of Bézier Curves

animation javascript math svg

If you are at all interested in SVG or Bézier curves, you’ve probably seen something like Jason Davies’ animation. I found that those animations are an excellent way of intuitively grasping how Bézier curves work. However, the math behind it all is less intuitive.

I just read this really illuminating article.

Something I hadn’t realized before reading the article is that, mathematically, Bézier curves are not defined as run-of-the-mill functions. Whereas generally one would plug an x value into a function to determine a y value, à la f(x) = y = ax + b , Bézier curves are defined parametrically. The values of x and y are determined independently, according to a third parameter, dubbed t.

This is the general formula for a cubic Bézier:

B(t) = (1-t)3·P0 + 3·(1-t)2·t·P1 + 3·(1-t)·t2·P2 + t3·P3

where P0 and P3 are the start and end points, and P1 and P2 are the first and second control points.

Conway’s GOLf

animation games javascript

In my free time, I’m making a game based on conway’s game of life. Here’s the result of my work so far. Obviously, it’s not a game yet, but it is a functional cellular automaton written in javascript.

Click on a cell to flip its state, or drag to paint on living cells.

In this example, the starting state of living cells is called a “pulsar” – an example of a cyclic form with a period of 3. In other words, if you step 3 times it will return to the original state.
Click on the cells to turn them on or off – maybe you can find other stable or cyclic forms.

Pentagram ≅ Pentagon

animation javascript math svg graphs

Pentagrams and pentagons are actually a bit spooky…

Graph Theory

animation javascript math svg graphs

I’m currently reading a book on graph theory.

A graph, in the mathematical sense, is a completely abstract object made up of sets. However, it definitely lends itself to visual representation, so I’m having a bit of fun making visualizations of some of the concepts.

JS's HTMLCollection is a Pseudo-Array

javascript

var realArray = Array.prototype.slice.call(document.getElementsByClassName('classname'), 0);