Locally Edited Animations

Locally Edited Animations

• We will need 3 files to help get us started at http://www.scottbunin.com/27.zip.

http://www.scottbunin.com/27.zip

Files Explained

• We will need 3 files that all do important things for this project:

• 1. 27.htm is the page that the end user will load to see what we made

• 2. init.js is a settings file that sets up so the scripts work

• 3. processing.js is a file that lets us run our scripts in an easy way like we did at the Khan web site

HTML Code to Include Scripts<html> <head> <title>A Processing.js Example</title> <script type="text/javascript" src="processing.js"></script> <script type="text/javascript" src="init.js"></script> </head> <body><script type="application/processing">size(600, 400); // Size should be the first statementframeRate(30); //this adjusts program's speed//put rest of program after this

</script><canvas></canvas> </body></html>

SCRIPT 1, 20% Go to the Khan Web Site and develop

your Crazy Painter Program. You may work off of spinoff examples, however, you must make your own changes.

Write a paragraph about which spinoff you selected and what changes you decided to implement to your version.

Add some more examples from our previous project so that they can show up on your web site.

ReviewLocally Edited AnimationsFiles ExplainedHTML Code to Include ScriptsScript 1, 20%

Old Fashioned BrowsersSome times a computer is running a browser

that is not up to date with the latest and greatest abilities. For example, Google Chrome may be installed on a machine with a recent version. Internet Explorer may have an outdated version. There are two solutions to this. You can update the browser to the latest version. You can run the web page in a different browser. To run the web page in a different browser, instead of left clicking on it, right click and choose to run it in the more recent browser version.

KHAN WEBSITE FUNCTIONS Even though the Khan web site uses a

similar setup, there are still some important differences. On the Khan website, a student would write:

var draw = function(){

Instead of writing it like that, set the line of code likes this:

void draw(){

Public TransportationTry the project at the link:https://www.khanacademy.org/cs/programmin

g/animation-basics/p/project-public-transportation

You can design a vehicle and design a background.

Be sure to look at some of the examples of other student’s work in the spinoff section.

https://www.khanacademy.org/cs/programming/animation-basics/p/project-public-transportation



SCRIPT 2, 20% Create your own Transportation project

and add it to your 27.htm document.

Write a paragraph describing what you have done.

ReviewOld Fashioned BrowsersKhan Website FunctionsPublic TransportationScript 2, 20%

USING CONDITIONAL STATEMENTS By using this link below: https://www.khanacademy.org/cs/progra

mming/logic-if-statements/p/challenge-bouncy-ball

a student can practice making their animations a little smarter.

The shapes should not go off the screen.

We will help this with conditional statements.

https://www.khanacademy.org/cs/programming/logic-if-statements/p/challenge-bouncy-ball



The End of the (game) WorldThe canvas has a certain size. In the Khan

cloud service, it is 400. In our local example it is 600. By putting I an if statement, we can check to see if the object is too far along to continue. Then we can change its direction. For example, if a shape was moving to the right, we could check to see if it was hitting the edge at 400.

If (x > 400) {speed = -5;}

var x = 20; // position of the ballvar speed = 5; // how far the ball moves every timevar draw = function() { background(202, 255, 97); fill(66, 66, 66); ellipse(x, 200, 50, 50); if (x > 400) { speed = -5; } if (x < 0) { speed = 5; }x = x + speed; // move the ball};

Script 3 20%Add a script to your 27.htm so that an

interesting looking game object can bounce off the walls.

Write a paragraph about what you have done and include it in an aesthetically pleasing format on your 27.htm web page.

REVIEW Using Conditional Statements The End of the (game) World Code Example Script 3 20%

MOUSE INTERACTION WITH PROGRAM Check out the program at: https://www.khanacademy.org/cs/progra

mming/logic-if-statements/p/more-mouse-interaction

This function will show us an example of how to make things happen in a program when a user gives input from the mouse. Any good program or game should respond or else it is just functioning like a video.

https://www.khanacademy.org/cs/programming/logic-if-statements/p/more-mouse-interaction



position = position + speed;ellipse(position, mouseY, 50, 50); if (mousePressed) { ellipse(mouseX, position, 50, 50); }if (position > 375) { speed = -5; } if (position < 25) { speed = 5;

DIFFERING FUNCTION NAMES Some of the functions that the Khan

web site uses work well on the Khan web site but not in regular browsers. On the Khan website the function mouseIsPressed works very well. When using it in a regular .htm file such as or project for 27.htm, call the function as mousePressed without the “is”.

mouseIsPressed(); mousePressesd();

Script 4, 20%Create an improved version of the program

example of two balls that are changed by mouse movements on the Khan web site called “challenge-bouncy-ball”. Be sure to have different colors and shapes.

Use the mousePressed function to create an improved version of your Crazy Mouse program.

There are two scripts and no paragraphs assigned.


REVIEW Mouse Interaction With Program Code Example Differing Function Names Script 4, 20%

RUBRIC PART 1 Personalized Crazy Painter Program to

local file. Paragraph on how you made your Crazy

painter. Personalized Transportation project to

local file. Paragraph on how you made your

Transportation Project Personalized bouncing object added to

local file.

RUBRIC PART 2 Paragraph on bouncing object. Personalized improved version of

bouncy ball on local file. Personalized improved Crazy Painter

program using the mousePressed() function to draw.

Aesthetics of Canvases. Aesthetics of text.

DECIDING YOUR CANVAS SIZE

It says size(600, 400); in the example, but we may want to change that. Make the script the size you want it to be. The 600 can determine width so make it better to get a wider script. The 400 decides the height so make it bigger to get a taller canvas. You can even make it take up the whole screen with: size(screen.width, screen.height);

AESTHETICS AND FUNCTION Most of the rubric has focus on making the

project have functional scripts and paragraphs. For the two parts of the rubric that focus on aesthetics, try some of the following suggestions:

Font size/color/face. <h1> tag Canvas sizes Background color Centering Pictures Links

REVIEW Rubric Part 1 Rubric Part 2 Borrowing Something Awesome Aesthetics and Function

Documents

Locally Edited Animations