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

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

3. HTML Code to Include Scripts A Processing.js Example size(600, 400); // Size should be the first statement frameRate(30); //this adjusts program's speed //put rest of program after this

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

5. Review Locally Edited Animations Files Explained HTML Code to Include Scripts Script 1, 20%

6. Old Fashioned Browsers Some 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.

7.  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(){

8. Public Transportation Try the project at the link: https://www.khanacademy.org/cs/programming/anim ation-basics/p/project-public-transportation https://www.khanacademy.org/cs/programming/anim ation-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.

9.  Create your own Transportation project and add it to your 27.htm document.  Write a paragraph describing what you have done.

10. Review Old Fashioned Browsers Khan Website Functions Public Transportation Script 2, 20%

11.  By using this link below:  https://www.khanacademy.org/cs/programm ing/logic-if-statements/p/challenge-bouncy- ball https://www.khanacademy.org/cs/programm ing/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.

12. The End of the (game) World The 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;}

13. var x = 20; // position of the ball var speed = 5; // how far the ball moves every time var 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 };

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

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

16.  Check out the program at:  https://www.khanacademy.org/cs/programm ing/logic-if-statements/p/more-mouse- interaction https://www.khanacademy.org/cs/programm ing/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.

17. 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;

18.  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();

19. 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.challenge-bouncy-ball Use the mousePressed function to create an improved version of your Crazy Mouse program. There are two scripts and no paragraphs assigned.

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

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

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

23.  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);

24.  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.  tag  Canvas sizes  Background color  Centering  Pictures  Links

25.  Rubric Part 1  Rubric Part 2  Borrowing Something Awesome  Aesthetics and Function