More than 3 years have passed since last update.

OpenCVでラスタースクロールする

Posted at 2021-05-22

はじめに

アニメーションGIF大好き。

配列（画像）をシフトする　numpy.roll()

numpyには配列をシフトする関数がある。

numpy.roll(a, shift, axis=None)

a　numpy配列。
shift　移動量。整数。shiftとaxisはタプルで表現することで複数方向に同時にシフトすることができる。
axis　配列の軸。省略可能だが明記したほうがいいだろう。省略したらどうなるかは君の目で確かめてくれ！

numpyだからOpenCVの画像にも使える。「配列の軸」はカラー画像の場合0,1,2がそれぞれ縦,横,カラーチャンネルを意味することはすぐに分かると思う。
では、たとえばaxis=1（横移動）でshiftに正の値を指定したときに右に動くのか左に動くのかは、慣れて覚えるしかない。高校の時、y=f(x)のグラフとy=f(x-a)のグラフを並べて描いてなぜ「そっち」に移動するのかを悩みつつ自分の頭で理解するのと同じだ。

元画像

axis=0に+20シフト	axis=0に-20シフト

axis=1に+100シフト	axis=1に-100シフト

axis=2に+1シフト	axis=2に-1シフト
青の輝度が高い→緑の輝度が高いにシフト	青の輝度が高い→赤の輝度が高いにシフト

スクロールする

無限ループ内でnumpy.roll()をおこなえば無限スクロールができる。
両端がつながっている画像が望ましいことは言うまでもない。

scroll.py

import cv2
import numpy as np

filename = "keepout.png"
back_origin = cv2.imread(filename)
a = -2                  # speed
while True:
    back = back_origin.copy()
    back = np.roll(back, a*t, axis=1) 
    cv2.imshow("img", back)
    t += 1
    if cv2.waitKey(1) == ord("q"):
        break
cv2.destroyAllWindows()

元画像	アニメーション

上に掲げたソースは画面上では動くがアニメGIFを作ってくれるわけではない。アニメGIFの作り方はこちらを参照のこと。
　　OpenCVでコマ撮りカメラを作る　～PILとOpenCVの画像変換＆PILでアニメGIF作成～

ラスタースクロールする

画像全体でなく行ごとに異なる量のnumpy.roll()をおこなえばラスタースクロールができる。

上半分のみスクロールさせる　～流れる雲～

元画像の雲は厳密には左右でつながっていないのだが、動きがあるためそれほど気にならない。これもいらすとやの人徳といったところか。

元画像	アニメーション

ソースは略。

一行ずつシフト量を変える　～揺らめく海底～

20世紀末のテレビゲームでよく見ることができた演出。
実際にそれらがどのような処理をしていたのかは知らない。

元画像　ocean.jpg	アニメーション

ソースはこちら。

ocean.py

import cv2
import math
import numpy as np

back_origin = cv2.imread("ocean.jpg")
imgH, imgW = back_origin.shape[:2]

# ↓を有効にしておくと動きがよくわかる
# cv2.line(back_origin, (imgW//2,0), (imgW//2,imgH), (0,0,255), 3)
a = imgW//16            # 振幅
b = 2*math.pi/imgH      # 周波数
c = 0                   # 位相のずれ
step = 1                # 計算のステップ 波の粗さ・計算量に関係
tt = 16                 # 周期
t=0
while True:
    back = back_origin.copy()
    for y in range(0, imgH, step):
        x = int(a*math.sin(2*math.pi*(t-c)/tt+b*y))
        back[y:y+step] = np.roll(back[y:y+step], x, axis=1)
    cv2.imshow("", back)
    t += 1
    if cv2.waitKey(1) == ord("q"):
        break

cv2.destroyAllWindows()

この上に背景が透過処理されている魚のイラストを重ね合わせればダライアスのできあがりだ。

ダライアス

一行ずつシフトする方向を変える　～分身の術～

元画像　ninja.jpg	アニメーション

ソースはこちら。

ninja.py

import cv2
import math
import numpy as np

back_origin = cv2.imread("ninja.jpg")
imgH, imgW = back_origin.shape[:2]

a = imgW//4             # 振幅
c = 0                   # 位相のずれ
step = 1                # 計算のステップ 波の粗さ・計算量に関係
tt = 32                 # 周期
t=0
while True:
    back = back_origin.copy()
    for y in range(0, imgH, step):
        sign = 1 if y%2==0 else -1
        x = int(sign*a*math.sin(2*math.pi*(t-c)/tt))
        back[y:y+step] = np.roll(back[y:y+step], x, axis=1)
    cv2.imshow("", back)
    t += 1
    if cv2.waitKey(1) == ord("q"):
        break

cv2.destroyAllWindows()

一行ずつシフト量と方向を変える　～旅の扉～

あらためて調べると、ドラクエの旅の扉って作品ごと機種ごとに演出が違うのな。
ラスタースクロールと無関係な処理が多いのでソースは略。

アニメーション

投影変換と組み合わせる　～3Dレースゲーム～

疑似3Dの実装

numpy.roll()はデータのシフト（平行移動）なので変形はできない。投影変換で長方形を台形に変形することで疑似3Dを実装できる。
投影変換についてはこちらを参照のこと。
　　投影変換で画像を変形する　～モニタ画面をハックする～

元画像 road.jpg	投影変換を無駄にアニメ化
アメリカのルート66をイメージしたのに左側通行になってしまった。	幅が縮小されるだけでなく高さ方向にも変形するのか。
numpy.roll()	numpy.roll()+投影変換