PRACTICE
MYSTERY DRAWING


Steps

  1. Set the size of your canvas to 500 by 500 pixels, with size(500, 500).
  2. Draw a circle centered in the middle of your canvas. Make it 200 pixels wide.
  3. Draw two triangles with vertices as follows: (210, 100), (230, 180), (190, 180)
                      (280, 100), (300, 180), (260, 180)
  4. Draw two ellipses both with a width of 30 pixels and a height of 25 pixels. The first is centered at (210, 200) and the second is centered at (280, 200).
  5. Draw a circle of width 10 centered at (250, 275).
  6. Draw a line from point (265, 270) to
    (300, 260). Can you see what we’re drawing now? 🤭
  7. Continue with more of what you were doing from step 6. Have at least 3 on each side.
  8. Here’s a new function:
    arc(x, y, w, h, start, stop)
    This can be used to draw part of an ellipse.
    x, y: the coordinates of the center
    w and h: the number of pixels wide and tall the ellipse should be
    start: where the angle should start
    stop: where the angle should stop

    Here’s the catch though. Processing measures angles in radians, not degrees. You’ve likely only used degrees in math so far. Think of radians as a different measure for angles, like you can measure lengths in cm or inches.

    Processing has a convenient function,
    radians(), that converts degrees to radians! So add the following:
    arc(250, 310, 40, 40, radians(0), radians(180))
  9. You now have a lot of code! If you were to give this to someone else, would they be able to tell what this code draws? Probably not. So let’s add some comments.

    In Java, there are two ways to write comments. The first is to start the line with a “//”. (You’ve seen me do this before!)

    So add the following to your drawing, above the code from step 4:
    // Adding the eyes
  10. Add other comments to your code. Also add some white space (blank lines) between parts of your code to make it more organized and readable.
  11. The second commenting technique is for longer comments that span multiple lines. These are used when a lot of explanation is required. A typical one is the header comment, which goes at the beginning of your code, to say what the program is, who wrote it, and when it was written.

    These comments start with
    /* and end with */.

    Add the following header comment to the start of your code, filling in your own information in the square brackets:

    /* This program draws a picture of some sort of weird animal.
    Created by: [Your name]
    Date: [Today’s date] */

  12. You’re essentially done, but the final drawing looks a little weird, doesn’t it?

    For example, the ears are overlapping the head… Maybe they’d look better if the triangles were behind?

    Do you notice any other things you could fix? Clean up your drawing!

    Hint: The order in which you draw things in the code matters!