Author Archives: Zevan

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