How do I create 4 squares in tkinter so that they start in the middle of the screen and each one of them goes in its own corner and disappears?

Question:

Here is the code, I have managed to position the square a little bit but the whole thing is just messy and fast when executed, it doesn’t really resemble anything, let alone what I wanted to make.

What do I need to do in order to get these 4 squares to start in the middle and move to each corner, disappearing from the screen? I made an example here:

from tkinter import *

W, H = 500, 500
tk = Tk()
canvas = Canvas(tk,width=W,height=H)
canvas.pack()

class Square:
    def __init__(self,size,speedx, speedy, color):
        self.square = canvas.create_rectangle(50,50,100,100,fill=color)
        self.speedx = speedx
        self.speedy = speedy
        self.movement()

    def movement(self):
        canvas.move(self.square,self.speedx,self.speedy)
        pos = canvas.coords(self.square)
        if pos[2]>=W or pos[0]<=0:
            self.speedx *= -1
        if pos[3]>=H or pos[1]<=0:
            self.speedy *= -1
        tk.after(40,self.movement)

square1 = Square(200,150,200,'brown')
square2 = Square(200,200,150,'yellow')
square3 = Square(200,200,200,'green')
square4 = Square(200,150,150,'blue')
tk.mainloop()
Asked By: luvs2spwge

||

Answers:

You need to define direction for each rectangle separately, so that each of them moves its own way.

import tkinter as tk

W, H = 500, 500
SPEED = 20
window = tk.Tk()
canvas = tk.Canvas(window, width=W, height=H)
canvas.pack()


class Square:
    def __init__(self, x, y, color, speed_x, speed_y):
        self.speed_x = speed_x
        self.speed_y = speed_y
        self.square = canvas.create_rectangle(x, y, x+50, y+50, fill=color)
        self.movement()

    def movement(self):
        canvas.move(self.square, self.speed_x, self.speed_y)
        window.after(200, self.movement)


Square(200, 200, 'brown', -SPEED, -SPEED)
Square(250, 200, 'yellow', SPEED, -SPEED)
Square(200, 250, 'green', -SPEED, SPEED)
Square(250, 250, 'blue', SPEED, SPEED)
window.mainloop()

Output:

enter image description here

Answered By: Alderven
Categories: questions Tags: , ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.