Making shapes - My Course Web Page!

Download Report

Transcript Making shapes - My Course Web Page!

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