教材

線を移動する

Posted on by pasocafe00 / 0件のコメント

Lineを使うと線が描けますが、その線を移動するにはどうしましょうか？

線Aを線Bの位置に移動するプログラムを作ってみましょう。

線を移動するだけ！なんだけど！難しいので頑張ってね！頭の体操！体操！

STEP1

まずはじめに移動元（線A）と移動先（線B）を描くプログラムを作ってみます。

# 移動元Aと移動先B
a1, a2 = None, None
b1, b2 = None, None

def setup():
    size(500, 500)
    
    # 移動元Aと移動先B
    global a1, a2, b1, b2
    a1 = PVector(150, 400)
    a2 = PVector(200, 400)
    b1 = PVector(300, 100)
    b2 = PVector(350, 200)

def draw():
    background(255, 230, 200)

    # 移動元Aと移動先B
    stroke(0)
    line(a1.x, a1.y, a2.x, a2.y)
    line(b1.x, b1.y, b2.x, b2.y)

STEP2

次に（移動元と移動先は目安として残しつつ）実際に移動する線Pを描いてみましょう。
いきなり移動する部分に手を付けると大変なので、線Pを描くコードを用意して移動元の線Aに重なるように描いてみましょう。色は赤色で描きます。

# 移動元Aと移動先B
a1, a2 = None, None
b1, b2 = None, None

# 移動する線P
p1, p2 = None, None

def setup():
    size(500, 500)
    
    # 移動元Aと移動先B
    global a1, a2, b1, b2
    a1 = PVector(150, 400)
    a2 = PVector(200, 400)
    b1 = PVector(300, 100)
    b2 = PVector(350, 200)

    # 移動する線P
    global p1, p2
    p1 = PVector(a1.x, a1.y) # 線Aの位置と同じにする
    p2 = PVector(a2.x, a2.y) # 線Aの位置と同じにする

def draw():
    background(255, 230, 200)

    # 移動元Aと移動先B
    stroke(0)
    line(a1.x, a1.y, a2.x, a2.y)
    line(b1.x, b1.y, b2.x, b2.y)
    
    # 移動する線P
    stroke(255,0,0)
    line(p1.x, p1.y, p2.x, p2.y)

STEP3

移動するロジックを考える。

  • drawは1秒に60回呼び出される。永遠に
  • 移動を初めて移動が終わった後は止まらないといけない
  • 移動の終わりの条件を考える
  • そもそも移動元から移動先まで何回かけて描くか（とりあえず２００回とする）
  • ２００回移動したら終わりにする＝移動の終わりの条件

正確に移動させるのは後として適当に200回移動させてみる

# 移動元Aと移動先B
a1, a2 = None, None
b1, b2 = None, None

# 移動する線P
p1, p2 = None, None

# 移動計算用
step = None
stepMax = None

def setup():
    size(500, 500)
    
    # 移動元Aと移動先B
    global a1, a2, b1, b2
    a1 = PVector(150, 400)
    a2 = PVector(200, 400)
    b1 = PVector(300, 100)
    b2 = PVector(350, 200)

    # 移動する線P
    global p1, p2
    p1 = PVector(a1.x, a1.y) # 線Aの位置と同じにする
    p2 = PVector(a2.x, a2.y) # 線Aの位置と同じにする
    
    # 移動計算用
    global step, stepMax
    step = 0
    stepMax = 200

def draw():
    background(255, 230, 200)

    # 移動元Aと移動先B
    stroke(0)
    line(a1.x, a1.y, a2.x, a2.y)
    line(b1.x, b1.y, b2.x, b2.y)
    
    # 移動する線P
    stroke(255,0,0)
    line(p1.x, p1.y, p2.x, p2.y)
    
    # 移動計算用
    global step
    step += 1
    if step < stepMax:
        p1.x += 1  # とりあえず適当な方向に移動
        p1.y += -1 # とりあえず適当な方向に移動
        p2.x += 1  # とりあえず適当な方向に移動
        p2.y += -1 # とりあえず適当な方向に移動

STEP4

移動先の位置にちゃんと動くように移動量を計算しましょう。

  • 移動元から移動先まで200回かけて移動する
  • 移動元から移動先までの距離を200等分する
  • 1回の移動量が判明
  • 移動量V（PVector）に移動量を入れる
# 移動元Aと移動先B
a1, a2 = None, None
b1, b2 = None, None

# 移動する線P
p1, p2 = None, None

# 移動計算用
step = None
stepMax = None

# 移動計算用（追加）
v1, v2 = None, None

def setup():
    size(500, 500)
    
    # 移動元Aと移動先B
    global a1, a2, b1, b2
    a1 = PVector(150, 400)
    a2 = PVector(200, 400)
    b1 = PVector(300, 100)
    b2 = PVector(350, 200)

    # 移動する線P
    global p1, p2
    p1 = PVector(a1.x, a1.y) # 線Aの位置と同じにする
    p2 = PVector(a2.x, a2.y) # 線Aの位置と同じにする
    
    # 移動計算用
    global step, stepMax
    step = 0
    stepMax = 200

    # 移動計算用（追加）
    global v1, v2
    v1 = PVector(0, 0)
    v2 = PVector(0, 0)
    v1.x = (b1.x - a1.x) / stepMax
    v1.y = (b1.y - a1.y) / stepMax
    v2.x = (b2.x - a2.x) / stepMax
    v2.y = (b2.y - a2.y) / stepMax

def draw():
    background(255, 230, 200)

    # 移動元Aと移動先B
    stroke(0)
    line(a1.x, a1.y, a2.x, a2.y)
    line(b1.x, b1.y, b2.x, b2.y)
    
    # 移動する線P
    stroke(255,0,0)
    line(p1.x, p1.y, p2.x, p2.y)
    
    # 移動計算用
    global step
    step += 1
    if step < stepMax:
        p1.x += v1.x # 移動量を加算
        p1.y += v1.y # 移動量を加算
        p2.x += v2.x # 移動量を加算
        p2.y += v2.y # 移動量を加算

コメントする