Author Archives: Zevan

Closest Point on a Line

For some reason I decided to port a snippet from AS3 to JS. Chose this one:
…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:

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

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

This works by using a div with [...]

Posted in Graphics, Math, html5, javascript, misc, motion | Tagged , , | Leave a comment

Color Breeder (aka Features)

Choose two colors to breed them and create 5 new colors:
See the Pen Color Breeder by Zevan Rosser (@ZevanRosser) on CodePen.

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

Posted in Graphics, Object, html5, javascript, misc | Tagged , , | 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:
See the Pen Inline Svg ES6 Template [...]

Posted in Uncategorized | 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

let rotX = 0, rotY = 0,
perspective = 500,
currX, currY;
// learned something like this at Andries Odendaal’s
function point3d(x, y, z) {

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

Posted in Graphics, Math, functions, graphics algorithms, javascript, misc, motion | Tagged , , | 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…
See the Pen PPRng Sine w Rendering by Zevan Rosser (@ZevanRosser) on CodePen.

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

Posted in Math, Uncategorized, javascript, misc, random | Tagged , , | Leave a comment

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

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