| layout | default |
|---|---|
| permalink | /lessons/worksheet |
| class | instructor-worksheet |
{% include code.html code="ellipse(10,10,10,10);" %}
{% include exercise.html content="Think of something you would like to make a program for. It could be a game, something to help you talk to friends, a program that helps you do your homework, a website for your favorite hobby, or anything else!" %}
{% include code.html code="ellipse(10,10,10,10);" %}
{% include image.html title="Illustration of several different circles" filename="different-ellipsis.png" %}
{% include image.html title="Components of a function" filename="components-of-function.png" %}
{% include exercise.html content="Try changing the numbers to something else like (30,25,32,48), then click Play. What happens to your cicle? Try changing the number a few times!" %}
{% include snippet-worksheet.html code="more-shapes-1.pde" %}
{% include snippet-worksheet.html code="more-shapes-2.pde" %}
{% include snippet-worksheet.html code="more-shapes-3.pde" %}
{% include image.html title="Closeup of a screen" filename="screen-closeup.png" %}
{% include snippet-worksheet.html code="placing-things-1.pde" %}
{% include exercise.html content="What would the four (left, top, width, height) arguments for this rectangle be? 
" %}
{% include exercise.html content="Draw your own rectangle on the graph paper below, then write the rect function that would create it. 
" %}
{% include exercise.html content="Create a program that draws a face on the screen. You will need to draw two circles - one for each eye - and a rectangle for the mouth. If you want, you can also draw a triangle for the nose!" %}
{% include code.html code="fill(0);" %}
{% include snippet-worksheet.html code="black-white-1.pde" %}
{% include snippet-worksheet.html code="black-white-2.pde" %}
|Color | Number | Code| |----------------| {% include lesson-5-grayscale-row.html label="Black" value=0 %}{% include lesson-5-grayscale-row.html label="Dim Gray" value=105 %}{% include lesson-5-grayscale-row.html label="Gray" value=128 %}{% include lesson-5-grayscale-row.html label="Dark Gray" value=169 %}{% include lesson-5-grayscale-row.html label="Silver" value=192 %}{% include lesson-5-grayscale-row.html label="Light Gray" value=211 %}{% include lesson-5-grayscale-row.html label="Gainsboro" value=220 %}{% include lesson-5-grayscale-row.html label="White Smoke" value=245 %}{% include lesson-5-grayscale-row.html label="White" value=255 %}
{% include code.html code="fill(grayscale);\nfill(0);\nfill(120);\nfill(255);" %}
{% include exercise.html content="Change the color of the face you made in your last program. You can make it black, white, or anything in between." %}
{% include code.html code="fill(red, green, blue);\nfill(255,0,0);\nfill(255,0,255);\nfill(150,150,20);" %}
|Color | Red | Green | Blue | Code| |----------------| {% include lesson-6-color-row.html label="Red" red=255 green=0 blue=0 %}{% include lesson-6-color-row.html label="Green" red=0 green=255 blue=0 %}{% include lesson-6-color-row.html label="Blue" red=0 green=0 blue=255 %}
|Color | Red | Green | Blue | Code| |----------------| {% include lesson-6-color-row.html label="Yellow" red=255 green=255 blue=0 %}{% include lesson-6-color-row.html label="Cyan" red=0 green=255 blue=255 %}{% include lesson-6-color-row.html label="Fuchsia" red=255 green=0 blue=255 %}{% include lesson-6-color-row.html label="Purple" red=128 green=0 blue=128 %}{% include lesson-6-color-row.html label="Navy" red=0 green=0 blue=128 %}{% include lesson-6-color-row.html label="Crimson" red=220 green=20 blue=60 %}{% include lesson-6-color-row.html label="Gold" red=255 green=215 blue=0 %}{% include lesson-6-color-row.html label="Deep Pink" red=255 green=20 blue=147 %}{% include lesson-6-color-row.html label="Wheat" red=245 green=222 blue=179 %}{% include lesson-6-color-row.html label="Steel Blue" red=119 green=196 blue=222 %}{% include lesson-6-color-row.html label="Sea Green" red=46 green=139 blue=87 %}
{% include exercise.html content="Change the color of your face so that it is your favorite color. You can use one of the colors from the table above, or try typing in different numbers until you find a brand new color you like!" %}
{% include code.html code="stroke(red, green, blue);" %}
{% include snippet-worksheet.html code="color-2.pde" %}
{% include snippet-worksheet.html code="color-3.pde" %}
{% include code.html code="fill(255);" %}
{% include code.html code="int color = 255;\nfill(color);" %}
{% include code.html code="int color = 255;\nint myFavoriteColor = 255;\nint age = 15;\nint shoe_size = 8;" %}
{% include snippet-worksheet.html code="variable-1.pde" %}
{% include snippet-worksheet.html code="variable-2.pde" %}
{% include snippet-worksheet.html code="variable-3.pde" %}
{% include snippet-worksheet.html code="variable-4.pde" %}
{% include code.html code="int left = 20;" %}
{% include code.html code="ellipse(25,30,eyeSize,eyeSize);" %}
{% include code.html code="ellipse(left + 5,30,eyeSize,eyeSize);" %}
{% include snippet-worksheet.html code="variable-5.pde" %}
{% include snippet-worksheet.html code="variable-6.pde" %}
{% include exercise.html content="Create a new variable called top, which determines where the top of the face will start. Update each eye and the mouth so their top attribute uses a calculation based on the top variable." %}