画像を上下にギザギザや波のように変形する処理ついて説明します。
画像を上下にギザギザに変形するには「ギザギザの幅」と「ギザギザの高さ」を設定する必要があります。
例えば幅を20ドット、高さを5ドットとした場合、下の左の 25 * 10 ドットの画像の点を下の右の画像の点のように移動します。
それぞれの列の点を何ドット上に移動すればよいかを表にまとめると以下のようになります。
ただし、一番左の列を 0 列目として数えることにします。
20列以降はこのパターンの繰り返しです。
列 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
上に移動するドット数 | -5 | -4 | -3 | -2 | -1 | 0 | +1 | +2 | +3 | +4 | +5 | +4 | +3 | +2 | +1 | 0 | -1 | -2 | -3 | -4 |
幅と高さを任意の値に設定した場合でも、同様の方法で四則演算だけでギザギザの処理を行うことができます。
幅を w ドット、高さを h ドットとすると、左から c 列目の点を以下の表のように移動すればギザギザ処理を行えます。
w + 1 列目以降は、このパターンの繰り返しです。
例えば、w に 20 を、h に 5 を代入した場合、下記の表は上記の表と同じものになります。
このようにギザギザの処理は四則演算(+−×÷)のみで行えます。
列 | 幅の左半分(0 〜 w / 2 未満) | 幅の右半分(w / 2 〜 w 未満) |
上に移動するドット数 | -h + (c * h * 4 / w) | 3 * h - (c * h * 4 / w) |
こちらのページの「ギザギザ」の右の幅と高さのボタンやスライダーを操作することで、様々な幅や高さでギザギザの処理を行う事ができます。
(注:画像の上下にはみ出した部分は表示されません)
画像を上下に波うたせる処理は残念ながら四則演算だけでは行えません。
波は三角関数を使って表現することができます。
y = sin(x) をグラフにすると、下の図のようなサインカーブと呼ばれる波の形の曲線になります。
これを利用することで、画像を上下に波うたせることができます。
周期(一回分の波の幅)を w ドット、高さを h ドットのサインカーブのような波うち処理を行うには、左から c ドット目の列の点を以下の式で計算されるドット数だけ上に移動します。
h * sin(c / w * 360)
こちらのページの「波うち」の右の幅と高さのボタンやスライダーを操作することで、様々な幅や高さで波うちの処理を行う事ができます。
(注:画像の上下にはみ出した部分は表示されません)