ActionSnippet

Blobby WebGL

Zevan — Mon, 11 Nov 2024 08:33:44 +0000

Still speed-coding shorts for youtube these last few months… - move your mouse over the codepen below - click and hold to zoom out

https://www.youtube.com/@zevanrosser/shorts

See the Pen
VLIBlob by Zevan Rosser (@ZevanRosser)
on CodePen.

Recent Shorts

Zevan — Sat, 27 Jul 2024 14:40:05 +0000

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

See the Pen
Untitled by Zevan Rosser (@ZevanRosser)
on CodePen.

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

Updates Shorts and Rbn… snippet.zone zapp.codes etc…

Zevan — Thu, 27 Jun 2024 12:27:19 +0000

I started making youtube shorts using a monaco-powered micro-editor I created called https://zapp.codes. Check them out here: https://www.youtube.com/@shapevent/shorts

I don’t think I ever mentioned https://snippet.zone here. It’s just another actionsnippet-like site I created a few years ago… I don’t update it all that frequently but it has many snippets mostly written in js.

recent fork of a snippet.zone that I used in a short…

See the Pen
squigs by Zevan Rosser (@ZevanRosser)
on CodePen.

Here’s a short showing something I did for genuary 2022…

Pathtracer Research

Zevan — Sat, 01 Dec 2018 17:59:36 +0000

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.

Proxy - (object always defined)

Zevan — Sun, 28 Oct 2018 18:40:04 +0000

This uses a proxy to make sure all keys/props of an object are always defined.

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

es6 concat trick

Zevan — Sat, 27 Oct 2018 21:15:58 +0000

let a = [1], b = [2], c = [3],
    d = [...a, ...b, ...c];
console.log(d);
// outputs: [1, 2, 3]

Zeta Pictograms

Zevan — Tue, 28 Aug 2018 12:47:15 +0000

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:

See the Pen Zeta Pictograms by Zevan Rosser (@ZevanRosser) on CodePen.

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:

Dictionary with ES6 Symbol

Zevan — Sun, 26 Aug 2018 15:22:42 +0000

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?

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

Easy i-ching Symbols

Zevan — Tue, 21 Aug 2018 13:13:47 +0000

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:

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: ䷀
 
        var flash = $('.flash'),
            syms = $('.syms'),
            num = $('.num'),
            start = 0x4DC0,
            total = 64,
            tick = 0;
 
        for (var i = 0; i < total; i++) {
          $('', {
            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">1span>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

OVM Pseudo-Algebra and Surreal Numbers

Zevan — Sun, 19 Aug 2018 16:29:26 +0000

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…

See the Pen O.V.M by Zevan Rosser (@ZevanRosser) on CodePen.

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