Codementor Events

Smalltalk: Drawing dotted line using Morphic

Published Apr 24, 2023
Smalltalk: Drawing dotted line using Morphic

In this post, I will demonstrate how to use basic drawing function in Squeak Smalltalk.

Create Form and Draw dotted line

"Create a new SystemWindow and set its title to 'New Window'"
window := SystemWindow new.
window setLabel:'New Window'.

"Create a new PasteUpMorph and add it to the window as a container for other morphs"
pasteUpMorph := PasteUpMorph new.
window addMorph: pasteUpMorph frame: (0@0 corner: 1@1).

"Open the window in the World"
window openInWorld.

"Create an ImageMorph and add it to the PasteUpMorph"
myImageMorph := ImageMorph new.
pasteUpMorph addMorph: myImageMorph.

"Set the ImageMorph's form and bounds to match the PasteUpMorph's extent and bounds"
myImageMorph newForm: (Form extent: (pasteUpMorph extent) depth: 32).
myImageMorph bounds: (pasteUpMorph bounds).

"Create a Pen to draw on the ImageMorph's form with a square nib of size 3 and a blue color"
myPen := Pen newOnForm: myImageMorph image.
myPen squareNib: 3.
myPen color: Color blue.

"Draw a series of 100 blue lines using the Pen"
1 to: 100 do: [:x |
    posx := 50 + (x * 5).
    myPen place: posx@50.
    myPen go: 0@0.
].

"Inform the window that its contents have changed and need to be redrawn"
window changed.

Results

dotted line.PNG

Explanation

The code is self-explanatory, but what I did here is that I created a new SystemWindow and added a PasteUpMorph to it so that content can be added to it. Next step was to make the window visible, and once that was done I added an ImageMorph to it for drawing purpose. ImageMorph is useful for drawing functions as a Pen object can be used to draw on it. And then, in the last step, I created a blue pen with 3 points nib and used it to draw dots on the image using a loop. That’s all! and you get the above result.

Discover and read more posts from Humayun Shabbir
get started
post commentsBe the first to share your opinion
Lawson English
a year ago

Found the problem. #newOnForm: sets a defaultNib, which sets a color to black and when there is a color, it just draws with that color and ignores the form.

This works:

myPen sourceForm: f1.
myPen color: nil.
myPen place: 200@300.
myPen go: 0@0.
window changed.

Lawson English
a year ago

here’s a question…

I modified your code to use a 32x32 form supplied by user rather than a square nib:

f1 :=(Form fromUserWithExtent: 32@32).

“your window and image morph creation code”

“Create a Pen to draw on the ImageMorph’s form with a 32x32 form supplied by user in f1”
myPen := Pen newOnForm: myImageMorph image.

myPen sourceForm: f1.
myPen place: 200@300.
myPen go: 0@0.
window changed.

Why am I drawing a black 32x32 square instead of the bitmap I selected?

f1 contains the image I expect to see, but the window only displaces a 32x32 black square.

Lawson English
a year ago

That should say “displays” not “displaces.”

Lawson English
a year ago

Thanks. That’s exactly what I needed to see.

Humayun Shabbir
a year ago

You are welcome. I have learned a lot about Smalltalk from your YouTube channel. 👍

Lawson English
a year ago

That’s very nice to hear, thanks.

Show more replies