Emmet as a Template (aka zen-coding)

This is not the most useful thing in the world - was just an idea I had awhile back… First off, I love Emmet (formerly zen-coding) created by Sergey Chikuyonok. I especially like it for quickly writing html or jsx.

While I don’t use them that often, I really enjoy Jade and Pug. Anyway, I realized you could do similar things with Emmet with just a few little tweaks… So created this codepen:

As you can see - with a few regular expressions you can use Emmet _sort of_ like Jade. Definitely just an experiment, but interesting nevertheless.

Posted in html5, javascript | 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 even…


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.

# 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:

  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…

Posted in Uncategorized, javascript | Tagged , | Leave a comment

Bringing You Back To Life

So… for years I’ve left this blog alone as an archive of all my actionscript stuff. I moved over to zreference.com for a bit and then became so busy that I stopped blogging almost altogether. I still come back here probably once or twice a month to reference something… at least for me, this blog still has real value.

I’ve thought to myself so many times after spending hours solving something super confusing: “That would be a great post”. So… going to give it a shot - try and post things frequently here.

Snippets for now will mostly be in JavaScript and Objective-C/Swift since that’s what I’m using lately.

Posted in Announcements | Leave a comment

HTML5 Canvas Tutorial

If you haven’t tried the html5 canvas tag yet, I suggest you give it a try. It falls under the same category as ActionScript’s Graphics and BitmapData classes. It is however much much simpler. One great thing about it is it runs really fast on IOS5. Have a look at some of these demos to see what I mean: http://zreference.com/projects/graphics/

A few days ago I recorded this short video tutorial… it’s very simple, but it will get you started if you’ve never tried canvas before:

Posted in html5, javascript | Tagged , , , , | 2 Comments

Gumowski/Mira Pseudo-Soundwave

  1. [SWF(width = 600, height = 600)]
  2. var a:Number = 0.02;
  3. var b:Number = .9998;
  5. var xn1:Number = 5;
  6. var yn1:Number = 0;
  7. var xn:Number, yn:Number;
  9. var scale:Number = 10;
  10. var iterations:Number = 20000;
  11. var step:Number = stage.stageWidth / iterations;
  13. function f(x:Number):Number{
  14.     var x2:Number = x * x;
  15.     return a * x + (2 * (1 - a) * x2) / (1 + x2);
  16. }
  18. var canvas:BitmapData = Bitmap(addChild(new Bitmap(new BitmapData(600,600,false,0xEFEFEF)))).bitmapData;
  20. var circle = new Sprite();
  21. with(circle.graphics) beginFill(0, 0.3), drawCircle(2,2,1);
  23. var dot:BitmapData = new BitmapData(4,4,true, 0x00000000);
  24. dot.draw(circle);
  26. var pnt:Point = new Point();
  28. var txt:TextField = TextField(addChild(new TextField()));
  29. txt.text = "move mouse";
  31. addEventListener(Event.ENTER_FRAME, onLoop);
  32. function onLoop(evt:Event):void {
  34.     canvas.fillRect(canvas.rect, 0xEFEFEF);
  36.     a = mouseY / 1000;
  37.     xn1 = mouseX / 30;
  38.     yn1 = 0;
  39.     for (var i:int = 0; i<iterations; i++){
  40.           xn = xn1;
  41.           yn = yn1;
  43.           xn1 = b * yn + f(xn);
  44.           yn1 =  -xn + f(xn1);
  45.           pnt.x = i * step;
  46.           pnt.y = 300 + yn1 * scale;
  47.           canvas.copyPixels(dot, dot.rect, pnt, null, null, true);
  49.     }
  50. }

Try it out:

Gumowski Mira Pseudo-soundwave - wonderfl build flash online

Posted in BitmapData, Graphics, Math, graphics algorithms | Leave a comment

Closest Point on a Line

  1. // from
  2. // http://www.gamedev.net/topic/444154-closest-point-on-a-line/
  4. function getClosestPoint(A:*, B:*, P:*, segmentClamp:Boolean=true):Point {
  5.     var AP:Point = new Point(P.x - A.x, P.y - A.y),
  6.         AB:Point = new Point(B.x - A.x, B.y - A.y);
  7.     var ab2:Number=AB.x*AB.x+AB.y*AB.y;
  8.     var ap_ab:Number=AP.x*AB.x+AP.y*AB.y;
  9.     var t:Number=ap_ab/ab2;
  10.     if (segmentClamp) {
  11.         if (t<0.0) {
  12.             t=0.0;
  13.         } else if (t> 1.0) {
  14.             t=1.0;
  15.         }
  17.     }
  18.     return new Point(A.x + AB.x * t, A.y + AB.y * t);
  19. }
  22. var point:Sprite = Sprite(addChild(new Sprite()));
  23. point.x = 50;
  24. point.y = 50;
  25. with(point.graphics) beginFill(0), drawCircle(0,0, 3);
  27. var line:MovieClip = MovieClip(addChild(new MovieClip()));
  28. line.a = new Point(20, 100);
  29. line.b = new Point(300, 60);
  30. with(line.graphics) lineStyle(0), moveTo(line.a.x, line.a.y), lineTo(line.b.x, line.b.y);
  32. var closestPoint:Point = getClosestPoint(line.a, line.b, point);
  34. var closest:Sprite = Sprite(addChild(new Sprite()));
  35. closest.x = closestPoint.x;
  36. closest.y = closestPoint.y;
  37. with(closest.graphics) beginFill(0xFF0000), drawCircle(0,0, 3);

Posted in Math | Leave a comment

Stereoscopic Papervision

Cross your eyes to see 3D third image:

move your mouse up and down on the interactive demo... click ->

Posted in 3D | Tagged | 1 Comment


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