Experiments with Zdog.js

Zdog.jsを使った実験

This page contains advanced experiments that I did with Zdog.js. Zdog is a 3D JavaScript engine for Canvas and SVG by Dave Desandro. A documentation can be found here Zdog.js. This is the 2nd entry on this subject that I introduced here ... 3D SVG".

Finally I'm back with 3D SVG. To be honest I planned to quit with this technology but it helps me to get warm with JS and one can do impressive stuff with it. I also had several fresh ideas to exploit; and maybe it will be worth it. The main new aspects for taking away here are advanced techniques for representing layers in z-coordinate direction, using anchors; and designing superimposed motions that lead to intresting pseudo-3D effects. Don't forget to drag and rotate with the mouse for interacting with the model.

Yin-Yang USA & Israel

イン・ヤン アメリカ＆イスラエル

A complex version of my Yin-Yang cats example frome Codepen repository. I addapted the "for" -loop code from the previous model to realize the star circlet.

Flowers

花

Adding individual translation parameters to spline control points.

Heart

心

This one consists of 370 heart shapes with individual strokes, fill color, dimensions; and rotation parameters. How too? In retrospect it was easy. Generate a heart geometry in Mo13D, export it via obj-file, parse the vertex coordinates via a Microsoft Excel script; and drag'n'drop into the js code.

Pac-Man is missing

パックマンがいない

Just a very simple and styled ghost from Pac-Man IP. Using colors with an alpha channel can make a big difference.