FE 'tkGooie' Utilities

IMAGEcreators
'Flat' group

A Tk GUI
to Draw a
SUPER-FORMULA
SHAPE

(Color Filled)

(FE = Freedom Environment)

FE 'tkGooie' interface for a maker
of SUPER-FORMULA SHAPES
---
with color selection options
for fill, outline, and
background.

FE Home Page > FE Downloads Page >

FE 'tkGooies' Description Page >

FE 'tkGooies' 'IMAGEcreatorsFlat' Page >

This
'draw_SUPER-FORMULA-SHAPE_colorFilled'
tkGooie Page

INTRODUCTION to
Tcl-Tk code for a GUI to
'Draw a SUPER-FORMULA-SHAPE (Color Filled)'

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

    • "Experiments in making embellished GUI's"

    and

    • "A color-gradient-button-maker GUI"

    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 'Superformula' of Gerard Sookahet.

I assembled the code from that page and was struck by the variety of shapes it can make with simple slider bar changes --- shapes like many-pointed stars, strange stars, starfish, petals, and snowflakes.

It struck me that I might find some use for such images in the future --- for unusual 'bullet' images and icon backgrounds --- for use in Tk GUI's or in web pages.

Below is an image of Sookahet's GUI.

GOALS for an Enhanced GUI

I found in using the GUI that some of the sliderbars, in the middle of his grouping, were more natural to try first, to start a basic shape.

Furthermore, small changes in some of the sliders would result in huge changes in the 'superformula' shape.

In other words, I found that it might be helpful to change the order of the sliders, and to give some guidance in using them.

Another feature that I would like to have is the ability to change three colors --- the 'fill' color and the 'outline' color of the shape --- and the background color (the canvas color).

Furthermore, Sookahet's script makes the 'superformula' shape by using a 400-sided polygon.

I thought it would be nice to have a sliderbar that allows the user to change the value N for the number of equi-angular wedges to be used to make the polygon.


SCREENSHOT of the GUI

Having those goals in mind, I ended up with a GUI that looks like the following.

And here is a link to the full-sized image.

Note that I have supplied 3 buttons on the GUI with which to set the 'fill', 'outline', and 'background' colors in the canvas.

Those 3 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.


DESCRIPTION OF THE CODE

Below is the code that produced this GUI.

In a comments section titled 'SOME NOTES ON THE FORMULA PARAMETERS', I have put some observations on the 6 superformula parameters --- what kind of changes to the superformula-shape you can expect for certain values and value combinations.

    (I may add a 'Help' button someday and put this information in the Help text.)

There are also 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).

  1) Define ALL frames (and sub-frames).  Pack them.

  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 (code re-use).


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.

And you could change the '-relief' values for frames and widgets.

Feel free to experiment with those 'appearance' 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.

The 'ReDraw' proc is based on GS's 'PlotSuperformula' proc.

I have added some comments in the 'ReDraw' proc that explain some of the steps in calculating the 'superformula'.

The comments might help Tcl-Tk coding 'newbies' who might just give up if the code looked too cryptic.


The Tcl-Tk CODE

Here is a link to CODE for the Tk script
'draw_superformulaShape_colorFilled_onColorBkgnd.tk'.


Another screenshot

Below is an image that shows some interesting effects you can achieve by un-checking the 'Clean Before Draw' checkbox.

(For this image,
I changed the default fill
and background colors.)

Other interesting effects can be achieved by un-checking the 'Fill' checkbox as well as the 'Clean Before Draw' checkbox.

It appears that one could make some interesting logo images with this utility.

Note that one could make the outline color the same as the fill or the background color --- or an average of the two colors, for a 'feathering' effect.

    (We could make the width of the outline a parameter on the GUI. Currently the width is set at 1 pixel. We could allow 1, 2, or 3 pixels. Four might be too thick. But what the heck, we could allow 10 or more. Some interesting effects might result.)


IN CONCLUSION

Now I have ANOTHER tool with which to make some images (bullets or icon backgrounds or whatever) for use in decorating Tk GUI's --- and decorating web pages.

Thanks to 'GS' for his many contributions to the wiki.tcl.tk site.

In particular, his 'PlotSuperformula' proc allowed me to spend most of my time on coding and testing the GUI features and relatively little time on the formula implementation.

Bottom of this page for
presenting Tcl-Tk code for a GUI to
Draw a SUPER-FORMULA-SHAPE (Color Filled)
--- a utility in the FE 'tkGooies' system,
in the 'IMAGEcreatorsFlat' group.

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.
OR ...

< Go to Top of Page, above. >

Page history:

The code was created in 2012 --- and posted 2012 Sep 06 at http://wiki.tcl.tk/36916.

This FE web page was created 2014 May 15 --- as a backup and alternative to the wiki.tcl.tk page.

This page was changed 2015 Oct 07.
(Small changes.)

Page was changed 2016 Oct 05.
(Added some links.)

Page was changed 2019 Mar 03.
(Added css and javascript to try to handle text-size for smartphones, esp. in portrait orientation.)

Page was changed 2019 Jun 14.
(Specified image widths in percents to size the images according to width of the browser window.)


NOTE:
The code here MAY BECOME more 'up-to-date' than the code posted on the Tcler's Wiki ---
wiki.tcl-lang.org --- formerly wiki.tcl.tk.