afterメソッドで、正確に「任意秒ごと」に動作させたい。

Question

前提

pythonのtkinterでクリックにより画像を回転させ、再度クリックすることで回転が止まるアニメーションを作成しています。

afterメソッドで無限に画像を回転させる処理を行ったうえで、後から回転をストップさせるイベントを呼び出し、アニメーションの操作を実現しています。

画像を角速度5[deg/s]で回転させようとしているにも関わらず、想定より回転速度が遅いことに困っています。
おそらく、処理が重いことが大きな要因の一つだと思われます。

実現したいこと

画像を角速度5[deg/s]で回転させたいです。

しかし、現在備わっている
・左クリックで左回転スタート
・右クリックで右回転スタート
・左右いづれかのクリックで回転をストップ
という機能は必要です。

このような機能を保ちつつ、処理を軽くして角速度を命令通りに実行できるコードにするには、どのような改良をすると良いでしょうか？

該当のソースコード

import tkinter as tk
from PIL import Image, ImageTk
import datetime


#新規ウィンドウを作成
root = tk.Tk()
root.attributes("-fullscreen", True)


#画面サイズの指定
WIDTH = root.winfo_screenwidth()
HEIGHT = root.winfo_screenheight()


#ウィンドウ上にフレームを作成
frame = tk.Frame(root)
frame.place(x = -5, y = -5, width = WIDTH + 10, height = HEIGHT + 10)


#フレーム上に、キャンバスを作成
canvas = tk.Canvas(frame, width = WIDTH, height = HEIGHT, bg = "black")
canvas.place(x = 0, y = 0, width = WIDTH + 10, height = HEIGHT + 10)


#画像のプリセット角を"cs"として定義
cs = 0


#キャンバスにSVV画像を貼り付け
img = Image.open("D:\EXPERIMENT\programming\Python\SVV\svv_bar.png")
img = img.rotate(cs)
tkimg = ImageTk.PhotoImage(img, width = WIDTH, height = HEIGHT)
canvas.create_image(WIDTH/2, HEIGHT/2, image=tkimg, anchor="center", tags="img")


#キャンバスに、透明な画像を貼り付け
img_snow = Image.open("D:\EXPERIMENT\programming\Python\SVV\svv_snow.png")
tkimg_snow = ImageTk.PhotoImage(img_snow, width = WIDTH, height = HEIGHT)
canvas.create_image(WIDTH/2, HEIGHT/2, image=tkimg_snow, anchor="center", tags="img_snow")


#"c"の初期値を定義
c = 0


#角速度の指定
interval = datetime.timedelta(milliseconds = 20)


#左回転時の基準時刻を取得し、press_Lに渡す
def press_L(event):
 global next_time_L
 next_time_L = datetime.datetime.now()
 rotate_L(event)


#右回転時の基準時刻を取得し、press_Rに渡す
def press_R(event):
 global next_time_R
 next_time_R = datetime.datetime.now()
 rotate_R(event)


def rotate_L(event):
 global interval
 global next_time_L
 global img
 global tkimg
 global c
 c = c + 1
 R = c / 10
 canvas.delete("all")
 IMG = img.rotate(R, resample = Image.BICUBIC)
 tkimg = ImageTk.PhotoImage(IMG)
 canvas.create_image(WIDTH/2, HEIGHT/2, image = tkimg, anchor = "center", tags = "img")
 canvas.create_image(WIDTH/2, HEIGHT/2, image=tkimg_snow, anchor = "center", tags="img_snow")
 next_time_L += interval
 now = datetime.datetime.now()
 delay_ms = int((next_time_L - now).total_seconds() * 1000)
 id = root.after(delay_ms, rotate_L, None)
 def stop_L(event):
  root.after_cancel(id)
  canvas.tag_bind("img_snow", "<ButtonPress-1>", press_L)
 canvas.bind("<ButtonRelease-1>", stop_L)


def rotate_R(event):
 global interval
 global next_time_R
 global img
 global tkimg
 global c
 c = c - 1
 R = c / 10
 canvas.delete("all")
 IMG = img.rotate(R, resample = Image.BICUBIC)
 tkimg = ImageTk.PhotoImage(IMG)
 canvas.create_image(WIDTH/2, HEIGHT/2, image = tkimg, anchor = "center", tags = "img")
 canvas.create_image(WIDTH/2, HEIGHT/2, image=tkimg_snow, anchor = "center", tags="img_snow")
 next_time_R += interval
 now = datetime.datetime.now()
 delay_ms = int((next_time_R - now).total_seconds() * 1000)
 id = root.after(delay_ms, rotate_R, None)
 def stop_R(event):
  root.after_cancel(id)
  canvas.tag_bind("img_snow", "<ButtonPress-3>", press_R)
 canvas.bind("<ButtonRelease-3>", stop_R)


def finish(event):
 #Enterキーを押すことで全画面表示を終了し、回転角度を取得する
 root.destroy()
 print(-c / 10)


#左クリックで呼び出すイベント
canvas.tag_bind("img_snow", "<ButtonPress-1>", press_L)


#右クリックで呼び出すイベント
canvas.tag_bind("img_snow", "<ButtonPress-3>", press_R)


#Enterキーで呼び出すイベント
root.bind("<Return>", finish)


#メインループ
root.mainloop()


#end.

上記の処理に使用した画像を作成するコード

from PIL import Image, ImageDraw

#背景色が黒色のキャンパスを作成。
im = Image.new('RGB', (500, 500), (0, 0, 0))
draw = ImageDraw.Draw(im)


#中央に線を描画
draw.line((50, 250, 450, 250), fill=(255, 255, 255), width=10)


#同じサイズの画像を作成
im_clear = Image.new("RGBA", im.size, (0, 0, 0, 0))
width = im.size[0]
height = im.size[1]


#色ごとに処理
for x in range(width):
    for y in range(height):
        pixel = im.getpixel( (x, y) )
        
        # 黒なら処理しない
        if pixel[0] == 0 and pixel[1] == 0 and pixel[2] == 0:
            continue
        
        # 黒以外なら、用意した画像にピクセルを書き込み
        im_clear.putpixel( (x, y), pixel )


#SVVで表示させるバーをpng形式で保存
im_clear.save("D:\EXPERIMENT\programming\Python\SVV\svv_bar.png", quality=100)



#---透明なpng画像の作成---

#画像サイズの指定
WIDTH = 1600
HEIGHT = 1000


#新しい画像を作成
im_snow = Image.new("RGBA", (WIDTH, HEIGHT), (0, 0, 0, 0))


#新しい画像をもう一つ作成
im_snow2 = Image.new("RGBA", (WIDTH, HEIGHT), (0, 0, 0, 0))


#色ごとに処理
for x in range(width):
    for y in range(height):
        pixel = im_snow2.getpixel( (x, y) )
        
        # 黒なら処理しない
        if pixel[0] == 0 and pixel[1] == 0 and pixel[2] == 0:
            continue
        
        # 黒以外なら、用意した画像にピクセルを書き込み
        im_snow.putpixel( (x, y), pixel )


#透明な画像をpng形式で保存
im_snow.save("D:\EXPERIMENT\programming\Python\SVV\svv_snow.png", quality=100)

試したこと

afterメソッドの指定時間を増やして、それに伴い "c + 0.005" の部分の数値を大きくするように変更しましたが、アニメーションがカクカク動いているように見えてしまうレベルまで処理の時間間隔を空けても、画像が360°回転するのに72秒以上の時間がかかってしまいました。
そのため、コードの改良が必要だと感じています。

呼び出すイベント関数が多いことが原因かと考え、関数の数を減らそうと試みましたが、現時点の数までしか減らせませんでした。
もし、さらに処理が軽くなるコードを思いつく方がいらっしゃいましたら、お力を貸して頂きたいです。

補足情報（FW/ツールのバージョンなど）

AnacondaでPythonを使用しています。
・Anacondaのバージョン：conda 4.12.0
・Pythonのバージョン：Python 3.9.12
・Windowsのバージョン：version 21H2

デバイスの仕様
・プロセッサ：11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz 2.80 GHz
・実装RAM：16.0 GB

Answer 1

create_image は新たな図形を作ります。以前にcreate_imageした図形をdeleteしないとメモリをどんどん消費して重たくなりますよ。
事前に state='hidden' ですべて create_imageしておいて、表示したいイメージだけ state='normal' に設定変更するようにすると処理が速くなるかもしれません。

それと、テレビ放送でも1秒間に30コマ(33ミリ秒/コマ)、ゲームで秒60コマ(16ミリ秒/コマ)や120コマ(8ミリ秒/コマ)の描画でアニメーションしています。
絶対時間のカウンタを作って、現在時刻から次の描画時刻までの差分を計算してafterの時間に指定すると正確な時間間隔で描画できるかと思います。
描画が追い付かなければ遅れていきますけど。

マウスをクリックしてから72秒で360度回転するサンプルコードを書いてみました。

import tkinter as tk
import datetime
from math import sin, cos, radians


# 新規ウィンドウを作成
root = tk.Tk()
root.title("SVV測定")
#root.attributes("-fullscreen", True)


# 画面サイズの指定
WIDTH = root.winfo_screenwidth()
HEIGHT = root.winfo_screenheight()


# ウィンドウ上にフレームを作成
frame = tk.Frame(root)
frame.place(x=-5, y=-5, width=WIDTH + 10, height=HEIGHT + 10)


# フレーム上に、キャンバスを作成
canvas = tk.Canvas(frame, width=WIDTH, height=HEIGHT, bg="black")
canvas.place(x=0, y=0, width=WIDTH + 10, height=HEIGHT + 10)

# "c"の初期値を定義 （浮動小数点数では誤差が発生するため1000倍した角度をcの値にする）
c = 0

DEGREE_PER_SEC = 5  # 1秒間に5 度回転、360度回転するのに360/5=72秒かかる
TIMES_PER_SEC = 50  # 1秒間に50回描画 (20ミリ秒に1回描画)
DEGREE_PER_TIME = int(DEGREE_PER_SEC * 1000 / TIMES_PER_SEC)  # 1000倍角
interval = datetime.timedelta(milliseconds=1000/TIMES_PER_SEC)

start_time = datetime.datetime.now()
next_time = None
timer = None

def rotate(delta):
    global timer, next_time, c
    timer = None
    next_time += interval  # 絶対時刻更新
    c += delta

    #動作確認のため360度回転したら自動停止
    if not -360 * 1000 <= c <= 360 * 1000:
        finish()
        return

    # ここで描画処理するが動作確認のため簡略化
    degree = c / 1000
    radian = radians(degree)
    canvas.delete("all")
    canvas.create_line(100, 100, 100 + 50 * sin(radian), 100 - 50 * cos(radian), width=10, fill="red")

    # 次の絶対時刻までの差分を計算してタイマー設定
    now = datetime.datetime.now()
    delay_ms = int((next_time - now).total_seconds() * 1000)
    print(degree, delay_ms, now)
    timer = root.after(delay_ms, rotate, delta)


def start_stop(delta):
    global next_time, start_time, timer
    if timer:
        # 回転中なので回転停止処理
        root.after_cancel(timer)
        timer = None
    else:
        # 回転開始処理
        next_time = start_time = datetime.datetime.now()
        rotate(delta)


def press_L(event):
    start_stop(DEGREE_PER_TIME)


def press_R(event):
    start_stop(-DEGREE_PER_TIME)


def finish(event=None):
    # Enterキーを押すことで全画面表示を終了し、回転角度を取得する
    root.destroy()
    degree = c / 1000
    print(degree, "度回転するのにかかった秒数:", (datetime.datetime.now() - start_time).total_seconds())


canvas.bind("<ButtonPress-1>", press_L) # 左クリックで呼び出すイベント
canvas.bind("<ButtonPress-3>", press_R) # 右クリックで呼び出すイベント
root.bind("<Return>", finish) # Enterキーで呼び出すイベント

root.mainloop()

追記： rotate_L と rotate_R を共通化してはいかがでしょうか？
それと、代入しない変数は global宣言不要です。

# 左回転時の基準時刻を取得し、rotateに渡す
def press_L(event):
    global next_time
    next_time = datetime.datetime.now()
    rotate(+1)
    def stop_L(event):
        root.after_cancel(after_id)
        canvas.tag_bind("img_snow", "<ButtonPress-1>", press_L)
    canvas.bind("<ButtonRelease-1>", stop_L)


# 右回転時の基準時刻を取得し、rotateに渡す
def press_R(event):
    global next_time
    next_time = datetime.datetime.now()
    rotate(-1)
    def stop_R(event):
        root.after_cancel(after_id)
        canvas.tag_bind("img_snow", "<ButtonPress-3>", press_R)
    canvas.bind("<ButtonRelease-3>", stop_R)


def rotate(delta):
    global next_time
    global tkimg
    global c
    global after_id
    c = c + delta
    R = c / 10
    canvas.delete("all")
    IMG = img.rotate(R, resample=Image.BICUBIC)
    tkimg = ImageTk.PhotoImage(IMG)
    canvas.create_image(WIDTH/2, HEIGHT/2, image=tkimg, anchor="center", tags="img")
    canvas.create_image(WIDTH/2, HEIGHT/2, image=tkimg_snow, anchor="center", tags="img_snow")
    next_time += interval
    now = datetime.datetime.now()
    delay_ms = int((next_time - now).total_seconds() * 1000)
    after_id = root.after(delay_ms, rotate, delta)

Comments

[ppap]

回答をありがとうございます。
>create_image は新たな図形を作ります。以前にcreate_imageした図形をdeleteしないとメモリをどんどん消費して重たくなりますよ。
■「canvas.delete("all")」を追加することで、不要な図形を削除するコードに修正しました。

>それと、テレビ放送でも1秒間に30コマ(33ミリ秒/コマ)、ゲームで秒60コマ(16ミリ秒/コマ)や120コマ(8ミリ秒/コマ)の描画でアニメーションしています。
■コマ送りの精度として、最低でも0.1°は保ちたいという事情があるため、20コマの描画に変更しました。

>絶対時間のカウンタを作って、現在時刻から次の描画時刻までの差分を計算してafterの時間に指定すると正確な時間間隔で描画できるかと思います。
■ここが上手くいきません。press_Lイベントの中にtime.time()など「現在時刻を読み取る」コマンドを挿入してみたのですが、エラーメッセージが表示され、時刻の読み取りができませんでした。
また、こちらのサイト (https://blog.amedama.jp/entry/2019/06/15/121632) によると、処理にかかる時間を開始・終了の前後で毎回計測して計算すると誤差が大きくなってしまうようです。
※サイトではsleepメソッドを用いた解決策を提示していますが、私のコードはafterメソッドを用いており、応用の仕方が分かりませんでした。。

さらに、こちらのサイト (https://kuroro.blog/python/ngQRGzqfuyK8WaCwkGid/) によると、そもそもafterメソッドは関数の読み込みで秒数の誤差が生じることがあり、「誤差はしょうがないもの」として紹介されていました。
しかし、以前質問で投稿したのですが (https://teratail.com/questions/dvwgn26naav5cz)、whileによるループが上手く動作しないため、現在のafterメソッドを用いた方法を採用している経緯があります。

これらのことから、現在も「画像を角速度5[deg/s]で回転させる」ことができていません。。
大変恐縮ですが、上記を解決するアイデアがありましたら、コードを添付していただけないでしょうか。
どうぞよろしくお願いいたします。

[shiracamus]

import datetime
print(datetime.datetime.now())
で時刻表示できませんか？
afterで誤差が出るのを補正するために絶対時刻との差分を使って次のafter時間に指定します。
例えば1秒間隔で実行するのであれば、次に呼び出すべき絶対時刻を記録しておいて現在時刻との差分をafterに指定し、呼び出されたタイミングで次に呼び出す絶対時刻に1秒加算し、現在時刻との差分をafterに指定します。
呼び出されて画像処理するまでに1.3秒かかっていたとしたら、afterには0.7秒を指定することになります。

[ppap]

時刻表示自体は出来ますが、イベント内で時刻表示ができません。
ソースコードの"press_L"イベントに、時刻表示を追加したものに修正いたしました。

"bt"および"lt"で時刻を定義していますが、「NameError: name 'bt' is not defined」のエラーが発生し、定義できていないようです。
そのため、printもできません。。

[shiracamus]

datetime.datetime() ではなく datetime.datetime.now() ですよ。

[ppap]

何度も回答をしてくださり、誠にありがとうございます。
大変申し訳ございません、ご指摘をありがとうございます。
"now"が抜けていた上に、globalにしていなかったため、動作していませんでした。

追記頂いたコードを拝見したところ、「ウィンドウが表示された後から」1秒ごとにprintするものだと理解しました。こちらを参考にしながら、「イベントが呼び出されてから」任意秒ごとにdelayさせるコードに修正いたしました。

動作させてみたところ、72秒で360°回転させるコードにも関わらず、72秒で240°しか回転させられませんでした。
やはり、イベントの中で2回時刻を読み取ると、ラグが生じやすくなってしまうのでしょうか？

[shiracamus]

そもそも、処理時間は間に合っていますか？
次の絶対時間までに処理がおわらないと、delay_ms がマイナス値になって、待ち時間なしで次の描画を行うことになります。
printl(delay_ms) で待ち時間が常にプラスであることを確認してみてください。

[shiracamus]

マウスをクリックしてから72秒で360度回転するサンプルコードを書いてみました。
描画処理は省略していますが、マウスをクリックしてから72秒間放置してみてください。
これに描画処理を書き加えて72秒で終わるか確認してみてください。
1回の描画で19ミリ秒以上かかるようだと72秒で終わりません。

TIMES_PER_SEC = 50 を 5 に変更すれば 1秒間に5回描画するようになります。

[ppap]

サンプルコードをありがとうございます。
クリックしてから72秒間放置してみましたが、何も起こりませんでした。
また、多数のエラーメッセージが表示されてしまいました。

描画処理を加えたものは回転が開始しないので、修正中です。

[shiracamus]

コンソールにメッセージが出力されていませんか？

$ python3 sample.py
0.1 19 2022-09-06 22:21:00.203371
0.2 20 2022-09-06 22:21:00.222778
0.3 20 2022-09-06 22:21:00.243317
0.4 19 2022-09-06 22:21:00.263808
0.5 20 2022-09-06 22:21:00.283129
0.6 19 2022-09-06 22:21:00.303424
（中略）
359.5 19 2022-09-06 22:22:12.083624
359.6 20 2022-09-06 22:22:12.102916
359.7 19 2022-09-06 22:22:12.123385
359.8 20 2022-09-06 22:22:12.143019
359.9 19 2022-09-06 22:22:12.163419
360.0 20 2022-09-06 22:22:12.182713
360.1 度回転するのにかかった秒数: 72.002465

[shiracamus]

秒針のようなものを描く処理を追加してみました。

[ppap]

出力されていません。
私はAnaconda Promptで「python」と入力して対話モードにしてからコードを実行しているのですが、shiracamusさんはどのような方法でコードを入力しておられますか？

[shiracamus]

WindowsのコマンドプロンプトやWSL2(Ubuntu)のシェルで 、
python3 スクリプト名
で実行しています。

[shiracamus]

修正されたコードの
next_time = datetime.datetime.now() + interval
では、絶対時刻になっていないので、処理時間に影響されてどんどん遅くなっていきますよ。
私のコードでは
next_time += interval # 絶対時刻更新
で絶対時刻を更新していて現在時刻には左右されません。

[ppap]

絶対時刻の記述箇所に関して回答を追記いただき、誠にありがとうございます。

"next_time += interval"とできるのは関数を呼び出したタイミングで既に「next_time」の定義を終えているからだと思います。
しかし、今回作成しようとしているコードでは「初回だけnext_time = datetime.datetime.now()」と定義してから、2周目以降は「interval」を足していく必要があります。
(いつクリックして回転開始するか、まちまちな為)

いただいたサンプルコードではそのポイントを考慮してくださっているのかもしれないのですが、私の環境では全く動作しない上に、私自身の理解が追い付いていないため、絶対時刻の更新に関しての問題をクリアできていません。

[shiracamus]

あなたのコードでは press_L や press_R 関数の最初の
next_time = datetime.datetime.now() + interval
で現在時刻からの固定時間後を次の時間にしていて
root.after(delay_ms, press_R, None)
で、関数を再度呼び出しているため、root.after 関数を呼んでから実際に press_R や press_L 関数が呼び出されるまでの遅延時間を考慮せずにnext_timeが更新されていきます。その間にtkinterエンジンが描画反映処理やイベント処理を行うので、結構遅延しますよ。

私のコードでは、回転開始処理をする start_stop関数で、初回だけ
next_time = datetime.datetime.now()
を実行していて、rotate関数では
next_time += interval
と「interval」を足して2回目以降の実行時間を決めて
root.after(delay_ms, rotate, delta)
でrotate関数を再度呼び出しているので、関数呼び出しまでの遅延時間に影響されることなく絶対時間間隔で関数が呼び出されます。

是非とも、私のコードで何をしているのか処理を追ってみてください。

[shiracamus]

直前のコメントを修正ミスしていたため訂正しました。

[ppap]

何度もアドバイスを下さり、本当にありがとうございました。
なぜ"next_time = start_time = datetime.datetime.now()"とするのか等、最後まで理解できなかった箇所もありましたが、shiracamusさんのコードを参考に、任意の角速度で回転させるコードを作成することができました。
（コードは修正済みです。）

[shiracamus]

next_time = datetime.datetime.now() は、クリックした時点を回転開始絶対時間にするための代入です。
start_time にも代入しているのは、360度回転後に実際にどれだけの時間を要したかをprintするためのもので、本番環境ではstart_time = の部分は削除してください。

[shiracamus]

rotate_L と rotate_R を共通化するコードを追記しました。

[ppap]

next_time, start_timeに関する解説、rotateの共通化に関するアイデアを頂き、ありがとうございます。

[ppap]

回答の追記をありがとうございます。
このように共通化することもできるのですね、参考にさせて頂きます。

グローバル宣言に関してもありがとうございます。
間違って理解していることに気が付いていなかったので、とても理解が深まりました。

[shiracamus]

あと、Python標準で id関数 があるので、変数名に id は使わない方がいいですよ。
after_id とかにしてはいかがでしょうか？

[ppap]

id関数というものもあるのですね。
教えていただき、ありがとうございます。
after_id等の名前に変えてみようかと思います。