Using Coordinate Geometry to Create Moving Images

1. Using Coordinate Geometry to Create Moving Images In unit 29 we created a simple drawing for the background of a children’s game. We are going to start to move some of the objects in the game.

2. Moving the Sun Right var x = 700; void draw() { fill(200,200,0); ellipse(x,100,150,150); x=x+1; }

3. Changing Directions on the End of the Screen void draw() { if(x>800) t = -t; if(x<0) t = -t; //other draw code }

4. Practice 1 20% • Use the example code to make it so that the sun or any object bounces back and forth on the simple picture. • Increase the aesthetics of the movement by altering the speed, colors, reducing the “smear” affect and/or improving the look of the picture.

5. Review • Using Coordinate Geometry to Create Moving Images • Moving the Sun Right • Changing Directions on the End of the Screen • Practice 1

6. Moving the Star The star is a very complicated set of lines that will require significant changes to create aesthetically pleasing results. Remember, the line consists of 4 variables that says the first X the first Y then the second X and the second Y. X moves right and left. Y moves up and down.

7. Move the Star Right void draw() { background(255,255,255); //top left part of star line(x,0,300,300); line(x,20,280,300); line(x,40,260,300); //many more lines x=x+t; }

8. Bouncing Off the Walls var x = 300; var t=1; void draw() { if(x>600) t = -t; if(x<0) t = -t; //other code }

9. Practice 2, 20% • Make the star stretch back and forth by altering the X values of the first coordinates in the lines. • Improve the aesthetics of the drawing with original colors, settings and placement. • Note: there are many other ways the star can be moved by changing the variables. Experiment with them.

10. Review Moving the Star Move the Star Right Bouncing off the Walls Practice 2

11. Driving Up the Road The screen has a limited amount of room that does not allow the car to drive very far. Instead of moving the car, we can move the road in the opposite direction and give the illusion of the car moving.

12. Changing the Variables var y = 0; void draw(){ background(100,100,100); stroke(255,255,0); y = y + 1; if (y>50) y = 0; //other code }

13. Lines With Variables line(150,y+0,150,y+50); line(150,y+100,150,y+150); line(150,y+200,150,y+250); Line(150,y+300,150,y+350);

14. Practice 3, 20% • Create the illusion of the car moving up by having the road move down. • Improve the aesthetics of the road and the car by adding details. • Make the car bounce left and right using the same concepts from previous practices.

15. Review Driving Up the Road Changing the Variables Lines With Variables Practice 3, 20%

16. Aircraft Through the Sky The aircraft will move through the sky until it gets to the end of the screen. However, this is not very far, and a good programmer can take steps to give the illusion of further movement. By having the background move left, a programmer can give the illusion of the aircraft moving right.

17. Moving the Background tx = 800; x = 0; void draw(){ background(50,50,255); //tree noStroke(); fill(102,51,0); rect(tx-10,350,20,200); fill(0,255,0); ellipse(tx,375,150,100); tx = tx - 10; if (tx < 0) tx = 1200; //other code }

18. Moving the Airplane //jet strokeWeight(2); stroke(120,120,255); fill(110,111,200); rect(x+150,150,100,100); triangle(x+200,100,x+200,300,x+400,200); triangle(x+100,125,x+100,275,x+200,200); x= x+1; if (x>800) x = 800;

19. Practice 4, 20% The aircraft should move towards the right until it gets to the end of the screen. The tree and/or other background elements should continue and repetitiously move left. Improve the aesthetics of both the aircraft and the background to make the scene look more realistic.

20. Review Aircraft through the Sky Moving the Background Moving the Airplane Practice 4, 20%

21. Accessing Online Documents The program we are using refers to two online documents to create functionality on our graphics scripts. To make our games load faster, we should get a copy of these online documents and keep them locally. Additionally, it is good practice to keep documents locally called in case the other web site stops working.

22. Accessing the Documents Locally The program’s head element currently calls for documents like this: <script type="text/javascript" src="http://www.scottbunin.com/processing.js"></script> Get a copy of the document, safe it locally and then call it with the src = “/processing.js“ ***note, there are TWO files to change like this***

23. Linking to the Index When some one is done with our current web page, we don’t want them to leave our company completely. Students should give the end user an option to go back to their index so that other parts of the web site can be explored. <a href=“/index.htm”> Click here to see more great stuff </a>

24. Linking From the Index to the File Our index file lists all the great stuff we have created on our web site. It is important to update the index to reflect the new projects we have added. We can cheat ourselves out of credit if we do good work and then no one knows about it.

25. Review Accessing Online Documents Accessing the Documents Locally LInking to the Index Linking From the Index to the File

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(00,00,200); fill(200,200,0); ellipse(700,100,150,150); stroke(0,200,0); strokeWeight(4); fill(0,200,0); rect(0,400,800,400); fill(200,200,200); stroke(200,0,200); rect(400,250,200,200); triangle(395,250,500,200,600,250); </script><canvas></canvas> <br> <br> <script type="application/processing"> size(600, 600); background(255,255,255); stroke(0,0,255); strokeWeight(1); //top left part of star 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(300,180,120,300); line(300,200,100,300); line(300,220,80,300); line(300,240,60,300); line(300,260,40,300); line(300,280,20,300); line(300,300,0,300); //bot left part of star line(300,600,300,300); line(300,580,280,300); line(300,560,260,300); line(300,540,240,300); line(300,520,220,300); line(300,500,200,300); line(300,480,180,300); line(300,460,160,300); line(300,440,140,300); line(300,420,120,300); line(300,400,100,300); line(300,380,80,300); line(300,360,60,300); line(300,340,40,300); line(300,320,20,300); line(300,300,0,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); line(150,300,150,250); line(150,400,150,350); line(150,500,150,450); line(150,600,150,550); line(150,700,150,650); line(150,800,150,750); line(150,900,150,850); line(150,1000,150,950); line(150,1100,150,1050); line(150,1200,150,1250); noStroke(); fill(0,0,0); rect(35,55,100,30); //tires rect(35,200,100,30); fill(200,50,50); rect(40,50,90,200);//car </script><canvas></canvas> </center> <br> <br> <script type="application/processing"> size(1200, 500); background(50,50,255); //jet strokeWeight(2); stroke(120,120,255); fill(110,111,200); rect(150,150,100,100); triangle(200,100,200,300,400,200); triangle(100,125,100,275,200,200); </script><canvas></canvas> </body>