1

I'm looking to draw a 3D wire frame sphere in 2D Canvas. I'm not a math ninja by any means, so I'm wondering if anyone knows a simple way to draw one in Canvas using lineto arc connections and drawing it with :math:

I would appreciate any assistance.

Something like this: http://en.wikipedia.org/wiki/File:Sphere_wireframe_10deg_6r.svg

I'm hoping this is a simple equation, but if you know that it isn't (i.e. drawing that would be a lot of code), I would appreciate knowing that as well as I may need to reconsider what I wanna do.

Does it need to be a 2D canvas? I can't think of a way off the top of my head to draw that using lineto arc since you'd need to do a matrix multiply in order to rotate the circle about the Y axis. Would be really easy to accomplish with a 3D canvas context - rodrigo-silveira 2012-04-05 20:50

It shouldn't be too hard given a) a function to convert from spherical coordinates to XYZ and b) a function to perform a projection from XYZ into 2D. Both of these exist on the Web - Phrogz 2012-04-05 21:01

3

The easiest for you would probably to view the source of the SVG file (here) and recreate those paths using canvas commands.

If you want an actual 3d sphere, projected onto 2d space, I'd suggest using a library like Three.js

You can also look at some of the math I've done here: swarms The _3d and Matrix modules should be all that you need.

That swarms is a stellar demo. Thanks for sharing - Phrogz 2012-04-06 02:01

Holy crap, @david that is an incredible canvas fiddle. Probably the most impressive fiddle I've seen recently. It even runs (somewhat slowly which is a given, but it works!) on my iPad. Do you have a website - Steven Lu 2012-04-29 18:05

2

This time SO didn't help me, so I've helped myself and here it is: a pure HTML5 + JavaScript configurable rendering or a wireframe sphere.

I started from this excellent post and then went on. Basically I collected some vertex generation code from Qt3D and adapted to JS.

I'm not 100% sure the rotation functions are correct, but you are welcome to contribute back in case you find errors.

To be clearer, I've distinguished Z positions and draw white on the front and gray on the back.

Here's the result (16 rings x 32 slices) and related jsFiddle link

```
Enjoy
```

1

Look at this one: http://jsfiddle.net/aJMBp/

you should just draw a lot of these lines to create a complete sphere. This is a good starting point, give me 5 minutes and I'll see if I can improve it to draw a sphere.

Getting better: http://jsfiddle.net/aJMBp/1/

Ok, thats def out of my capacity. However, another little improvement here: http://jsfiddle.net/aJMBp/2/

+1 very cool stuff - SSH This 2012-04-05 22:48

yeah, working on this but I mostly suck in the math part of it! I hope someone who knows 3d math better than us can take this drawing core and write the loop. I'm trying this right now however.. - Saturnix 2012-04-05 22:51

This might be the way to go, it's just that the curve of a sphere isn't a parabola. So just using the quadratic curve won't get you anywhere - Steven Lu 2012-04-29 18:30