Coding Memorandum

プログラミングに関する備忘録

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Color cycling

この記事はMSX Advent Calendar 2015の2日目の記事です。

昨日紹介したDemo「Illusion」の中で、パレットアニメーションと思われるシーンがありました。3:22ぐらいのところです。

この手法は、あらかじめ異なるカラー値で図形・線を描画しておき、カラーパレットを変えることで動きを見せる技法です。少し調べてみると、この技法は「Color Cycling」と呼ばれているようです。

「Illusion」と同じような動きをするプログラムを作ってみました。次の動画をご覧ください。

このプログラムでは、敢えて下準備の描画処理を見せています。プログラムは次のようです。

10 SCREEN 5
20 COLOR ,,0 : LINE(0,0)-(255,211),0,BF
30 C=1
40 'Draw lines
50 FOR Y=105 TO 0 STEP -1
60 LINE (Y+22,Y)-(234-Y,Y),C
70 LINE (Y+22,211-Y)-(234-Y,211-Y),C
80 LINE (Y+22,Y)-(Y+22,211-Y),C
90 LINE (234-Y,Y)-(234-Y,211-Y),C
100 C=C+1 : IF C > 15 THEN C = 1
110 NEXT Y
120 A$ = INPUT$(1)
130 'Initialize color palette
140 FOR C=1 TO 8 : COLOR=(C,0,0,0) : NEXT
150 FOR C=9 TO 15 : COLOR=(C,7,7,7) : NEXT
160 'Color cycling
170 W=1 : B=9
180 FOR I=0 TO 209
190 COLOR=(B, 0, 0, 0)
200 COLOR=(W, 7, 7, 7)
210 W=W+1 : IF W > 15 THEN W = 1
220 B=B+1 : IF B > 15 THEN B = 1
230 NEXT I
240 A$ = INPUT$(1)

50-110行で、15色を使って線を書きます。ここでは標準のカラーパレットで線が描かれます。
140-150行で、カラー番号1-8を黒、カラー番号9-15を白にカラーパレットを変えています。

170-230行は、カラーパレットの白と黒の割り当てを変えています。
1回目のループ:黒2-9、白1,10-15
2回目のループ:黒3-10、白1-2,11-15
3回目のループ:黒4-11、白1-3,12-15

このようにすることで、白の帯が動いているように見えます。ピクセルの描画処理を伴わないため、CPU/ビデオチップへの負荷が軽く、BASICプログラムでも軽快に動作します。

余談ですが、「Color Cycling」で検索するとHTML5で作られた素晴らしい作品が見つかります。
Old School Color Cycling with HTML5

「Show Option」ボタンを押すとパレットの色の動きを見ることができ、Color Cyclingの仕組みがよく分かると思います。

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://msirocoder.blog35.fc2.com/tb.php/92-1ef030a1
この記事にトラックバックする(FC2ブログユーザー)

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。