Embed Size (px)
Citation preview
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
• 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 carvar 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%
MAKE THE SUN EXPLODE AND THE MOUSE MOVE TO EAT AN APPLE https://www.khanacademy.org/cs/
programming/animation-basics/p/challenge-exploding-sun
HTML REVIEW<html><body><img src=“26sun.png”><p> This is my paragraph </p></body></html>
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.
REVIEW Make the sun explode and the mouse to
move to eat an apple Code example HTML review Practice 2, 20%
Crazy Painterhttps://www.khanacademy.org/cs/
programming/animation-basics/p/project-crazy-painter
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.
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};
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.
ReviewCrazy PainterSpin OffsCode ExamplePractice 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
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
ReviewCode example: initial setupCode example: shape drawingCode example: increasing variables for shape
movePractice 4, 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.
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
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!
Implementing Khan to External ProjectsBy 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.
REVIEW Rubric Part 1 Rubric Part 2 Registering With Khan Implementing Khan to External Projects
