Introduction to Shape Programming When we make geometric shapes with computers, we have to give specific numbers to tell the computer exactly what to do. We tell the computer the X value. This is how far from the left of the screen the shape goes. We tell the computer the Y value. This is how far from the top of the screen the shape goes. The X and Y together decide where the shape appears on the screen.

Making shapes The link below will enable us to practice making some shapes: code/hour-of-code-tutorial/p/challenge-h-for- hopper code/hour-of-code-tutorial/p/challenge-h-for- hopper

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.rect(20,20,150,100); ctx.stroke(); var c=document.getElementById("myCanvas2"); var ctx=c.getContext("2d"); ctx.rect(50,20,150,100); ctx.fillStyle="red"; ctx.fill();

Practice 1, 20% Have the “H” show up on your page using code derived from the exercise and implemented using the example code on slide Make the page look professional with explanations, proper format, coloring etc.

Review Introduction to Shape Programming Making Shapes Code Example Practice 1

Challenge: Crazy Face Our new challenge will be to use shapes to make a face at: code/hour-of-code-tutorial/p/challenge- crazy-face

Crazy Face Shapes The crazy face challenge uses math to create ellipses. The first two numbers determine the position based on an X and Y coordinate system. The third number decides how wide the ellipse will be. The last number decides how tall it will be. By making small changes to the numbers, a person can make big changes to their picture!

Use the screen shot trick to get a picture of your ellipses. To do this: 1.Press the print screen button on the page with the code and face 2.Past the image in pbrush. 3.Resize to get rid of extra stuff. 4.Save the file with a simple name 5.Use the img tag on your.htm file. Placing the Smile on Our Page

Practice 2, 20% Have the “Crazy Face” show up on your page using code derived from the exercise and implemented using the example code on slide. Make the page look professional with well written paragraph explaining how you used ellipses to make a face and why your face is awesome.

Review Challenge: Crazy Face Crazy Face Shapes Placing the Smile on Our Page Practice 2, 20%

Background() There are three main colors that pixels on a computer will display. Red, green and blue. When we designate the colors it goes in that order red, green blue. This is referred to as RGB coloring. The number is from 0 to 255. To get solid red background, the function will be called as background(255, 0, 0).

Stroke() and noStroke() stroke(0, 255, 0) will set the lines of shapes in to be drawn in green because the 255 is on the G part of the RGB. A command of stroke(0, 0, 255) will have shapes then created with lines of solid blue. If you want the shape to have invisible lines, then use the noStroke() command.

Fill() Fill() sets a color that will be on the inside of an entire shape. It follows the same RGB rules used by the other functions. To make a shape filled in all white, try fill(255,255,255). This will put the screen’s pixels on their maximum intensity. fill(0,0,0) will make them black.

Practice 3, 20% code/hour-of-code-tutorial/p/challenge-its- a-beautiful-day code/hour-of-code-tutorial/p/challenge-its- a-beautiful-day

 Background()  Stroke and noStroke()  Fill()  Practice 3

Greeting Card A greeting card can be created to send to some one for a holiday, a birthday or just for any regular day at all. Try the following web site to create your own greeting card: code-tutorial/p/project-greeting-card

 As a programmer, you don’t have to remember every command that you have ever studied. You will notice that if you scroll down on the online software for the greeting card, all of the functions we have covered, and a lot more, are shown there. Click on anything that you need a review for so you can use them.

Placing the project on the web page Instead of recreating the actual code on our page, we will take a screen shot of the code and the greeting card. Use the paint software to create an image of the card its self and the code. Place the pictures in an aesthetically pleasing way.

 Use the online software at the Khan university to create the greeting card and edit the image so that two files are generated showing your code and your card.  Write a paragraph describing your approach to making the perfect greeting card.

 Greeting Card  Using the Documentation  Placing the project on the web page  Practice 4

Project Rubric (10% each) 1: "H" shows up on page 1: Page looks professional 2: "Crazy Face" cropped image on page 2: "Crazy Face" paragraph 3: "It's a Beautiful Day" cropped image on page

Continued Rubric (10% each) 3: "It's a Beautiful Day" paragraph 4: Card image 4: Card Paragraph 5: Uploaded Page called 25.htm 5: Files Appropriately named

 To get credit for the project, students must upload all required files to the web server. Don’t forget all the image files! There should be at least 3 image files. There should be one.htm file called 25.htm.

Proper file names Keep it simple. The file names of the pictures are more likely to have problems with long or mixed case names. On windows machines, the files will still be found if they are looked for as MiXeD LeTteRiNg CaSe. The online server is not using the Windows Operating system. The online server is a Linux system and FILES MUST HAVE THE SAME CASE AS THEY ARE CALLED IN THE HTM FILE.

Project Rubric Continued Rubric Uploading Proper file names