animating coordinate geometry in this unit we will expand upon our knowledge of using counters to...
Post on 28-Dec-2015
220 Views
Preview:
TRANSCRIPT
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.
//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.
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;}
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 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.
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.
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>
top related