This tutorial was made in response to a question about using Inkscape to accomplish the effects seen in the Illustrator tutorial (http://www.vectordiary.com/illustrator/illustrator-disco-ball-tutorial/). The question was "Can Inkscape do this?" The answer, as almost always seems to be the case, is "Yes, but maybe not in that way." In this case, I think the Inkscape way is less intuitive but more straight-forward, if such a thing is possible. Before getting started I should point out that this tutorial requires the Bezier Envelope extension seen in this heathenx screencast (http://screencasters.heathenx.org/episode-088/)and can be found here (http://screencasters.heathenx.org//wp-content/uploads/bezier_envelope.tar.gz). Much thanks to Heathenx and RFGuerin for all their instructional videos. Now, let's get disco dancing.

Part I: Making a ball
1. Draw a square and set the stroke to 1 and the dimensions to 501x501.
2. With the square selected do Effects>Render>Grid with line width 1, horizontal spacing 25 and vertical spacing 25, offsets at zero.
3. Draw an ellipse and set the stroke to 1 and the dimensions to 500x500. Then convert the ellipse to a path.
4. Select the ellipse and the grid and center them on your page.
5. Select the grid, then select the ellipse (this order is important) then do Effects>Modify Path>Bezier Envelope.
6. Select your now-warped grid and your ellipse (you may have to re-center them), then do Path>Combine.

Part II: Breaking the ball into component pieces
Next we need to make all the little warped grid areas into individual paths. This is trickier than expected but totally do-able.
7. With your path selected do Path>Stroke to path.
8. With your path selected do Path>Break apart.
9. With all the paths you just made selected, change the fill to white and the stroke to black and set the stroke to 1.
10. With all the paths selected do Effects>Color>Randomize. Check all of Hue, Saturation, and Lightness. [Side note: if you want a slightly simpler disco ball you can set the fill to unfilled in step 9 and then do this effect and be done. Also, you may want to use a pre-set color palette for this. I don't work with palettes much because I'm a dilettante, but I imagine they would be helpful in this case.]

Part III: Making it purty
This is the step for artists, so if my rendering isn't up to snuff (and it's probably not) it's because I'm supposed to be studying electromyography instead of this.
11. Draw another ellipse and set the stroke to 1 and make it 500x500. Duplicate the ellipse.
12. Select one ellipse and do a radial gradient fill. My gradient has four stops -- white, cyan, yellow, magenta.
13. Select all your mirror ball paths and do Object>Group.
14. Select your group of mirror ball paths and your gradient ellipse and align their centers.
15. Select the gradient ellipse alone and set the opacity to around 70% and the blur to 2.0.
16. Select the gradient ellipse and the group of mirror ball paths and do Object>Group.
17. Select your group and your other ellipse from step 11 and align their centers. Then do Object>Clip (you'll have to make sure your ellipse is the topmost object).
18. With the polygon tool draw your favorite lens flare star shape. I did a four sided star and a smaller six sided star and converted to paths and then unioned them. Once you have a flare shape you like set the stroke to none and then for the fill do a radial gradient of white to transparent. You can try fancy lighting effects with the fill if you like. Position the flare on the ball to your liking and add some blur and transparency. Duplicate and resize to add other flares.
19. Finally, create a glow around the ball and some reflections on the background. I know there's a way to make Edit>Clone>Tiled Clones magic up some random reflections but I've never managed to tame the beast that is Tiled Clones. If anyone can give a few tips I'd love to hear them. The glow is just another ellipse, slightly larger than 500x500 with a radial gradient of white to black and a sizeable blur. The reflections are just ellipses skewed with rotation and radial fill from color to black and a blur. This is the step where Illustrator's fisheye warp effect is hard to duplicate in Inkscape. Anyway, that's it. Disco lives, baby!

http://files.myopera.com/llogg/files/discoballtutorial.svg

P.S. I'm not sure if anyone can tell after that tutorial what I meant by this technique in Inkscape being less intuitive but more straight-forward. In Illustrator you would think "I need this mirror texture applied to a sphere," and use a complex function of Illustrator to do just that. In Inkscape you have to think in terms of the individual shapes on the sphere to get the effect. So while Illustrator's complex function is more intuitive it's harder to understand what it's doing because the software does it behind the scenes. Inkscape allows more hands on control at each step in creating your final image.

Hey Dude you are amazing, for some reason i cant understand what you mean by selected stroke :
"7. With your path selected do Path>Stroke to path.
8. With your path selected do Path>Break apart."


also, do you mind if i use that SVG on a comertial logo?

oh, wait now i understand, Thanks a bunch, do you mind me using the product on a logo?

I don't mind, but why not just do your own? You've got the software and the blueprint and you can make it yours with subtle changes. But if you want, it's yours to use.

Any chance of changing the colours, from a sertain section of yellow? E.g, from light yellow to Dark yellow only?

I think that's where using a set color palette will help. You could also just check the light box and no hue or saturation when you randomize, then overlay a yellow ellipse over the whole thing with some transparency (as I've done below).


Hopefully someone who knows how to set and use color palettes will post and let us know how to do it that way.

I found the more obvious solution to the question of yellow. If you make the fill of your mirror pieces yellow instead of white, then when you randomize you check only lightness (not hue or saturation) you can also get only shades of yellow. Using this technique (and setting the stroke of all the mirror pieces to white) I got this:

So I got a little obsessive about this because the Bezier envelope left a line out on the edge of the ball, so I manually added these lines and tried to get closer to the color scheme used in the illustrator tutorial. I'm pretty sure this is the last image from me on this.

Great tutorial!

I achieved a similar effect as the bezier envelope extension awhile back by exporting a sphere made in Blender to Inkscape.


I wrote a short tutorial about this recently

Might be a bit overkill to suggest learning Blender, but might work better for some people

Thanks for the tutorial llogg.

I was actually thinking about making this a screencast topic the other day since this has been a topic of interest from some of our viewers. I may just point them here instead. I'm actually interested in other ways to make meridian lines on a globe or sphere. Seems like a properly scaled series of ellipses with a little perspective added would give it a bit of realism and something a little more accurate, at least along the lines of hellocatfood's Blender model. As soon as I can muster some time I'll post back here with my findings.

I read a lot of Photoshop and Illustrator tutorials where the authors have used the extrude or revolve tool. Would that be great if Inkscape had a powerful tool like that? I know I'd use the heck out of that thing.

hellocatfood -- nice looking disco ball. I followed your link but only got the text tutorial. Did you mean just going from blender to inkscape generically or did you actually have a tutorial about your disco ball from blender to inkscape? I'll admit I've never managed to get off square one with Blender. It just confuses the heck out of me to where I don't even know where to begin.

heathenx -- Thanks for looking. I really have learned a great deal from all your screencasts and I hope you keep it up. If you find a more realistic way of dividing up a sphere I'd love to see it. As you can probably tell from the way all my images suffer from terrible lighting issues, I tend to think almost strictly 2D, so I'd probably wear such a feature out using it as a crutch for my own poor visuospatial understanding.

Oh crap, in my head I wrote about it.

I'll write up a short tutorial on how to do it.

As for learning Blender, these tutorials really helped me quite a bit http://www.youtube.com/user/super3boy

thanks, hellocatfood.

heathenx -- I just had an idea on how to get the realism you're after. It's a bit more laborious but might work. When I get home I'll try it out and let you know how it goes. Basically, instead of using a grid you use evenly distributed lines and ellipses with the long axes perpendicular to your lines. Combine the ellipses and lines into one path then use that in your Bezier envelope.

edit -- didn't work. heathenx, you said "meridians" but I think you meant "meridians and parallels", right? You can use a group of parallel lines instead of a grid to make the meridians, but I'm having a hard time getting anything to work on making the parallels.

@llogg

I am an engineer in "real life" and in one of my drafting classes in school I was taught a way to make meridian lines on a sphere by projecting circles and lines from a top view or front view. Of course that was nearly 15-20 years ago. I wish I could remember how to do it since it would come in handy now. I have a feeling that it is not that difficult to do. Everything now seems automatic so trying to understand how one would go about making these manually has been tricky.

PS. Meridians, parallels, not sure of the proper terminology but I think you know what I mean anyway.

Did a few further experiments with focusing on the interpolate function.

Sorry if the image is a little big. The top row is trying to get the parallels. I started with the circle, converted to path and added nodes until I had 32 equidistant nodes. I then subtracted nodes to end up with the bottom path on the far left. I then duplicated it and resized proportionately down to get the top path on the left. Selecting these two paths and doing effects>generate from path>interpolate I did a series of experiments by changing the exponent value in the interpolate dialog. The numbers correspond to the exponent used for the same colored result. The exponent for a perfect semicircle is between 1.2 and 1.3 but we only get two significant digits.

The bottom row is getting the meridians. I took a semicircle path and a straight line path and did interpolate (exponent zero). Then duplicated this and combined them to get the center path. Then duplicated, rotated, and combined to get the right hand path.

I'm about out of ideas on how to get the parallels, so I'd appreciate any suggestions.

@llogg

Your steps look pretty good. The second to the last image looks right on to me. Unfortunately, I still haven't had time to play with spheres. Too buried in work. Story of my life.

I've finished the tutorial on making a disco ball using Blender and Inkscape together. Take a look.

I hope it's useful!

hellocatfood wrote:I've finished the tutorial on making a disco ball using Blender and Inkscape together. Take a look.

I hope it's useful!

Excellent!

hellocatfood wrote:I've finished the tutorial on making a disco ball using Blender and Inkscape together. Take a look.

I hope it's useful!

that's fantastic. I'll have to give it a whirl this evening and see if I can make some headway in Blender.

Hmm.. When I do the Grid in step 5 of Part I, the horzizontal grid lines show up below and to the right of the square. Is this a new bug? Oh - it was reported quite a while ago.

Kjohrf wrote:When I do the Grid in step 5 of Part I, the horzizontal grid lines show up below and to the right of the square.

SInce you are using 0.47pre you have other possibilities to construct a grid:

1. Use the extension 'Render > Cartesian Grid'. Has tons of options…
2. draw a rectangle as first upper right corner of the grid and apply the Path Effect 'Construct grid'. You can resize it 'Live' and alter the number of columns and rows. Once you have it adjusted, use 'Path > Object to Path' to get a regular grid.

hth, ~suv

Hi all,

I wrote an extension to render wire-frame spheres, which may help you with this kind of thing. Read all about it at the Launchpad report: https://bugs.launchpad.net/inkscape/+bug/461964

Summary of capabilities here: http://launchpadlibrarian.net/34456048/Wireframe%20sphere%20tutorial.svg

Guest wrote:Hi all,

I wrote an extension to render wire-frame spheres, which may help you with this kind of thing. Read all about it at the Launchpad report: https://bugs.launchpad.net/inkscape/+bug/461964

Summary of capabilities here: http://launchpadlibrarian.net/34456048/Wireframe%20sphere%20tutorial.svg

That is absolutely brilliant! Can't wait to try it out. Now I don't have to figure it out for myself. Thank-you very much.

That really looks perfect. Can't wait to try it. Anyway to add it without waiting for it to be included in an official release?

Guest wrote:Hi all,

I wrote an extension to render wire-frame spheres, which may help you with this kind of thing. Read all about it at the Launchpad report: https://bugs.launchpad.net/inkscape/+bug/461964

Summary of capabilities here: http://launchpadlibrarian.net/34456048/Wireframe%20sphere%20tutorial.svg

This looks great!

Two questions...

1) Now that I have the .py file, how do I install it? I put it in the python/Lib directory. Do I do something else? I'm on WinXP if that matters.

2) To use the extension, do I make a circle, select it, then run the extension?