Making shapes - My Course Web Page!
advertisement
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> 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 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); 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. 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 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. 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> 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 show off your talent. <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 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 index Linking the Index to the main project Aesthetic considerations Final Submission <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);
