Author Archives: Zevan

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:
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 [...]

Posted in Graphics, graphics algorithms, html5, javascript | Tagged , | Leave a comment

Dictionary with ES6 Symbol

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’) },
[...]

Posted in Dictionary, arrays, associative arrays, es6, html5, javascript | Tagged , , , | Leave a comment

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>
[...]

Posted in Uncategorized | Tagged , | Leave a comment

OVM Pseudo-Algebra and Surreal Numbers

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) [...]

Posted in Math, misc | 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:

Have a look on github: https://github.com/ZevanRosser/QuickShader

Posted in Graphics, 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.
See the Pen Bezier Skin by [...]

Posted in Graphics, 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 [...]

Posted in 3D, Graphics, Math, graphics algorithms, html5, javascript, misc, motion | 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:
See the Pen Closet Point on a Line by Zevan Rosser (@ZevanRosser) on CodePen.

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

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:
See the Pen pJZdav by Zevan Rosser (@ZevanRosser) on CodePen.

The trick [...]

Posted in Graphics, html5, javascript, misc, pixel manipulation, svg | Tagged , , , , , , | Leave a comment

Input Field with LocalStorage Predictions

This is a quick example showing how to give an input field “memory”. After you type something once and hit return it will be stored in `localStorage`. String values are ranked based on how often they are selected/entered. I know people don’t like jQuery these days, seems this pen is from a time when I [...]

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