パラパラまんが

for Squeak 4.4 on Mac OS X (macOS 10.13 High Sierra or earlier) / Windows (Windows 7 or later)
for Squeak 5.2 on Mac OS X (macOS 10.14 Mojave or later) / Windows (Windows 7 or later)

パラパラブックス

京都において芸術出版を手がけている青幻舎という会社があります。そこから「パラパラブックス」というものが出版(販売)されています。以下のページをたどって、いくつかご覧になってくださいませ。

昔というか、小学校の時分に、授業中、先生の話に退屈して、教科書の右下に、落書きをし、ページをめくりめくり、何枚も何枚もの絵を描き、それらを一気にパラパラ…パラパラ…とすることで、動画(アニメーション)にしたことを思い出します。吉本興業鉄拳(てっけん)と呼ばれる芸人さんがいらっしゃり、パラパラマンガ制作を手掛けておられ、その作品の素晴らしさがとても話題になっています。それらには遠く及びませんが、数枚の画像を読み込んで、一定の速度でパラパラと表示することにより、簡単なアニメーション(パラパラまんが)を作ってみましょう。

画像の読み込み

まず、ファイルやディレクトリを扱うことができなければ、画像を扱うことができません。なぜならば、通常、画像はJPEGやPNGなどの画像ファイルとして存在しているからです。では、Smalltalk(Squeak)が動作しているディレクトリを得ることから始めます。FileDirectoryに対してdefaultというメッセージを送ると、Smalltalk(Squeak)が動作しているディレクトリを応答してくれます。応答されるオブジェクトは、FileDirectoryのサブクラス(DosFileDirectoryやUnixFileDirectory)のインスタンス(実例)になります。

FileDirectory default
==> UnixFileDirectory on '/Users/aoki/Desktop/Squeak4.4-ja-all-in-one-20150201/image'

そのインスタンスに対して、たたみかけるようにpathNameというメッセージを送りつけると、Smalltalk(Squeak)が動作しているディレクトリの文字列が応答されます。

FileDirectory default pathName
==> '/Users/aoki/Desktop/Squeak4.4-ja-all-in-one-20150201/image'

では、Smalltalk(Squeak)が動作しているディレクトリの直下にdoraというディレクトリが存在するとして、そのパス名を求めてみましょう。カンマの後にくっつけたい文字列を指定すればいいのです。くっつけたい文字列は、パス名の区切り記号の文字列とdoraという文字列ですから、次のようになります。

FileDirectory default pathName , FileDirectory pathNameDelimiter asString , 'dora'
==> '/Users/aoki/Desktop/Squeak4.4-ja-all-in-one-20150201/image/dora'

そのdoraというディレクトリの中に、3.jpgという名前の画像ファイルがあるとして、そのパス名を求めてみましょう。

FileDirectory default pathName , FileDirectory pathNameDelimiter asString , 'dora' , FileDirectory pathNameDelimiter asString , '3.jpg'
==> '/Users/aoki/Desktop/Squeak4.4-ja-all-in-one-20150201/image/dora/3.jpg'

pathNameDelimiter asStringの部分をslashとしても構いません。パス名の区切り記号はスラッシュですから、こちらの方が簡便になります。そうそう、Windows(DOS)のパス名の区切り記号はバックスラッシュですが、スラッシュというだけで、Smalltalkがバックスラッシュに直してくれますから、ご安心ください。

FileDirectory default pathName , FileDirectory slash , 'dora' , FileDirectory slash , '3.jpg'
==> '/Users/aoki/Desktop/Squeak4.4-ja-all-in-one-20150201/image/dora/3.jpg'

複数行になってしまいますが、パス名の区切り記号を一時変数aStringに束縛して利用するプログラムの方が格好がいいでしょうね。

| aString |
aString := FileDirectory slash.
aString := FileDirectory default pathName , aString , 'dora' , aString , '3.jpg'.
^ aString
==> '/Users/aoki/Desktop/Squeak4.4-ja-all-in-one-20150201/image/dora/3.jpg'

今度は、Smalltalk(Squeak)が動作しているディレクトリの直下のdoraというディレクトリの中に3.jpgという画像ファイルが本当に存在するのかを調べるプログラムを示します。当該の文字列からFileDirectoryのサブクラスのインスタンスをこしらえて、それに対してexistsという存在するかを調べるメッセージを送りつけます。存在すれば、trueが応答され、存在しなければ、falseが応答されます。

| aString aFile |
aString := FileDirectory slash.
aString := FileDirectory default pathName , aString , 'dora' , aString , '3.jpg'.
aFile := FileDirectory forFileName: aString.
^ aFile exists
==> true

この画像ファイルは存在しますので、画像として読み込むことにチャレンジしましょう。ImageReadWriterというクラスを使用します。このクラスに対して、formFromFileNamed:の後に、当該の画像ファイルのパス名を文字列で指定して、メッセージ送信をすれば、画像ファイルが読み込まれて、Formのインスタンスとして応答されます。

| aString aForm |
aString := FileDirectory slash.
aString := FileDirectory default pathName , aString , 'dora' , aString , '3.jpg'.
aForm := ImageReadWriter formFromFileNamed: aString.
^ aForm
==> Form(296x272x32)

インスペクトしてみてください。以下のようなウィンドウ(インスペクタ)が開いてきます。幅が296ピクセル、高さが272ピクセル、深度が32ビットのフルカラーの画像であることがわかります。

aForm

画像の表示

画像は画素の集まりで、その画素のことをビット(bit)やピクセル(pixel)と言います。ですから、画像のことをビットマップやピクセルマップ(ピクスマップ)と呼び、画素が地図(マップ)のように、平面状(二次元的)に整然と並んだものということを言い表しています。

ではでは、読み込んだ画像(aForm)を画面(Display)に表示してみましょう。ビットブリット(BitBlt:bit block transfer)というか、ピクセルブリット(pixel block transfer)を用います。これらは画像(すなわち、ビットのかたまり、ピクセルのかたまり)を高速に転送(transfer)する機構(仕掛け:メカニズム)になります。ラスターオペレーション(Raster Operation)とも呼ばれています。ビットマップ画像を扱う際の定石ですから、勉強しておいて損はないと思いますよ。

| aString aForm |
aString := FileDirectory slash.
aString := FileDirectory default pathName , aString , 'dora' , aString , '3.jpg'.
aForm := ImageReadWriter formFromFileNamed: aString.
Display
    copy: (100 @ 100 extent: aForm extent)
    from: 0 @ 0
    in: aForm
    rule: Form over.
^ aForm
==> Form(296x272x32)

上記のプログラムのcopy:from:in:rule:は、レシーバである画面(Display)のcopy:で指定された領域(100 @ 100 extent: 296 @ 272、すなわち、100 @ 100から396 @ 372までの場所)に対して、in:で指定された画像(aForm)のfrom:で指定された場所から、rule:で指定された組み合わせ規則を用いて、ピクセルのかたまりを転送します。実行結果は以下のようになります。

Doraemon

ラスターオペレーションを行うメッセージ式において、in:で指定した画像(aForm)をソース(転送元)画像、レシーバである画像(Display)をデステネーション(転送先)画像と呼ぶことを覚えておいてください。画面(ディスプレイスクリーン)も画像なのだ、すなわち、画像(ビットやピクセル)の集まりなのです。

問題

ではここで問題を出しましょう。以下に示す何枚かの画像をつなげて、

1.jpg
1.jpg
2.jpg
2.jpg
3.jpg
3.jpg
4.jpg
4.jpg
5.jpg
5.jpg
6.jpg
6.jpg
7.jpg
7.jpg
8.jpg
8.jpg

次のようなアニメーション(パラパラまんが)のプログラムを作成して提出してください。

Doraemon.gif

Updated: 2019/02/06 (Created: 2008/11/15) KSU AokiHanko