Creating art with simple shapes
Download
1 / 26

Creating Art With Simple Shapes - PowerPoint PPT Presentation


  • 88 Views
  • Uploaded on

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>

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Creating Art With Simple Shapes' - aysel


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
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
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
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
Review

  • Creating Art With Simple Shapes

  • Setting up the HTML

  • Example Graphic Code

  • Practice 1, 20%


Line graphics to make complex objects
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
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 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
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.


Review1
Review

  • Line Graphics to Make Complex Objects

  • Setting up a New Canvas

  • Line Examples

  • Practice 2, 20%


Using lines and rectangles to create graphics
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 3 rd canvas
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
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.


Review2
Review

  • Using Lines and Rectangles to Create Graphics

  • Setting up the 3rd Canvas

  • JS Example 3

  • Practice 3, 20%


Using triangles to create game pieces
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);

JS Example


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


Review3
Review

  • Using Triangles To Create Game Pieces

  • Example format for canvas 4

  • JS example

  • Practice 4, 20%


Linking the project to the main index
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
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>


Aesthetic considerations
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=“”>


Final submission
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!


Review4
Review

  • 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);

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>


ad