Category Archives: Uncategorized

Easy i-ching Symbols

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

Closest Point on a Line

For some reason I decided to port a snippet from AS3 to JS. Chose this one:

http://actionsnippet.com/?p=2969#comment-5674
…pretty much at random.

Here is the port in a pen:

This is actually a port of a port from this old thread:
http://www.gamedev.net/topic/444154-closest-point-on-a-line/

Posted in Uncategorized | Leave a comment

Quick SVG with Javascript

If you look into creating SVG dynamically with JavaScript you might stumble upon `document.createElementNS`. In most simple cases, you don’t need to go down that path. Contemporary libraries handle this stuff internally now (they didn’t always) or if you’re going vanilla… you can integrate this kind of thing somewhere:

Posted in Uncategorized | Leave a comment

PRNG Sine Rendering (Easiest Seeded Random with Index)

Here is a codepen showing seeded random numbers created use `Math.sin`. We’ll get to the code in a bit, first a little backstory…

Over the years I’ve used all manner of famous random number generators. From Tausworthe to Mersenne Twister.

Sometime last year I was trying to find a seeded PRNG, when working in Objective-C `arc4random` seems to be the common choice. I quickly became frustrated however as it didn’t seem possible or at least didn’t seem easy at all to reset the sequence of numbers. Maybe there’s an easy way, but whatever it is, I couldn’t find it. So after probably an hour of frustration trying all the weird different PRNGs, I decided to resort to a super simple old trick.

Why do you care about resetting the sequence?

Having a seed that you save at the beginning of your program can be super powerful. You can use anything for this seed, like the time or just another random number. From that point on your random numbers will be completely deterministic and depending on the complexity of your program you can simply save the seed and use it again later - causing your program to do exactly the same thing it did last time it had that seed. Those of you who dabble with generative artwork are probably familiar with this idea.

This experiment uses that trick:

Those textures will always be the same when the seed is 18. Thats an old experiment from the flash days, I think I used Grant Skinner’s seeded PRNG for that.

On the off chance you still have flash in your browser you can see it here:

Static black and white:
http://zevanrosser.com/sketchbook/things/bw_tex_static.html

Animated black and white:
http://zevanrosser.com/sketchbook/things/bw_tex_animated.html

Ugly colors version:
http://zevanrosser.com/sketchbook/things/col_tex_animated.html

It turns out that if you take sine or cosine and pop very large values for theta into it - you get something that looks very random. Lets look at the code:

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
var rc = 0,
  seed = 30,
  MAX_RAND = 0xffffff;
 
function idxRand(nth) {
  if (nth != null) rc = nth;
  rc++;
  return Math.abs(Math.sin(seed * rc) * MAX_RAND);
}
 
var firstFour = [idxRand(), idxRand(), idxRand(), idxRand()],
  second = idxRand(1),
  fourth = idxRand(3);
 
console.log(firstFour);
console.log(second);
console.log(fourth);
 
var canvas = document.createElement("canvas"),
  c = canvas.getContext("2d");
 
canvas.width = 400;
canvas.height = 300;
c.fillStyle = "black";
c.fillRect(0, 0, canvas.width, canvas.height);
document.body.appendChild(canvas);
 
for (var i = 0; i < 300; i++) {
  c.fillStyle = "red";
  c.fillRect(idxRand() % 200, i, 4, 4);
 
  c.fillStyle = "green";
  c.fillRect(200 + Math.random() * 200, i, 4, 4);
}

Will output something like this:

[16576418.984205123, 5113873.3245154265, 14998774.234509233, 9741038.668934602]
5113873.3245154265
9741038.668934602

This code could be improved in a few different ways - but its good enough to illustrate the technique. Lines 1-9 are all you need to have a reproducible random sequence. With a large step value for theta and an even larger coefficient (0xffffff) for sine, you can use modulo to get the range you need (line 30). You can access the old values by passing an index to `idxRand`. This is illustrated in lines 11 through 17 - where we get the first four values and then grab them again using the index argument.

While significantly statistically different - and likely significantly different performance-wise, you’ll notice that visually there is little difference… :D

UPDATE: Had an idea that an alternative post title for this would be Easily Attain the Nth value from a PPRNG(pseudo-pseudo-random-number-generator)…

Also posted in Math, javascript, misc, random | Tagged , , | Leave a comment

The Experimental Zeta Project

Sometime in 2015 I decided to do an experiment. I created a speed coded graphics library with the intention of eventually completely re-writing it . The idea being, I would work on an elegant (albeit strange) graphics library that would make it easy to quickly create complex graphics with very little code. The result was Zeta… which can do things like this:

or…

or even…

that…

There is more than meets the eye here. Here is a list of some things that may not be immediately apparent:

  1. While this is all done with canvas, everything is percentage based so it can scale in realtime to an arbitrary size. Like this (all of the above examples do the same).
  2. It uses coffeescript to so that the syntax is extra minimal.
  3. It defines shapes as polar and parametric functions, so you can easily create spirals and waves and really any kind of parametric curve you want.
  4. the data of the curves can be separated from the default rendering, and you can use normal canvas command to interpret the data.
  5. The actually library code is a real speed coded mess that could easily be replaced with decent code, leaving the existing API intact.
  6. Its very easy to create pseudo-responsive grids and animations.
  7. etc…

Here are the unfinished docs, basically just a list of functions and properties: Zeta Docs

Obviously I never got around to the re-write phase, but I still may revisit Zeta at some point. I have many many more things that I created with Zeta… Maybe I’ll write about some of them in the future.

There’s enough here for people to play around with, and if you feel like seeing some strange code. Have a look at one of the later versions of the lib itself: (brace yourself)

it may be obvious that some of the ideas in this lib are ever so vaguely inspired by processing

Posted in Uncategorized | Leave a comment

ArcType (quick and easy math authoring)

In 2015 I was writing lots of short recreational math documents. To aid myself in the creation of these, I built ArcType.

ArcType is a minimalistic editor that combines LaTeX, Markdown, HTML/CSS, gnuplot and Octave all in one place. A few months back I took ArcType and finalized it so that others could use it. It’s free and you can download your creations. Both the welcome screen and the helpfile cover most of the features available to you. Check it out here…

Here is a link to some of the docs I created…


It’s pretty self-explanatory - planning to do a tutorial about it soon. In the meantime, give this code a shot if you’re looking for more to play with than just the welcome/about demos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Modified Bicuspid Curve
*by Zevan Rosser*
 
Original equation from somewhere on [this page](https://en.wikipedia.org/wiki/Quartic_plane_curve)
 
$$
(x^2 - a^2)(x - a)^2 + (y^2 - a^2)^2 = 0
$$
 
 
@@@@
%-> width: 70%; min-width: 300px;
a = 1.21;
lx = -2:0.1:2;
ly = -2:0.1:2;
[x,y] = meshgrid(lx, ly);
z = (x.^2 - a^2) .* (x - a).^2 + (y.^2 - a^2).^2;
 
contourf(x, y, z, -3.9:0.3:1, 'LineWidth', 0);
colormap(1 - gray);
axis([-1.5, 2, -2, 2]); 
@@@@

There’s only really one known issue on my radar - which is just the 5mb limit for localStorage… I’m sure there are other bugs - so if you decide to make something real with it - please save your work often ;)

If you have questions - feel free to post them here and I’ll do my best to respond.

Posted in Uncategorized | Leave a comment

Dynamic Getter

Getters in ES6 are usually defined within a class like this:

1
2
3
4
5
6
7
8
  class RandomPoint {
    get x() {
      return Math.random();
    }
    get y() {
      return Math.random();
    }
  }

In this case we use getters to make a random point:

  let pnt = new RandomPoint();
  console.log(pnt.x, pnt.y);
  // outputs something like 0.09403673512366306 0.2717692041118973

I found myself wanting to be able to dynamically define a getter. This can be done like this:

let rand = function() { return Math.random(); };
Object.defineProperties(someObj, { ['x']: { get: rand });

This is really all just sugar, but still fun stuff…

Also posted in javascript | Tagged , | Leave a comment

ActionSnippet.zip

2018 UPDATE: grab the zip here http://actionsnippet.com/actionsnippet.zip
Seems I missed a good 15-20 requests over the years - so here it is ^^

Who would like a zip of the folder I used when making this site fla files and all? If you want one, post a comment and I’ll send it to you.

Actually have a little new content for the site coming, at least one new post.

If you don’t get yours within a day of posting… just let me know.

Posted in Uncategorized | 59 Comments

Quick IE Test

Found this today, not related to actionscript but rather nice. It allows you to take a screen shot of your website in IE… if your on a mac without windows this is a quick way to test in a pinch:

http://ipinfo.info/netrenderer/index.php

Posted in Uncategorized | 6 Comments

Epicycloid Again

Actionscript:
  1. var xp:Number = 0;
  2. var yp:Number = 0;
  3. var t:Number = 0;
  4. var a:Number = 100;
  5. var b:Number = 10;
  6. x = stage.stageWidth / 2;
  7. y = stage.stageHeight / 2;
  8.  
  9. graphics.lineStyle(0,0x000000);
  10. addEventListener(Event.ENTER_FRAME, onRun);
  11. function onRun(evt:Event):void {
  12.     var p:Number = ((a + b)/b)*t
  13.     xp = (a + b) * Math.cos(t) - b * Math.cos(p);
  14.     yp = (a + b) * Math.sin(t) - b * Math.sin(p);
  15.     if (t == 0){
  16.       graphics.moveTo(xp, yp);
  17.     }else{
  18.       graphics.lineTo(xp, yp);
  19.     }
  20.     t += 0.05;
  21. }

I've messed with Epicycloids in the past - browsing mathworld I decided to create this snippet. It will draw a curve like this:

Posted in Uncategorized | Tagged , , | 1 Comment