APP #8

“LEONARDO”
CAN YOU GUESS WHAT WE’LL
CREATE TODAY?

Leonardo
HOW DO WE
MAKE
LEONARDO?
TOPICS

Advanced Drawing
01 How do we make the screen only update when we want it to?
How do we make the turtle have custom shapes

Keyboard Input
02 How do we make the program execute certain functions when we press
certain buttons on the keyboard

Mouse Input & Undo

03 How do we take mouse input from user
How do we make a turtle undo it’s previous action?
ACTIVITY#1.1
Continuing on Last Session

We will continue developing basic

Pacman to make it better.

Take the starter code to prepare

for the rest of the activity.
 ACTIVITY#1.1
A quick warm-up
How do we make Pacman last 30 seconds?
How do we make the title display the time left and the score?

Use the time module and the

time.time() function to make
the game close after 30s
Use the
turtle_name.screen.title()
function to update the title
and score every cycle.
Change the for loop to a
while loop that runs as long
as the time passed <= 30s
and updates the time passed
every cycle as well as the
game’s title.
 ACTIVITY#1.1
Solution

import time
# Add to game variables
spawn_time = time.time()
time_passed = 0

while time_passed <= 30:

#previous code
time_passed = time.time()-spawn_time
main_turtle.screen.title( /
f"Score:{score}|Time Left:{int(30-time_passed)}")
ACTIVITY#1.2
Try the following modifications to your code
What do you think will happen?

# Add after creating the main turtle

main_turtle.screen.tracer(0)
# Add at the end of the while loop
main_turtle.screen.update()

What happens if you remove the second line?

What if you remove the first?
 ACTIVITY#1.3
Try the following code in another script
What do you think will happen?
import turtle
def make_character(turtle_name):
turtle_name.begin_poly()
turtle_name.lt(90)
turtle_name.fd(20)
turtle_name.lt(90)
turtle_name.circle(20, 330, 15)
turtle_name.end_poly()
turtle_name.reset()
pacman = turtle_name.get_poly()
turtle_name.screen.register_shape("pacman", pacman)
turtle_name.color('goldenrod')
turtle_name.shape("pacman")
main_turtle = turtle.Turtle()
make_character(main_turtle)
for _ in range(12):
main_turtle.fd(_*50)
main_turtle.lt(90)
 ACTIVITY#1.3
Continuing on the game
How do we make a turtle and use it as the main character?

Use the method from the

previous slide to make the
shape of Pacman, get it as an
object, register it and make
the main_turtle have the
shape of Pacman.

#Hint: turtle considers the top

of the shape you draw and
register to be the fornt of the
turtle that takes that shpe,
which is why we draw pacman
with his mouth facing up so
that the mouth is at his front.
ACTIVITY#1.3
Solution
# Remove the lines in red and add the lines in yellow
def draw_character(turtle_name):
# The rest of the function
def make_character(turtle_name):
turtle_name.begin_poly()
turtle_name.lt(90)
turtle_name.fd(20)
turtle_name.lt(90)
turtle_name.circle(20, 330, 15)
turtle_name.end_poly()
turtle_name.reset()
pacman = turtle_name.get_poly()
turtle_name.screen.register_shape("pacman", pacman)
turtle_name.color('goldenrod')
turtle_name.shape("pacman") # Inside the while loop
if motion == "bk":
draw_character(main_turtle) main_turtle.lt(180)
make_character(main_turtle) elif motion == "rt":
main_turtle.penup() main_turtle.rt(90)
main_turtle.screen.update() elif motion == "lt":
main_turtle.lt(90)
else:
main_turtle.fd(20)
draw_character(main_turtle)
clear_screen(main_turtle)
 ACTIVITY#1.4
Continuing on the game
How do we make the game take up the whole screen?

Make the game take a

resolution of 1920 X
1080 or whichever
resolution make the
game take the whole
screen on your device.

After using turtle_name.screen.setup(width, height)

Try the following command:
main_turtle.screen.setup(1920, 1080, startx=0, starty=0)
What do you observe? What does this command do?
ACTIVITY#1.5
Try the following code in another script
What do you think will happen?
import turtle
def move_up():
main_turtle.setheading(90)
main_turtle.fd(20)
def move_down():
main_turtle.setheading(-90)
main_turtle.fd(20)
def move_left():
main_turtle.setheading(180)
main_turtle.fd(20)
def move_right():
main_turtle.setheading(0)
main_turtle.fd(20)
main_turtle = turtle.Turtle()
main_turtle.speed(0)
main_turtle.screen.onkeypress(move_up,'Up')
main_turtle.screen.onkeypress(move_down,'Down')
main_turtle.screen.onkeypress(move_left,'Left')
main_turtle.screen.onkeypress(move_right,'Right')
main_turtle.screen.listen()
turtle.done()
 ACTIVITY#1.5
Continuing on the game
How do we make the game main character move using the arrow keys?

Use the method from the

previous slide to make
the character move by
creating 4 functions one
for each motion and
assigning them to
keyboard keys then
listen to keyboard inputs.

The following function is used to bind functions to keyboard inputs

main_turtle.screen.onkeypress(FUNCTION_NAME,'KEY_NAME)
In order for keyboard inputs to work you have to tell turtle to listen to them using:
main_turtle.screen.listen()
In order for reading inputs to work you have to use turtle.done() as your main loop.
ACTIVITY#1.5
Solution
# Add the lines in yellow and remove the lines in red
def move_up():
main_turtle.setheading(90)
main_turtle.fd(20) motion = input('Where would you
like to move next? \n(forward: fd,
def move_down(): backward: bk, left: lt, right: rt):')
main_turtle.setheading(-90)
main_turtle.fd(20) if motion == "bk":
main_turtle.lt(180)
def move_left(): elif motion == "rt":
main_turtle.setheading(180) main_turtle.rt(90)
main_turtle.fd(20) elif motion == "lt":
main_turtle.lt(90)
def move_right(): else:
main_turtle.setheading(0) main_turtle.fd(20)
main_turtle.fd(20)
main_turtle.screen.onkeypress(move_up,'Up')
main_turtle.screen.onkeypress(move_down,'Down')
main_turtle.screen.onkeypress(move_left,'Left')
main_turtle.screen.onkeypress(move_right,'Right')
main_turtle.screen.listen()
ACTIVITY#2.1
 ACTIVITY#2.1
Try the following code in another script
What do you think will happen?
import turtle
def init_turtle(width = 1, color = 'black', starting_pos= (0,0), speed = 0,
turtle_visible = True, shape = 'classic', starting_heading = 0):
turtle_name = turtle.Turtle()
turtle_name.width(width)
turtle_name.color(color)
turtle_name.speed(speed)
turtle_name.shape(shape)
turtle_name.setheading(starting_heading)
turtle_name.penup()
turtle_name.goto(starting_pos)
turtle_name.pendown()
if not turtle_visible:
turtle_name.hideturtle()
return turtle_name
# Make sure windows scaling is set to 100% for this to work
bg_turtle = init_turtle(turtle_visible = False)
bg_turtle.screen.setup(1920, 1080, startx=0, starty=0)
bg_turtle.screen.bgpic('Use VS to copy the path of the background gif to here')
bg_turtle.screen.tracer(0)
turtle.done()
ACTIVITY#2.2
Try the following code in another script
What do you think will happen?

import turtle
turtle_name = turtle.Turtle()
turtle_name.width(5)
turtle_name.ondrag(turtle_name.goto)
turtle.done()
ACTIVITY#2.2
Try the following code in another script
What do you think will happen?

import turtle
turtle_name = turtle.Turtle()
turtle_name.screen.tracer(0)
turtle_name.width(5)
def draw_with_turtle(x,y):
turtle_name.goto(x,y)
turtle_name.screen.update()
turtle_name.ondrag(draw_with_turtle)
turtle.done()
 ACTIVITY#2.2
Continuing on the game
How do we make a pen to draw with on the screen?

Use the method from the previous slide to create a pen turtle and make
it be draw on the screen when it is dragged by the mouse.
Make the pen have a circle shape.
 ACTIVITY#2.2
Continuing on the game
How do we stop the pen from drawing outside the canvas?

The canvas has the following pixel boundaries:

-934 < x < 448
-525 < y < 513
 ACTIVITY#2.2
Solution
# Add the lines in yellow
#def init_turtle(#arguments):
def draw_with_turtle(x,y):
if x > -934 and x < 448 and y > -525 and y < 513:
pen_turtle.goto(x,y)
pen_turtle.screen.update()
# Make sure windows scaling is set to 100% for this to work
bg_turtle = init_turtle(turtle_visible = False)
bg_turtle.screen.setup(1920, 1080, startx=0, starty=0)
bg_turtle.screen.bgpic('M:/Vortex Fury Code/Turtle/Session 3/bg.gif')
bg_turtle.screen.tracer(0)
pen_turtle = init_turtle()
pen_turtle.shape('circle')
pen_turtle.ondrag(draw_with_turtle)
pen_turtle.screen.update()
turtle.done()
ACTIVITY#2.3
Try the following code in another script
What do you think will happen?

import turtle
turtle_name = turtle.Turtle()
turtle_name.width(5)
turtle_name.screen.onclick(turtle_name.goto)
turtle.done()
 ACTIVITY#2.3
Continuing on the game
How do we make the pen snap to where we click so that we can continue
drawing in another place?

Use the method from the previous slide to make the pen go
without drawing to where we clicked on the screen.
 ACTIVITY#2.3
Solution
# Add the lines in yellow
def handle_click(x,y):
if x > -934 and x < 448 and y > -525 and y < 513:
pen_turtle.penup()
pen_turtle.goto(x,y)
pen_turtle.pendown()
pen_turtle.screen.update()

pen_turtle = init_turtle()
pen_turtle.shape('circle')
pen_turtle.ondrag(draw_with_turtle)
pen_turtle.screen.onclick(handle_click)
pen_turtle.screen.update()
ACTIVITY#2.4
Try the following code in another script
What do you think will happen?

import turtle
turtle_name = turtle.Turtle()
turtle_name.width(5)
turtle_name.penup()
turtle_name.hideturtle()
turtle_name.rt(90)
turtle_name.write('Hello World', font=('Arial', 34, 'normal'))
turtle_name.fd(50)
turtle_name.write('This is Python Turtle', font=('Calibri', 24, 'italic'))
turtle_name.fd(50)
turtle_name.write('At Vortex Robotics', font=('Times New Roman', 14, 'bold'))
turtle.done()
 ACTIVITY#2.4
Continuing on the game
How do we draw the GUI for pen size and color?

The pen sizes are 50, 35, 25, 15, 10, 7, 5, 3, 1. The turtle writes ‘Pen Size:’ at (400,460).
The turtle starts drawing the pen size dots at (520,350) and it moves a distance of (pensize + 10)
between each do and the next. The turtle writes ‘Pen Color:’ at (400,200)
The font used for writing is "Calibri", 72, "bold"
 ACTIVITY#2.4
Continuing on the game
How do we detect what pen size the user clicks and change the turtle width to it?

The coordinates for the center of the first pen size are (520,350).
For each pen size check whether the clicked coordinates are within pensize/2 of it’s center
coordinates, if it is then make the pen turtle width = the pen size. After checking add pensize+10
to the center coordinates to get the center coordinates for the next pen size then repeat.
Add an else condition to the handle_click(x,y) function to allow it to change the pen size.
 ACTIVITY#2.4
Solution
# Add the lines in yellow
def handle_click(x,y):
if x > -934 and x < 448 and y > -525 and y < 513:
pen_turtle.penup()
pen_turtle.goto(x,y)
pen_turtle.pendown() def draw_pensize():
else: bg_turtle.penup()
change_pensize(x,y) bg_turtle.color('white')
pen_turtle.screen.update() bg_turtle.goto(460,400)
bg_turtle.write('Pen Size:', font=("Calibri", 72, "bold"))
def change_pensize(x,y): bg_turtle.goto(520,350)
pensize_x = 520 for pensize in pensizes:
pensize_y = 350 bg_turtle.dot(pensize)
for pensize in pensizes: bg_turtle.fd(pensize+10)
if x > pensize_x - pensize/2 and\ bg_turtle.goto(460,200)
x < pensize_x + pensize/2 and\ bg_turtle.write('Pen Color:', font=("Calibri", 72, "bold"))
y > pensize_y - pensize/2 and\ pensizes = [50, 35, 25, 15, 10, 7, 5, 3, 1]
y < pensize_y + pensize/2 :
pen_turtle.width(pensize) # Make sure windows scaling is set to 100%
break bg_turtle = init_turtle(turtle_visible = False)
pensize_x += pensize + 10 bg_turtle.screen.setup(1920, 1080, startx=0, starty=0)
bg_turtle.screen.bgpic('Your bg.gif path')
bg_turtle.screen.tracer(0)
draw_pensize()
ACTIVITY#2.5
Try the following code in another script
What do you think will happen?

import turtle
turtle_name = turtle.Turtle()
turtle_name.width(5)
turtle_name.color(255,255,255)
for _ in range(4):
turtle_name.fd(100)
turtle_name.rt(90)
turtle.done()
ACTIVITY#2.5
Try the following code in another script
What do you think will happen?

import turtle
turtle_name = turtle.Turtle()
turtle_name.width(5)
turtle_name.color(1,1,1)
for _ in range(4):
turtle_name.fd(100)
turtle_name.rt(90)
turtle.done()
 ACTIVITY#2.5
Continuing on the game
How do we draw the red, green and blue sliders to change the color of the pen.

The color box starts at (490,190), has a width of 400 and a length of 100.
The slider turtles have the following attributes: shape = 'square', color = 'white', width = 10,
starting_heading = -90. The starting position for red_slider: (550,0), green_slider: (700,0),
blue slider: (850,0).
The sliders are drawn by the slider turtles moving by 1.5 decreasing color value and repeating.
This is done on 255 steps.
 ACTIVITY#2.5
Solution
# Add the following functions
def draw_color(turtle_name, width, height, color):
turtle_name.goto(490,190)
turtle_name.color(color) # Add the following lines of code after bg
turtle_name.begin_fill() turtle’s code
for _ in range(2): pencolor = (0,0,0)
turtle_name.fd(width) draw_color(bg_turtle, 400, 100, pencolor)
turtle_name.rt(90)
turtle_name.fd(height)
turtle_name.rt(90) red_slider = init_turtle(shape = 'square', \
turtle_name.end_fill() color = 'white', width = 10, \
def draw_sliders(red_slider, green_slider, \ starting_pos = (550,0), \
blue_Slider): starting_heading = -90)
for brightness in range(255): green_slider = init_turtle(shape = 'square', \
red_slider.color((255-brightness)/255, 0, 0) color = 'white', width = 10, \
red_slider.fd(1.5) starting_pos = (700,0), \
starting_heading = -90)
green_slider.color(0, (255-brightness)/255, 0) blue_Slider = init_turtle(shape
green_slider.fd(1.5) = 'square', \
blue_Slider.color(0, 0, (255-brightness)/255) color = 'white', width = 10, \
blue_Slider.fd(1.5) starting_pos = (850,0), \
red_slider.color('white') starting_heading = -90)
green_slider.color('white') draw_sliders(red_slider, green_slider, \
blue_Slider.color('white') blue_Slider)
red_slider.penup()
green_slider.penup()
blue_Slider.penup()
 ACTIVITY#2.5
Continuing on the game
How do we detect what R,G,B values the user has
selected and apply them to pen color?

Make each slider when it’s turtle is dragged, move the slider turtle to the new location,
change the color according to the coordinates of the slider turtle and redraw the color
square, then update the screen as long as it’s y value is beween 0 and -382.5.
Assign the function of each slider to it’s turtle in the draw_sliders() function.
 ACTIVITY#2.5
Solution
def change_red(x,y):
global pencolor
if y >= -382.5 and y <= 0:
red_slider.goto(550, y)
pencolor = ((255 + y/1.5)/255, pencolor[1], pencolor[2])
pen_turtle.color(pencolor)
draw_color(bg_turtle, 400, 100, pencolor)
bg_turtle.screen.update()
def change_green(x,y):
global pencolor
if y >= -382.5 and y <= 0: # Add to the draw_sliders() function
green_slider.goto(700, y) red_slider.ondrag(change_red)
pencolor = (pencolor[0], (255 + y)/255, pencolor[2]) green_slider.ondrag(change_green)
pen_turtle.color(pencolor) blue_Slider.ondrag(change_blue)
draw_color(bg_turtle, 400, 100, pencolor)
bg_turtle.screen.update()
def change_blue(x,y):
global pencolor
if y >= -382.5 and y <= 0:
blue_Slider.goto(850, y)
pencolor = (pencolor[0], pencolor[1], (255 + y)/255)
pen_turtle.color(pencolor)
draw_color(bg_turtle, 400, 100, pencolor)
bg_turtle.screen.update()
 ACTIVITY#2.6
Continuing on the game
How do we make the r button on the keyboard clear all the pen’s drawings?

Make a function that clears the pen turtle’s drawings and updates the screen and bind it to the r key.
ACTIVITY#2.6
Solution

def reset():
pen_turtle.clear()
pen_turtle.screen.update()
pen_turtle.screen.onkeypress(reset,'r')
pen_turtle.screen.listen()
ACTIVITY#2.7
Try the following code in another script
What do you think will happen?

import turtle
turtle_name = turtle.Turtle()
for _ in range(12):
turtle_name.fd(_*40)
turtle_name.rt(90)
turtle_name.screen.onkeypress(turtle_name.undo,'u')
turtle_name.screen.listen()
turtle.done()
 ACTIVITY#2.7
Continuing on the game
How do we make the u button on the keyboard undo the turtle’s last action?

Make a function that undos the pen turtle’s last action and updates the screen and bind it to the u key.
ACTIVITY#2.7
Solution

def undo():
pen_turtle.undo()
pen_turtle.screen.update()

pen_turtle.screen.onkeypress(reset,'r')
pen_turtle.screen.onkeypress(undo,'u')
pen_turtle.screen.listen()
ASSIGNMENT

1 NOTES Write session notes

2 SOLVE ASSIGNMENT
 ASSIGNMENT
Using the provided code, create the following calculator:
THANK YOU
FOR YOUR ATTENTION