Introduction to Animation Programming Our next set of exercises will look at animation on the following link: ng/animation-basics/p/intro-to-animation

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.

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

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

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

 ing/animation-basics/p/challenge-exploding- sun

This is my paragraph

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.

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

Crazy Painter ation-basics/p/project-crazy-painter

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

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

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

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

noStroke(); //removes the perimeter of the shape var leftX = 145; //the start position of the left cloud var rightX = 270; //the start position of the right cloud var sunRadius = 100; //the size of the sun

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

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

 Get a screen shot and write a paragraph for your project 26.htm web page from:  ng/animation-basics/p/challenge-parting- clouds ng/animation-basics/p/challenge-parting- clouds

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

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

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

 The web site has the ability to create an account for free. This can be down with an 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!

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.

 Rubric Part 1  Rubric Part 2  Registering With Khan  Implementing Khan to External Projects