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.

//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; }

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

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.

Animating Coordinate Geometry //explosion //boat Practice 1, 20%

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.

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; }

Creating Our Own Function void bounceX(){ t = random(-50, 50); t = t / 100; a = - a; a = a + t; }

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.

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

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.

Example Code var xAll = 0; var yHand = 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 }

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

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.

 Moving Stick Figures  Example Code  Shapes With Variables  Practice 3, 20%

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.

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

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

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

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

 The beginning of our programs have two lines like the following:   Instead of downloading the file every time, get a local copy of the file and change the link to just the file name.

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.

 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

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”

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

Happy Drawing 2 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); 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); 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); size(800, 500); background(10,10,10); //stars stroke(255,255,255); 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);