SVG Sector Maker

[bipper]

Hello, I'm a long time amateur user of Inkscape on Ubuntu.

I've written a simple Javascript webpage to generate circle / polygon sectors and concentric cirlces /  polygons which can be imported into Inkscape.

It can also do some fancy petal type polygon things.

http://www.raincloud.co.uk/svg/svgSector_C.html

The page will run offline also, I have uploaded it to the main Inkscape webpage as a zipfile under SVG Tools in the gallery.

I'm new to Javascripting, and not clever enough to write is as a python extension yet

Thought it might save someone time if they are drawing these things manually.

Thanks Matt.

[brynn]

Welcome Matt!

I saw your upload on the website.  Some of what you're doing is close to some new features that I would just love if someone could make them.  For some reason, I enjoy working on abstract but symmetrical designs in circles.  So maybe I can use your tools.  But often I want to move objects inwards toward the center of the circle, or outwards radially, but still keeping in a concentric circle.

There are a couple of tools that can help put things into a circle, but that's not my problem.  I want to move things which are already in a circle, inward and outward radially.

I certainly don't have the ability to create such a feature, but I certainly crave it!

[bipper]

Hello Brynn,

I think I know what you mean. (or maybe not ! )

It's fairly easy to put simple shapes such as circles and rectangles on the points of a imaginary polygon.

To pack them around so they just touch, would require calculation of a circle chord and use that to set the shape size, sort of similar to pattern on path which is a bit more difficult.

I've attached an example of some circles on concentric circle arc points.

[brynn]

That image sort of represents the function that I want.  What I want to do, is starting with, let's say triangles (I want to say "isoceles" but whatever it's called when 2 of the sides of the triangle are the same length and 2 of the angles are the same) which are arranged in a circle, with their smallest angle pointing to the center of the circle.

I want to move all the triangles closer to the middle of the circle, which means the other 2 points of each triangle are getting closer and closer to each other, as the imaginary circle which they are aligned on is getting smaller and smaller.  Or move them outward, with the imaginary circle getting larger, but still concentric.

I edited your file a little bit, to help illustrate.  I made all the inner circles red and the outer circles blue.  So what I want to be able to do, is move all the red circles to where the blue ones are.  Or move all the blue ones to where the red ones are.  Or anywhere else, so that the imaginary circle which they are aligned on, is getting concentrically larger or smaller.

I've tried all kinds of ways to this with inkscape, and there are a few different ways.  But they all are moving the objects one at a time, and snapping them to something, usually a guide/circle intersection.  I want to move them all at once.

Interestingly there already is a way to do it with nodes!  So it doesn't seem like that much of a stretch to do with objects.

I was just experimenting on your webpage.  Did you make the circles (I mean in the SVG file you attached) with it?  Or did you add the circles with Inkscape?  Hhm, if I make the arc radius smaller than 50, it draws an unwanted polygon.

If you wouldn't mind some feedback, a button to clear the canvas of the last configuration would be nice.  I was refreshing the page each time.  But undo button would be nice

Oh yeah, I could definitely use that for some of my drawings.  For some reason, I find myself working with circles alot. http://inkscapecommunity.com/ic_gallery/thumbnails.php?album=15

[bipper]

Hello Brynn,

The circles were made with a click of the mouse on another version of the program which I made earlier.

The program simply puts a user defined path onto the points on the imaginary circle, dictated by the number of sectors. It then creates a series of concentric copies of the same thing.

Since circles are symmetrical in all directions they don't need to be rotated as you go round the circle. To make isosceles triangles look correct ( like the markers around the edge of a watch dial ), they would have to be rotated to always point towards the centre. This is what I am trying to work out. I'm also looking at being able to manually scale the paths with a slider to correct any touching points.

With regards to the unwanted polygon in the middle - yes I saw it. However since this program was designed mainly for the sector shape, I didn't dig too deep. I think it is is caused by an excessive number of concentric steps that don't make sense when drawing arcs.

Undo buttons, etc. Hmm, not sure if I'm up to that yet !.

I'll come back once I have something written

[brynn]

The circles were made with a click of the mouse on another version of the program which I made earlier.

The program simply puts a user defined path onto the points on the imaginary circle, dictated by the number of sectors. It then creates a series of concentric copies of the same thing.

Oh, I would love that!

Usually when I'm drawing these "round things", I start off with the Star tool.  (Are you familiar with the awesome power of that tool?  Hold Shift key while you drag a handle.)  So I might have 2 different ones which I've drawn to share their centers.  Or I might use a spirogram, or maybe just a plain circle.  Then use various path operations (like Difference or Intersection) to create unique designs.

So that's how, for example, the triangles would already be rotated and facing the center of the circle, at every point around the circle (or every object).  Actually, Inkscape does have a tool to put objects into a circle.  Object menu > Arrange > Polar Coordinates tab.  I've tried it.  It has a couple of odd quirks (well, they seem odd to me) and it does work.  But it doesn't help me with moving the objects radially.  But looking at the SVG might help you to develop the other functions you mentioned, if you understand SVG well enough.

Good luck with your plans 

Edit
Oh, perfect example.  I've just saved a file, and the sector part is made of however many sectors you configure.  So now I want to move those sectors inward or outward, to make some kind of abstract mandala, or something.

[bipper]

I never knew the star tool could do that.

I've used the shape from the star tool, to make the following example. It's very basic, but does save.

The individual rings are actually groups, so they can be easily deleted in Inkscape.

www.raincloud.co.uk/svg/Concentric_Object_Rings_C.html

[brynn]

Nice!

[bipper]

I've made a bit of progress on the SVG rings page.

It now has basic mouse driven functionality, position with the mouse and click to place. Each placed ring is in its own group in the svg.

I hope to solve a few problems to enable scaling, user import for paths and more accurate rotation. Also an undo feature.

The created paths do have a transform applied to them in the SVG. I have found the easiest way to remove it in Inkscape is to use Ctrl + Shift + K, and then Ctrl + K to recombine without the transform.

www.raincloud.co.uk/svg/Concentric_Object_Rings_C.html

Matt.

[brynn]

Wow, really nice work!

Can I offer some comments?  It would be helpful on the About page (or somewhere) to include instructions.  Just an explanation for what each option does, so users don't have to use trial and error.

Fyi, for anyone who wants to test, the radial movement is controlled by moving the mouse horizontally.  And left to right gives the most flexibility, although right to left works too.

Oh, nice!  Love the Clear button!

I think there might be a problem somewhere, although I'm not sure how to explain it.  If you look at the screenshot, the angles or points on the sides of the hexagons should be touching, or about to be touching, or maybe overlapping a little.  But they seem to be rotated a bit.  The rotated option is checked on your webpage, but I can't see how to control the rotation. 


testrc.png
(22.43 kB . 530x471)
(viewed 748 times)

If I don't have Rotate checked the hexagons appear to be aligned properly.  But it's still not clear how to control the rotation.

Ok, so playing with the Half Scale button, and I changed Sectors to 8 and switched to the Diamond shape.  Without Half Scale, they diamonds are all right-side-up diamonds.  But with Half Scale checked, it not only makes everything smaller, 4 of the diamonds are still right-side-up, but 4 are rotated and appear as squares.


test-rc.png
(35.22 kB . 517x468)
(viewed 730 times)

OH!  Does the Rotate option mean rotate the objects individually?  I was thinking it meant rotating the whole circle (of objects).  Well if it means rotate individually, then I think that means your hexagons are not symmetrical.

Oh I'm going to have so much fun with this!  Is there any way to make corners snap?  I'm finding it hard to make corners meet without overlapping or not quite meeting.  Of course, providing snapping means also providing a way to disable it, haha.  There could be no end to this!  But it would be so awesome to have this as an extension!  SO awesome!!  Then maybe Inkscape's snapping could be used?

How would you feel about making this into an extension?  Are you able to do that?  I've made a feature request for this in Inkscape (a while ago, I mean).  If you don't have the skills, I was thinking I could post a link to your page in the feature request.  Then maybe someone who does have the skills could use it and make an extension with it.

Another cool thing would be if we could import shapes somehow - from Inkscape or wherever.  I think you said there's a version of this which can be downloaded and installed?  I guess it might be easier to import shapes to the installed version, compared to importing to the webpage.  But I don't really know.

Just noticed Paw Prints - really cute.  But they don't rotate like the other objects.  Instead, with Rotate, the paw prints go around in a circle.  Well, I guess a screenshot would be better to explain.  Instead of all pointing inwards or outwards, they "walk around" in a circle.

Hhm....  I think either the stars are not symmetrical, or maybe the rotation is off by a little bit.  Here's a screenshot using the star shape with 9 sectors.  You can see that the nodes are off, in a similar way that the hexagons are off.  I thought it was the object itself wasn't symmetrical.  But it could be the rotation angle is off -- I'm not sure which, or maybe it's something else?


testrcp.png
(40.37 kB . 943x440)
(viewed 747 times)

Just re-reading my message, and re-testing the Half Scale option.  Just to be clear, whether the Rotate option is checked or not, Half Scale rotates the diamonds.  Yes, Half Scale seems to enable rotation, at least for the 3 or 4 shapes I tested.

Question about the Radius option.  Am I correct that it's just there so you know where to stop dragging the mouse, in case a particular radius is needed?  Because using the spinbox doesn't work.  Whether nothing is on the canvas, or if you've already created something, the Radius spinbox doesn't seem to do anything.

Another comment.  I would suggest making all the objects the size of the diamond.  Because the half scale squares or stars (and other things) are too small to really work with.  And since everything can be scaled in Inkscape, maybe there's no reason for them to be so small?  Or is there a reason?

One more thing I noticed.  With Point Circles enabled, and Rotation also, the point circles appear not to be centered.  I was thinking the point circles must represent the center of the objects.  Or maybe the point on the imaginary circle where the object lies?  Well whatever it is, there might be a problem there, see screenshot.


test-rcp.png
(28.33 kB . 382x371)
(viewed 719 times)

Really nice work, Matt 

[bipper]

Hello Brynn,

I have updated the page at the same link

http://www.raincloud.co.uk/svg/Concentric_Object_Rings_C.html

Thanks for raising those points.

** Rotation
There was an error in my maths which caused an incorrect rotation ( I had to go back to things I learned in 1994 at college to fix it ! )

The other aspect to rotation as you correctly spotted, is the alignment of the object in the donor SVG. I have incorporated a manual fix ( offsetX and Y ) to correct for this as needed.

If you set the sector number to 8 and enable 'guides', the offset X and Y can be used to correct the shapes at 12 o'clock and 3 o'clock to fix any errors in an imported SVG ( a future feature I hope ).

For example, for the hexagon shape, scaling it to 2 ( so you can see clearly ) and then adding an OffsetY of -0.9 or so, corrects for the wonkyness.

In fact the hexagon and star simulate wonky SVG files which I hope to import later.

**Instructions

I have added some tooltips, hovering over the controls in the left panel should give you a clue as to what they do.

I will write a 2nd page with full instructions for the final version.

**Snap

Snapping is something I can't do, it's beyond my brain power.

**Free mouse mode

This takes a bit of getting used to - it lets you change the ring radius and rotate the ring at the same time.

********************
Remember, it's a work in progress. I hope to upload it to Inkscape.com once I have ironed out problems, and added SVG import.

Enjoy.

Matt.