Snippet Zone

Little Trading Program

```
let id = 0;
```
```
function person(startValue = 100) {
```
```
  const props = {
```
```
    id: id++, 
```
```
    el: document.body.appendChild(
```
```
      Object.assign(
```
```
        document.createElement`b`, { 
```
```
          innerText: startValue,
```
```
          style: 'padding: 1em'
```
```
      })
```
```
    ),
```
```
    value: startValue,
```
```
    trade(other) {
```
```
      if (props.value <= 0) return;
```
```
      other.value += 1;
```
```
      props.value -= 1;
```
```
      other.el.innerText = other.value
```
```
      props.el.innerText = props.value
```
```
    }
```
```
  }
```
```
  return props
```
```
}
```
```
 
```
```
 
```
```
const NUM = 4
```

const people = Array.from({ length: NUM }, person)

```
 
```
```
setInterval(() => {
```

  const a = people[~~(Math.random() * people.length)]

  const b = people[~~(Math.random() * people.length)]

```
 
```
```
  if (a.id != b.id) a.trade(b)
```
```
}, 1)
```

4 “people” randomly trade…

I asked Chat GPT to describe this… funny response…

The trading program you provided is essentially an example of a random walk or “drunkard’s walk” problem. In such problems, each individual (in this case, the ‘people’) make random moves (in this case, trades), and we observe the resulting dynamics of the system as a whole. In this particular case, each trade involves one individual giving one unit of value to another individual. Since each trade is random, there’s a possibility that over time, all the value might get concentrated in one individual. This isn’t guaranteed, but given enough time, it’s likely. You could compare it to the idea that given enough time, a group of monkeys randomly typing on a keyboard would eventually type out the complete works of Shakespeare. It’s also worth noting that this concentration of value becomes more likely because the individuals with no value left cannot trade anymore, so they are essentially removed from the trading pool. This progressively reduces the number of individuals that can gain value and increases the probability of the remaining individuals gaining more value. This is a simple model of economic transactions and it illustrates how wealth can concentrate over time even if all the transactions are fair and random. Of course, it’s a very simplified model, and real-world economics are much more complex.

July 18, 2023

// arrays // humor // javascript // math // speed-coded // speedcoding

Odd Gradient Notation

```
// "Being clever is not clever"
```
```
// -- Bjarne Stroustrup
```
```
D = document
```
```
ang = {
```
```
  '|': 180,
```
```
  '-': 90,
```
```
  '\\': 135,
```
```
  '/': 225
```
```
}
```
```
 
```
```
box = def => {
```
```
  def = def.split(/\s+/)
```
```
  form = def.length
```
```
  I = i => parseInt(def[i], 16)
```
```
 
```

  ;[,,, _=>{x = y = I(0); w = h = I(1); c = def[2]},

    _=>{x = I(0), y = I(1); w = h = I(2);c = def[3]},

    _=>{x = I(0); y = I(1); w = I(2); h = I(3); c = def[4]}

```
  ][form]()
```
```
 
```
```
  c = c.split``
```
```
 
```
```
  ca = c[0]
```
```
  ca = ca+ca+ca
```
```
  cD = ang[c[1]]
```
```
  cb = c[2]
```
```
  cb = cb+cb+cb 
```
```
 
```
```
  D.body.appendChild(
```
```
    D.createElement`div`
```
```
  ).style = `
```

    position: absolute; left: ${x}px; top: ${y}px;

```
    width: ${w}px; height: ${h}px;
```

    background: linear-gradient(${cD}deg, #${ca}, #${cb})

```
  `
```
```
}
```
```
 
```
```
const parse = prog => prog.trim()
```
```
  .split(/\n+/m)
```
```
  .map(line => box(line.trim()))
```
```
 
```
```
parse(`
```
```
  0 64 0/f
```
```
  64 64 0\\f
```
```
  a0 f0 30 54 f\\0
```
```
  0 6f 20 60 0-c
```
```
  f 7f 20 60 0|c
```
```
  1f 8f 30 30 c/0
```
```
`)
```

Just playing around… odd micro-gradient notation:

```
'0 64 0/f'
```
```
// x=0 y=0 width=0x64 height=0x64
```

// 0/f = gradient black to white top right to bottom left

```
 
```
```
'64 64 0\\f'
```
```
// x=0 y=0 width=0x64 height=0x64
```

// 0\\f = black to to white gradient top left to bottom right

```
 
```
```
'0 6f 20 60 0-c'
```
```
// x=0 y=0x6f width=0x20 height=0x60
```

// 0-c = gradient black to grey (#ccc) left to right

```
 
```
```
// etc... ( | ) is top to bottom grad
```

February 27, 2022

// css // dom // golfed // graphics // hacks // humor // regex // speed-coded

Raphaël Easing Equations How To

```
const { pow, PI } = Math;
```
```
 
```
```
// mostly unedited code from Raphaël
```
```
var ef = {
```
```
  linear: function(n) {
```
```
    return n;
```
```
  },
```
```
  '<': function(n) {
```
```
    return pow(n, 1.7);
```
```
  },
```
```
  '>': function(n) {
```
```
    return pow(n, 0.48);
```
```
  },
```
```
  '<>': function(n) {
```
```
    var q = 0.48 - n / 1.04,
```
```
      Q = Math.sqrt(0.1734 + q * q),
```
```
      x = Q - q,
```

      X = pow(abs(x), 1 / 3) * (x < 0 ? -1 : 1),

```
      y = -Q - q,
```

      Y = pow(abs(y), 1 / 3) * (y < 0 ? -1 : 1),

```
      t = X + Y + 0.5;
```

    return (1 - t) * 3 * t * t + t * t * t;

```
  },
```
```
  backIn: function(n) {
```
```
    var s = 1.70158;
```
```
    return n * n * ((s + 1) * n - s);
```
```
  },
```
```
  backOut: function(n) {
```
```
    n = n - 1;
```
```
    var s = 1.70158;
```

    return n * n * ((s + 1) * n + s) + 1;

```
  },
```
```
  elastic: function(n) {
```
```
    if (n == !!n) {
```
```
      return n;
```
```
    }
```

    return pow(2, -10 * n) * Math.sin(((n - 0.075) * (2 * PI)) / 0.3) + 1;

```
  },
```
```
  bounce: function(n) {
```
```
    var s = 7.5625,
```
```
      p = 2.75,
```
```
      l;
```
```
    if (n < 1 / p) {
```
```
      l = s * n * n;
```
```
    } else {
```
```
      if (n < 2 / p) {
```
```
        n -= 1.5 / p;
```
```
        l = s * n * n + 0.75;
```
```
      } else {
```
```
        if (n < 2.5 / p) {
```
```
          n -= 2.25 / p;
```
```
          l = s * n * n + 0.9375;
```
```
        } else {
```
```
          n -= 2.625 / p;
```
```
          l = s * n * n + 0.984375;
```
```
        }
```
```
      }
```
```
    }
```
```
    return l;
```
```
  }
```
```
};
```
```
ef.easeIn = ef['ease-in'] = ef['<'];
```
```
ef.easeOut = ef['ease-out'] = ef['>'];
```

ef.easeInOut = ef['ease-in-out'] = ef['<>'];

```
ef['back-in'] = ef.backIn;
```
```
ef['back-out'] = ef.backOut;
```
```
 
```
```
// create a dot
```
```
function dot(x, y, radius, color) {
```

  const el = document.createElement('div');

```
  const size = `${radius * 2}px`;
```
```
  Object.assign(el.style, {
```
```
    position: 'absolute',
```
```
    left: `${x}px`,
```
```
    top: `${y}px`,
```
```
    width: size,
```
```
    height: size,
```

    transform: `translate(${-radius}px, ${-radius}px)`,

```
    borderRadius: '50%',
```
```
    background: color
```
```
  });
```
```
  el.classList.add('dot');
```
```
  document.body.appendChild(el);
```
```
  return el;
```
```
}
```
```
 
```
```
const elA = dot(0, 40, 30, 'red');
```
```
const elB = dot(0, 110, 30, 'blue');
```
```
const elC = dot(0, 160, 20, 'green');
```
```
 
```
```
// how to use the easing equations:
```
```
let t = 0;
```
```
 
```
```
let start = Date.now();
```
```
let time = 0;
```
```
let duration = 2; // 2 seconds
```
```
function loop() {
```
```
  // frame based
```

  elA.style.left = `${ef.elastic(t) * 50}%`;

```
  t += 0.005;
```
```
 
```
```
  // time based
```
```
  if (time <= duration) {
```
```
    time = (Date.now() - start) / 1000;
```
```
    const param = time / duration;
```

    elB.style.left = `${ef.elastic(param) * 50}%`;

```
 
```
```
    // green bounce example
```

    elC.style.left = `${ef.bounce(param) * 50}%`;

```
  }
```
```
 
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

I realized it might not be obvious how to use Raphaël’s easing equations. So I speed coded this example.

If you’d like to learn more about this kind of thing gsap is a great place to start… it is amazing… I highly recommend browsing the source.

January 18, 2022

// animation // javascript // oldschool // speed-coded // tricks

Polar Plots

```
const Pnt = (x, y, p = { x, y }) => (
```

  p.add = o => (p.x += o.x, p.y += o.y, p), p

```
);
```

Pnt.polar = (rad, t) => Pnt(rad * Math.cos(t), rad * Math.sin(t));

```
 
```
```
const pnts = {};
```
```
let index = -1;
```
```
const polar = (inc, rad) => {
```
```
  index++;
```
```
  if (!pnts[index]) pnts[index] = 0;
```

  return Pnt.polar(rad, (pnts[index] += inc));

```
};
```
```
 
```
```
let d = document;
```
```
let b = d.body;
```
```
with (b.appendChild(
```

  Object.assign(d.createElement`canvas`, {

```
    width: 600,
```
```
    height: 500,
```
```
  })
```
```
).getContext`2d`) {
```
```
  canvas.style.transformOrigin = "0 0";
```
```
  canvas.style.transform = "scale(.6)";
```
```
 
```
```
  let p0 = Pnt(80, 100);
```
```
  let p1 = Pnt(270, 100);
```
```
  let p2 = Pnt(480, 40);
```
```
  let p3 = Pnt(170, 180);
```
```
  let p4 = Pnt(430, 300);
```
```
 
```
```
  fillStyle = "black";
```
```
 
```
```
  function loop() {
```
```
    for (let i = 0; i < 20; i++) {
```
```
      index = -1;
```
```
 
```

      p0.add(polar(0.2, 4).add(polar(-0.4, 2).add(polar(0.05, 1))));

```
      fillRect(p0.x, p0.y, 1, 1);
```
```
 
```
```
      p1.add(
```
```
        polar(0.1, 2).add(
```

          polar(-0.2, 2).add(polar(0.03, 1).add(polar(-0.01, 0.5)))

```
        )
```
```
      );
```
```
      fillRect(p1.x, p1.y, 1, 1);
```
```
 
```

      p2.add(polar(0.08, 3).add(polar(-0.2, -12).add(polar(2, 10))));

```
      fillRect(p2.x, p2.y, 1, 1);
```
```
 
```

      p3.add(polar(0.08, 7).add(polar(-0.2, -12).add(polar(2, 11))));

```
      fillRect(p3.x, p3.y, 1, 1);
```
```
 
```

      p4 = p4.add(polar(0.025, 2).add(polar(-0.05, 1)));

```
      fillRect(p4.x, p4.y, 1, 1);
```
```
    }
```
```
    requestAnimationFrame(loop);
```
```
  }
```
```
 
```
```
  loop();
```
```
}
```

Some polar plots…

December 29, 2021

// canvas // javascript // math // speed-coded // speedcoding

WebGL Particles in Sphere

```
(() => {
```
```
  const m = new Float32Array([
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0])
```
```
 
```

  const pointSize = Math.max(Math.min(30, ~~(innerWidth / 70)), 3)

```
 
```
```
  const vert = `
```
```
    attribute vec3 vec;
```
```
    uniform mat4 mat;
```
```
    void main(void) {
```

      gl_Position = mat * vec4(vec, 1.0);

```
      gl_PointSize = ${pointSize}.0;
```
```
    }
```
```
  `
```
```
 
```
```
  const frag = `
```
```
    void main(void) {
```

      gl_FragColor = vec4(1., 1., 1., .25);

```
    }
```
```
  `
```
```
 
```

  document.body.style.background = '#232323'

```
  const gl = document.body
```

    .appendChild(document.createElement('canvas'))

```
    .getContext('webgl', {
```
```
      preserveDrawingBuffer: true,
```

      powerPreference: 'high-performance'

```
    })
```
```
 
```
```
  Object.assign(gl.canvas.style, {
```
```
    position: 'absolute',
```
```
    left: '50%',
```
```
    top: '50%',
```
```
    transform: 'translate(-50%, -50%)',
```
```
    outline: '1px solid gray'
```
```
  })
```
```
 
```
```
  with (gl) {
```
```
    const NUM = 4000
```
```
    const radius = 0.7
```
```
    const verts = []
```
```
 
```
```
    for (let i = 0; i < NUM; i += 3) {
```
```
      let xp = Math.random() * 2 - 1
```
```
      let yp = Math.random() * 2 - 1
```
```
      let zp = Math.random() * 2 - 1
```

      let dist = Math.sqrt(xp * xp + yp * yp + zp * zp)

```
      // normalize and scale x,y,z
```
```
      verts[i] = (xp / dist) * radius
```

      verts[i + 1] = (yp / dist) * radius

      verts[i + 2] = (zp / dist) * radius

```
 
```
```
    }
```
```
    const overts = verts.concat()
```
```
    const leng = verts.length / 3
```
```
 
```

    bindBuffer(ARRAY_BUFFER, createBuffer())

    bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)

```
 
```

    const vs = createShader(VERTEX_SHADER)

```
    shaderSource(vs, vert)
```
```
    compileShader(vs)
```
```
 
```

    const fs = createShader(FRAGMENT_SHADER)

```
    const sp = createProgram()
```
```
 
```
```
    shaderSource(fs, frag)
```
```
    compileShader(fs)
```
```
    attachShader(sp, vs)
```
```
    attachShader(sp, fs)
```
```
    linkProgram(sp)
```
```
    useProgram(sp)
```
```
 
```

    const vec = getAttribLocation(sp, 'vec')

    vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)

```
    enableVertexAttribArray(vec)
```
```
 
```

    const matLoc = getUniformLocation(sp, 'mat')

```
 
```
```
    function rot(x, y, z) {
```

      // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e

```
 
```
```
      const sinA = Math.sin(x)
```
```
      const cosA = Math.cos(x)
```
```
      const sinB = Math.sin(y)
```
```
      const cosB = Math.cos(y)
```
```
      const sinY = Math.sin(z)
```
```
      const cosY = Math.cos(z)
```
```
 
```
```
      m[0] = cosA * cosB
```

      m[1] = cosA * sinB * sinY - sinA * cosY

      m[2] = cosA * sinB * cosY + sinA * sinY

```
      m[3] = 0
```
```
 
```
```
      m[4] = sinA * cosB
```

      m[5] = sinA * sinB * sinY + cosA * cosY

      m[6] = sinA * sinB * cosY - cosA * sinY

```
      m[7] = 0
```
```
 
```
```
      m[8] = -sinB
```
```
      m[9] = cosB * sinY
```
```
      m[10] = cosB * cosY
```
```
      m[11] = m[12] = m[13] = 0
```
```
      m[15] = 1
```
```
 
```

      uniformMatrix4fv(matLoc, false, m)

```
    }
```
```
 
```
```
    onresize = () => {
```
```
      const { canvas } = gl
```

      const size = Math.min(innerWidth, innerHeight) - 20

      canvas.width = canvas.height = size

```
      viewport(0, 0, size, size)
```
```
    }
```
```
 
```
```
    onresize()
```
```
 
```
```
    let rx = 0,
```
```
      ry = 0,
```
```
      rz = 0
```
```
    let t = 0
```
```
 
```
```
    function loop() {
```
```
      rx += 0.01
```
```
      ry += 0.01
```
```
      rot(rx, ry, rz)
```
```
 
```
```
      disable(DEPTH_TEST)
```
```
      enable(BLEND)
```

      blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

```
 
```
```
      clearColor(0, 0, 0, 1)
```
```
 
```
```
      clear(COLOR_BUFFER_BIT)
```
```
 
```

      for (let i = 0; i < verts.length; i += 3) {

```
        let tof = i * 0.001 + t;
```

        verts[i] = Math.sin(tof) * overts[i]

        verts[i + 1] = Math.sin(tof) * overts[i + 1]

        verts[i + 2] = Math.sin(tof) * overts[i + 2]

```
      }
```
```
 
```
```
      t += 0.01
```
```
 
```

      bufferSubData(ARRAY_BUFFER, 0, new Float32Array(verts))

```
 
```
```
      drawArrays(POINTS, 0, leng)
```

      window.requestAnimationFrame(loop)

```
    }
```
```
    loop()
```
```
  }
```
```
})()
```

Playing around with animating points…

December 24, 2021

// animation // graphics // javascript // math // matrix // speed-coded // webgl

Older Posts

Newer Posts

Little Trading Program

Odd Gradient Notation

Raphaël Easing Equations How To

Polar Plots

WebGL Particles in Sphere

Recent

Archive