Coordinate Geometry for Graphics
description
Transcript of Coordinate Geometry for Graphics
![Page 1: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/1.jpg)
COORDINATE GEOMETRY FOR GRAPHICS By carefully incrementing the X
and/or Y values of our set of lines, we can create a game board for a boat game.
Lines that go from left to right are called horizontal lines and lines that go up and down are called vertical lines.
![Page 2: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/2.jpg)
MAKING A LINED GRID//horizontal gridline(0,50,800,50);line(0,100,800,100);line(0,150,800,150);line(0,200,800,200);line(0,250,800,250);
![Page 3: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/3.jpg)
MAKING AN EXPLOSION GRAPHICnoStroke();fill(100,0,0);ellipse(225,225,35,35);fill(155,0,0);ellipse(225,225,25,25);fill(255,0,0);ellipse(225,225,15,15);
![Page 4: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/4.jpg)
PRACTICE 1, 20% Create a playing field grid that
accurately expands upon the given patterns to fill the canvas.
Create improved versions of the boat and explosion graphics.
![Page 5: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/5.jpg)
REVIEW Coordinate Geometry for Graphics Making a grid line Making an explosion graphic Practice 1, 20%
![Page 6: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/6.jpg)
ELLIPTICAL PATTERN GRAPHICS By placing large circles or ellipses,
we can create a rainbow effect across the screen.
Remember to start in the background first and have the smaller shapes go later in the code so that the graphic will have the smaller shapes appear on top or inside of the larger.
![Page 7: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/7.jpg)
Canvas Setup Codesize(600, 600);background(255,255,255);stroke(255,255,255);strokeWeight(1);
![Page 8: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/8.jpg)
FILL() AND ELLIPSE() CODE//search for RGB color codes to find some
examples of colors for fill()fill(0,150,0);ellipse(0,0,160,160);fill(0,100,0);ellipse(0,0,140,140);
![Page 9: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/9.jpg)
Practice 2, 20% Create a set of circular or elliptical
shapes to encompass the entire canvas.
Set aesthetically pleasing colors for the different shapes in the fill and/or the stroke commands.
![Page 10: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/10.jpg)
Elliptical Pattern Graphics Canvas Setup Code fill() and ellipse() code Practice 2, 20%
![Page 11: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/11.jpg)
Stick Figure Returns!In this part of our project, we will be using
lines and ellipses to make stick figure people.The arms are usually drawn as two separate lines with an upper arm and a lower arm so that the figure can Flex their muscles.
![Page 12: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/12.jpg)
SETTING UP THE STICK FIGURE CANVASsize(800, 600);//gray backgroundbackground(100,100,100);//black linesstroke(0,0,0);//10 pixel thick linesstrokeWeight(10);
![Page 13: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/13.jpg)
DRAWING THE FIGURE//headellipse(200,200,80,80);//bodyline(200,240,200,340);//legsline(200,340,175,460);line(200,340,250,460);//upper armline(200,240,170,300);
![Page 14: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/14.jpg)
PRACTICE 2: STICK FIGURE 20% Follow the pattern started in the
example to finish the stick figure. The stick figure is lonely. Create some
family and/or friends for him on the same canvas.
![Page 15: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/15.jpg)
Stick Figure Returns Setting up the Stick Figure Canvas Drawing the Figure Practice 2: Stick Figure 20%
![Page 16: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/16.jpg)
MAKING SPACE ON OUR CANVAS
Some times it is a good idea to explore our games beyond the planet Earth and reach out into the beyond.
In this unit we will be making start, orbital patterns, and planets.
![Page 17: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/17.jpg)
MAKING THE STARS //starsstroke(255,255,255);ellipse(random(1,800),random(1,500),1,1)
;ellipse(random(1,800),random(1,500),1,1)
;ellipse(random(1,800),random(1,500),1,1)
;
![Page 18: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/18.jpg)
SOLAR SYSTEM//sunfill(255,255,00);ellipse(400,255,100,100);
//planet orbitsnoFill();ellipse(400,255,200,150);ellipse(400,255,250,200);
//planetsfill(50,50,255);ellipse(500,255,15,15);
![Page 19: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/19.jpg)
PRACTICE 4, 20% Add more planets to the solar system
with their predicted orbital paths. Create the proper number of stars to
make the space look real. Look up the real solar system and try to
make the planets look like they are correct.
![Page 20: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/20.jpg)
REVIEW Making space on our canvas Making the stars Solar system Practice 4, 20%
![Page 21: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/21.jpg)
Linking To this project from the local directory•This project is called 30.htm•If a student were to link to it, the link
would look something like this:•<a href=“30.htm”> Click here to see
project 30 </a>
![Page 22: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/22.jpg)
THE COMPLETE LINK REFERENCE If a student wanted to link to project
30.htm from an external source or to send the link through email, they would need the entire address.
For example, John Smith would be like this:
http://www.scottbunin.com/students/johnsmith
![Page 23: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/23.jpg)
Calling the Index and other files•The index.htm will come up if a file is not
specified and we load a directory on the Internet.
• If we want to call a specific file, instead of the index, we have to name the file.
•http://www.scottbunin.com/students/johmsmith/30.htm
![Page 24: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/24.jpg)
LINKING TO CLASSMATES BY LOCAL REFERENCE An easy way to link to a classmate, is
with the .. (double period) mark in the link such as this:
../billsmith/30.htm In this way, a student could link to their
sibling Bill, who is also getting an A in this class.
![Page 25: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/25.jpg)
Practice 5, 20%•Link to another project in your own
directory so a user can click on this project and go to a previous project.
•Link to a classmates version of this project. Be sure to ask what they are naming their file!
•Link back to the main index file.
![Page 26: Coordinate Geometry for Graphics](https://reader036.fdocuments.net/reader036/viewer/2022081420/56815fd3550346895dced25a/html5/thumbnails/26.jpg)
<head> <title>Happy Drawing 2</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, 800); background(0,200,200); fill(100,100,100);
//horizontal grid line(0,50,800,50); line(0,100,800,100); line(0,150,800,150); line(0,200,800,200); line(0,250,800,250);
//vertical grid line(50,0,50,800); line(100,0,100,800); line(150,0,150,800); line(200,0,200,800); line(250,0,250,800);
//boat strokeWeight(2); stroke(120,120,120); fill(75,75,75); rect(60,60,30,130);
//explosion
noStroke(); fill(100,0,0); ellipse(225,225,35,35); fill(155,0,0); ellipse(225,225,25,25); fill(255,0,0); ellipse(225,225,15,15);
</script><canvas></canvas>
<br> <br>
<script type="application/processing"> size(600, 600); background(255,255,255); stroke(255,255,255); strokeWeight(1);
fill(0,150,0); ellipse(0,0,160,160); fill(0,100,0); ellipse(0,0,140,140); fill(0,50,0); ellipse(0,0,120,120); fill(250,0,0); ellipse(0,0,100,100); fill(200,0,0); ellipse(0,0,80,80); fill(150,0,0); ellipse(0,0,60,60); fill(100,0,0); ellipse(0,0,40,40); fill(50,0,0); ellipse(0,0,20,20);
</script><canvas></canvas>
<br> <br>
<center> <script type="application/processing"> size(800, 600); background(100,100,100); stroke(0,0,0); strokeWeight(10);
//head ellipse(200,200,80,80); //body line(200,240,200,340); //legs line(200,340,175,460); line(200,340,250,460); //upper arm line(200,240,170,300);
</script><canvas></canvas> </center>
<br> <br>
<script type="application/processing"> size(800, 500); background(10,10,10);
//stars stroke(255,255,255); ellipse(random(1,800),random(1,500),1,1); ellipse(random(1,800),random(1,500),1,1); ellipse(random(1,800),random(1,500),1,1); ellipse(random(1,800),random(1,500),1,1); ellipse(random(1,800),random(1,500),1,1); ellipse(random(1,800),random(1,500),1,1);
//sun fill(255,255,00); ellipse(400,255,100,100);
//planet orbits noFill(); ellipse(400,255,200,150); ellipse(400,255,250,200);
//planets fill(50,50,255); ellipse(500,255,15,15);
</script><canvas></canvas>
</body>