#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../webpage-assets/ce.css" />
#+HTML_HEAD: <link rel="icon" type="image/png" href="http://rachel.likespizza.com/web-assets/images/favicon-moose.png">

# ---------------------------------------------------------------- #

* Lesson 04: Paint program

** Getting set up

#+ATTR_LATEX: :width 0.75\textwidth
#+ATTR_HTML: :style width:50%; float: right; margin: 20px;
[[file:images/lesson01-ticblank.png]]

You can either edit over your existing code, or start a new program.
If you want to start a new program, press *ESCAPE* until you get to
the main prompt:

Then type in =new lua=, hit *ENTER*, then =save NAME2.LUA=, hit
*ENTER*.

#+BEGIN_SRC terminal
  > new lua
  new cart has been created

  > save Moose2.lua
  cart Moose2.lua saved!
#+END_SRC

#+ATTR_HTML: :style clear:both;
--

** Draw your "brush!"

From this screen, press the *F2* key on the keyboard. This will take
you to the sprite editor.

In the image grid on the *right side*, click on the very first
square - it's a blank square.

Next, choose a color from the palette at the bottom.

Finally, draw in the canvas on the left. You can leave it a
filled-in color or add a design. This will be your brush for our
little paint program!

[[file:images/lesson02-makepixel.png]]

** Editing the code

Press the *F1* key to go to the code editor. If you started a new
project, it's going to have that starter code again. You can erase
it and replace it with this instead:

#+BEGIN_SRC lua
  cls(13)
  function TIC()

  end
#+END_SRC

Remember that you can use the =cls= command to set the background
color, which uses a number code:

#+ATTR_LATEX: :width 0.4\textwidth
[[file:images/tic80-colors.png]]

Next, we're going to tell our game to pay attention to where the
*mouse* is - get its *x, y* coordinates, and if the *mouse button is
clicked*. To do this, we use the =mouse= function like this:

- =mouse()=

  [[https://github.com/nesbox/TIC-80/wiki/mouse]]

  We can get information about the mouse and store it in some
  variables like this: =x, y, button = mouse()=

  A *variable* is a name we create where we can store information
  like text, numbers, or the answer to "yes/no" questions. In our
  code, =x=, =y=, and =button= are variables! These values can
  change (or /vary/) over time!

  ----------------------------

- =spr( id, x, y )=

  [[https://github.com/nesbox/TIC-80/wiki/spr]]

  Remember that the =spr= function takes in the =id= of the sprite
  we want (in this case, it will be 0!) and the *(x,y)*
  coordinate to draw to. We're going to take the =x= and =y=
  variables that store the mouse's current location and draw our
  sprite there!

Our drawing code will look like this:

#+BEGIN_SRC lua
cls(13)
function TIC()
  x, y, button = mouse()
  if button then
    spr( 0, x, y )
  end
end
#+END_SRC

** Run the program

[[file:images/lesson-paint-animation.gif]]

Once you have your code, you can run the program by pressing the
*run* button [[file:images/tic80-run.png]] or pressing *CTRL+R*.

Once you want to go back to your code, press *ESCAPE* then use the
*F1* key to go back to the code, or *F2* key to go back to the
sprite editor.

** Save your work

Make sure to press the *CTRL+S* key, or press *ESC* to go to the
prompt and type =save= to save your work! If you want to access the
folder with your code, type =folder=.

If you have a USB flash drive, make sure to copy your file over so
you don't lose it when the computer resets!

** Back to the course page!

[[../index.org][⬅️ Once you're all done, go back to the course homepage!]]