# Week 3 - Canvas, drawing, timers discussion

## Goals

- Create a canvas in Python
- Learn how to draw on the canvas
- Create a digital stopwatch

## Week 3a - Drawing Canvas
### Canvas and Drawing
1. How are the small components of a computer screen called that can have a specific color?
<!-- pixel -->
1. What is a *frame buffer*?
<!-- a data structure that keeps track of the pixels drawn on the screen -->
1. What is a refresh rate?
<!-- this is the rate that the computer (graphics card or GPU) updates the screen, e.g., 60. Try `xrandr` in Linux to see your refresh rate. Frames per second (FPS) is the number of frames that a computer can render per second, e.g., seen in games as statistics. -->
1. Typically GUI applications call a function to refresh the image shown on your monitor. How is this function called?
<!-- draw handler -->
1. What is the coordinate of the following pixel?
   ```
   . 0 1 2 3 4
   0
   1     X
   2
   3
   4
   ```

   <!--First x, then y is read. `y` grows in bottom direction: (2,1) -->

Interesting: [Why is the origin in computer graphics coordinates at the top left?](https://gamedev.stackexchange.com/a/83571)

1. The input handler function takes the value which was input as an argument. What does the draw handler function take as an argument?
<!-- canvas -->

### String Processing

1. How can you combine strings?
<!-- using `+` -->
1. How can you combine strings and variables?
<!-- using `+`, or using f-strings `f'1 {variable} 2' -->
1. What are slices?
<!-- pieces of strings, in other words substrings -->
1. What does a negative number mean in the slicing notation?
<!-- `-1` corresponds to the last character; is a reverse notation -->
1. How many characters does `string[:10]` have?
<!-- 10 -->

### Interactive drawing

1. Joe Warren mentions *code folding* in a sentence. What is it good for?
<!-- using code folding we can have a better overview of our code, because long code snippets belonging to a function or if statement do not eat up our view. -->
1. What is the basic idea to draw the output of a function on the canvas?
<!-- 1. create a global variable
     1. the function's output will be assigned to this variable
     1. we create a draw handler function which draws a text on the canvas using this variable.
-->

## Week 3b - Timers
### Timers
1. What are timers good for? Give an example.
<!-- Using a timer we can call a function periodically and change the state of our program. For example we can change the location of an graphical element to make our program look more dynamic -->
1. In the [timer example code](https://py3.codeskulptor.org/#examples-timers.py), Scott says that we do not update our canvas in the timer handler. Why?
<!-- Because the two handlers have different responsibilities. We should not mix them. The draw handler is there to draw things on the screen. The timer that we defined is here to change the location of our text, in other words, we change the state of our program every two seconds even the screen is drawn 60 times per second. -->
1. What would happen if we would put the code in `draw()` to `tick()` and vice versa?
<!-- The draw handler is called about 60 times per second to achieve a framerate of 60 frames per second. The timer ticks one time per two seconds. If we put the code in draw() to `tick()` then our frame will be updated only one time per two seconds. If we put `tick()` to `draw()` the location will be updated 60 times per second. -->

### Visualizing Drawing and Timers
### Programming Tips - 3


## Mini-project #3 - Stopwatch: The Game