Animating Coordinate Geometry

1. Animating Coordinate Geometry • In this unit we will expand upon our knowledge of using counters to create motion pictures. • By using incremental mathematics, we can have objects move and/or change to make a better looking game.

2. //explosion var w = .1; var t = .1; void draw(){ noStroke(); fill(100,0,0); ellipse(225,225,w*35,w*35); fill(155,0,0); ellipse(225,225,w*25,w*25); fill(255,0,0); ellipse(225,225,w*15,w*15); w = w + t; if (w>1) t = -t; if (w<.1) t = -t; }

3. //boat var a = 1; var b = 1; var x = 60; var y = 60; void draw(){ strokeWeight(2); stroke(120,120,120); fill(75,75,75); rect(x,y,30,130); if (x < 300) x = x + a; if (x > 299) y = y + b; if (y > 200) y = 200; //other code

4. Practice 1, 20% • Use the example code to have boats and explosions move throughout the game board. • Continue to improve the overall game to make it look like a professional game with original boats, explosions and movements.

5. Animating Coordinate Geometry • //explosion • //boat • Practice 1, 20%

6. Having Objects React With Planned Randomness • We have made objects bounce back and forth before. • On the computer, an object can bounce in a perfect line off a perfect object and remain exactly on track. • However, this does not look real since the world contains imperfections. • We will add some randomness to our bounce to make it look real.

7. Example Code var x = 0; var y = 0; var a = 10; var b = 10; void draw(){ ellipse(x,y,140,140); fill(0,50,0); //other ellipses x = x + a; y = y + b; if (x > 600) bounceX(); if (x < 0) bounceX(); if (y > 600) b = - b; if (y < 0) b = - b; }

8. Creating Our Own Function voidbounceX(){ t = random(-50, 50); t = t / 100; a = - a; a = a + t; }

9. Practice 2, 20% • Using the guided example code as a base to start, have the previously created ellipse design bounce around the screen. • Improve the overall aesthetics of the background and the moving objects. • Use the example given to have more than one set of bouncing ellipses.

10. Review • Having Objects React with Planned Randomness • Example Code • Creating Our Own Function • Practice 2, 20%

11. Moving Stick Figures • The stick figures have a lot of limbs and joints. • To make them move in a way that appears to be a natural person requires careful planning. • In this practice, we will make one or more stick figures move in an animation.

12. Example Code varxAll = 0; varyHand = 0; var t=-1; void draw(){ if (xAll < 500) xAll = xAll + 5; if (xAll >= 500) yHand = yHand + t; if (yHand >= 30) t = -t; if (yHand <= 0) t = -t; //shapes codes }

13. Shapes With Variables background(100,100,100); //head ellipse(200+xAll,200+yHand,80,80); //body line(200+xAll,240,200+xAll,340); //legs line(200+xAll,340,175+xAll,460); line(200+xAll,340,250+xAll,460); //upper arm line(200+xAll,240,170+xAll,300);

14. Practice 3, 20% • Make one of the stick figures move across the screen and wave hello. • Have other stick figures move in appealing ways. • Improve the overall aesthetics of the stick figures and the background.

15. Review • Moving Stick Figures • Example Code • Shapes With Variables • Practice 3, 20%

16. Space Adventure! • Making the planets and the elliptical orbits of our solar system move can make for a nice animation that can lead to a successful game. • In this practice, we will create the illusion of the orbits and planets moving.

17. Example Code var t = .01 var x = 1.0; void draw(){ background(10,10,10); x = x - t; if(x < 0.0) t = -t; if(x > 1.0) t = -t; //stars stroke(random(1,255),random(1,255),random(1,255)); fill(random(1,255),random(1,255),random(1,255)); ellipse(random(1,800),random(1,500),5,5);

18. Example Code Part 2 //sun fill(255,255,00); ellipse(400,255,100,100); //planet orbits noFill(); stroke(255,255,255); ellipse(400,255,x*200,150); //x is a percentage ellipse(400,255,(1-x)*250,200); //opposite path of other orbit //planets fill(50,50,255); ellipse(500-x*100,255,15,15); }

19. Practice 4, 20% • In this practice, the celestial objects will move in a way that looks realistic. • Be certain to balance the amount of things happening in the animation to make it interesting, but not crazy or overwhelming. • After the orbits and planets move in a real looking way, adjusted the overall aesthetics and add an alien space ship.

20. Review • Space Adventure • Example Code • Example Code Part 2 • Practice 4, 20%

21. Changing Called Files To Local Links • The beginning of our programs have two lines like the following: • <script type="text/javascript" src="http://www.scottbunin.com/processing.js"></script> • Instead of downloading the file every time, get a local copy of the file and change the link to just the file name.

22. Linking To and From The Index • The index file should be called as index.htm. • The current project has a file such as 32.htm. • Link the web page for this project back to your index. • Link the index to this project.

23. Improvements: Functional • Many ships move without crashing • Explosions appear and fade away • Bouncing ball has a friend to make two bouncing balls • Even more friends • Stick figure have friends that move with • Space has comets, aliens, 8 or more planets • Planets are aligned with orbitals

24. Improvements Aesthetics • Boats look like real ships instead of just rectangles • Explosions have more complex shapes and graphics • Bouncing ball trail has varied colors. • Moving stick figures look realistic in limb motion • Stars are real looking instead of flashing all over • Sun has more complex colors with moving “flame”

25. Review • Changing Called Files To Local Links • Linking To and From the Index • Improvements: Functional • Improvements: Aesthetics

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