Eyes follow animation in HTML5
I am trying to recreate this animation I made in p5.js: https://editor.p5js.org/JWNimble/sketches/4-cBgdHkH
Of course the tricky part is that I don't believe createjs has the translate, push, and pull methods in the way p5.js does. How do I fix the variables 1, 2, and 3 so that they rotate in a way in which they follow the cursor.
This is my code:
root = this;
var var1, var2, var3, var4, var5, radius1, radius2, degree1, degree2, eyeR, eyeL, cursor;
function main()
{
root.stop();
stage.enableDOMEvents(true);
eyeR = root.eyeR;
eyeL = root.eyeL;
cursor = root.cursor;
eyeR.mouseChildren = false;
eyeL.mouseChildren = false;
cursor.mouseChildren = false;
stage.on("stagemousemove",function(evt) {
var1 = (evt.stageY / stage.scaleY) - (eyeR.y / stage.scaleY);
var2 = (evt.stageX / stage.scaleX) - (eyeR.x / stage.scaleX);
var3 = (evt.stageX / stage.scaleX) - (eyeL.x / stage.scaleX);
var4 = evt.stageX / stage.scaleX;
var5 = evt.stageY / stage.scaleY;
radius1 = Math.atan2(var1,var2);
radius2 = Math.atan2(var1, var3);
degree1 = radius1 / (Math.PI / 180);
degree2 = radius2 / (Math.PI / 180);
eyeR.setTransform(580,270,1,1,degree2);
eyeL.setTransform(380,270,1,1,degree1);
cursor.setTransform(var4, var5);
})
stage.update();
}
main();
