Chapter 28: Squeak - Multimedia and Education

While Pharo focuses on clean, modern development, Squeak emphasizes multimedia, education, and creative expression. Squeak is where fun meets programming - a playground for building interactive, visual, animated experiences.

Squeak powers Scratch (used by millions of kids worldwide) and eToys (a multimedia authoring system). It’s a Smalltalk that believes programming should be joyful, creative, and accessible to everyone.

What is Squeak?

Squeak is a modern implementation of Smalltalk-80, created in 1996 by Alan Kay, Dan Ingalls, and others at Apple. Goals:

Squeak is Pharo’s parent - Pharo forked from Squeak in 2008 to focus on modern development while Squeak continued emphasizing multimedia and education.

Why Squeak?

1. Multimedia Power

Squeak excels at:

2. Educational Focus

Squeak powers educational tools:

3. Morphic Graphics

Morphic is Squeak’s direct-manipulation UI framework. Everything is a visual object you can grab, move, resize, and modify:

You build UIs by composing morphs!

4. Historical Significance

Squeak is the continuation of the original Smalltalk vision from Xerox PARC. It preserves the “Dynabook” dream - personal computing for creative expression and learning.

5. Portability

Squeak runs on:

Installing Squeak

Desktop Installation

  1. Visit squeak.org
  2. Click Download
  3. Choose your platform
  4. Download the “All-in-One” package
  5. Extract and run

You get:

SqueakJS (Browser)

Visit squeak.js.org and run Squeak in your browser! No installation needed.

First Impressions

When Squeak launches, you see a colorful desktop with:

Right-click (or click the desktop) to open the World menu.

Opening Tools

World menu → Tools:

Your First Graphics

Open a Workspace and evaluate:

| morph |
morph := EllipseMorph new.
morph color: Color red.
morph openInWorld

A red circle appears! Click and drag it around. Right-click for a menu with options.

Morphic - Direct Manipulation Graphics

Everything in Squeak’s UI is a Morph - a graphical object.

Creating Morphs

"A rectangle:"
(RectangleMorph new
    color: Color blue;
    extent: 100@50;
    position: 200@200) openInWorld

"A circle:"
(CircleMorph new
    color: Color yellow;
    extent: 80@80) openInWorld

"An image:"
(ImageMorph new
    image: (Form extent: 50@50 depth: 32);
    color: Color green) openInWorld

Manipulating Morphs

Once a morph is in the world:

Try it! The UI is tactile and playful.

Animated Morphs

Make morphs animate:

| morph |
morph := EllipseMorph new color: Color red; openInWorld.

[ 100 timesRepeat: [
    morph position: morph position + (2@1).
    (Delay forMilliseconds: 50) wait ] ] fork

The circle moves across the screen!

Building Interactive Graphics

A Bouncing Ball

| ball dx dy |
ball := EllipseMorph new
    color: Color blue;
    extent: 30@30;
    position: 100@100;
    openInWorld.

dx := 3.
dy := 2.

[ true ] whileTrue: [
    | newPos |
    newPos := ball position + (dx@dy).

    "Bounce off edges"
    (newPos x < 0 or: [ newPos x > 600 ]) ifTrue: [ dx := dx negated ].
    (newPos y < 0 or: [ newPos y > 400 ]) ifTrue: [ dy := dy negated ].

    ball position: ball position + (dx@dy).
    (Delay forMilliseconds: 20) wait ]

A ball bounces around the screen!

Interactive Morph

Create a morph that responds to clicks:

Morph subclass: #ClickableCircle
    instanceVariableNames: ''
    classVariableNames: ''
    package: 'MySqueakApp'

initialize
    super initialize.
    self color: Color green.
    self extent: 50@50

mouseUp: anEvent
    self color: Color random.
    ^ true

ClickableCircle new openInWorld

Click the circle - it changes color!

Sound and Music

Squeak includes powerful sound synthesis:

Playing Notes

"Play a middle C:"
(SampledSound new
    pitch: 261.63;
    duration: 1.0;
    play)

Simple Melody

| notes |
notes := #(60 62 64 65 67 69 71 72).  "C major scale (MIDI notes)"
notes do: [ :note |
    (FMSound new
        setPitch: note;
        duration: 0.3;
        play).
    (Delay forMilliseconds: 300) wait ]

Hear the scale!

Sound Synthesis

| sound |
sound := FMSound new.
sound
    setPitch: 440;  "A440"
    duration: 2.0;
    modulation: 5.0;
    play

FM synthesis with Squeak!

eToys - Visual Programming

eToys is a multimedia authoring environment built in Squeak.

Launching eToys

In Squeak:

  1. World menu → eToys
  2. Or load eToys image (from squeak.org)

eToys provides:

eToys Example

In eToys:

  1. Click “Supplies” flap
  2. Drag out a “Star”
  3. Click the star’s menu → “View Script”
  4. Add tiles: “Forward by 5”, “Turn by 5”
  5. Set to run “ticking” (every frame)
  6. Watch the star spiral!

eToys makes programming visual and immediate.

Squeak vs Pharo

Feature Squeak Pharo
Focus Multimedia, education Modern development
Graphics Morphic (rich, playful) Morphic (streamlined)
UI Colorful, tactile Clean, professional
Sound Excellent synthesis Basic
3D Built-in (Croquet) Limited
eToys Included Not included
Tools Classic, stable Modern, evolving
Git Integration Add-on (Monticello) Built-in (Iceberg)
Community Education-focused Development-focused
Use Cases Teaching, multimedia Web, business apps

Choose Squeak if:

Choose Pharo if:

Both are excellent! Many developers use both for different purposes.

Educational Uses

Squeak is used in education worldwide:

Scratch

Scratch (scratch.mit.edu) is built on Squeak. It teaches programming to millions of children using:

Scratch’s backend is Squeak!

OLPC (One Laptop Per Child)

Squeak powered educational software on OLPC laptops distributed to children in developing countries.

Universities

Many universities use Squeak to teach:

3D Graphics

Squeak includes 3D capabilities via Croquet:

| world |
world := Alice2World new.
world addMorph: (Sphere new radius: 1.0; color: Color red).
world open

Build 3D scenes and interactive worlds!

Creating Games

Squeak is great for game development:

Simple Game Example

Morph subclass: #PaddleGame
    instanceVariableNames: 'ball paddle'
    classVariableNames: ''
    package: 'MyGame'

initialize
    super initialize.
    self extent: 400@300.
    self color: Color black.

    ball := EllipseMorph new color: Color white; extent: 10@10.
    paddle := RectangleMorph new color: Color green; extent: 60@10.

    self addMorph: ball.
    self addMorph: paddle.

    self startGame

startGame
    [ true ] whileTrue: [
        self updateBall.
        (Delay forMilliseconds: 20) wait ]

Build Pong, platformers, puzzle games!

Books and Resources

Books

Available at squeak.org

Community

Examples

Squeak ships with many example projects:

Squeak Projects

Cool projects built with Squeak:

Educational

Creative

Research

Extending Squeak

Installing Packages

Squeak uses Metacello (like Pharo):

Installer squeaksource
    project: 'MyPackage';
    install: 'MyPackage'

Or use SqueakMap (World menu → Tools → SqueakMap Package Loader).

External Plugins

Squeak supports external plugins for:

Try This!

Explore Squeak:

  1. Install Squeak
    • Download from squeak.org
    • Launch the All-in-One
  2. Create Morphs 
    (EllipseMorph new color: Color random; extent: 50@50) openInWorld.
(RectangleMorph new color: Color random; extent: 100@30) openInWorld

    Drag them around, resize them, play!

  3. Animate Something 
    | morph |
morph := StarMorph new openInWorld.
[ 360 timesRepeat: [
    morph rotationDegrees: morph rotationDegrees + 1.
    (Delay forMilliseconds: 10) wait ] ] fork
  4. Make Music 
    #(60 64 67 72) do: [ :note |
    (PluckedSound new setPitch: note; duration: 0.5; play).
    (Delay forMilliseconds: 500) wait ]
  5. Explore eToys
    • World menu → eToys
    • Drag out objects
    • Script them with tiles
    • Build something fun!
  6. Browse Examples
    • World menu → Open → Sample Projects
    • Explore the pre-built demos
  7. Build a Simple Game
    • Create a paddle and ball
    • Make the ball bounce
    • Detect collisions
    • Add scoring!
  8. Try SqueakJS
    • Visit squeak.js.org
    • Run Squeak in your browser
    • No installation needed!

Squeak’s Philosophy

Squeak embodies:

  1. Computing for Everyone - Not just professionals, but kids, artists, teachers
  2. Direct Manipulation - See it, touch it, change it
  3. Multimedia-Rich - Not just text, but images, sound, animation
  4. Self-Sufficient - The system can evolve itself
  5. Playful - Programming should be fun!
  6. Accessible - Runs on anything, costs nothing
  7. Educational - Learning is the primary goal

The Legacy

Squeak continues Smalltalk’s original vision:

Looking Ahead

You now understand Squeak - the multimedia-rich, education-focused Smalltalk! You know:

In Chapter 29, we’ll explore the Glamorous Toolkit - a radical reimagining of development environments. GT is moldable, extensible, and designed for understanding complex systems.

Then Chapter 30 covers other Smalltalks: VisualWorks, Smalltalk/X, Cuis, and more!

Part VIII is showing you the diversity and richness of the Smalltalk ecosystem!

Key Takeaways:

Previous: Chapter 27 - Pharo Next: Chapter 29 - Glamorous Toolkit