### Making shapes - My Course Web Page!

```Creating Art With Simple Shapes
• By carefully implementing simple shapes to
an HTML canvas we can create useful
graphics. With enough time, lines, ellipses
and rectangles, can combine to create
something that looks great!
Setting Up the HTML
<title>Happy Drawing</title>
<script type="text/javascript"
src="http://www.scottbunin.com/processing.js"></script>
<script type="text/javascript"
src="http://www.scottbunin.com/init.js"></script>
<body>
<script type="application/processing">
//Place code after this
</script><canvas></canvas>
<br>
<br>
Example Graphic Code
size(800, 600);
background(200,200,200);
fill(200,200,0);
ellipse(700,100,60,80);
stroke(200,0,0);
strokeWeight(4);
line(0,0,800,600);
Practice 1, 20%
• Use the example HTML and the example
graphic code to create a canvas.
• Expand on the example to create a Super
Happy Fun place that would make for an
interesting setting in a children’s game.
Review
 Creating Art With Simple Shapes
 Setting up the HTML
 Example Graphic Code
 Practice 1, 20%
Line Graphics to Make Complex
Objects
• In this section we will practice an example of
how to use simple lines to make a complex
and useful drawing. With careful linear
mathematics, a student can create a
powerful program.
Setting up a New Canvas
<br>
<br>
<script type="application/processing">
size(600, 600);
background(255,255,255);
stroke(0,0,255);
strokeWeight(1);
//put lines here
</script><canvas></canvas>
Line Examples
line(300,0,300,300);
line(300,20,280,300);
line(300,40,260,300);
line(300,60,240,300);
line(300,80,220,300);
line(300,100,200,300);
line(300,120,180,300);
line(300,140,160,300);
line(300,160,140,300);
Practice 2 20%
• Using the example, extrapolate from the given
information to finish the lines for the top left
corner of the star.
• Create lines to use on the other sides of the
star.
• Use the stroke() function to change the colors
of the lines to look like the colors of the
rainbow.
Review
•
•
•
•
Line Graphics to Make Complex Objects
Setting up a New Canvas
Line Examples
Practice 2, 20%
Using Lines and Rectangles to Create
Graphics
• A lot of basic shapes of game pieces can be
rectangles and lines. In this example, we will
be drawing a roadway and putting a car on it.
Setting up the 3rd Canvas
<br>
<br>
<center>
<script type="application/processing">
size(300, 1600);
background(100,100,100);
stroke(255,255,0);
strokeWeight(10);
//put the draw functions here
</script><canvas></canvas>
</center>
JS Example 3
line(150,0,150,50);
line(150,100,150,150);
line(150,200,150,250);
noStroke();
fill(200,50,50);
rect(40,50,90,200);
 Using
Lines and Rectangles to Create
Graphics
 Setting up the 3rd Canvas
 JS Example 3
 Practice 3, 20%
Using Triangles to Create Game
Pieces
 A triangle consists of 3 points.
 In our programming, we have to give the X and Y
coordinates for each of the 3 points.
 For example, we can make a triangle start in the upper
left corner of the canvas at 0,0. It could go to the upper
right of the canvas at 600,0 and end in the bottom
right corner at 600,400.
<br>
<br>
<script type="application/processing">
size(1200, 500);
background(50,50,255);
</script><canvas></canvas>
</body>
JS Example
strokeWeight(2);
stroke(255,255,0);
fill(255,0,0);
triangle(200,100,200,300,400,200);
strokeWeight(2);
stroke(255,0,255);
fill(0,255,0);
triangle(100,125,100,275,200,200);
 Improve
the given example code to create a
vehicle that looks like it is ready to fly across
the sky.
 Make the sky and background look real by
adding things like happy clouds, trees and Mr.
Sun.
 Using
Triangles To Create Game Pieces
 Example format for canvas 4
 JS example
 Practice 4, 20%
Linking the project to the main
Index
 After a person has finished looking at and/or reading
our page, we don’t always want them to leave us
completely.
OF MY AWESOME WORK </a>
Linking the Index to the main
project
 Our index is important because it is the first thing a
person will see when going to our web page. When
you go to the teacher’s web page at
www.scottbunin.com, you find a directory leading to
all needed items.
refer back to it later.
so that it doesn’t get lost:
ART </a>
The page has to look good or people will think
we are not serious about our work.
Write some words/sentences/paragraphs to
explain what you did.
Use any of the things we learned in HTML to
<h1> <center> <br> <body bgcolor=“”>
<img src=“”> <font size=“” color=“”>
Final Submission
 There were 4 separate drawings for this project. Make sure
they are all there and all have some words explaining what
you were trying to make. If the drawing was an epic fail, but
you explain where you went wrong, due consideration will
customers to leave you too quickly!
 Linking the main project to the index
 Linking the Index to the main project
 Aesthetic considerations
 Final Submission
<title>Happy Drawing</title>
<script type="text/javascript" src="http://www.scottbunin.com/processing.js"></script>
<script type="text/javascript" src="http://www.scottbunin.com/init.js"></script>
<body>
<script type="application/processing">
size(800, 600);
background(200,200,200);
fill(200,200,0);
ellipse(700,100,60,80);
stroke(200,0,0);
strokeWeight(4);
line(0,0,800,600);
</script><canvas></canvas>
<br>
<br>
<script type="application/processing">
size(600, 600);
background(255,255,255);
stroke(0,0,255);
strokeWeight(1);
line(300,0,300,300);
line(300,20,280,300);
line(300,40,260,300);
line(300,60,240,300);
line(300,80,220,300);
```