Learn creative coding writing simple programs

21. Improved tiny drawing program

We continue with our tiny drawing program. The first version saved the image when you pressed any key on the keyboard. Now we check which key was pressed by reading the *key* variable. If we pressed *s*, we save the image. If the *b* key was pressed, we change the background color. And the *c* key changes the line color.
The background color is easy to see, but we don't know about the line color until we draw something. It would be nice to know about our line color *before* drawing anything. To solve this, we draw a thin line on the top border of our drawing which lets us see the current color.

Finally, we show how creating a function can avoid having repeated lines of code. We create a function that draws a line on the top border of the screen, and we call this function in two cases: after setting the background color, and after setting the line (stroke) color.


Code editor

You can make changes to the code below. Then

Questions and comments

Try to stay close to the topic of this episode. Use the Processing forums for help with unrelated Processing projects (or hire me for help ;-)

To indicate that a word in your comment is code, use the `backtick`. Example
Do `float` and `int` smell similar?
To highlight code blocks, surround it with ``` code-fences ``` like this:
``` void setup() { size(600, 600); } ```