FE 'tkGooie' Utilities
IMAGEcreators
|
FE 'tkGooie' interface for a maker of SUPER-ELLIPSE SHAPES --- with choice of 2 colors --- for foreground and background |
FE Home Page >
FE Downloads Page >
FE 'tkGooies' Description Page >
FE 'tkGooies' 'IMAGEcreatorsFlat' Page >
This
'draw_SUPER-ELLIPSE_colorFilled'
tkGooie Page
|
INTRODUCTION to I am interested in making nice images for 'toolchest' and 'drawer' backgrounds, as I have indicated on pages about These two pages were originally published in 2012 on pages titled
and
at wiki.tcl.tk/36780 and wiki.tcl.tk/36749. In doing some searches on wiki.tcl.tk with keywords including 'canvas', I ran across the page titled 'Mathematics jewels', by 'ulis'. I assembled the code from that page and ran it --- yielding the 'demo' GUI shown in the following image. |
|
These are 'super-ellipses' given by the following equation, which is a generalization of the equation for an ellipse. |x/a|^n + |y/b|^n = 1 (The numbers in the image above were not provided by the demo script of 'ulis'. I looked at the code and added the exponent numbers with an image editor.) Keith Vetter (KPV) pointed out, in a note added to the 'Mathematics jewels' page, that the 'super-ellipse' shape was used to design a traffic 'circle' in Stockholm. Below are aerial and ground views of 'Sergels Torg Square'. |
|
It turns out that the exponent 2.5 is a popular exponent to use. 'ulis' did not use it in his demo, but someone else shows it in this image of 'super-ellipses' for 7 exponents. |
|
Some people have rotated a super-ellipse (with an exponent of 2.5, or thereabout) using the shape to create egg-shaped statues like these. |
|
When the exponent is around 2.5 (and greater), the ends of the superellipse are just flat enough that the shape will stand on its end --- something you cannot do with an ellipse (n=2) or an egg. Furthermore, the shape has been used to design stadiums, like this Olympic stadium in Mexico City.
And some people, like Piet Hein, have used the 2.5 superellipse shape to design objects for the home, such as tables, vases, and salt-and-pepper shakers. |
|
It struck me that I might find some use for such images in the future --- for rounded button images, unusual 'bullet' images, and icon backgrounds --- for use in Tk GUI's or in web pages. In the wiki.tcl.tk page titled 'A two color rounded-rectangle-maker GUI', I presented a GUI for making rectangles with rounded corners (based on the work of others), but those corners are only circular. With the super-ellipse, one can get rounded buttons ranging in shape from ellipses (n=2) to rounded corners approaching arbitrarily closely to sharp corners (n > 10). But there was obviously little control on the 'demo' GUI of 'ulis' --- not even a button. GOALS for this GUI Color control: I will probably not need 8 super-ellipses at a time (like in the 'ulis' demo) --- one super-ellipse at a time will usually be sufficient. But I would like to be able to control the colors. There are 2 main colors that I would like to control --- the 'fill' color of the superellipse and the background (canvas) color. Exponent control: Of course, there should be a way to specify an exponent for the super-ellipse to be drawn. Size control : It would be nice to have some size control. For example, it would be nice if whenever one changed the window size of the GUI, the canvas would change to fill the new window size --- and the superellipse would change to fill the new size of the canvas. To simplify the GUI somewhat, rather than providing widgets with which to enter values for parameters 'a' and 'b', I decided to determine 'a' and 'b' from the dimensions of the canvas. That is, you can 'squash' the canvas either horizontally or vertically to make b > a or a > b. Of course, if it turns out that it would be nice to be able to specify an essentially unlimited range of values for 'a' and 'b', one could add a couple of widgets to the GUI. Drawing technique: In the 'ulis' demo script, he drew the superellipses by creating 'photo' images and filling in the shape 'a pixel at a time'. He used a color algorithm that gives a gray to black shading toward the outer edge of the superellipse. I decided to draw the ellipse like the 'gradient buttons' were drawn in the wiki.tcl.tk page titled 'A color-gradient-button-maker GUI' and its successors --- that is, with 'create line' commands on the canvas, to draw entire lines of pixels 'at a time'. It seemed to me that the drawing might proceed faster by doing a line at a time rather than a pixel at a time. To keep things simple, at least in a first version of the GUI, I decided to NOT try to create the shade-to-black effect that 'ulis' generated --- at least, not at this time. SCREENSHOT of the GUI Having those goals in mind, I ended up with a GUI that looks like this. |
|
Note that I have supplied 2 buttons on the GUI with which to set the superellipse 'fill' color and the 'background' (canvas) color. Those 2 buttons call on a color-selector-GUI script to set those colors. You can make that color-selector script by cutting-and-pasting the code from the page that offers a non-obfuscated color selector GUI on this site. I used a 'minilistbox' widget to provide the choice of exponents. I have used that 'minilistbox' widget in the scripts that I posted at wiki.tcl.tk, titled:
and
As I mentioned on those pages, I got the technique for making a new widget, from existing, built-in Tk widgets, from the 'spinner' widget of Richard Suchenwirth that he presented on the wiki.tcl.tk page titled "spinbox". As he described it, the 'spinner' is "a concoction of a 1-line high listbox with two tiny buttons, to approximate the effects of a spinbox.". My 'minlistbox' widget is more like a 3-line listbox, and I had to enhance Suchenwirth's demo code with font variables and width variables and other parameters. As I mentioned on the wiki.tcl.tk page titled 'A two-color rounded-POLYGON-maker GUI (equilateral and not so equilateral)', I may extract the 'minilistbox' code someday and put it in a simpler demo script, like Suchenwirth did with his 'spinner' proc. For now, people who want to use this 'minilistbox' --- or make a similar widget --- can extract the proc and the calling code from this much larger script. DESCRIPTION OF THE CODE Below is the code that produced this GUI. There are comments above the sample code, in a section titled 'USING THE GENERATED IMAGE', that describe how one could capture and make use of images produced by this GUI. I follow my usual 'canonical' structure for Tk code, for this Tk script: |
0) Set general window & widget parms (win-name, win-position,
win-color-scheme, fonts, widget-geometry-parms, win-size-control).
1a) Define ALL frames (and sub-frames).
1b) Pack ALL the frames.
2) Define & pack all widgets in the frames.
3) Define keyboard or mouse action BINDINGS, if needed.
4) Define PROCS, if needed.
5) Additional GUI initialization (typically with one or more of
the procs), if needed.
|
This Tk coding structure is discussed in more detail on the page A Canonical Structure for Tk Code --- and variations. This makes it easy for me to find code sections --- while generating and testing this script, and when looking for code snippets to include in other scripts. To make the 'minilistbox' widget to be used in step (2), I essentially inserted a new step: |
1c) Define any procs to be used in making widgets.
|
Experimenting with the GUI As in all my scripts that use the 'pack' geometry manager (which is all of my scripts, so far), I provide the four main pack parameters --- '-side', '-anchor', '-fill', and '-expand' --- on all the 'pack' commands for the frames and widgets. I think I have found a good setting of the '-side', '-anchor', '-fill', and '-expand' parameters on the 'pack' commands for the various widgets. In particular ... The 'canvas' widget expands/contracts appropriately when the window size is changed --- and button and label widgets stay fixed in size and relative-location as the window size is changed. If anyone wants to change the way the GUI configures itself as the main window size is changed, they can experiment with the '-side', '-anchor', '-fill', and '-expand' parameters on the 'pack' commands for the various widgets --- to get the widget behavior that they want. --- Additional experimentation: You could change the fonts used for the various GUI widgets. For example, you could change '-weight' from 'bold' to 'normal' --- or '-slant' from 'roman' to 'italic'. Or change font families. Furthermore, there are variables used to set geometry parameters of widgets --- parameters such as border-widths and padding. Feel free to experiment with those parameters as well. Features of the code There are plenty of comments in the code, to describe what most of the code-sections are doing. Since I used a 'create line' technique instead of the 'create image' technique of 'ulis', I did not use his drawing code. Instead, I devised a totally new drawing proc that I called 'ReDraw'. When I finally worked all the bugs out and got a first superellipse image up, I noticed that there were noticeable 'jaggies' at the rounded corners of the superellipse (for n=3, at least). That led me to add an 'AntiAlias' checkbutton to the GUI and to try to use tiny line segments at the edges of the superellipse (with 'fill' color an average of the superellipse fill color and the canvas background color). Adding the (preliminary) anti-alias code to the 'ReDraw' proc makes the code rather complicated looking. (The anti-alias code did not improve the edge of the ellipse much --- and some further experimentation with this technique did not yield good results. I will remove that anti-alias code --- and the checkbox on the GUI --- if I update this code in the future. Since high-resolution monitors are becoming available, it may suffice to use this utility on hi-res 'retina display' monitors --- and thus get fairly alias-free ellipse edges.) Comments in the Code The copious comments might help Tcl-Tk coding 'newbies' get started in making GUI's like this. Without the comments, the code might look too cryptic, and potential young Tcler's might be tempted to return to trying Facebook on their iPhones. The Tcl-Tk CODE
Here is a link to CODE for the Tk script Experiments in anti-aliasing with 'create line' Below is an image that shows the almost unnoticeable effect of supplying a 'radius=1-pixel' anti-alias technique (with one color betwen the superellipse color and the background color). I may return to the code someday to try formulate a radius-2 or radius-3 anti-alias technique --- done with tiny 'create line' segments. (I tried it. It did not work out as nicely as I had hoped.) |
|
You could download this image and use an image-viewer to look at a blown-up image of the edges of this superellipse, so that you can see that there really ARE 'anti-alias' pixels around this superellipse. In fact, it turned out to be quite tricky to get a smooth, symmetric 'layer' of anti-alias pixels around the superellipse --- on the northwest, southwest, and southeast quadrants as well as the northeast quadtrant. It turns out that 'create line' does some 'funny' things at the ends of a line segment. (It draws the pixel at one end of the line, but not the other end --- probably to avoid drawing some pixels twice when drawing a sequence of line segments.) I may document that 'pathology' (with blown up images) on another wiki page in the near future --- along with a disussion of the implications for anti-aliasing and color-shading with 'create line'. Possible CHANGES/ENHANCEMENTS I may return to this script and remove the 'AntiAlias' checkbutton --- and use a 'scale' widget in place of the 'minilistbox' widget. By using the 'scale' widget, I could allow the user to choose from many more exponents --- and from a much more closely spaced set of exponents. Also I may gain some real estate on the GUI by putting color on the 2 color-buttons --- instead of indicating the colors in a label widget to the right of the 2 color-buttons. I could use that real estate for the 'scale' widget. IN CONCLUSION It appears that one could make some interesting 'button', 'bullet' and icon-background images with this utility. And I have the option of enhancing the Tk script on this page, to provide a few more capabilities to this super-ellipse generator. On the other hand, I have attained much nicer 'edge-shading' results by using 'create image' instead of 'create line'. A GUI for creating a super-ellipse using 'create image' can be seen at the page Draw SUPER-ELLIPSE ColorShaded 3D on this FE web site. See the 'IMAGEScreateShaded3D' group of 'tkGooie' scripts for other scripts of that type --- geometric figures with color-shaded edges, done by using Tk canvas 'create image'. |
|
Bottom of this page for
To return to a previously visited web page location, click on the
Back button of your web browser a sufficient number of times.
OR, use the History-list option of your web browser.
< Go to Top of Page, above. >Page history: The code was created in 2012 --- and posted 2012 Sep 11 at http://wiki.tcl.tk/36942.
This FE web page was created 2014 May 15 ---
as a backup and alternative to the wiki.tcl.tk page.
NOTE: |