1 / 25

Introduction to Animation Programming

Introduction to Animation Programming. Our next set of exercises will look at animation on the following link: https://www.khanacademy.org/cs/programming/animation-basics/p/intro-to-animation. Making Animation.

idra
Download Presentation

Introduction to Animation Programming

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. Introduction to Animation Programming • Our next set of exercises will look at animation on the following link: https://www.khanacademy.org/cs/programming/animation-basics/p/intro-to-animation

  2. Making Animation • If you take a picture and have it redraw it a lot with small changes, you can create the illusion of an animation. As an object moves to the right, redraw the background then redraw the object with a slightly different x value. This can make something drive across the screen.

  3. noStroke(); // position of the car var x = -50; var draw = function() { background(252, 255, 214); x=x+3; // draw the car body fill(255, 0, 115); rect(x, 200, 100, 20); rect(x + 15, 178, 70, 40); // draw the wheels fill(77, 66, 66); ellipse(x + 25, 221, 24, 24); ellipse(x + 75, 221, 24, 24); if(x===400){x=-50;} };

  4. Practice 1, 20% • Your moving vehicle should go faster and be original in color and shape. • Display the work you have done on your web page entitled 26.htm with a screenshot so that you may upload your progress. Write a paragraph about what you did on your web page. (your paragraph may be the same as what you wrote on your quiz).

  5. Review • Introduction to Animation Programming • Making Animation • Code Example • Practice 1, 20%

  6. Make the Sun Explode and The Mouse Move to eat an apple • https://www.khanacademy.org/cs/programming/animation-basics/p/challenge-exploding-sun

  7. HTML Review <html> <body> <imgsrc=“26sun.png”> <p> This is my paragraph </p> </body> </html>

  8. Practice 2, 20% • Add a screen shot and a paragraph to show what you have done to make the sun explode • Add a screen shot and a paragraph to show what you have done to make the mouse eat the apple.

  9. Review • Make the sun explode and the mouse to move to eat an apple • Code example • HTML review • Practice 2, 20%

  10. Crazy Painter • https://www.khanacademy.org/cs/programming/animation-basics/p/project-crazy-painter

  11. Spin offs • The cloud service at the Khan web site has enables users to create extensions of the listed projects and post their own answers. To do it, a user would have to be logged in. We don’t need to log in to see the other student’s spin offs. Try seeing what some others have done before completing your own attempt.

  12. noStroke(); //sets shapes to not have an outline • var draw = function() { • fill(mouseX, 0, 0); //changes colors based on mouse • ellipse(mouseX, mouseY, 10, 10); //draws circle • };

  13. Practice 3, 20% • Add a screen shot and a paragraph explaining your favorite spinoff to your 26.htm web page. • Add a screen shot and a paragraph explaining your own Crazy Painter program.

  14. Review • Crazy Painter • Spin Offs • Code Example • Practice 3, 20%

  15. noStroke(); //removes the perimeter of the shape • varleftX = 145; //the start position of the left cloud • varrightX = 270; //the start position of the right cloud • varsunRadius = 100; //the size of the sun

  16. var draw = function() { • background(184, 236, 255); //makes the blue sky • fill(255, 170, 0); //makes the sun yellow • ellipse(200, 100, sunRadius, sunRadius);//circle for sun • // clouds • fill(255, 255, 255); • // left cloud • ellipse(leftX, 150, 126, 97); • ellipse(leftX+62, 150, 70, 60); • ellipse(leftX-62, 150, 70, 60); • // right cloud • ellipse(rightX, 100, 126, 97); • ellipse(rightX+62, 100, 70, 60); • ellipse(rightX-62, 100, 70, 60); • };

  17. sunRadius+=2; //makes the sun explode • rightX+=1; //moves right cloud right • leftX-=1; //moves left cloud left

  18. Practice 4, 20% • Get a screen shot and write a paragraph for your project 26.htm web page from: • https://www.khanacademy.org/cs/programming/animation-basics/p/challenge-parting-clouds

  19. Review • Code example: initial setup • Code example: shape drawing • Code example: increasing variables for shape move • Practice 4, 20%

  20. Rubric Part 1 (20 Points each) • Slide 4: Picture and Paragraph showing a vehicle with an original design and an increased speed from the example. • Slide 9a: Picture and paragraph to show how you solved the challenge to have the mouse eat the food item on the screen • Slide 9b: Show picture and paragraph on sun explosions.

  21. Rubric Part 2 (20 Points each) • Slide 14a: Screen shot and a paragraph explaining your favorite spinoff from the crazy painter • Slide 14b: Picture and paragraph on your own crazy painter programrazy Painter program. • Slide 19: Picture and a paragarph on how you made the clouds part and the sun get larger

  22. Registering with Khan • The https://www.khanacademy.org/ web site has the ability to create an account for free. This can be down with an email address. By registering a student can keep track of their score and explore the learning opportunities. Additionally, a student could become a part of the online community! Start leaving spinoffs and comments today!

  23. Implementing Khan to External Projects • By directly accessing the processing.JS script that is used on the Khan web site, we can make our web pages run independently. When set up correctly, a programmer can develop ideas with the online service and then use the ideas on a personal site. That is beyond the scope of this project, but extended learning can be found at processingjs.org.

  24. Review • Rubric Part 1 • Rubric Part 2 • Registering With Khan • Implementing Khan to External Projects

More Related