FE 'tkGooie' Utilities
'IMAGEcreators
|
An FE color-shaded, 3D-like 'Super-Ellipse' making 'tkGooie' interface. |
FE Home Page >
FE Downloads Page >
FE 'tkGooies' Description Page >
FE 'tkGooies' 'IMAGEcreatorsShaded3D' Page >
This 'draw_SUPER-ELLIPSE_colorShaded3D' tkGooie Page
|
INTRODUCTION I am interested in making nice images for 'toolchest' and 'drawer' backgrounds (and other GUI embellishments), as I have indicated on pages at wiki.tcl.tk titled (and on this freedomenv.com site) --- such as and On the wiki.tcl.tk page titled "GUI for Drawing 'Super-ellipses', with color options and other controls", I presented code for a GUI that uses 'create line' on a canvas to implement the drawing of a 'super-ellipse' with quite a bit of user-control over size and shape of the super-ellipse and over color --- both of the super-ellipse and the background. That page was based on the wiki.tcl.tk page titled 'Mathematics jewels' provided by 'ulis', where he pointed out that 'super-ellipses' are given by the following equation, which is a generalization of the equation for an ellipse. |x/a|^n + |y/b|^n = 1 Some interesting applications of the superellipse when n=2.5 are seen in images collected on the wiki.tcl.tk page titled "GUI for Drawing 'Super-ellipses', with color options and other controls". Unfortunately, the 'create line' technique on that page was plagued by 'jaggies' --- and in some experimenting with 'Gaussian blur' of various (high) degrees, I have found that trying to get rid of the jaggies by using 'blur' is not very satisfactory. To totally remove the jaggies, the blur needs to be of high-degree --- but that tends to spread out the edge of the superellipse, rather than blurring it to a 'crisp' edge. --- The following image shows the super-ellipses that 'ulis' drew with his demo script --- using 'create image' rather than 'create line' on the Tk canvas. Note that there were no controls on the GUI with which a user could control various parameters --- such as the shape of the super-ellipse(s), their sizes, and the colors being used. Those kinds of controls are what I was aiming to provide. |
|
Below is another image in which I have added numbers indicating the exponent 'n' that was used to draw each super-ellipse. |
|
I noticed that the 'image create' technique that 'ulis' used seemed to give pretty crisp edges. But there was obviously little control on the 'demo' GUI of 'ulis' --- not even a button. He was using a single background color (off-white) and he effectively was adding shading to the edge of the superellipse with one color (black) --- and the superellipse color was set at a single color. I wanted to keep the color, exponent, and size controls of my superellipse 'create line' GUI --- but I needed to change the 'ReDraw' proc to use an 'image create' technique like 'ulis' used. Unfortunately, the code of the 'jewel' proc that 'ulis' used was not documented clearly --- and 'ulis' was prone to use some programming techniques that are rather 'unusual' to say the least --- such as his 'double-dollar-sign' method --- as in $($c). In fact, on a couple of his pages of this wiki, some people have pointed out that his techniques were prone to lead to readability problems, if not problems with failures in various versions of Tcl-Tk. In the 'ulis' demo script, he drew the superellipses by creating 'photo' images and filling in the shape with 'put' commands. So I set about to use that method, but starting from a 'clean page'. I have to admit that my first attempts needed about 4 seconds to draw the superellipse, whereas the 'ulis' demo came up in a fraction of a second. I found that even though I had tried to make sure that I was not doing too much unnecessary math in a double-loop over x and y, I was still getting slow draws. I even tried reducing the number of 'put' commands to one for each scan-line. I finally found that most of the problem was that I should be using braces with 'expr' statements --- as Brent Welch et. al. point out by page 7 (very early in the book) in the 4th edition of 'Practical Programming in Tcl and Tk'. So, finally, I was able to do a drawing of a superellipse, like that in the following GUI image, within a second --- and I was getting better shading at the edge of the superellipse than I got using the 'create line' technique combined with anti-aliasing via 'blur' in an image editor. |
|
Note that I have supplied 2 buttons on the GUI with which to set the superellipse 'fill' color and the 'background' 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 script at the wiki.tcl.tk page (and a page at this freedomenv.com site) titled and the page titledAs 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 'spinbox' page at wiki.tcl.tk. 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 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 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 frames and sub-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 Tk code structure 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 (code re-use). 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 100-plus Tk 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 of this GUI. 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. For example, you may want the checkbutton widget to stay in the middle of the window rather than being on the left of the window, near the 'minilistbox' widget. ---
Additional GUI experimentation: 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. Some features of the code There are plenty of comments in the code to describe what most of the code-sections are doing. (Sorry if they are not always clear --- and sorry if some of the comments describing code were not changed when the code was changed.) I used a 'create image' technique --- with 'put' commands --- somewhat like in the 'jewel' proc of 'ulis' --- I think. Since I found it difficult to decipher what his several loops were intended to do, I devised a quite different superellipse drawing proc that I called 'ReDraw'. When I finally worked all the bugs out and got a first SHADED superellipse image up, I was pleased to note that I had indeed avoided the 'jaggies' that I was getting with the 'create line' method. Furthermore, I was getting a 'crisper' edge than I was getting from applying high-levels of 'Gaussian blur' to the images from the 'create line' technique, where high-levels were needed to get rid of almost all traces of the jaggies. --- Comments in the Code The copious comments in the code might help Tcl-Tk coding 'newbies' get started in making GUI's like this. Without the comments --- especially in the 'ReDraw' proc --- the code might look too cryptic (as cryptic as the 'ulis' superellipse code was, and still is, to me). Without the comments, potential young Tcler's might be tempted to return to their iPhones and iPads --- to watch videos of people doing things they should not try at home. The Tcl-Tk CODE
Here is a link to CODE for the script With your web browser, you can 'right-click' on this link --- and in the menu that pops up, select an item like 'Save Link Target As ...' --- to save this file to your local computer. Then you can rename the file to remove the '.txt' suffix. Make sure that you have execute permission set on the file --- in order to execute the script. MORE SCREENSHOTS Below is an image that shows that the 'jaggies' return with a vengeance when the 'Shading' checkbutton on the GUI is un-checked. |
|
(For a little variety, I changed the superellipse color from magenta to red and the background color from black to white.) Below is an image for large n (n=22) that shows that one can get quite pleasing rounded and shaded buttons for use in Tk GUI's and web pages, by using this Tk GUI utility. |
|
So it appears that one could make some interesting 'button', 'bullet', icon-background, and logo-background images with this utility. Possible Enhancements I have the option of enhancing the Tk script on this page, to provide a few more capabilities to this superellipse generator --- such as adding a 3rd color button, to allow for shading at the edge of the superellipse with a color other than the background color. Furthermore, I could add a couple of scale widgets to the GUI, to allow for setting the 'a' and 'b' parameters of the superellipse formula more directly --- instead of setting them by resizing the window. And I can adjust a 'pow' exponent --- for color-shading-control rather than edge-shape-control --- to change the 'intensity' or 'extent' (or 'extensity'?) of the shading at the edge of the superellipse. A widget could be added to the GUI to allow the user to easily set that 'extensity' exponent. I really want to add that 'pow' control someday. (I may add that widget to other 'follow up' Shaded3D utilities that I write after this utility.) |
|
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 Oct 01 at http://wiki.tcl.tk/37004.
This FE web page was created 2014 May 10 ---
as a backup and alternative to the wiki.tcl.tk page.
NOTE: |