1 / 25

Locally Edited Animations

Locally Edited Animations. We will need 3 files to help get us started at 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

chesna
Download Presentation

Locally Edited Animations

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Locally Edited Animations • We will need 3 files to help get us started at 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 <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 statement frameRate(30); //this adjusts program's speed //put rest of program after this </script><canvas></canvas> <!-- END OF THE FIRST CANVAS --> </body> </html>

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

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

  8. Public Transportation • Try the project at the link: • https://www.khanacademy.org/cs/programming/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.

  9. Script 2, 20% • 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. Using conditional statements • By using this link below: • https://www.khanacademy.org/cs/programming/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. Review • Using Conditional Statements • The End of the (game) World • Code Example • Script 3 20%

  16. Mouse interaction with program • Check out the program at: • https://www.khanacademy.org/cs/programming/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. 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();

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

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

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

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

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

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

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

More Related