Note: For

1. Animate Mickey to Eat the Cheese

(filename: animatemickey.html and animatemickey.js)

Please follow the instructions carefully and complete all of the steps.

1. When the user clicks on the canvas, display the cheese and automatically rotate Mickey and move it towards the cheese.
   1. Find the angle from Mickey to the cheese with relation to the positive x, which is

mickeyAngle = Math.atan2((cheeseY - mickeyY), (cheeseX - mickeyX));

2. Translate Mickey along this angle for a small distance (mickeyDistance) with the following values:

mickeyX += mickeyDistance * Math.cos(-mickeyAngle); mickeyY -= mickeyDistance * Math.sin(-mickeyAngle);

1. 3. Rotate Mickey by this angle
   4. Repeat the steps above
2. When Mickey moves to within 15 pixels of the cheese, remove the cheese.

Source code: (Javascript)

function drawCheese(x,y) { ctx.save(); // move to the position (x,y) ctx.translate(x,y); ctx.beginPath(); ctx.fillStyle = "yellow"; // draw the triangle ctx.lineTo(-30,20); ctx.lineTo(20,0); ctx.lineTo(-30,-20); ctx.lineTo(-30,20); ctx.fill(); // draw the four circles ctx.fillStyle = "orange"; ctx.beginPath(); ctx.arc(2,1,4,0,2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(-18,6,4,0,2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(-10,6,4,0,2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(-20,-5,4,0,2*Math.PI); ctx.fill(); ctx.restore(); } function drawMickey(x,y) { ctx.save(); // move to the position (x,y) ctx.translate(x,y); // draw the nose ctx.beginPath(); ctx.arc(0,0,2,0,2*Math.PI); ctx.fill(); // draw the triangle ctx.beginPath(); ctx.lineTo(0,0); ctx.lineTo(-20,10); ctx.lineTo(-20,-10); ctx.lineTo(0,0); ctx.stroke(); // draw the ears ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(-20,-10,5,0,2*Math.PI); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(-20,10,5,0,2*Math.PI); ctx.fill(); ctx.stroke(); // draw the eyes ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(-14,-4,2,0,2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(-14,4,2,0,2*Math.PI); ctx.fill(); // draw the whiskers ctx.beginPath(); ctx.lineTo(-4,-2); ctx.lineTo(-4,-10); ctx.lineTo(-4,-2); ctx.lineTo(0,-8); ctx.lineTo(-4,-2); ctx.stroke(); ctx.beginPath(); ctx.lineTo(-4,2); ctx.lineTo(-4,10); ctx.lineTo(-4,2); ctx.lineTo(0,8); ctx.lineTo(-4,2); ctx.stroke(); ctx.restore(); } var dist = 0; var x1=300,y1=300; var x2=-10,y2=-10; function calcDist() { return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)); } function canvasClicked(evt) { x2=evt.x; y2=evt.y; draw(); } function canvasKeyDown(evt) { if(evt.keyCode==39) x1 = x1 + 10; if(evt.keyCode==38) y1 = y1 - 10; if(evt.keyCode==37) x1 = x1 - 10; if(evt.keyCode==40) y1 = y1 + 10; draw(); } function draw() { ctx.clearRect(0,0,600,600); drawMickey(x1,y1); dist = calcDist(); if(dist>15) { if(x2>=0 && y2>=0) drawCheese(x2,y2); } else { x2=-10; y2=-10; } } function setup() { var canvas = document.getElementById('surface'); ctx = canvas.getContext('2d'); // add the events to canvas canvas.addEventListener('click', canvasClicked, false); window.addEventListener('keydown', canvasKeyDown, true); // draw mickey & the cheese draw(); }

2. Animate a Street

(filename: animatestreet.html and animatestreet.js)

Implement the following steps to animate the street. (For this question you may use any pictures you want)

1. Move the red car from right to left and the blue car from right to left. After they reach the end of the road, start over again.
2. Download the image pedestrian.png from BrightSpace. At the beginning, after a random 5 to 10 seconds delay, put the pedestrian to top of the pedestrian crossing line, waiting to cross.
3. If it is safe to cross (no car on the crossing line), move the pedestrian down the pedestrian line until she finishes the crossing. After that the pedestrian is not shown until later.
4. The two cars must stop before the stop lines if the pedestrian is waiting to cross or she is on the crossing line. As soon as the pedestrian finishes crossing the two cars move again.
5. After a random 5 to 10 seconds delay after the pedestrian finishing crossing, put the pedestrian back to the top of the pedestrian line waiting to cross again.