Animating Coordinate GeometryIn 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.

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

//boatvar 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//boatPractice 1, 20%

Having Objects React With Planned RandomnessWe 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 Codevar x = 0;var y = 0;var a = 10;var b = 10;

void draw(){ellipse(x,y,140,140);fill(0,50,0);//other ellipsesx = 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 Functionvoid 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.

ReviewHaving Objects React with

Planned RandomnessExample CodeCreating Our Own FunctionPractice 2, 20%

Moving Stick FiguresThe 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 Codevar 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}

SHAPES WITH VARIABLESbackground(100,100,100);//headellipse(200+xAll,200+yHand,80,80);//bodyline(200+xAll,240,200+xAll,340);//legsline(200+xAll,340,175+xAll,460);line(200+xAll,340,250+xAll,460);//upper armline(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.

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

EXAMPLE CODEvar t = .01var x = 1.0;void draw(){

background(10,10,10);

x = x - t;if(x < 0.0) t = -t;if(x > 1.0) t = -t;

//starsstroke(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//sunfill(255,255,00);ellipse(400,255,100,100);//planet orbitsnoFill();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//planetsfill(50,50,255);ellipse(500-x*100,255,15,15);

}

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.

ReviewSpace AdventureExample CodeExample Code Part 2Practice 4, 20%

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.

Linking To and From The IndexThe 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.

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

Improvements AestheticsBoats look like real ships instead of just

rectanglesExplosions have more complex shapes

and graphicsBouncing ball trail has varied colors. Moving stick figures look realistic in limb

motionStars are real looking instead of flashing

all overSun has more complex colors with moving

“flame”

ReviewChanging Called Files To Local

LinksLinking To and From the IndexImprovements: FunctionalImprovements: Aesthetics

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