FE 'tkGooie' Utilities IMAGEcreators 'Flat' group Create Images with COMPOSITE FUNCTIONS (FE = Freedom Environment)

FE 'tkGooie' interface for a maker of various images (gray-shaded or color) using COMPOSITE FUNCTIONS --- with composite functions selected from a listbox on the GUI

FE Home Page > FE Downloads Page >

FE 'tkGooies' Description Page >

FE 'tkGooies' 'IMAGEcreatorsFlat' Page >

This 'createImages_withFunctions' tkGooie Page

INTRODUCTION to Tcl-Tk code for a GUI to 'Create Images with (Composite) Functions --- an enhancement of Suchenwirth's utility at wiki.tcl.tk/3523.' I am interested in making nice images for 'toolchest' and 'drawer' backgrounds, as I have indicated on pages about making embellished toolchests and making color-gradient backgrounds for buttons. 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, I ran across the page titled "Functional imaging", by R. Suchenwirth. I assembled the code from that page and was impressed by how quickly it could generate images from one or more functions that work singly or together to map the pixels in a rectangular canvas into colors or shades of gray. There were over 40 (composite-)functions on that page (from R. Suchenwirth, D. Fellows, and one or two others) that I might like to try out --- someday. I am using '(composite-)function' to indicate either a single function f(x,y) or a compound function, like f(g(x,y)), f(g(h(x,y))), ... The demo GUI at the page titled "Functional imaging" used a stack of 'button' wdigets on the left of the GUI to present (composite-)functions that will draw into a canvas on the right side of the GUI. But that stack of 'button' widgets limits the number of (composite-)functions, that can be conveniently and quickly run, to about 15 or 20. So I decided to change the GUI to use a 'listbox' instead of buttons, and to put all 40-plus donated (composite-)functions into the GUI. Here is an image (reduced from actual size) that indicates the GUI that resulted.

You can see an actual-size image of the GUI near the bottom of this web page. DESCRIPTION OF THE CODE Below is the code that produced this GUI --- including ALL the donated (composite-)functions from Suchenwirth's "Functional imaging" page. I follow my usual 'canonical' structure for Tk code, for this Tk script:

  0) Set general window parms (name, position-size, color-scheme,
     fonts, etc.).

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

  2) Define & pack all widgets in the frames.

  3) Define key/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 'listbox' widget and the 'entry' widget and the 'canvas' widget expand/contract 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 GUI experimentation: You might want to 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. In fact, you may NEED to change the font families, because the families I used may not be available on your computer --- and the default font that the 'wish' interpreter chooses may not be very pleasing. I use variables to set geometry parameters of widgets --- parameters such as border-widths and padding. And I have included the '-relief' parameter on the definitions of frames and widgets. Feel free to experiment with those 'appearance' parameters as well. Some features of the code There are comments at the top and bottom of this sample code that describe how anyone could add to the (composite-)functions. I should point out that one other major change that I made compared to the code at Suchenwirth's "Functional imaging" page (besides the change from buttons to a listbox) is I changed the names of the procs used to make the (composite-)functions. Most of the 'transform'/'mapping' procs are of 3 types: point-to-color color-to-color point-to-point In function composition, like f(g(args)), it is essential that the output of g is of a type compatible with the input type of f. In fact, it is essential that we know both the input type and the output type of f and g. To make the input and output types of the procs (presented to the user in the listbox) clear, the name of each proc is prefixed by an input-TO-output indicator. Example proc ('function') prefixes: 'xyTOchex_' - an xy point is mapped to a hex-color 'chexTOchex_' - a hex-color is mapped to a hex-color 'xyTOxy_' - an xy point is mapped to an xy point 'raTOxy_' - a polar point (r,a - radius,angle) is mapped to an xy point 'fTOchex_' - a floating point number is mapped to a hex-color '0or1TOchex_' - a one-digit binary number (0 or 1) is mapped to a hex-color 'fgxyTOchex_' - 2 funcs, indicated by f and g, evaluated at xy, map to a hex-color Example: Proc 'xyTOchex_bwCheckers' maps an xy point to a hex-color, to make a black-and-white checkerboard pattern. That said, here's the code --- with plenty of comments to describe what most of the code-sections are doing. Since some of the coding techniques here are rather esoteric, 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 'createImages_withFunctions_ wiki3523_ chgButtonsToListbox_ prefixFuncNames.tk'. Some POSSIBLE ADDITIONS/ENHANCEMENTS User-friendly (composite-)function names If I re-visit this code, I will probably replace the (composite-)function names in the listbox by more user-friendly names --- and use those user-friendly names to determine the image-creation proc(s) to use. For example, in the GUI image above, you can see the name 'o xyTOchex_colorGradient {xyTOxy_rippleRad 8 0.3} {...' chosen from the listbox. I would probably change that to a string like 'colored SWIRL of ripples'. In other words, I will get rid of the 'o' operator and the braces --- and shorten the proc-names by removing the input-TO-output indicators. And multiple levels of procs (a composite of procs) will be replaced by a single descriptive name --- describing the output image. There is really no need to put the actual proc name(s) used in the listbox --- however it would be nice to supply some of the parameters that can be used to vary the effects. It may be a challenge to come up with a good way of handling input parameters --- however, their initial values (or the entire composite functions) may simply be listed after the 'user-friendly string' The user could then change any of the parameters in the function 'entry field' --- and press Enter to draw a new image. Add more create-procs (and composite-functions) I may someday add more create-procs (from which to make more composite functions) --- and add some new image-creation options to the listbox. IN CONCLUSION Now I have a tool to do some experimenting to see what kinds of functions --- or function combinations --- make nice color-gradient images --- to use in decorating Tk GUI's. Thanks, Suchenwirth, for your many contributions to the wiki.tcl.tk site --- the Tclers' wiki. I hope you don't mind my building on your code and the techniques that you provided in your code sample. (I really had to look at some of those code statements for quite a while, and do some code testing, and re-read your comments a few times, to figure out some of the 'tricks' that you were using.) Here is one more image with which to end this page --- showing the full-size of the GUI. Nice swirl.

Bottom of this page for presenting Tcl-Tk code for a GUI to Create Images with (Composite) Functions --- 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 Aug 13 at http://wiki.tcl.tk/36786. This FE web page was created 2014 May 16 --- 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.