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.

MOVING THE SUN RIGHTvar x = 700;void draw() {

fill(200,200,0);ellipse(x,100,150,150);x=x+1;}

Changing Directions on the End of the Screen

void draw() {if(x>800) t = -t;if(x<0) t = -t;//other draw code

}

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.

ReviewUsing Coordinate Geometry to Create Moving

ImagesMoving the Sun RightChanging Directions on the End of the

ScreenPractice 1

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.

void draw() {background(255,255,255);//top left part of starline(x,0,300,300);line(x,20,280,300);line(x,40,260,300);//many more linesx=x+t;}

Move the Star Right

Bouncing Off the Walls

var x = 300;var t=1;void draw() {

if(x>600) t = -t;if(x<0) t = -t;//other code}

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.

ReviewMoving the StarMove the Star RightBouncing off the WallsPractice 2

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.

CHANGING THE VARIABLESvar y = 0;void draw(){

background(100,100,100);stroke(255,255,0);y = y + 1;if (y>50) y = 0;//other code}

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

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.

Review

Driving Up the RoadChanging the VariablesLines With VariablesPractice 3, 20%

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.

Moving the Background

tx = 800;x = 0;void draw(){

background(50,50,255);

//treenoStroke();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

}

Moving the Airplane

//jetstrokeWeight(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;

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.

Review

Aircraft through the SkyMoving the BackgroundMoving the AirplanePractice 4, 20%

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.

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

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>

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.

Review

Accessing Online DocumentsAccessing the Documents LocallyLInking to the IndexLinking From the Index to the File

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