Easy i-ching Symbols

By Zevan | August 21, 2018

I have so many little snippets like this laying around, at first I didn’t remember writing this when I found it the other day… then it slowly came back to me.

Looks like this is another one from the jQuery days:

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(function(){
 
        // meaning: http://www.ichingfortune.com/hexagrams.php
        // starting hex: &#x4DC0;
 
        var flash = $('.flash'),
            syms = $('.syms'),
            num = $('.num'),
            start = 0x4DC0,
            total = 64,
            tick = 0;
 
        for (var i = 0; i < total; i++) {
          $('<div>', {
            html: '&#x' + (start + i).toString(16)
          }).appendTo(syms);
        }
 
        flash.html(syms.html());
        flash.find('div').hide().first().show();
 
        setInterval(function() {
          var index = tick % total,
              curr = flash.children().eq(index)
              .show()
              .siblings().hide();
 
          curr = syms.children().eq(index)
            .css('color', 'red')
            .siblings().css('color', 'black');
 
          num.text(index + 1);
          tick++;
        }, 600);
 
      });
    </script>
    <style>
      * {
        font-family: "Helvetica Neue", Helvetica, sans-serif;  
      }
 
      .syms div {
        position: relative;
        float: left;  
        font-size: 3em;
        -webkit-transition: color 300ms ease-out;
        -ms-transition: color 300ms ease-out;
        -o-transition: color 300ms ease-out;
        transition: color 300ms ease-out;
      }
 
      .flash {
        position: relative;
        height: 6em;  
      }
 
      .flash div {
        position: absolute;
        left: 0; top: 0;
        font-size: 6em;
        color: red;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
      }
    </style>
  </head>
  <body>
    <h2>i ching : <span class="num">1</span></h2>
    <div class="flash"></div>
    <div class="syms"></div>
  </body>
</html>

The i-ching is a Chinese divinatory system - the “hexagrams” just look very cool, when I noticed they were available starting at `0×4DC0` I made this snippet… think ancient magic 8 ball.

wikipedia article:
https://en.wikipedia.org/wiki/I_Ching

It’s pretty fun to play with this online version:
https://www.eclecticenergies.com/iching/virtualcoins

Posted in Uncategorized | Tagged , | 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…

Posted in Math, 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:

Posted in Graphics, Math, 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.

Posted in Graphics, Math, arrays, bezier, graphics algorithms, html5, javascript | Tagged , , , , | Leave a comment