Search Icon A magnifying glass icon.
Search Icon A magnifying glass icon.
Subject
Admissions

DEGREES

Next Start:
January 6, 2025
Next Start:
January 6, 2025
Explore Graphic Design Degree Courses
Discover Sessions Graphic Design Hub

Professional Certificates

Next Start:
December 1, 2024
Explore Graphic Design Career Courses

DEGREES

Next Start:
January 6, 2025
Next Start:
January 6, 2025
Explore Web Design Degree Courses
Discover Sessions Web Design Hub

Professional Certificates

Next Start:
December 1, 2024
Explore Web Design Career Courses

DEGREES

Next Start:
January 6, 2025
Explore Digital Media Degree Courses
Discover Sessions Digital Media Hub

Professional Certificates

Explore Digital Media Career Courses

DEGREES

Next Start:
January 6, 2025
Explore Digital Media Degree Courses
Discover Sessions Digital Media Hub
You can deepen your software skills and keep up with the latest Adobe CC updates in our online Digital Arts courses.
Contact Admissions

DEGREES

Next Start:
January 6, 2025
Next Start:
January 6, 2025
Explore Digital Photography Degree Courses
Discover Sessions Digital Photography Hub

DEGREES

Next Start:
December 1, 2024
Explore Fine Arts Degree Courses

DEGREES

Next Start:
January 6, 2025
Next Start:
January 6, 2025
Explore Illustration Degree Courses
Discover Sessions Illustration Hub

Professional Certificates

Next Start:
December 1, 2024
Explore Illustration Career Courses

DEGREES

Explore Advertising & Marketing Degree Courses
Discover Sessions Advertising & Marketing Hub

Professional Certificates

Explore Advertising and Marketing Career Courses

CERTIFICATES

Next Start:
December 1, 2024
Next Start:
December 1, 2024
Next Start:
December 1, 2024
Explore Sessions Career Courses
Professional Cert PLUS
Next Start:
December 1, 2024
Next Start:
January 6, 2025
Next Start:
January 6, 2025
Next Start:
January 6, 2025
Explore Sessions Bachelor's Degrees
Next Start:
January 6, 2025
Next Start:
January 6, 2025

WWW… Wednesday! Zdog

by Taylor Slattery | August 28, 2019

zdog javascript engine for canvas

In their current unmoving form, the pictures in this article might appear to be simple vector illustrations, but they are in fact, fully-rotatable 3D models. They were made entirely through JavaScript, using a pseudo-3D library for canvas and SVG. The library was created by David DeSandro of Metafizzy, a Virginia-based web development company responsible for several other popular JavaScript libraries, though Zdog is by far the most unique.

zdog javascript engine for canvas

According to DeSandro, Zdog was created over the course of the last year during the few hours he found himself left with as a new father. DeSandro says he was inspired by Dogz, a Windows title that was released back in 95 and used similar techniques to depict 3D forms. DeSandro built upon the ideas established in Dogz and added the ability to rotate the models, creating an even more convincing sense of form.

zdog kirby

At 28kb for the entire library, it’s extremely light. The library functions like a 3D engine, allowing users to model 8 basic shapes with an additional class for creating custom shapes. It uses a declarative API, so if you have any coding experience you’ll be able to hit the ground running and start modeling immediately.

For those without experience, David has also made a series of instructional modules for new users to follow along with. Additionally, all of the examples on his site were created using Codepen, so clicking any of them will reveal all of the JavaScript coding that was used in their construction. You can check out Zdog here or find some of David’s other JavaScript libraries at Metafizzy. Also, be sure to check here or search #zdog on Twitter to see what others are making with the library.

 

Taylor is the Managing Editor of Notes on Design. Taylor is a graphic designer, illustrator, and Design Lead at Weirdsleep.

 

If you are interested in developing your graphic design skills, Sessions College offers a range of graphic design courses for students at all levels. Contact Admissions for more information.

This blog is powered by Sessions College, the leading online school of visual arts.

[Modal-Window id=”1″]

©2024 Sessions College for Professional Design  All rights reserved

Terms & Conditions       Privacy Policy