Skip to content

Instantly share code, notes, and snippets.

@mgold
mgold / README.md
Last active February 2, 2016 15:30
Triangle Centers

Different ways to find the "center" of a triangle. Inspired by Numberphile. Grab and move the vertices of the large triangle.

  • The centroid is found by connecting each angle with the midpoint of the opposite side. All three such lines meet at a single point.

  • The circumcenter is is the intersection of the perpendicular bisectors of each side. Therefore it is equidistant from the three vertices, and is the center of the circle defined by them.

  • The orthocenter is defined by dropping a vertical from each angle down to the opposite side (extending the side if necessary). The vertical does not usually intersect at the midpoint. Once again, all three such lines intersect at one point.

  • The incenter is defined by bisecting each angle with a line continued to the opposite side.

@mgold
mgold / Perlin.elm
Created January 15, 2016 18:17
Perlin noise in Elm (requires mgold/elm-random-pcg)
module Perlin (noise, octaves) where
{-|
Technically, this is an implementation of [Improved Noise](http://mrl.nyu.edu/~perlin/paper445.pdf), a refinement on the
original Perlin noise, but not Simplex Noise.
-}
import Random.PCG as PCG
type alias Gradient = (Float, Float)
@mgold
mgold / README.md
Created October 9, 2015 20:25
Dice roll probabilities
@mgold
mgold / README.md
Last active August 28, 2021 19:20
Spherical Coordinates

Grab the brown and black knobs. You can also dial some of the numbers on the right.

Spherical coordinates are defined by ρ (rho, the distance from the origin), θ (theta, rotation parallel to the xy-plane), and φ (phi, inclination from the north pole to the south pole). This interactive drawing shows how they relate to the Cartesian xyz coordinates. The key is the horizontal slice of radius r.

  • z = ρ cos φ
  • r = ρ sin φ

Which makes sense: when φ=0, we're looking at the north pole, z=ρ and r=0. Then we're left with the familiar equations:

  • x = r cos θ
module SpinSquare (Model, Action, init, update, view) where
{-| A fork of the eight example in the Elm Architecture tutorial, showing how it would be done with elm-animation. It
turns out to be a lot simpler, both because of the animation itself and because we cheat a little: we don't stop
asking for clock ticks even when we don't need them. This saves a lot of bookkeeping around current vs. elapsed
time, as the animation library assumes you have a constantly running clock shared among all components.
By definition, encapsulated components cannot share a clock, and so as you add more squares, expect things to get
slower. That said, two squares work just fine. This module is a drop-in replacement for the upstream version.
@mgold
mgold / sine_animation.elm
Created September 17, 2015 19:59
Sine animation (Elm 0.15.1)
import Graphics.Collage exposing (..)
import Color exposing (rgb)
import Window
import Time
obj_resolution = 360
waves_amount=6
wave_height=0.1
sine_pct=0.5 -- setting in percantage how big is the part
smoothing_amount=0.14
@mgold
mgold / README.md
Last active September 18, 2015 14:30
The 2-adic Numbers

This block is an animation of forming the 2-adic numbers in a fractal-like process. Starting with zero and one, we alternate two steps. First, we visually scale down the existing plot, which doesn't actually change anything. Then, we subdivide each number. The left half stays the same, and to the right half we add an increasing power of two, one more than the previously largest number in the list.

The 2-adic distance metric, which is shift invariant, considers numbers to be closer if they were formed by a more recent subdivision, which is shown visually as similar colors. Analytically, two numbers are close if their difference is divisible by a high power of two. So while 16 is close to 0, 32 is closer, and 64 is closer still.

The integers expand to the right of the number line (or the left of the numeral). But the 2-adics expand into themselves: each subdivision grows in the same space that was once zero to one. These numbers dart back and forth in a contained space; you can hold infinity in the palm of

@mgold
mgold / proposal.elm
Last active February 12, 2016 01:34
Elm mailbox revamp
-- a distilation of https://github.com/elm-lang/elm-plans/issues/7
{- Mailbox is renamed Dispatcher, although this name is the part I'm least certain about.
The address field is replaced with a dispatch field.
It's minor, but I've found it helpful to put dispatch second, since the signal is easier to explain.
-}
type alias Dispatcher a =
{ signal : Signal a
, dispatch : a -> Message -- the big change
}
@mgold
mgold / using_mailboxes_in_elm.md
Last active March 24, 2020 16:05
Using Mailboxes in Elm: a tutorial blog post

Using Mailboxes in Elm

Max Goldstein | July 30, 2015 | Elm 0.15.1

In Elm, signals always have a data source associated with them. Window.dimensions is exactly what you think it is, and you can't send your own events on it. You can derive your own signals from these primitives using map, filter, and merge, but the timing of events is beyond your control.

This becomes a problem when you try to add UI elements. We want to be able to add checkboxes and dropdown menus, and to receive the current state of these elements as a signal. So how do we do that?

The Bad Old Days

/* d3.selection.translate() - an unofficial add-on
Translate an SVG selection by passing in two arguments, a two-value array, or
a function that produces a two-value array when called with the usual arguments.
Pass no arguments to retrieve the current translation.
Caveats: Will clobber any other SVG transforms. Does not work with transitions.
*/
d3.selection.prototype.translate = function(a, b) {
if (typeof a === "function"){