CMU 15-110: Principles of Computing
Events and Conditionals

1. Events Starter Code
2. Events Examples
   1. Draw a Circle (not using events)
   2. Move the circle (using mousePressed)
   3. Move the circle (using mouseMove)
   4. Change color and drag the circle (using mousePressed, mouseDragged, and mouseReleased)
   5. Move the circle (using keyPressed)
   6. Change the circle color (using keyPressed)
   7. Basic counter (using timerFired)
   8. Move the circle (off the canvas) (using timerFired)
   9. Move the circle (with wraparound!) (using timerFired)
   10. Our first game: Click the dot!

1. Events Starter Code
   Start with this file: events-starter-code.py


2. Events Examples
   ########################################################## # 1. Draw a circle (not using events) ########################################################## def init(data): # place a circle in the middle of the canvas data.cx = data.width//2 data.cy = data.height//2 def drawAll(canvas, data): r = 20 canvas.create_oval(data.cx-r, data.cy-r, data.cx+r, data.cy+r, fill='cyan') ########################################################## # 2. Move the circle (using mousePressed) ########################################################## def init(data): # place the circle in the middle of the canvas data.cx = data.width//2 data.cy = data.height//2 def mousePressed(event, data): # update the center of the circle in our data (our "model") # to be the location of this mouse press (event.x, event.y) data.cx = event.x data.cy = event.y def drawAll(canvas, data): r = 20 canvas.create_oval(data.cx-r, data.cy-r, data.cx+r, data.cy+r, fill='cyan') # add some basic instructions canvas.create_text(data.width//2, 20, text='Click to move the dot', font='Arial 20') ########################################################## # 3. Move the circle (using mouseMoved) ########################################################## def init(data): # place the circle in the middle of the canvas data.cx = data.width//2 data.cy = data.height//2 def mouseMoved(event, data): # update the center of the circle in our data (our "model") # to be the location of this mouse move (event.x, event.y) data.cx = event.x data.cy = event.y def drawAll(canvas, data): r = 20 canvas.create_oval(data.cx-r, data.cy-r, data.cx+r, data.cy+r, fill='cyan') # add some basic instructions canvas.create_text(data.width//2, 20, text='Move mouse using the dot', font='Arial 20') ########################################################## # 4. Change color and drag the circle # (using mousePressed, mouseDragged, and mouseReleased) ########################################################## def init(data): # place the circle in the middle of the canvas data.cx = data.width//2 data.cy = data.height//2 data.color = 'cyan' def mousePressed(event, data): data.cx = event.x data.cy = event.y data.color = 'orange' def mouseDragged(event, data): data.cx = event.x data.cy = event.y def mouseReleased(event, data): data.cx = event.x data.cy = event.y data.color = 'cyan' def drawAll(canvas, data): r = 20 canvas.create_oval(data.cx-r, data.cy-r, data.cx+r, data.cy+r, fill=data.color) # add some basic instructions canvas.create_text(data.width//2, 20, text='Click and drag mouse to move the dot', font='Arial 20') ########################################################## # 5. Move the circle (using keyPressed) ########################################################## def init(data): # place the circle in the middle of the canvas data.cx = data.width//2 data.cy = data.height//2 def keyPressed(event, data): if (event.key == 'Up'): data.cy -= 10 elif (event.key == 'Down'): data.cy += 10 elif (event.key == 'Left'): data.cx -= 10 elif (event.key == 'Right'): data.cx += 10 def drawAll(canvas, data): r = 20 canvas.create_oval(data.cx-r, data.cy-r, data.cx+r, data.cy+r, fill='cyan') # add some basic instructions canvas.create_text(data.width//2, 20, text='Use arrow keys to move the dot', font='Arial 20') ########################################################## # 6. Change the circle color (using keyPressed) ########################################################## def init(data): # place the circle in the middle of the canvas data.cx = data.width//2 data.cy = data.height//2 data.color = 'cyan' def keyPressed(event, data): if (event.key == 'r'): data.color = 'red' elif (event.key == 'g'): data.color = 'lightGreen' elif (event.key == 'b'): data.color = 'blue' else: data.color = 'cyan' def drawAll(canvas, data): r = 20 canvas.create_oval(data.cx-r, data.cy-r, data.cx+r, data.cy+r, fill=data.color) # add some basic instructions canvas.create_text(data.width//2, 20, text="Use r/g/b to change the dot's color", font='Arial 20') ########################################################## # 7. Basic counter (using timerFired) ########################################################## def init(data): data.counter = 0 def timerFired(data): data.counter += 1 def drawAll(canvas, data): canvas.create_text(data.width//2, data.height//2, text=data.counter, font='Arial 200 bold') ########################################################## # 8. Move the circle (off the canvas) (using timerFired) ########################################################## def init(data): # place the circle in the middle of the canvas data.cx = data.width//2 data.cy = data.height//2 def timerFired(data): data.cx += 10 def drawAll(canvas, data): r = 20 canvas.create_oval(data.cx-r, data.cy-r, data.cx+r, data.cy+r, fill='cyan') # add some basic instructions canvas.create_text(data.width//2, 20, text='Watch the dot move (off the canvas)!', font='Arial 20') ########################################################## # 9. Move the circle (with wraparound!) (using timerFired) ########################################################## def init(data): # place the circle in the middle of the canvas data.cx = data.width//2 data.cy = data.height//2 data.timerDelay = 50 # let's go faster def timerFired(data): data.cx += 10 if (data.cx >= data.width): data.cx = 0 def drawAll(canvas, data): r = 20 canvas.create_oval(data.cx-r, data.cy-r, data.cx+r, data.cy+r, fill='cyan') # add some basic instructions canvas.create_text(data.width//2, 20, text='Watch the dot move (with wraparound)!', font='Arial 20') ########################################################## # 10. Our first game: Click the dot! ########################################################## def init(data): # place the circle in the middle of the canvas data.cx = data.width//2 data.cy = data.height//2 data.r = 20 # radius of the circle data.timerDelay = 50 # let's go faster data.score = 0 def mousePressed(event, data): d = ((event.x - data.cx)**2 + (event.y - data.cy)**2)**0.5 # For details, see here if (d <= data.r): data.score += 1 elif (data.score > 0): data.score -= 1 def timerFired(data): data.cx += 10 if (data.cx >= data.width): data.cx = 0 def drawAll(canvas, data): canvas.create_oval(data.cx-data.r, data.cy-data.r, data.cx+data.r, data.cy+data.r, fill='cyan') # add some basic instructions canvas.create_text(data.width//2, 20, text='Click the dot!', font='Arial 20') # and the score! canvas.create_text(data.width//2, 50, text='Score: ' + str(data.score), font='Arial 16')