October 02, 2019

About That Logo

The blog's logo is an example of using Etoys to create Turtle Graphics. Many objects have a pen use category in their viewer. With "pen down" set to true the objects will draw lines when moved about the workspace with scripting commands. Dragging the object with the mouse will not leave pen trails but moving it with the move handle icon will. Run "clear all pen trails" to remove them from the screen. Other tiles manage pen settings.

Playfield objects such as the world object have a category called pen trails with tiles for managing pen use in all objects within the Playfield's bounds. Pen trail drawings may also be captured and assigned to graphic variables or to a Sketch object. You can manage pens entirely with Etoys tiles but I wanted the script to do something there was no tile for and added some smalltalk code.



The logo was drawn using a small Ellipse object.  The "reset" script initializes the Ellipse's heading, script variables and location and clears any previously drawn pen trails.


The "drawTri" script creates the drawing. The Ellipse is moved forward by the value in variable "l" and then is turned by the value in variable "ang". Variable "l" is increased by 2. Variable "cph" is used in the script "changeHue" which is called after the "cph" variable is checked. The "cph" variable is explained in the coding description below. These statements are repeated 90 times.
 
There are no tiles available to manipulate the pen trail's colors. The pen color is explicitly assigned. I wanted my pen trails to change colors across the spectrum. To do so I switched to coding in text. This is done by selecting the menu options in the Script Editor menu bar and selecting show code textually. You can switch back to the tile version but you'll lose any code you have typed. When you drag out the "Ellipse's pen color" tile by the assignment symbol and switch to text mode you can see that the color is expressed with an rgb value. I wanted to express it as an hsv value so I could change the hue while keeping saturation and brightness the same.


That meant I needed to bring up Squeak's system browser with ctrl- b so I could look at the Color object class. The system browser window has four columns and a tabbed display beneath the columns. The column on the far left lists all the categories of object classes available in the image. Clicking on the far left column with a middle or scroll button brings up a menu of options. There select find class... and search for Color. Select Color from the list. The other columns and the display now fill up with information. The second column holds a list of classes in the category. Color is highlighted and
the display below has split into two panes. The top pane holds the class definition and variable declarations. The bottom pane includes documentation for the class. Be warned that the system browser is editable. If you type something in the display and press ctrl-s your typing will be saved and acted apon.

Scrolling down there is some information about Color objects expressed as an hsv value. "hue            Returns the hue of the color. On a wheel from 0 to 360 with pure red at 0 and again at 360.
saturation    Returns the saturation of the color.  0.0 to 1.0
brightness    Returns the brightness of the color.  0.0 to 1.0".  Now to look for a method to set the hsv value. The third column lists method categories and the fourth column lists available methods in each category. At the bottom of the second column there are three buttons. One is for instances of the class, one is for documentation and one is for the class. I'm creating a new instance of Color not working with an instance so the class button is selected then the instance creation category is selected in the third column. The h.s.v. method looks similiar to the r.g.b. method so I have enough information to edit the script

Change the name of the script to changeHue. Replace r: 1.0 with h: self getCph. self refers to the Ellipse object. getCph gets the value of the cph variable. The first letter of the variable needs to be capitalized. It doesn't seem to matter when creating variables in the viewer because they are automatically converted but when writing your own code you'll need to do it. Replace g: 0.5 with s: 0.5 and b: 0.534 with v: 1.0. Add a period after the last parantheses so another statement can be added. The script will be repeated 90 times so to get through all the colors the cph variable needs to be increased by 360/90 each time.  "self setCph: self getCph + 4"  gets the value of variable cph adds 4 to it and sets the result to variable cph.  This construction of assigning and accessing object variables defined in the viewer are Etoys methods. Press ctrl-s to save the script. I test cph in the drawTri script to make sure it resets back to 0 if cph gets increased past 360.

After running "reset" and "drawTri", I used the grab tool to convert the pen trail to a sketch and did some post processing. I filled the background with no color(transparent),  added a light grey drop shadow and saved the Sketch as an image.






Last Updated.