Thursday, November 08, 2007

making pong in etoys

This is a long-ish blog with lots of screenshots because I wanted to explain in detail how to make a game in etoys for someone who is relatively new to using it.

It's best to use the OLPC etoys image of etoys squeak, which is now superior to the version on the squeakland site: install instructions here This tutorial matches the OLPC image version of etoys, it would be hard to follow all the detail of it if using the Squeakland version.

Saving and reloading: You can save your project by clicking on the open book icon at the top right. To reload use the world menu –> alt+shift+W

PART ONE: SETTING UP

Grab a Playfield out Supplies (the box at the top centre of the screen)

Make your own bat and ball, name them "bat" and "ball", and put them into the Playfield, the simplest way is to drag them in directly

Make a script to control the ball's behaviour. Name it "move". The ball's motion category contains the commands you need: forward and bounce

The default heading is zero (0), which is north, which we don't want. Write a setup script which creates a better initial heading, with some random variation:


From the ball's Viewer motion category drag out a detailed watcher for the heading, so we can directly observe its changing values:


Make some observations for yourself about the x and y co-ordinates and the heading values of the ball as it moves around the Playfield, so that you become aware of how the co-ordinate system works in etoys

PART TWO: BALL HITS BAT

Drag a Test/Yes/No pane out of the ball's move script supplies palette

and add it to the move script

There are lots of other Viewer categories! By clicking on any Viewer category heading you get a drop down list revealing the other possibilities. Do this and select the test category:

What test do we want? Answer: ball overlaps bat. We get there by initially dragging the ball's overlap dot test to the Test section of the move script:

Now open the bat Viewer and ask it for a "tile representing me"

and replace the dot tile in the move script with the bat tile:

We have to do some maths now:
With the way etoys measures headings (your HW in part one) what should the new heading be after bouncing off the bat?

Go back to the ball's Viewer, drag out the heading by the assignment arrow and add it to the Yes line in the move script

Have you done your maths yet?

For a true bounce using the etoys heading syntax the after bounce heading will be the negative of the before bounce heading. To represent the minus grab a function tile from the move script palette

and replace the number on the end of the ball's heading with the function tile

Next, click on the function tile and choose negativeOf from the list of functions:

Now replace the number in brackets after the function with the ball's heading

Test it out. The ball should bounce off the bat now with a true bounce!

PART THREE: CONTROLLING THE BAT

We can use either key strokes or the specialised etoys slider (Supplies > Object Catalog) to control the bat. I'll use key strokes for this tutorial.

Open the world Viewer by middle clicking on the world to get the halos and then clicking on the cyan "eye". The world viewer has an input category which tracks the last key stroke. Press the up and down arrow keys and you will see the Viewer keeping track

Drag out a new script from the world viewer (only the world viewer has a keystroke option) and name it something like "batControl". From the palette tear off a Test/Yes/No pane and add it to the script.

Drag world's last keystroke (not by the assignment arrow) to the Test condition of the bat control script

If necessary change the key input to <up>

Drag out the bat Viewer and open the motion category. When we press the <up> arrow we want the heading to be zero (drag by assignment arrow) and the bat to move up the y axis, like this:

It is possible to program a keypress (thanks to Tony Forster for explaining how). Click on the button displaying "normal" next to the ticker, then choose more... from the drop down menu and then keyStroke


Now add your <down> arrow keyboard control


PART FOUR: SCORING

We will do this part by registering a score increase when the ball touches a boundary object

Make a boundary object, name it ("boundaryLeft"), drag it into the Playfield and resize it with the yellow halo so it fits all the way along the boundary
We will record the score in a "Text" because a Text contains the code to increment a numeric value. Drag a Text out of Supplies and position it on the right hand side of the Playfield. I named my Text "scoreRight" and set its numeric value to zero (basic category)

Create a new script, named ball score, add a Test/Yes/No pane and make the Test condition:
ball's overlaps boundaryLeft. First drag ball's overlaps dot from the ball's Test category. Then ask boundaryLeft to hand you a "tile representing me" and replace the dot with that tile.
When the ball hits the boundary we want the score to go up by one, the ball to be returned to the centre of the Playfield and move off in a random direction, like so:

Run the script with the ball moving, to check that it is working.

PART FIVE: FINISHING TOUCHES

It is now mainly a matter of making a another bat, score and boundary for the other side of the Playfield and then our first version of pong will be completed. I reduced the bat size and speeded up the ball to make it more interesting. I also added in some more randomisation.

Version one available here (you will need to OLPC etoys image to play it)

Wednesday, November 07, 2007

making a 15 Puzzle grid

This program is to partially automate the making of 15 Puzzle

Get a Playfield from Supplies

Get another Playfield from Supplies, open its Viewer and name it cell

Get a Text from Supplies and open its Viewer
Text's numericValue, change 0.00 to 0 (no decimals)
Pick up the Text (black halo) and drop it into the cell
Reduce the size of the cell (yellow halo), we will have to fit 16 cells into the larger Playfield

Make sure the Text is inside the cell - when you move the cell the text should move with it. Also check by looking in the cell connections category, you will see the text is registered there.

Open the cell viewing menu (red halo)
Check round corners, essential for this project
Change the colour to establish contrast from the colour of the large Playfield
fill style > change colour
border style > border colour

Open the cell viewer
Add a variable, call it counter
change the value type > Player
Drag out cell counter by the assignment handle, it will form a script which reads:
cell's counter <-- dot Open the Text Viewer Get the Text to hand you a "tile representing me" (from menu at top) Replace the dot with the Text tile
Run this script briefly so the cell's counter Player type converts to a Text type. The icon on the assignment arrow will change from a dot to a text.

Now we will write a script which automatically makes new cells, increments their number and puts them into the large Playfield

Open the Playfield Viewer and drag out a script
Open the cell Viewer and drag out the cell's counter variable by the assignment handle and add it to the Playfield script. It should read:
cell's counter <-- Text To make a new cell: Go to cell > miscellaneous category, drag out cell's copy and replace Text with it

Running this will create a new copy of the cell on top of the original cell. So now we want to automatically move the new copy into the larger Playfield.
Switch on auto-line-layout in the larger Playfield, for automatic alignment:
Menu (red halo) > playfield options > check auto-line-layout
Run the script to see if new cells are populating the Playfield
For 15 Puzzle to work (later) the cells have to be touching horizontally and vertically but not diagonally. To achieve this use:
Menu (red halo) > layout > table layout > change cell inset (tricky since there are so many settings available)
To tidy up afterwards use Playfield > collections > removeAll

Now it's time to increment the numbers on the cells
Open the Text Viewer and drag in Text's numericValue by the assignment handle
Open the cell Viewer, drag out cell's counter and replace Text's with it (see diagram)
Alter this line of code to increase the numericValue by one

I think because cell counter is playing a dual role, first making a Player copy and then being a text to increment the number then it's essential to add in
cell's counter <-- Text as the third line of the script. Here's how it looks now:
Run the procedure to create a 15 Puzzle grid!

To shuffle the cells use
Playfield > collections > shuffleContents

After thought: It would look better keeping the border a different colour

Project available: 15 Puzzle Auto

visually manipulating collections in etoys' Playfields


Markus Gaelli has a 15 Puzzle etoys demo program at his emergent site (excellent site for etoys projects)

Before getting onto coding the puzzle I became quite absorbed about the potential of etoy Playfields. The puzzle consists of 16 little Playfields (which in turn are containers for their own "text" numbers) inside a big Playfield.

What I see in Playfields is the opportunity to manipulate collections visually which I haven't seen in any other program. eg. Game Maker doesn't represent for loops visually and it is hard to teach them to students, in my experience.

I was also intrigued by the notion that Smalltalk adopted "collection based programming as a central tenet" and "that modern functional programming languages such as ML and Haskell have followed this lead". The whole approach is not based on looping constructs but on creating a new collection containing the desired elements (Squeak by Example, p. 195). I'm unsure about how much of this approach can be demonstrated in etoys - but it does suggest a different sort of way of teaching collection manipulation that may be more accessible to many learners

This post is just getting started with how to work with collections in Playfields.

The screenshot above is a collection of Playfields (which contain text numbers) contained within a larger Playfield. The resultant collections category in the larger Playfield's Viewer looks like this:


This opens the door to visually manipulate quite a few things:

count: number of objects that the Playfield contains
cursor: the currently selected object, in this case 9 (the cursor can be visible or invisible)
firstElement: I have auto-line-layout switched on so the objects are layed out neatly with the first object in the top left hand corner
include at cursor | dot: This adds a new object to the Playfield at the cursor. You need to replace the default dot with the object you want to add.
include: dot: Adds a new object at the end of the other objects (replace dot with the object you want to add)
numberAtCursor: ?? not sure what this is for
playerAtCursor: The object currently at the cursor
removeAll: remove all objects from the Playfield
shuffleContents: shuffle the objects in the Playfield
stringContents: displays a linear text representation of the Playfield contents

I've written a program which automatically populates a Playfield with the elements of the 15 Puzzle. I'll blog about that separately.

Quanta's OLPC production line


Quanta's OLPC production line. Larger view.

"Reaching Mass Production is no small task" - The Weekly Squeak

turtle graphics in etoys: possible but not elegant



You can create a parameter (but only one per procedure) and you can't rename them! So write a first procedure to setup your parameter:

Then create a number variable and create a second procedure to increment your parameter value, as shown. You initialise your number values from the object's Viewer.

The etoys version from the squeakland site doesn't have a repeat command. But Pierre-André Dreyfuss pointed out that you can write your own. Also the repeat command has been added to the OLPC etoys version

Project available: http://www.users.on.net/%7Ebillkerr/etoy/turtleGraphics.001.pr

how to make a "text" counter in etoys

I need a counter for a larger project. I needed help to do it (thanks Paul) so thought I should pass on the technique.

Goal: By clicking on a shape a counter increments

This is for making a large counter, which displays in a specialised text player. Another (easier) way would involve using a detailed watcher but that only has a small display. This method involves learning something about setting variables and using Text so it is has broader application.

Drag a "Text" out of the Supplies flap
Have a look in the Viewer, it has a Text's numeric value tile in the basic category. Click in the value and type a number and that number will appear where the "Text" is

Make a new shape for clicking on. I made a rectangle and coloured it green. I kept the name at the default, "Sketch"

Add a variable to Sketch, I called mine "counter", then change value type to Player. Note that Text types are not available.

So you now have to pass the Sketch counter player variable a text tile. This is how you make a text type.

Make a Sketch script. Then drag Sketch counter by the assignment arrow to the script. The line will read:
Sketch's counter <-- dot Then open the Text viewer. Get it to hand you a "tile representing me" from the menu at the top. Then replace the 'dot' tile with this new 'Text' tile (see diagram)
So, now we have made a counter variable which is of text type!

Make a new Sketch script. I called this script "increment"
Reopen the Text viewer and drag Text's numeric value to the new script by the assignment handle. It will read:
Text's numericValue <-- 0 (just click on the 0.00 and replace it with 0 and the number of decimal places will adjust automatically) Reopen the Sketch Viewer and drag Sketch's counter (not by the assignment arrow) to replace Text's with Sketch's counter (see diagram)
Now modify the code so it reads: Sketch's counter numericValue increase by 1 (see diagram)

You can modify the Events which trigger the code by clicking on the "normal" button:

I changed mine to mouseDown, so I can increment the number by clicking on the green shape which is named Sketch.

Project available: http://www.users.on.net/%7Ebillkerr/etoy/counterByOne.005.pr

Saturday, November 03, 2007

one school in India

Joel Stanley sent me a link to a detailed report of a trial of the OLPC at Khairat school in India (Khairat Chronicle), written by Carla Gomez Monroy, an OLPC learning consultant

It contains the details of how the OLPC is integrated into the day to day workings of the school, the role of the teacher, the learning culture of the classroom, how the students use it, how some of the parents have become involved, how the OLPC has been a motivator to improve school attendance and a detailed description of the broader culture and how the OLPC impacts onto it.

Stunning, copious photographs illustrate this extremely informative chronicle. The caption of the photo I have included says:
Teacher said, his relationship with the children was closer, in the sense that together they explore the XO

Friday, November 02, 2007

how to make space invaders in etoys


Make a bullet object

Make a new variable, call it newBullet and change the type to Player
variable > newBullet
menu > change value type > Player


Script your own Create Event, which makes new bullets
drag newBullet by assignment handle to the script
miscellaneous > bullet's copy, replace dot

Make another script which moves the bullets
bullet forward 5


Go back to the Create Event script and send a message to the new bullets that are being created to move
scripting > bullet start script
then replace bullet with the newBullet Player variable


Now whenever I run my Create Event it creates a new bullet which is fired off. What happens is that the new bullet instances are named bullet1, bullet2, etc. and each bullet has its own Player, which runs its own move script. You can't see this happening unless you grab one of the new bullets and open its viewer.

With all the new bullets I need some way to tidy up. So I'll write some scripts to clean up the siblings, just so I can play around and be able to tidy up afterward

Write a bullet delete script


Write a remove all siblings script which calls the bullet delete script


I want keyboard control for firing off bullets

Middle click on the World and open the World Viewer. Then open the input category and you will see world's lastKeystroke. Press some keys on the keyboard and you will see the values change in the viewer.

Tear off a Yes/No Test unit and drop it into the bullet create script

Drag world's lastKeystroke (not by the assignment arrow) into the Test section of the test unit. Then replace the part after the = sign with <up> arrow. Move the other already existing (three) lines of the create script into the Yes section of the test unit.

We want to simulate a keypress, ie. not have the <up> arrow always in place - if that happened we would have bullets being created continuously. Add a
world's lastKeystroke = <down> assignment to the bottom of the Yes section, so that <up> arrow turns into <down> arrow immediately after it is pressed

Since we are now doing keypress control we will have run the ticker continually on the create script. Unless we do something about it then this will be passed onto the create scripts of all the new bullets. So it's best to stop the create script running unnecessarily on the new bullets. Add a stop script create line to the Yes section of the test unit



I now want to destroy the surplus bullets as they reach the edge of the screen

Tear off a Yes/No Test unit and drop it into the bullet moves script.
test > bullet obtrudes (boolean)
Obtrudes means whether the object sticks out over its containers edge
Add bullet obtrudes (don't drag by assignment arrow) to the Test condition. Move the forward command to the No section of the test unit


At this point we want to stop the move script ticking and delete the bullet
scripting > bullet stop script



My project available: http://www.users.on.net/~billkerr/etoy/invaders.006.pr

Karl Ramberg's old tutorial: http://209.143.91.36/super/503 was helpful

Summary: So far we have created multiple bullets, fired them and destroyed them when they reach the edge of the screen

New things learnt:
  • How to create a Player variable
  • How to program key strokes
  • How to write your own Create, Key press and Destroy events
  • How to remove siblings and keep the original object
  • How to stop and start scripts programmatically

Still to do:
  • Introduce the shooter and move it left and right with the arrow keys
  • Create the new bullets where ever the shooter happens to be
  • Introduce enemies and get them moving down the screen towards the shooter
  • Make the enemy change to more threatening appearance as it gets closer
  • Shoot the enemy, create explosions, display points scored
  • Add dramatic music
  • Have good images for shooter, enemies and background image

Thursday, November 01, 2007

truth slips from view in the sea of post modern knowledge

Where have all the intellectuals gone? by Frank Furedi

We have a "knowledge society" in which any piece of knowledge is regarded with skepticism and can be contested indefinitely. The world is so complex that anyone who claims to know the way forward is regarded with suspicion. We value knowledge but are drowning in the sea of knowledge.

Furedi outlines a number of trends that are working in synergy against public intellectuals:

Instrumentalism: Knowledge is for practical purposes only

Disenchantment with the Enlightenment legacy: The previous century is perceived as one where big ideas such as communism were tried out and failed. People came to see rationality as destructive. Rationality is now marginalised by the sacred and spiritual, eg. nature worship

Relativist approach to knowledge and other cultures: Our western culture has no special merit. Other cultures have a spiritual dimension that we lack.

Knowledge domains are evaluated externally to themselves: Rather than respecting the internal dynamics of knowledge development it is evaluated by criteria such as economic advance, personal identity, providing therapy or social engineering

High standards are attacked from both the Left and the Right: The Left from the point of view of "inclusion", the Right from the point of view of "back to basics". The cultural "Left" (what I call the pseudo left) is more dominant, they promote a politics of inclusion, participation and flattery. It sounds progressive to include people. But it's not a response to a demand from below, it's imposed from above by cultural commissars who are looking around for some way to "engage" the "disengaged masses"

Post-modernism denies the whole concept of Truth: All truth is regarded as relative, it depends on your local conditions and point of view. The universal values from the Enlightenment have to be replaced by the "progressiveness" of particularity and situatedness

Public intellectuals, who wage battle for public hearts and minds and who influence overall social development have been replaced by the professional expert of a particular but limited knowledge domain. These experts use hard to understand technical specialist language. Many of them are academic careerists

We don't hear people speak passionately about the truth like Rosa Luxemburg anymore:
"But this much I know, that it is our duty, if we desire to teach truth, to teach it wholly or not at all, to teach it clearly and bluntly, unenigmatically, unreservedly, inspired with full confidence in its powers"
This book is not without fault but it ought to be read and discussed

Prompted by artichoke's The truthiness of Te Kotahitanga and "Haven't got a clue syndrome" in Art Galleries