3D Animated Canvas Christmas Tree (Plus: How It Works)
3D Animated Canvas Christmas Tree (Plus: How It Works)
Join the DZone community and get the full member experience.
Join For FreeJumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
In the spirit of the season, how about a clever Canvas Christmas tree? which looks static like this:
but when unleashed on the browser's renderer, rotates beautifully, with shading, in the midst of the falling snow.
Cool enough simply to admire! But apropos of the falling snow and the rotating Christmas tree both, the coder behind the graphic also wrote just about the most helpful 'how I did it' piece you can imagine -- complete with screenshots and diagrams of each stage in the JavaScript, for those of us who can develop web apps but don't easily intuit the language of computer graphics.
The JavaScript comes in at exactly 1024 bytes&characters, too -- the piece won the JS1K Xmas contest last year -- so the code (click on 'view source and description') is a great example of highly condensed programming.
Check out the rotating tree here, and the 'how I did it' here.
And have a great holiday, everyone!!
Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.
Like This Article? Read More From DZone
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}