CODEWITHSUNDEEP
javascriptcanvasrotation
Algorithm
Algorithm

Reputation: 329

How to make a rotating object (sphere, box, etc.) using only the canvas

I'd like to make a rotating object (sphere, box, etc.) using only the canvas. But I can't find a tutorial. Help If you saw somewhere or explain how to do it.

Like this example, only without any effects

Upvotes: 3

Views: 1076

Answers (2)

jambox
jambox

Reputation: 580

Ah well it's pretty simple in theory. One way is to just set up a timer and then when it fires, clear the canvas and redraw your sphere, box whatever. To make it faster you can cover over a region of the canvas instead of the whole thing. Also you can get png sprites and move them about on the canvas.

I got into this stuff by trying out the pyjamas canvas wrapper, which means you can code in python and then compile it into js, which to me is a lot friendlier.

http://pyjs.org/examples/gwtcanvas/output/GWTCanvasDemo.html

NB the demo is slightly borken but the example code does compile and run perfectly well if you do a git pull.

Upvotes: -1

riwalk
riwalk

Reputation: 14233

Hope you like math. 3D effects can always be achieved on a 2D plane if you are willing to write some code.

Some resources that will probably help:

An Intro to Computer Graphics

and for help with the math,

A Book on Linear Algebra

Upvotes: 1

Related Questions