Author Archives: Zevan

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

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

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