Hi, I need some help in Javascript Animation. I have some of the code in class, but the assignment itself is to have the bug/opbject move in a set point pattern instead of a cursor click. I tried the random but it doesn't seem to work for me. Where should I add this new code in my work so I don't lose the function flow? Here is what need to be added: 2- Change the javascript so that instead of the bug following the cursor, the bug appears to go to set points on the screen. The animation needs to appear smooth. Below is what I have so far:

/* eslint-env browser */

var beginBugX = 200;

var beginBugY = 200; // bug position before time ticking.

var curBugX, curBugY; // Current bug position.

var fractBugX, fractBugY; // Fractional bug computed positions.

var posTick; // Keep track of how many times the timer fired.

var tmrBugSlider; // Timer used to move the bug.

window.onload = initAll;

// This function makes all general initilizations and gets everything

// running.

function initAll() {

curBugX = beginBugX;

curBugY = beginBugY;

document.getElementById("bug").style.left = curBugX;

document.getElementById("bug").style.top = curBugY;

document.onmousemove = mouseHandler;

}

// This function gets called whenever the mouse moves.

function mouseHandler(evt) {

if (!evt) { // for IE

evt = window.event;

}

document.getElementById("xCoord").innerHTML = "X = " + evt.clientX;

document.getElementById("yCoord").innerHTML = "Y = " + evt.clientY;

moveBug(evt.clientX, evt.clientY);

}

// This function is called everytime the cursor changed poition.

// when the cursor changes position, a new bug path needs to be computed.

function moveBug(cursorX, cursorY) {

clearInterval(tmrBugSlider);

beginBugX = curBugX;

beginBugY = curBugY;

var xDistance = cursorX - curBugX;

var yDistance = cursorY - curBugY;

// a squared + b squared = c squared

// distance (the hypotenuse) = square root ( a squared + b squared)

var distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);

document.getElementById("distance").innerHTML = "distance = " + distance;

var angle = Math.atan2(yDistance, xDistance);

var degrees = (angle * 180 / Math.PI) + 90; // need to add 90 degrees as image is due north.

document.getElementById("angle").innerHTML = "angle = " + angle;

document.getElementById("degrees").innerHTML = "degrees = " + degrees;

var direction = "rotate(" + degrees + "deg)"; // rotate (135 degrees)

posTick = 1;

tmrBugSlider = setInterval(function () {

if (distance > 30) {

document.getElementById("bug").style.transform = direction;

// Every unit of time, move one unit in distance.

// Compute X and Y based on the hpotenuse(is the longest leg in a triangle).

fractBugX = Math.cos(angle) * posTick;

fractBugY = Math.sin(angle) * posTick;

curBugX = beginBugX + Math.floor(fractBugX);

curBugY = beginBugY + Math.floor(fractBugY);

document.getElementById("bug").style.left = (curBugX - 19) + "px";

document.getElementById("bug").style.top = (curBugY - 19) + "px";

xDistance = cursorX - curBugX;

yDistance = cursorY - curBugY;

// a squared + b squared = c squared

// distance (the hypotenuse) = square root ( a squared + b squared)

distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);

document.getElementById("distance").innerHTML = "distance = " + distance;

posTick++;

} else {

clearInterval(tmrBugSlider);

beginBugX = curBugX;

beginBugY = curBugY;

}

}, 10);

}