HTML5 and JS Bouncy Ball

Session 1: Our first project will be to create motion in the form of a bouncing ball. We will start by creating a bouncing ball using JavaScript and then we will do it again using a JavaScript library called P5.js. Before we do any of this let’s have a quick lesson in the JavaScript language and learn how to tween or animate objects using HTML5, the <canvas> tag, and JavaScript. Let’s start by going through the Canvas tutorial on the Mozilla Developer Network (MDN).

Problem Set 2: Getting Started with Canvas
Due: Week 2, Lab 2 (3 points)

Use the HTML5 canvas tag and JavaScript to place objects and images in the brower’s client area. Follow instruction in the MDN: Basic Use of Canvas documentation to draw shapes & images, apply colors, and draw text. Try different canvas dimensions x/y locations for the objects. Optional: use the setInterval() function to animate an object on the canvas.

1. All problems sets are due by the beginning of the lab following when they were assigned.
2. Submit answers on Canvas uploaded as HTML, JavaScript, CSS, .zip or otherwise as noted.
3. Solutions to each problem set will be given during demos on the day that they are due.

Session 2: Today I will show solutions to Problem Set 1 (due today). Afterward let’s take a look at rendering objects to an HTML5 canvas and start on learning how to animate objects on a canvas using the setInterval() function function in JavaScript. Let’s start by discussing the requirements for our first project. Note: Projects have more points and therefore more weight toward your final grade than problem sets.

Project 1: HTML5 and JS Animated Circle
Due: Week 4, Session 2 (Beginning of Class)
Points: 5

Part 1: using the setInterval() function, animate a circle on a minimum 500 by 500 pixel canvas within an HTML5 document. Use the example code below as a starting point. Start by making the circle bounce back from the edges of the canvas. Next clear the canvas repeatedly so that the circle appears to be animated. Try enhancing the animation by cycling the colors of the circle, either randomly, or through a range. Adjust the bounce point so that part of the circle is not hidden.

Part 1: once you have something you like, create a similar but more advanced version using the P5.js library. Using setInterval() will not be necessary for the P5.js version. We are doing the same project twice because the first time illustrates how to do it in raw JavaScript, while the second time will much easier with the aid of P5.js. Important: In the P5.js version make use of arrays to have a variable amount of circles animated (as demonstrated) and apply some of your own creative ideas NOT demonstrated in class to the P5.js version.

Requirements Part 1:
1. Use HTML5 and JavaScript to animate a circle in a minimum 500 by 500 pixel canvas
2. Clear the canvas so that the circle appears to animate
3. Cycle the colors and / or the size of the circle to enhance the animation
4. Adjust the bounce point so that part of the circle is not hidden

Requirements Part 2:
1. Rewrite the project using the P5.js library
2. Apply three more of your own creative ideas to make your project unique
3. In the P5.js version Use arrays to animate many circles at once
4. Turn in both versions as .html and .js documents on Canvas*

*Follow the instructions posted on week 1 to turn in your work correctly and remember to include all required assets and libraries

Lab: Use the lab today to experiment with P5.js and start on converting your HTML5 and JS Animated Circle to using the p5.js framework instead of using raw JavaScript.

Afterward get started on coding the HTML5 and JS Animated Circle. You can use the JavaScript below as a starting point. I will be available to answer questions and help you troubleshoot your code.

var ctx;
var dx = 5; var dy = 4;
var y = 250; var x = 250;
function draw(){
	ctx = myCanvas.getContext('2d');
	ctx.beginPath();  
	ctx.fillStyle = "#00bb00";
	ctx.arc(x,y,40,0,Math.PI*2,true);
	ctx.closePath();
	ctx.fill();
	if( x < 0 || x > 500) {
		dx = -dx;		
	}
	if( y < 0 || y > 500 ) {
		dy = -dy;
	}            
	x += dx;
	y += dy;
} 
// call a function repeatedly at a set interval
setInterval(draw,30);