creating art with simple shapes
DESCRIPTION
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. Happy Drawing - PowerPoint PPT PresentationTRANSCRIPT
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<head> <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> </head><body><script type="application/processing">//Place code after this
</script><canvas></canvas><br><br>
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);
Example Graphic Code
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.
ReviewCreating Art With Simple ShapesSetting up the HTMLExample Graphic CodePractice 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(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);
Line Examples
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 made with careful implementation of 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);
Practice 3, 20%
Expand on the ideas shown in the example to complete the road’s lines.Make the red rectangle in the example into a care that you would want to drive.
REVIEW Using Lines and Rectangles to Create
Graphics Setting up the 3rd Canvas JS Example 3 Practice 3, 20%
Using Triangles to Create Game PiecesA 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 ExamplestrokeWeight(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);
PRACTICE 4, 20% 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.
REVIEW Using Triangles To Create Game Pieces Example format for canvas 4 JS example Practice 4, 20%
Linking the project to the main IndexAfter a person has finished looking at and/or
reading our page, we don’t always want them to leave us completely.
Create a link on your page that will direct the customer/client/boss back to your index.
<a href=“index.htm”> CLICK HERE TO SEE THE REST OF MY AWESOME WORK </a>
Linking the Index to the main projectOur 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.
Add a link to this project in your index so that you can refer back to it later.
The link doesn’t have to be perfect, just add something so that it doesn’t get lost:
<a href=“28.htm”> CLICK HERE TO SEE MY SHAPE ART </a>
AESTHETIC CONSIDERATIONSThe 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 show off your talent.
<h1> <center> <br> <body bgcolor=“”>
<img src=“”> <font size=“” color=“”>
Final SubmissionThere 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 be given when grading.
Make sure that the project links to your index and your index links to the project. You don’t want your potential customers to leave you too quickly!
Linking the main project to the indexLinking the Index to the main projectAesthetic considerationsFinal Submission
Review
<head> <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> </head>
<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);line(300,100,200,300);line(300,120,180,300);line(300,140,160,300);line(300,160,140,300);</script><canvas></canvas>
<br><br>
<center><script type="application/processing">size(300, 1600);background(100,100,100);
stroke(255,255,0);strokeWeight(10);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);
</script><canvas></canvas></center>
<br><br>
<script type="application/processing">size(1200, 500);background(50,50,255);
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);</script><canvas></canvas>
</body>