Undeniable That You are ready to Graduate to Playing With Widgets : Any Kid Can Code
By: Laxman Singh
Tags: Kids And Tech, Python Programming, Kids, Python, Parenting

Let us capitalize on our learnings so far. In last two blogs, we learnt GUI Programming and managed move some widgets within our canvas. You can refer below blogs:

We will solve two tasks mentioned in the above blog and i will try to provide different ways of implementing them.

Task 1: More than 1 object in the canvas and moving:

I will make one square and 1 circle to move an play around in the canvas:

'''

Program to make rectangle and make it move in canvas

'''

# importing important libraries - we already know about all of them

from tkinter import *

import random

import time



# defining colors so that everytime you run this program will have different color rectangle

color = ["red", "green", "black", "blue", "yellow"]



# creating an instance of tkinterface

tk = Tk()



# deciding height and width of the canvas, we will pass this while creating canvas below

# WIDTH and HEIGHT are constant to give your program more understanding

WIDTH = 500

HEIGHT = 500



# creating our playground

canvas = Canvas(tk, width=WIDTH, height=HEIGHT, bg=random.choice(color))

canvas.pack()





# creating widget i.e, rectangle and oval here and assigning it to variable

rectangle = canvas.create_rectangle(10,20,60,60,fill=random.choice(color))

circle = canvas.create_oval(20,20,50,50,fill=random.choice(color))



# deciding the speed of the rectangle to move

# again both are variables and positive value will make it move forward and vice versa

moveXCoord = 1

moveYCoord = 3

moveXCoord_circle = 4

moveYCoord_circle = 1



# function to keep track of position

def checkBoundary(shape, moveXCoord, moveYCoord):

'''

This function will check the current position

in case figures is moving out of canvas

it will change the movement to negative

and (negative negative makes positive)

So, it will work iteratively

:return: new position to move

negative means move backward

positive means move forward

'''

pos = canvas.coords(shape)

if pos[3] >= HEIGHT or pos[1] <= 0:

moveYCoord = -moveYCoord

if pos[2] >= WIDTH or pos[0] <= 0:

moveXCoord = -moveXCoord

return moveXCoord, moveYCoord



# Introducing infinite loop

# it will run the program till you wont close it

while True:

canvas.move(rectangle, moveXCoord, moveYCoord)

canvas.move(circle, moveXCoord_circle, moveYCoord_circle)

moveXCoord, moveYCoord = checkBoundary(rectangle, moveXCoord, moveYCoord)

moveXCoord_circle, moveYCoord_circle = checkBoundary(circle, moveXCoord_circle, moveYCoord_circle)



tk.update()

time.sleep(0.001)



tk.mainloop()

Task 2: Make a loop and pick the coordinates randomly to turn up with different figures in the canvas. Then, try to make them move.

'''

Program to make rectangle and make it move in canvas

'''

# importing important libraries - we already know about all of them

from tkinter import *

import random

import time



# defining colors so that everytime you run this program will have different color rectangle

color = ["red", "green", "black", "blue", "yellow","cyan","white","magenta"]



# creating an instance of tkinterface

tk = Tk()



# deciding height and width of the canvas, we will pass this while creating canvas below

# WIDTH and HEIGHT are constant to give your program more understanding

WIDTH = 800

HEIGHT = 600



# creating our playground

canvas = Canvas(tk, width=WIDTH, height=HEIGHT, bg=random.choice(color))

canvas.pack()



rectangle = []

xy_coord = []

for cr_rect in range(30):

# creating widget i.e, rectangle here and assigning it to variable

side = random.randint(50,200)

rectangle.append(canvas.create_rectangle(10,20,side,side,fill=random.choice(color)))

# rectangle.append(canvas.create_polygon(80,90,50,60,side,20,fill=random.choice(color)))



# deciding the speed of the rectangle to move

# again both are variables and positive value will make it move forward and vice versa

moveXCoord = random.randint(-10,10)

moveYCoord = random.randint(-10,10)

xy_coord.append([moveXCoord,moveYCoord])



# function to keep track of position

def checkBoundary(shape, moveXCoord, moveYCoord):

'''

This function will check the current position

in case figures is moving out of canvas

it will change the movement to negative

and (negative negative makes positive)

So, it will work iteratively

:return: new position to move

negative means move backward

positive means move forward

'''

pos = canvas.coords(shape)

if pos[3] >= HEIGHT or pos[1] <= 0:

moveYCoord = -moveYCoord

if pos[2] >= WIDTH or pos[0] <= 0:

moveXCoord = -moveXCoord

return moveXCoord, moveYCoord



# Introducing infinite loop

# it will run the program till you wont close it

while True:

for cnt_rect in range(len(rectangle)):

canvas.move(rectangle[cnt_rect], xy_coord[cnt_rect][0], xy_coord[cnt_rect][1])

xy_coord[cnt_rect][0], xy_coord[cnt_rect][1] = checkBoundary(rectangle[cnt_rect], xy_coord[cnt_rect][0], xy_coord[cnt_rect][1])



tk.update()

time.sleep(0.001)



tk.mainloop()

I would love to see your achievement in comment section as the output generated from the above two codes.

There are two tasks done. Understand them, its nothing different just applied our understanding of variables, loop, condition to come up with this. Be ready to graduate to next level. I think we will move to OOP (object oriented programming) by next and believe me, you are ready for that.

Create this! and make them move will be fun! I can’t wait much :)

We will understand the concept and once we understood the concept, I will provide you an example to do the same thing using loop and then using our new friend OOP. And, you will see more organised and better output. I hope you will then turn up to this blog and change this code in a more beautify manner. Or, as we are python programmers, we will do in pythonic way. Be ready with more and more practice. And, I will work towards making the next level easy and simple for you. Keep working hard and enjoy! I will be back soon!