1 of 36

CS 110 �Graphics and Motion

Benjamin Dicken

2 of 36

Motion

  • When you watch a movie or play a video game and see motion, this is typically a bunch of images, displayed in quick succession
  • This gives the perception of motion

​

  • When writing a graphical program that has animation, we can do so with a draw loop

3 of 36

Motion

4 of 36

The general outline

def main():� gui = graphics(width, height, 'Sup?')� while True:� gui.clear()� # Drawing code here� gui.update_frame(30)��main()

5 of 36

Draw This, with a program that has a draw loop

def main():� gui = graphics(width, height, 'Sup?')� while True:� gui.clear()� # Drawing code here� gui.update_frame(30)��main()

ICA

6 of 36

from graphics import graphics��def main():� gui = graphics(500, 300, 'Example')� while True:� gui.clear()� gui.rectangle(0, 125, 50, 50, 'blue')� gui.update_frame(30)��main()

​

7 of 36

Make the rectangle move

ICA

8 of 36

Make the rectangle move

from graphics import graphics��def main():� gui = graphics(500, 300, 'Example')� while True:� gui.clear()� gui.rectangle(0, 125, 50, 50, 'blue')� gui.update_frame(30)��main()

​

ICA

9 of 36

from graphics import graphics��def main():� gui = graphics(500, 300, 'Example')� x_coord = 0� while True:� gui.clear()� gui.rectangle(x_coord, 125, 50, 50, 'blue')� gui.update_frame(30)� x_coord += 2��main()

​

10 of 36

Make the rectangle move, wrapping around

ICA

11 of 36

Make the rectangle move, wrapping around

​

def main():� gui = graphics(500, 300, 'Example')� x_coord = 0� while True:� gui.clear()� gui.rectangle(x_coord, 125, 50, 50, 'blue')� gui.update_frame(30)� x_coord += 2��main()

​

ICA

12 of 36

from graphics import graphics��def main():� gui = graphics(500, 300, 'Example')� x_coord = -50� while True:� gui.clear()� gui.rectangle(x_coord, 125, 50, 50, 'blue')� gui.update_frame(60)� x_coord += 10� if x_coord > 550:

x_coord = -50��main()

​

13 of 36

Make the rectangle move

ICA

14 of 36

Make the rectangle move

​

def main():� gui = graphics(500, 300, 'Example')� x_coord = 0� while True:� gui.clear()� gui.rectangle(x_coord - 100, 125, 50, 50, 'blue')� gui.update_frame(60)� x_coord += 10� if x_coord > 550:

x_coord = -50�

ICA

15 of 36

from graphics import graphics��def main():� gui = graphics(500, 300, 'Example')� x_coord = 0� y_coord = 0� while True:� gui.clear()� gui.rectangle(x_coord, y_coord, 50, 50, 'blue')� gui.update_frame(30)� x_coord += 5� y_coord += 3��main()

​

16 of 36

Mouse Position

  • You can access the x and y coordinates of the mouse via the graphics object

​

graphics.mouse_x

​

graphics.mouse_y

17 of 36

Make the square move with the mouse

ICA

18 of 36

What should the x and y coordinates be?

from graphics import graphics��def main():� gui = graphics(500, 300, 'Example')� while True:� gui.clear()� gui.rectangle(???, ???, 100, 100, 'blue')� gui.update_frame(60)��main()

​

ICA

19 of 36

from graphics import graphics��def main():� gui = graphics(500, 300, 'Example')� while True:� gui.clear()� gui.rectangle(gui.mouse_x - 50, gui.mouse_y - 50, 100, 100, 'blue')� gui.update_frame(60)��main()

20 of 36

Color

  • A computer screen is composed of a grid (rows and columns) of pixels
    • … Like the canvas of a processing window
  • Each pixel can display a unique color, which is controlled by a Red, Green, and Blue brightness value

21 of 36

22 of 36

23 of 36

24 of 36

Color

  • Thus, when we specify to a computer program, we can do so using these three numbers
  • The brightness values for each can be between 0 (the darkest) and 255 (the highest)
    • 0-255 inclusive

25 of 36

Determine the colors

  1. What color is (255, 0, 0) ?

​

  • What color is (100, 200, 255) ?

​

  • What color is (150, 200, 0) ?

ICA

26 of 36

Solutions

  • What color is (255, 0, 0) ?

  • What color is (100, 200, 255) ?

​

  • What color is (150, 200, 0) ?

​

​

​

27 of 36

Solutions

  • What color is (255, 0, 0) ?

  • What color is (100, 200, 255) ?

​

  • What color is (150, 200, 0) ?

​

​

​

28 of 36

Solutions

  • What color is (255, 0, 0) ?

  • What color is (100, 200, 255) ?

​

  • What color is (150, 200, 0) ?

​

​

​

29 of 36

What might the RGB values be?

  • Match this color:

​

  • Match this color:

​

  • Match this color:

ICA

30 of 36

What might the RGB values be?

  • Match this color: 118, 253, 138

​

  • Match this color:

​

  • Match this color:

31 of 36

What might the RGB values be?

  • Match this color: 118, 253, 138

​

  • Match this color: 255, 251, 55

​

  • Match this color:

32 of 36

What might the RGB values be?

  • Match this color: 118, 253, 138

​

  • Match this color: 255, 251, 55

​

  • Match this color: 201, 253, 253

33 of 36

Getting a color string from RGB values

  • The argument passed as the fill to the shape functions is expected to be a string
  • How can we specify a color with RGB then?

​

​

color_string = gui.get_color_string(100, 150, 200)

gui.rectangle(50, 50, 50, 50, color_string)

​

​

34 of 36

Make the color change roughly each second

ICA

35 of 36

Start from here!

from graphics import graphics��def main():� gui = graphics(500, 300, 'Example')� while True:� gui.clear()� gui.rectangle(gui.mouse_x - 50, gui.mouse_y - 50, 100, 100, 'blue')� gui.update_frame(60)��main()

​

ICA

36 of 36

gui = graphics(500, 300, 'Example')� color_string = 'blue'� i = 0� while True:� if i % 60 == 0:� red = random.randint(0, 255)� green = random.randint(0, 255)� blue = random.randint(0, 255)� color_string = gui.get_color_string(red, green, blue)� gui.clear()� gui.rectangle(gui.mouse_x - 50, gui.mouse_y - 50, 100, 100, color_string)� gui.update_frame(60)� i += 1

​