| Date post: | 23-Dec-2015 |
| Category: |
Documents |
| Upload: | jasmin-clark |
| View: | 216 times |
| Download: | 0 times |
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: https://www.khanacademy.org/hour-of-code/hour-of-code-tutorial/p/challenge-h-for-hopper
<!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:
• https://www.khanacademy.org/hour-of-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 name5. 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%
• https://www.khanacademy.org/hour-of-code/hour-of-code-tutorial/p/challenge-its-a-beautiful-day
Use the online system at
to complete the “It’s a Beautiful Day” challenge. Paste onto your html
document a screen shot showing your work and
write a paragraph describing what you have done.
REVIEW Background() Stroke and noStroke() Fill() Practice 3
Greeting CardA 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:
https://www.khanacademy.org/hour-of-code/hour-of-code-tutorial/p/project-greeting-card
Using the documentation
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.
PRACTICE 4, 20% 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.
REVIEW Greeting Card Using the Documentation Placing the project on the web page Practice 4
Project Rubric (10% each)1: "H" shows up on page1: Page looks professional2: "Crazy Face" cropped image on page2: "Crazy Face" paragraph3: "It's a Beautiful Day" cropped image on
page
Continued Rubric (10% each)3: "It's a Beautiful Day" paragraph4: Card image4: Card Paragraph5: Uploaded Page called 25.htm5: Files Appropriately named
UPLOADING 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 namesKeep 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 RubricContinued RubricUploadingProper file names
Review
![How (exactly) to slay a dragon in IndoHow (exactly) to ...2010]-How_(exactly)_to_slay_a...How (exactly) to slay a dragon in IndoHow (exactly) ... (1995: 357-369) makes a plausible](https://static.documents.pub/doc/80x56/5b02807e7f8b9a0c028fed79/how-exactly-to-slay-a-dragon-in-indohow-exactly-to-2010-howexactlytoslayahow.jpg)
