Category Archives: Math

Recent Shorts

By Zevan | July 27, 2024

Been speed coding some new stuff and showcasing some old stuff as shorts on youtube - here is a recent one:

Check out the rest here: https://www.youtube.com/@shapevent/shorts

Also posted in Graphics, Uncategorized, graphics algorithms, html5, javascript, misc, motion, random | Leave a comment

OVM Pseudo-Algebra and Surreal Numbers

By Zevan | August 19, 2018

Was just watching this funny video on Numberphile:

Here is the Surreal Numbers book on archive.org:

https://archive.org/stream/SurrealNumbers/Knuth-SurrealNumbers#page/n7

Got a kick out of the story around this stuff… When Knuth shows the notation for surreal numbers I suddenly remembered a weird program I’d written awhile back.

OVM

I had been out drawing in my sketchbook one sunday (almost 2 years ago) and found myself creating a tiny little system of symbols:

A few days later I speed coded a version of the system. Apparently I had posted a screenshot on FB while I was working on it:

See if you can figure out how it works. I’m sure the code could be cleaned up a bit…

While OVM has little/nothing to do with Surreal Numbers - I’m glad the video reminded me it…

Also posted in misc | Tagged , , | Leave a comment

QuickShader Micro-Lib

By Zevan | August 18, 2018

In 2015 I created QuickShader… which just takes the boilerplate out of showing a shader in the browser. Here are a few examples:

Also posted in Graphics, color, glsl, graphics algorithms, html5, javascript, motion, pixel manipulation | Tagged , | Leave a comment

JavaScript Smooth Quadratic Bezier

By Zevan | August 18, 2018

Being able to draw smooth lines that connect arbitrary points is something that I find myself needing very frequently. This is a port of an old snippet that does just that. By averaging control points of a quadratic bezier curve we ensure that our resulting Bezier curves are always smooth.

The key can be seen here with the `bezierSkin` function. It draws either a closed or open curve.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

// array of xy coords, closed boolean
function bezierSkin(bez, closed = true) {
  var avg = calcAvgs(bez), 
      leng = bez.length,
      i, n;
 
  if (closed) {
    c.moveTo(avg[0], avg[1]);
    for (i = 2; i < leng; i += 2) {
      n = i + 1;
      c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);
    }
    c.quadraticCurveTo(bez[0], bez[1], avg[0], avg[1]);
  } else {
    c.moveTo(bez[0], bez[1]);
    c.lineTo(avg[0], avg[1]);
    for (i = 2; i < leng - 2; i += 2) {
      n = i + 1;
      c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);
    }
    c.lineTo(bez[leng - 2], bez[leng - 1]);
  }
}
 
 
// create anchor points by averaging the control points
function calcAvgs(p) {
  var avg = [],
      leng = p.length, prev;
  for (var i = 2; i < leng; i++) {
    prev = i - 2;
    avg.push((p[prev] + p[i]) / 2);
  }
  // close
  avg.push((p[0] + p[leng - 2]) / 2);
  avg.push((p[1] + p[leng - 1]) / 2);
  return avg;
}

The control points are then averaged to ensure that the curve contains no sharp angles.

Also posted in Graphics, arrays, bezier, graphics algorithms, html5, javascript | Tagged , , , , | Leave a comment