Lab 13 / Part 3 - Animation

Here in Part 3, you will be creating the following programs together in class:

1. circle-boundary
2. circle-bounce

You will then have the choice of completing any 1 out of the 2 additional programs on your own:

1. circle-boundary-all
2. circle-bounce-2

circle-boundary

Write a program that draws a circle that moves horizontally from left to right, but whenever it hits the right or left wall, it changes direction.

• using your text editor (e.g. SublimeText, Atom, VS Code, etc.), create a new file called circle-boundary.html in your repository directory.
• Start with the following code, which creates a circle that moves horizontally from left to right:
• setup an html file
• add a style tag in insides the head tag - add the following code to give your canvas element a border:

<style>
	#sketch {
		border:1px solid #000;
	}
	</style>
	

• create a canvas element that is 480 by 720
• add script tags
• add a listener to your document to handle onload events… set it to run your main function: document.addEventListener(‘DOMContentLoaded’, main);
• declare the following variables:
  • sketch - your canvas element
  • context - your drawing instrument
  • circle - an object that contains your circles x, y position and radius
  • dx (set this equal to 2) - the velocity
  • fps (set this equal to 10) - the delay in ms before your animate function is called
  • animation - a variable to keep track of your animation
• create a main function
  • start writing your program in your main function
  • get your sketch element: sketch = document.getElementById(‘sketch’);
  • create your context: context = sketch.getContext(“2d”);
  • create your circle object: circle = {‘x’:25, ‘y’:sketch.offsetHeight / 2, ‘r’:25};
  • specifiy a function to be called repeatedly at a specific interval: animation = setInterval(animate, fps);
  • note that the animate function will be defined immediately after… outside of the main function
  • your main function is finished!
• create another function, outside of main, called animate (this will be called repeatedly, and it will be responsible for clearing the screen and drawing your shapes)
  • clear the screen: context.clearRect(0, 0, sketch.offsetWidth, sketch.offsetHeight);
  • draw circle at current position of circle object (this function will be defined later): draw_circle(circle.x, circle.y, circle.r);
  • move the circle’s position by adding velocity: circle.x = circle.x + dx;
  • that should finish your animate function
• finally, define your circle function; you can copy and paste from previous slides or programs
• at the end of your animate function, add a conditional (or conditionals) to check if your circle is at either end of the canvas:
  • check that the circle’s x value is beyond the left side by seeing if it’s greater than the canvas sidth minus velocity minus radius: circle.x > sketch.offsetWidth - dx - circle.r
  • check that the circle’s x value is beyond the right side by seeing if it’s less than the circle’s radius minus the velocity: circle.x < circle.r - dx
  • if these conditions are set, change direction by changing the sign on velocity: dx = dx * -1
• use git status, add, commit, and push to save your file in version control and submit it
• send it to github by using git push
• example movie below

If video doesn't display above, download it here.

circle-bounce

Write a program that draws a circle that falls vertically by using velocity and acceleration… and bounces after it hits the bottom boundary. Eventually, the circle will stop bouncing.

• using your text editor (e.g. SublimeText, Atom, VS Code, etc.), create a new file called circle-bounce.html in your repository directory.
• base this program off of previous programs
• you won’t need to move horizontally for this (so, you can remove dx)
• however, you’ll need acceleration (probably around 0.1 or 0.2), and some sort of number to dampen the velocity after a bounce (probably 0.8 or 0.9)
• in your animate function, along with changing the y position, you’ll also modify dy, the velocity, by using acceleration (for example… adding acceleration)
• when your code checks for a bounce, instead of just flipping the sign on velocity, dampen the velocity by multiplying it by a number smaller than one (again, probably 0.8 or 0.9)
• if you want to stop bouncing at a certain threshhold, this code may come in handy:

// if your velocity is less than some minimum value
if (Math.abs(dy) < min_dy_val) {
	// zero out acceleration and velocity
	dy = 0
	acc = 0
}

• use git status, add, commit, and push to save your file in version control and submit it
• send it to github by using git push
• example movie below

If video doesn't display above, download it here.

Complete any 1 of the 2 additional programs below on your own & submit before this week's deadline:

circle-boundary-all

Write a program that draws a circle that moves horizontally and vertically, but whenever it hits the right, left, top, or bottom wall, it changes direction.

• using your text editor (e.g. SublimeText, Atom, VS Code, etc.), create a new file called circle-boundary-all.html in your repository directory.
• copy your code from your previous program
• add a velocity for y … call it dy and set it to some value… so that the ball moves up and down as well as left and right
• in your animate function… change your circle’s y position by adding velocity: circle.y = circle.y + dy;
• check your top and bottom boundaries (you can based this off of your left and right boundaries)
• if the boundaries are encountered, flip the sign on dy (your vertical velocity)
• use git status, add, commit, and push to save your file in version control and submit it
• send it to github by using git push
• example movie below

If video doesn't display above, download it here.

circle-bounce-2

• modify your previous program to have a horizontal velocity as well!
• use git status, add, commit, and push to save your file in version control and submit it
• send it to github by using git push
• example movie below

If video doesn't display above, download it here.

Summary: Week 13 Labs

At the end of Part 3 and before the deadline, you should have the following files committed and pushed to your remote repository:

1. square
2. five squares (in a row)
3. additional lab #1 (from Part 1)
4. additional lab #2 (from Part 1)
5. Four By Seven
6. Checkerboard
7. additional lab #1 (from Part 2)
8. additional lab #2 (from Part 2)
9. circle-boundary
10. circle-bounce
11. additional lab (from Part 3)
12. Just like last week, add a brainstorming text file. Call this file events.txt. Now that you know how to do canvas drawing, animation, drawing events, and click events, describe how you will design your website with some of these methods. What would you like to animate? Or, what kind of click event will you use? Remember, some of these are REQUIRED on your final website, and you can't simply copy the code from our labs. You must use your own colors and shapes, so describe how you will adapt these labs to make something that is creatively your own.