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.
Variables are added to the viewer's variable category by left clicking on the light brown icon with the down arrow on the viewer's top menu bar. The types available on the pop up list are dependent on the class of object or what main preferences have been set but there is a basic set always available. Etoys does do explicit type checking. You can replace
tiles inside scripts with variable name tiles. A green highlight appears around the receiving tile if the types match.
Some Variable Types
Variable names are alphanumeric only. I've gotten in the habit of using lowercase and capitalizing the first letter of any additional words when naming variables, scripts, objects etc. Etoys will append a number to any reserved words used in a name. Variables can be removed or modified using the options menu on the left. Be sure to remove them from any scripts before doing so. Variables can be assigned values in the viewer, in a watcher or in an assignment statement inside a script and they may be passed as parameters to other scripts.
Numbers can have up to 10 decimal points. The value display will round up if assigned to a number with more decimal points than currently set. This is something to be mindful of when doing comparisons. The round function from the script editor menu will round numbers to the closest integer. Large numbers are displayed in scientific notation. Inside scripts, number variable types can be increased, decreased or multiplied by a value or assigned a value, the result of an expression or another variable. Tiles inside expressions can be replaced with number type tiles.
The Point type is a bit specialized. Points describe an x and y location and are assigned in the form 0@0. They can be increased, decreased and multiplied by another point value but cannot be used in expressions and can only be compared for equality.
The String type can be assigned alphanumeric characters from the keyboard or character strings inside other objects. Strings are immutable meaning that strings cannot be altered through expressions and are replaced completely when reassigned. They can only be compared for equality. However some objects have methods for manipulating strings. See Objects that Contain Collections for more information.
The Player type can be assigned objects in your project. Etoys documentation often refers to objects, morphs and players. All are object classes and there are distinctions between them but for the user, player is the most relevant term to scripting. When you create a player type variable you'll see a black dot inside the value display. A little black dot does exist hidden up in the top left hand corner of the main menu bar. This dot is the default value for player variables. Any tile containing the word dot can be replaced with an object reference tile. Inside the viewer you can assign a value by clicking on the image in the value tile and selecting an object on screen with the cross hair. Or drag the variable tile out by the assignment symbol and drop. The value tile now says dot. Right click on the desired object and click the orange rectangle halo icon to get a reference tile and replace dot with it. That object's properties, methods, scripts and variables can now be accessed using the variable. This is a very powerful feature better demonstrated than explained. See Dynamically Creating Sibling Objects for an example.
Color variables display the current color of the object and must be assigned with the color picker. They can only be compared for equality. To manipulate object colors use numeric properties in the color category instead.
The graphics type is useful for Sketch objects and can be used to change costumes for animation. Assign inside scripts by clicking on the image value and selecting an object on the screen or assign a pen trail graphic from the world or a Playfield object to a Sketch's graphic property.
Other variable types are assigned through drop down lists and can only be compared for equality. Boolean types are either true or false. ScriptName variables can be used to replace values in tiles from the scripting category.
Any variable type can be passed to another script as a parameter but scripts can accept only one parameter. It's name in the script is it's type so make sure you select the correct type in the script editor menu. Clicking the parameter name in the script editor menu gives you tiles that you can use in your statement tiles. This is the one serious limitation in the tile scripting system. If you are really determined to have multiple parameters you can pass a holder containing the values you want and fetch them out of it but this won't usually work well if you're using recursion to send a parameter in an expression.
Remember when I was going on about how all the objects in your project are instances of objects inside an instance of a world object? That means that all objects are local to the world object. Variables can be modified by scripts belonging to any object including the world object. That doesn't mean however you shouldn't think about scope. Even though you can define variables anywhere you like, scripts and variables you intend to share with sibling objects must be defined inside siblings. I try to define variables all objects might use inside the world object (global scope) and define others in relevant objects (local scope). If you intend to define a constant value, it might be good to remind yourself by prefacing the name with const such as constVariableName. It does make it a little more difficult to explain the concept of scope to a novice because it takes discipline to practice. Discipline I often lack.
