Abstract Art

Put dots on page | Designing the Project | Programming | Assignments

Task

• to define the new event onDrag

• basic commands of turtle geometry, to work with buttons and to work with texts

• how to use the events defined on the page, to distinguish between the events for the turtle, page and button and to use further properties of the page

Filling the page with the dots...

This project was created in the SuperLogo environment several years ago. The project is about creating abstract patterns of dots by clicking and dragging the mouse on the page. Let's create it together in Imagine Logo. You will find that the project in Imagine Logo is easier to do than the project was in SuperLogo or in MicroWorlds environment. This will demonstrate using not only events that form by clicking on the turtle or on a button but also the events forming on the page. It is up to you how to use them...

1. There will be a button to clear the entire screen and instructions for the user on the page.
2. The turtle will draw the dots of the various sizes with the basic command dot.
3. The turtle will draw the dots in this way:
• it starts to draw dots in the place where you click on the page (the event onLeftDown) on the page
• if you drag the mouse with the left button held down on the page (the event onDrag on the page), the turtle draws dots, longer-line effects are formed by quickly moving the mouse

1. Add a new button to the page; change its caption to clearscreen and its event onPush into clearscreen. Add a text box to the page, type instructions here for the user.
2. When Imagine Logo starts, there is just one turtle named t1 on the screen; try typing the basic command dot at the command line:

? setPW 50 setPC any dot
• press <Enter> when you have typed in this command and see what the turtle does.
• press the up key arrow (on the right-hand side of the keyboard); the whole typed command will appear in the line again, press <Enter> again. The turtle will draw the dot in another colour
3. Click on the page (be careful, not on the button or text) and select Change Page1. In the Change Page1 context menu, select the Events tab and click the Add button. In the Add event dialog select onLeftDown and click OK. Type the following command:
   ask "t1 [pu setPos mousePos pd]
   This will link the position of the turtle with the position of the mouse click on your page.
   
   
   
4. This event is simple, the turtle lifts the pen up, moves into the new mouse position when the event onLeftDown is chosen (that means: when the left mouse button is pressed on the page. Finally, the turtle puts its pen down so it is able to draw dots later. Just one question could astonish us: why do you have to ask the turtle? (Try this command without this address when you click on the page. The following error message will appear – I don't know how to pu)
   The event occurs on the page, the page tries to complete the commands defined in its event. But the command pu does not exist for the page, this command exists for the turtle, therefore you have to address the turtle that should perform these commands. Conversely, although the command mousePos should be performed by the turtle, it is not defined for it. Because the turtle lives on the page, the page inherits the command mousePos according to the place where the turtle is living. The command mousePos is defined for the page and so you get the result - the place where the mouse clicks on the page.

5. Press the Add button again, select the event onDrag and type in the following command:
   ask "t1 [setPos mousePos setPC any setPW 20+random 80 dot]
   this will tell the turtle what to do if the mouse is clicked and dragged on the page.

6. The turtle first moves into the current cursor's position on the page, it then changes its pen colour (from a random selection) it changes its pen width in the same way in the range from 20 to 99 (you can do this in a similar way in SuperLogo too ; in Imagine Logo the operation any can be used, but it gives small values for the pen width – these ones can be redefined, as you will see later) and the turtle will draw the dot with this pen.
   Close the Change Page1 dialog by clicking the OK button.

7. Finally, hide the turtle by using the command
   ? ht
   

8. Try to click on the page and drag the mouse – dots in various size and colour are drawn.

Assignments

Experiment with the pen width and select the width that you like best. When generating a pen colour, note that you can mix colours. For example, the command setPC [0 0 any], or setPC [any 0 0] or setPC [0 any 0]. What colour dots do you get?

Notice that dots are not drawn when you click on the text - the event onLeftDown did not happen. This is because you have not clicked on the page but on another object. If you drag the mouse from the page to the text area you can draw either under the text or under the clearscreen button. Dots are not drawn on the borders of the page; you get lines instead. This is because the turtle is set up to wrap. To change this setting type the following command in the command line: ? t1'changeMe Select the Position tab in the Range, and select Window.  Save your project for the Web. Choose File>Save as Web project. You can now view it in your internet browser.

Download the Project

You can download an example of the finished project by clicking here.