Drawing Multiple Sprites Of A Water Tank

Recently, I was pointed to a beautiful historical game for teaching simulation. It's a pipeline puzzle that also offers a way to evaluate the pressure in the pipeline depending on how the pipeline is connected.
Originally built in Smalltalk, it was recently ported to JavaScript . It works, but it stil had an issue: the tank icon always showed it was empty. That's because there were no sprites showing it filled in different stages.
We decided to remedy the situation using Glamorous Toolkit .
The challenge is to take this picture and draw multiple sprites with the tank with water inside. We start by loading the picture.
array := ZnClient new
	url: 'http://plumbin.ward.wiki.org/assets/pages/plumbin-in-wiki/tiles/tank.png'; get.
form := array readStreamDo: [:s | Form fromBinaryStream: s].
The first thing we need to do is to figure out where we should draw the blue square. So, we create a little tool based on BlDevCrossover to help us investigate. This is a decorator that can be added to any element and shows the position of the mouse within the bounds of the element:
element := form asElement.
BlDevCrossover on: element.
element asScalableElement
Once we know the coordinates, we an now try it. Ah, but how do we draw on a form? We first need a canvas. We know that the canvas can be instantiated by querying Bloc preferableSpartaCanvas. To learn how we draw on it, we can just search in the environment:
Ok, so we can use fill. Let's try it quickly:
canvas := Bloc preferableSpartaCanvas extent: 40@40.
form asElement drawMeWithEffectsOnCanvas: canvas.
canvas fill
	paint: Color blue;
	path: (7@6 corner: 33@32);
Looks good. Now we can produce multiple canvases:
canvases := (6 to: 32) collect: [ :y |
	canvas := Bloc preferableSpartaCanvas extent: 40 @ 40.
	form asElement drawMeWithEffectsOnCanvas: canvas.
	canvas fill
		paint: Color blue;
		path: (7 @ y corner: 33 @ 32);
	canvas ]
And now we can export them as PNGs:
canvases doWithIndex: [ :each :i | 
		putForm: each asForm
		onFileNamed: 'tank' , i asString , '.png' ].
'.' asFileReference
That's it. We started from a problem and we worked our way through it in the same uniform environment. Along the way, we constructed a custom tool to answer a question. We searched for similar examples. We prototyped and explored the results. All integrated.
This article is based on a Twitter thread I wrote recently.