Chapter 3 Drawing Basics 1 LESSON In our

Chapter 3 Drawing Basics 1

LESSON: In our last program, we created a graphic image. Fun, but a little primitive. What if we had access to lines, rectangles, and circles? And could color them in easily? We can! Using the ______________, we can do those things and more! The ___________ is huge, but you want to keep your drawings on the screen that you can see. When you run your program, notice that there is no “Press any key to continue. ” You actually have to close it out (“x” in the upper right corner) or click off to the side to get out. Prepare a new Chapter 3 folder on your flash drive to 2 store these programs

Coordinate system review for the Graphics. Window: • The upper left corner is _____ • The first number is the ______________. • The second number is the ____________. (Price, 2016) 3

We looked at a few codes, let’s get some more: Graphics. Window. Draw. Line (x 1, y 1, x 2, y 2 ) (Coordinates where your line begins. ) (Coordinates where your line ends. ) Type this in EXACTLY as you see it and press RUN. What would you change to get longer lines? 4

On page 29, type in the SAILBOAT program EXACTLY as you see it and press RUN. Your output should look like this: (Price, 2016) SAVE as SAILBOAT. I will check your work via VISON. Due _____ 5

In Graphics. Window programs, it is _____________________________. Not only will it make it easier for me to understand your work, but also easier for you to keep up with the many commands that will be used to create your graphic design. 6

Here are some more drawing commands. FIRST, we want to establish the color that we want to use: Graphics. Window. Brush. Color = “Color” Go to https: //tiny. cc/hexcolors/ for a complete list of colors that you can use. (Price, 2016) Graphics. Window. Fill. Triangle (x 1, y 1, x 2, y 2 ) Represents __________________. Graphics. Window. Draw. Triangle (x 1, y 1, x 2, y 2 ) Brush. Color controls the Fill. Triangle color, however we have another command for the Draw. Triangle outline, 7 which we will see in a bit.

Let’s experiment with triangles. Type this in EXACTLY as you see it and press RUN. vs. Add: What difference did the Draw. Triangle make? 8

Now, switch the last two lines where the Draw. Triangle is first and the Fill. Triangle is second. vs. Can you see the change? It makes a difference as to whether you use Fill. Triangle second or Draw. Triangle second. The top layer is the one that stands out. 9

Two more commands: Graphics. Window. Fill. Rectangle (x, y, width, height) Represents coordinates for upper left hand corner. Graphics. Window. Draw. Rectangle (x, y, width, height) • On page 31, type in the HOUSE program EXACTLY as you see it and press RUN. • SAVE as HOUSE. I will check it via VISION. • Due _____ 10

Ellipses and Circles: Graphics. Window draws Ellipses. Graphics. Window. Fill. Ellipse (x, y, width, height) Represents coordinates for upper left hand corner. Graphics. Window. Draw. Ellipse (x, y, width, height) How do you get a Circle? Height = Width (Price, 2016) Unfortunately, we cannot draw the Ellipse on the diagonal 11 with this command.

Mini Program 1: • Draw 2 circles and 2 ellipses of various sizes in various locations. • Use Brush. Color to give each one a different color. • Use both Fill. Ellipse and Draw. Ellipse for each one, in that order. • The entire circle or ellipse must be seen on the screen and they cannot overlap. • SAVE , but do not print, I will check it via VISION. • Due _____ 12

How does the Draw. Ellipse know what color to draw the outline? The Pen properties control that. Remember, we set the METHOD = PROPERTY Graphics. Window. Pen. Color = Sets line color Graphics. Window. Pen. Width = Sets line width Using your CIRCLES AND ELLIPSES program, change the pen color and width for each Draw. Ellipse. SAVE , but do not print, I will check it via VISION. Due _____ 13

Just for fun, here is a command that randomly changes the color of your pen, every time you run the program: Remember, we could insert text into Graphics. Window using the Draw. Text METHOD. Draw. Text requires three arguments. ________________________________. Graphics. Window. Draw. Text(x, y, “text”) We can do some cool stuff with text, too! 14

The Graphics. Window has OBJECT PROPERTIES to change the Font. (Price, 2016) You can see what Font names that are available in WORD, and what they look like, by clicking on the arrow: 15

Type this in EXACTLY as you see it (except, you may put your own phrase in the quotes) and then press RUN. 16

Mini Program 2: Let us know what your favorite TV show is. Let us know what your favorite movie is. Let us know who your favorite actor/actress is. Make each of these items: • A different font (see WORD. ) • A different font size. • A different color. • Make one Italicized. • Make one bold. • Make one both Italicized and bold. • They should not overlap. • SAVE, but do not print, I will check it via VISION. 17 • Due _____

We can create cool effects by layering texts over each other, at a slightly different position. (Price, 2016) It’s just printed it twice, at a slight off-set. 18

Mini Program 2: Modeling the SHADOW program on page 36, create your own that will write your name. CHANGE EVERY PROPERTY and VALUE. Use a different FONT and Make it your own! SAVE, but do not print, I will check it via VISION. Due _____ 19

Another technique that we use with text is to draw a bound text box using: Graphics. Window. Draw. Bound. Text(x, y, width, “text”) Of course, “x” and “y” are the upper left corner. Width is how wide it is, and what you want written in text. So, what’s missing? Length! It actually stretches down to compensate for longer text. However, if the box is too small for a word, it gets cut off with a set of three little dots called ellipsis. . . (Price, 2016) 20

Mini Program 3: • Create a bound text box that says, “My birthday is (and fill that in. )” • Model the no clipping portion (lines 1 – 6) of the BOUNDTEXTDEMO program on page 37. • Line 2 gives the Title, have one for your box. • Add changes in the Font, Font Color, and Font Size. • SAVE, but do not print, I will check it via VISION. • Due _____ 21

Sometimes the images that you want to use in your Grapics. Window are pictures or images that are on your computer or the internet. Here is how to do that: Graphics. Window. Draw. Image(image. Name, x, y, ) Use the file path for the image. Name and “x” and “y” are the beginning coordinates. You can also specify the size of your image by adding “width” and “height. ” Graphics. Window. Draw. Resized. Image(image. Name, x, y, width, height) COPY the IMAGEDEMO program on page 38 22

Chapter 3 Programming Assignment • Use your SHELL and SAVE AS CH 3 GRAPHICS • Page 40, Choose one of the images from problem number 6, 8, 9, 10, or 11 and write the code that will create that graphic image. • Each one of the grid lines represents 20 pixels. • Change the colors. • Add text. • Use your SHELL and rename it Chapter 3 Programming Assignment. • Turn in a copy of the program and picture ( PASTE screen shot into WORD and use the CROP tool. ) 23 • Due _____