ActionSnippet http://actionsnippet.com paste it Sun, 02 Dec 2018 17:57:07 +0000 en Pathtracer Research http://actionsnippet.com/?p=3341 http://actionsnippet.com/?p=3341#comments Sat, 01 Dec 2018 17:59:36 +0000 Zevan http://actionsnippet.com/?p=3341 I spent awhile a few months ago learning about Pathtracers… After I good deal of research I ended up forking Evan Wallace’s Path Tracer and added a few new features and shapes - some of which I learned from Erich Loftis’s Three.js PathTracing Renderer.

view demo 1

view demo 2

Been wanting to get back to this and do optimizations and boolean shapes - but so far I haven’t gotten around to it.

]]>
http://actionsnippet.com/?feed=rss2&p=3341
Proxy - (object always defined) http://actionsnippet.com/?p=3333 http://actionsnippet.com/?p=3333#comments Sun, 28 Oct 2018 18:40:04 +0000 Zevan http://actionsnippet.com/?p=3333 This uses a proxy to make sure all keys/props of an object are always defined.

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
let spec = {
  get: (o, key) => {
    return o[key] != null ? o[key] : o[key] = O();
  },
  set: (o, key, v) => {
    o[key] = v;
  }
};
 
let O = () => {
  return new Proxy({}, spec);  
};
 
let dynamic = O();
dynamic.prop.creation = 'is interesting';
dynamic.prop.stuff.not.clear.what.this.could.be.used.for = 123;
 
// log out full structure
let f = (o) => {
  for (let i in o) {
    console.log(o[i]);
    if (typeof o[i] === 'object') f(o[i]);
  }
};
f(dynamic);

Outputs:

Proxy {creation: "is interesting", stuff: Proxy}
is interesting
Proxy {not: Proxy}
Proxy {clear: Proxy}
Proxy {what: Proxy}
Proxy {this: Proxy}
Proxy {could: Proxy}
Proxy {be: Proxy}
Proxy {used: Proxy}
Proxy {for: 123}
123
]]>
http://actionsnippet.com/?feed=rss2&p=3333
es6 concat trick http://actionsnippet.com/?p=3328 http://actionsnippet.com/?p=3328#comments Sat, 27 Oct 2018 21:15:58 +0000 Zevan http://actionsnippet.com/?p=3328
let a = [1], b = [2], c = [3],
    d = [...a, ...b, ...c];
console.log(d);
// outputs: [1, 2, 3]
]]>
http://actionsnippet.com/?feed=rss2&p=3328
Zeta Pictograms http://actionsnippet.com/?p=3313 http://actionsnippet.com/?p=3313#comments Tue, 28 Aug 2018 12:47:15 +0000 Zevan http://actionsnippet.com/?p=3313 I have a set of ~100 pictograms that I use for personal notation. When I was actively working on Zeta. I created a few of these with equations:

You can read more about Zeta in this post.

I spam my facebook with images from my sketchbooks if you’re at all interested in seeing more pictograms:

]]>
http://actionsnippet.com/?feed=rss2&p=3313
Dictionary with ES6 Symbol http://actionsnippet.com/?p=3307 http://actionsnippet.com/?p=3307#comments Sun, 26 Aug 2018 15:22:42 +0000 Zevan http://actionsnippet.com/?p=3307 Creating a dictionary type object with ES6 Symbols is easy. Yes we have Maps and WeakMaps but this is still interesting for a variety of reasons… Being able to use objects as keys in another object (dictionary) has many great uses…. So how do you use Symbols like this?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let a = { id: Symbol('key') },
    b = { id: Symbol('key') };
 
let dictionary = {
  [a.id]: 'value by obj a',
  [b.id]: 'value by obj b'
};
 
console.log(dictionary[a.id]);
console.log(dictionary[b.id]);
 
// outputs:
// 'value by obj a'
// 'value by obj b'

By using either object a or object b’s `id` symbol, our dictionary points to another value. This old AS3 snippet is similar:

http://actionsnippet.com/?p=426

]]>
http://actionsnippet.com/?feed=rss2&p=3307
Easy i-ching Symbols http://actionsnippet.com/?p=3290 http://actionsnippet.com/?p=3290#comments Tue, 21 Aug 2018 13:13:47 +0000 Zevan http://actionsnippet.com/?p=3290 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

]]>
http://actionsnippet.com/?feed=rss2&p=3290
OVM Pseudo-Algebra and Surreal Numbers http://actionsnippet.com/?p=3274 http://actionsnippet.com/?p=3274#comments Sun, 19 Aug 2018 16:29:26 +0000 Zevan http://actionsnippet.com/?p=3274 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…

]]>
http://actionsnippet.com/?feed=rss2&p=3274
QuickShader Micro-Lib http://actionsnippet.com/?p=3258 http://actionsnippet.com/?p=3258#comments Sat, 18 Aug 2018 19:00:30 +0000 Zevan http://actionsnippet.com/?p=3258 In 2015 I created QuickShader… which just takes the boilerplate out of showing a shader in the browser. Here are a few examples:

]]>
http://actionsnippet.com/?feed=rss2&p=3258
JavaScript Smooth Quadratic Bezier http://actionsnippet.com/?p=3252 http://actionsnippet.com/?p=3252#comments Sat, 18 Aug 2018 14:16:10 +0000 Zevan http://actionsnippet.com/?p=3252 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.

]]>
http://actionsnippet.com/?feed=rss2&p=3252
CSS Fake Lighting With Gradients and Shadows http://actionsnippet.com/?p=3245 http://actionsnippet.com/?p=3245#comments Wed, 08 Aug 2018 20:22:24 +0000 Zevan http://actionsnippet.com/?p=3245 Awhile back I thought it would be interesting to add some quick fake lighting to a personal project of mine - that for lack of a better description is a windows management system.

Here is a screenshot of the windows management system with lighting turned on:

Here is a video of me using the system:

I whipped up this prototype (don’t mind the jQuery)

There are really two keys that make this work. Getting the shadow in place and adjusting the gradient. All we really need is the angle and distance from a given `div` in relation to the “light”:

1
2
3
4
5
6
7
8
9
10
11
12
13
let calcAng = function(x, y) {
  let lightPos = light.position()
  let dx = lightPos.left - x;
  let dy = lightPos.top - y;
  return -Math.atan2(dy, dx) / Math.PI  * 180;
};
 
let calcDist = function(x, y) {
  let lightPos = light.position()
  let dx = lightPos.left - x;
  let dy = lightPos.top - y;
  return Math.sqrt(dx * dx,  dy * dy);
};

Standard `atan2` and the pythagorean theorem get us this. Once we have those - we can use them to set our gradient and shadow values:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// warning (apparently this function is slightly speed coded)
let calcShade = function(x, y) {
  let angle = calcAng(x, y);
  let dist =  calcDist(x, y);
  let sx = dist * Math.cos(-angle * Math.PI / 180) * -1;
  let sy = dist * Math.sin(-angle * Math.PI / 180) * -1;
 
  sx = Math.min(20, Math.max(sx, -20));
  sy = Math.min(20, Math.max(sy, -20));
  let blur = Math.min(100, dist);
  let hBlur = Math.min(50, blur) * 0.5;
  // consider distance in the eq?
  return {
    bg: `-webkit-linear-gradient(${angle}deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.4) ${blur}%)`,
    shadow: `${sx}px ${sy}px ${hBlur}px rgba(0, 0, 0, 0.15)`
  };
};

There are more videos of the windows management system on my youtube channel. Here’s another from a much earlier version of the system.

Maybe I’ll post more about that in the future…

]]>
http://actionsnippet.com/?feed=rss2&p=3245