# Javascript

## Command-Click Prevent Default

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

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

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.

## Random Normally Distributed Values in JS

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

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

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

github | website. |

## Math of Bézier Curves

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)·t^{2}·P2 + t^{3}·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

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

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