### Making shapes

```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:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid
#d3d3d3;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
</script>
<br>
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid
#d3d3d3;">
</canvas>
<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
ctx.rect(50,20,150,100);
ctx.fillStyle="red";
ctx.fill();
</script>
</body>
</html>
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:
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!
Placing the Smile on Our Page
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.
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%
 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:

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.

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.
Placing the project on the web
page
 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