Making shapes - My Course Web Page!
advertisement
Introduction to Animation
Programming
• Our next set of exercises will look at
animation on the following link:
https://www.khanacademy.org/cs/programmi
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%
https://www.khanacademy.org/cs/programm
ing/animation-basics/p/challenge-explodingsun
<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.
Make
the sun explode and the mouse to
move to eat an apple
Code example
HTML review
Practice 2, 20%
Crazy Painter
https://www.khanacademy.org/cs/programming/anim
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:
https://www.khanacademy.org/cs/programmi
ng/animation-basics/p/challenge-partingclouds
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
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
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
