円を動かすアニメーションを作りたい。

Question

円を動かすアニメーションを作りたいのですが、できないです。
四角形を動かすアニメーションはできました
四角形のアニメーションと円を動かすアニメーションを二つ同じ画面で作りたいです
これを応用してどのようにすればできるでしょうか
グリッド線を下から上へ行くような円のアニメーションがいいです。

BitArrowというサイトでプログラミングを行っているのですが、
そこのpythonのグラフィックスライブラリがimport gとなっています。
BitArrow　pythonと検索すれば出てくると思います。

インデントの修正をしました。

import g
class Point:
    def __init__(self,x,y):
        self.x=x
        self.y=y
    def __str__(self):
        return "Point({},{})".format(self.x,self.y)
    def move(self, dx,dy):
        self.x+=dx
        self.y+=dy
    def draw(self):
        g.fillOval(self.x-5, self.y-5,10,10)
class Shape:
    def move(self,dx,dy):
        self.o.move(dx,dy)
class Rectangle(Shape):
    def __init__(self, o, width, height):
        self.o=o
        self.width=width
        self.height=height
    def draw(self):
        g.fillRect(self.o.x, self.o.y, self.width, self.height)
g.drawGrid()
def move():
    global r1
    global r2
    g.clear()
    r1.draw()
    r2.draw()
    r1.move(10,10)
    r2.move(0,-10)
    g.setTimeout(move,100)
r1=Rectangle(Point(20,50),50,50)
r2=Rectangle(Point(120,150),50,50)
move()
g.wait()

Comments

[aokikenichi]

インデントが崩れてます

```Python
コード
```

で例示をお願い致します

[hope_mucci]

コードは<code>ボタンを使ってシンタックスハイライトしてください。
以下のヘルプを読んでコード部分を編集しなおしてください。
https://teratail.com/help/question-tips#questionTips3-5
特にPythonはインデント命なのでインデントが崩されるとこちらでテストできません。
プレビューもちゃんと確認してね。

[hope_mucci]

あと、gというライブラリをimportしているようですが、これは一体どういうものでしょうか？
標準では入っていないものだと思います。説明をお願いします。

[nekodoro]

BitAllowというサイトでプログラミングを行っているのですが、
そこのpythonのグラフィックスライブラリがimport gとなっています。
BitAllow　pythonと検索すれば出てくると思います。

[hope_mucci]

BitAllow　python で検索しましたが、怪しげなサイトしか検索されません。
本当に上記の検索ワードで正しいですか？

[nekodoro]

はい。あっています

[aokikenichi]

きっと
Bit Arrow
https://bitarrow.eplang.jp/
でしょうか

import g
については
https://bitarrow.eplang.jp/index.php?py_graphics
ですね。

Python標準のものではないので、こういった情報を正確に提示いただけませんと、いくらPythonに長けた方でも回答出来ないです。

[nekodoro]

あ、すみません。。
ありがとうございます。

[aokikenichi]

質問内容を修正なさった方が正しい回答が得られる可能性が高まるかと思います。

また、インデントなしのコードの方は不要かと思いますので削除なさってください。

[hope_mucci]

rとlが間違っている、ということです。
こういった思い込みは良くないですよ。デバッグでも大きく影響します。

[aokikenichi]

例示いただいたコードで動きますか？
私が現在試したところ
7行目
def __str__(self):

で
Error: 文法エラー
at null:null:null)
が出てしまいます。Bit Arrowのブラウザ版で動かしてますので環境に違いはないと思います。

[nekodoro]

一応もう一回試しましたが動きました。
そのコードを張りなおして一応訂正しました。
ブラウザーで実行して出ました。

[hope_mucci]

def __str__(self):　があると文法エラーとなり動作しないですね。
def __proto__(self): でも同様に文法エラーとなるので、javascirptの予約語が引っかかる？
なお、chrome(edge)とfirefoxでエラーメッセージが違うのでブラウザ依存の何かが原因でしょう。
safariだと動作するのでしょうか。

まあ、__str__を消せばいいのであまり問題ではないですけど。

Answer 1

以下のような指針で円の描画を追加すると良いでしょう。

指針

• 四角形を描画し、動かすプログラムはできているので、今度はそれをそのまま円に転用します。
• まずは四角形のクラスをそのまま修正し、円を描画するように改造してみましょう。
• 元の四角形描画クラスのfillRectをfillOvalに変更すれば円が描画できます。
• 図形の初期位置は、グラフの左上が原点で、下の端（Y軸)が500なので、(50,450)あたりから始めると良いでしょう。
• 四角形ではr1.move(10,10)右下へ向けて動いていました。

X座標を正方向に動かすと右へ、負方法へ動かすと左へ動きます。
Y座標は正方向に動かすと下へ、負方向へ動かすと上へ動きます。
今度は左下から右上に動かしたいということで、Xは正の値、Yは負の値をmoveで加算していけば右上に動きます。

• ここまで出来たら、Rectangleと同じように円のクラス(名前は何でもよいがOvalが適当か)をRectangleと同様に作成します。
• r1にRectangleクラスのオブジェクトを作成していましたが、今度はr2にOvalクラスのオブジェクトを作成してみましょう。そして、move関数内でr1と同様にdrawとmoveを行えば四角形と円が同時に描画できます。

Comments

[nekodoro]

おかげさまでできました！
ありがとうございます！！