Category Archives: Graphics

Zeta Pictograms

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:

Also posted in graphics algorithms, html5, javascript | Tagged , | Leave a comment

QuickShader Micro-Lib

In 2015 I created QuickShader… which just takes the boilerplate out of showing a shader in the browser. Here are a few examples:

Also posted in Math, color, glsl, graphics algorithms, html5, javascript, motion, pixel manipulation | Tagged , | Leave a comment

JavaScript Smooth Quadratic Bezier

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.

Also posted in Math, arrays, bezier, graphics algorithms, html5, javascript | Tagged , , , , | Leave a comment

CSS Fake Lighting With Gradients and Shadows

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…

Also posted in 3D, Math, graphics algorithms, html5, javascript, misc, motion | Leave a comment

SVG to Canvas (good trick)

Awhile back, I wrote some collision detection code that blitted existing interactive SVG to Canvas and then used the pixel data to figure out various aspects of the relationships between arbitrary SVG nodeTypes. A really simple trick I used can be seen in this pen:

The trick is to load the svg data into an image as a datauri. There are other tricks like this - one of which is using an svg `foreignObject` to blit html to canvas:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

There were some browser issues at the time with this. The main one being IE 10/11 didn’t really work (tainted canvas if I recall correctly). The `foreignObject` trick didn’t work with image xlink:hrefs in safari at the time… (weirdly if you opened the dev tools it would start to work) anyway…

I ended up forking canvg for various cases. canvg is really cool… just a note, a coworker of mine went in at some point and optimized it like crazy and improved the perf a good deal by “drying things up”. Maybe I’ll suggest that he submit his optimizations at some point.

Also posted in html5, javascript, misc, pixel manipulation, svg | Tagged , , , , , , | Leave a comment

Quick line in HTML and JavaScript

Usually if you want to draw lines in HTML you use canvas or SVG. Awhile back I wondered how I might do it without those. This is really just a proof of concept speed coded answer to that question:

This works by using a div with a border, rotating it and scaling it as needed so it fits between two arbitrary points.

This could be abstracted a bit more, but it works pretty well. I usually choose `setInterval` over `requestAnimationFrame` when prototyping - because I like to easily be able to change the speed of
framebased things like this. If I were to try and make this code more dynamic, I would probably switch out to `requestAnimationFrame`.

If you try and connect two lines together - you’ll notice some inaccuracy - a good argument for using SVG or canvas over something like this. That said, if you are connecting two elements using a single line, this inaccuracy would become irrelevant.

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

Color Breeder (aka Features)

Choose two colors to breed them and create 5 new colors:

This is a speed coded pen from awhile back - the features object is interesting - it allows two objects to be bred together. In this case two colors. I could see this is as part of some advanced/abstract colorpicker that allows the user to home in on a color.

Also posted in Object, html5, javascript, misc | Tagged , , | Leave a comment

3d Point to 2d Point (Easy Mini 3d Engine)

Many years ago when I had just started programming I found this absolute gem by Andries Odendaal.

modern es6 version

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let rotX = 0, rotY = 0,
    perspective = 500, 
    depth,
    currX, currY;
// learned something like this at Andries Odendaal's www.wireframe.co.za 
function point3d(x, y, z) {
    let cosX = Math.cos(rotX),
        cosY = Math.cos(rotY),
        sinX = Math.sin(rotX),
        sinY = Math.sin(rotY),
        posX, posY, posZ;
 
    posZ = z * cosX - x * sinX,
    posX = z * sinX + x * cosX,
    posY = y * cosY - posZ * sinY,
    posZ = y * sinY + posZ * cosY;
 
    depth = 1 / (posZ / perspective + 1);
    currX = posX * depth;
    currY = posY * depth;
 
    return [ currX, currY, depth ];
}

Here’s is an example of it in action:

I’ve used this code many many times, it’s just easy to throw into any language and instantly get 3d points rendered in 2d. Here is a short video of a Java applet from 2003 called “Catch Env” that made use of it:

Here is the source code for that ^^
http://www.zevanrosser.com/shape2/j/Catchenv.java

You’ll notice in that source, that I nested the equation to allow for local and global transformations. It was around that time that I learned the ins and outs of real 2D and 3D matrix transformation math… Ken Perlin’s classfiles from NYU were a real help when I was learning that stuff. I don’t think this was the exact file I was working with, but it was definitely on his site somewhere.

Before all that, during my junior year in college I created a 3d engine based off Odendaal’s code in Director (Lingo). Here is a video of some of the demos for it:

…and here is a strange screenshot from my personal website at the time:

Just an example of a powerful snippet and a gateway to learning matrix transformation math. When I first really dug in to html5 canvas - before WebGL was supported so widely - having this trick up my sleeve was great. As you can see in the below link, I used it more than a few times back then:

Daily canvas experiments:

http://zreference.com/projects/all-graphics.php

:D

Also posted in 3D, graphics algorithms, html5, javascript | Tagged , , , | Leave a comment

Hermit Crab Curve as PRNG

(a deterministic pseudo-random number generator with contrast and smoothness - inspired by stochastic and organic randomness)

Around 2015 I had the idea for a PRNG that would clamp itself and have moments of “smoothness”. When I got around to trying to create such a thing, the result was something I jokingly called the “Hermit Crab Curve”. I also called it the “Shard Curve”.

The equation for the curve defines a radius in polar coordinates:

Where a and d are paramters that control the detail of the curve. o is a rotation and offset value for the angle and s is a scalar. Note the use of rem. The resulting curve is much less interesting if a standard modulo is used in place of a remainder:

The above variable values were found using this interactive version of the equation:

To illustrate how you might use this as a PRNG I created this fork of the above pen:

That, in combination with the information from my other article from yesterday… Should be enough to see what I mean.


You can read the original description of the Hermit Crab Curve that I created using ArcType here:

http://zevanrosser.com/arctype-dev/hermit-crab-curve.html

If you end up using this for something interesting let me know. I’d love to see it :D

Also posted in Math, functions, graphics algorithms, javascript, misc, motion | Tagged , , | Leave a comment

Gumowski/Mira Pseudo-Soundwave

Actionscript:
  1. [SWF(width = 600, height = 600)]
  2. var a:Number = 0.02;
  3. var b:Number = .9998;
  4.  
  5. var xn1:Number = 5;
  6. var yn1:Number = 0;
  7. var xn:Number, yn:Number;
  8.  
  9. var scale:Number = 10;
  10. var iterations:Number = 20000;
  11. var step:Number = stage.stageWidth / iterations;
  12.  
  13. function f(x:Number):Number{
  14.     var x2:Number = x * x;
  15.     return a * x + (2 * (1 - a) * x2) / (1 + x2);
  16. }
  17.  
  18. var canvas:BitmapData = Bitmap(addChild(new Bitmap(new BitmapData(600,600,false,0xEFEFEF)))).bitmapData;
  19.  
  20. var circle = new Sprite();
  21. with(circle.graphics) beginFill(0, 0.3), drawCircle(2,2,1);
  22.  
  23. var dot:BitmapData = new BitmapData(4,4,true, 0x00000000);
  24. dot.draw(circle);
  25.  
  26. var pnt:Point = new Point();
  27.  
  28. var txt:TextField = TextField(addChild(new TextField()));
  29. txt.text = "move mouse";
  30.                                                       
  31. addEventListener(Event.ENTER_FRAME, onLoop);
  32. function onLoop(evt:Event):void {
  33.    
  34.     canvas.fillRect(canvas.rect, 0xEFEFEF);
  35.  
  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;
  42.          
  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);
  48.        
  49.     }
  50. }

Try it out:

Gumowski Mira Pseudo-soundwave - wonderfl build flash online

Also posted in BitmapData, Math, graphics algorithms | Leave a comment