1 / 26

Creating Art With Simple Shapes

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>

aysel
Download Presentation

Creating Art With Simple Shapes

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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!

  2. 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>

  3. 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);

  4. 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.

  5. Review • Creating Art With Simple Shapes • Setting up the HTML • Example Graphic Code • Practice 1, 20%

  6. 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.

  7. 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>

  8. 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);

  9. 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.

  10. Review • Line Graphics to Make Complex Objects • Setting up a New Canvas • Line Examples • Practice 2, 20%

  11. 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.

  12. 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>

  13. 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);

  14. 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.

  15. Review • Using Lines and Rectangles to Create Graphics • Setting up the 3rd Canvas • JS Example 3 • Practice 3, 20%

  16. 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.

  17. <br> <br> <script type="application/processing"> size(1200, 500); background(50,50,255); </script><canvas></canvas> </body>

  18. 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); JS Example

  19. 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.

  20. Review • Using Triangles To Create Game Pieces • Example format for canvas 4 • JS example • Practice 4, 20%

  21. 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>

  22. 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>

  23. Aesthetic considerations 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=“”> <imgsrc=“”> <font size=“” color=“”>

  24. 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!

  25. Review • Linking the main project to the index • Linking the Index to the main project • Aesthetic considerations • Final Submission

  26. <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>

More Related