Eyes Follow Mouse & Random Movement - HTML5

[stme5CFC]

I'm trying to achieve a couple of effects in Animate using HTML5 to create interactive aliens and random spaceships with the kids. I've pasted in what I've found so far and have tried many many times going round in circles to get these to work with no joy.

Eyes Follow Mouse
Looking for some code to create (one or many) 'eyes' to follow the cursor around the canvas.
Have searched on here for similar questions and tried some suggested solutions but not working.
Also tried this tutorial that uses the following code.
I'm guessing this is Actionscript that doesn't exist in HTML5 Canvas?

var eyeArray:Array = [eye1, eye2];

stage.addEventListener(MouseEvent.MOUSE_MOVE, allEyesOnMe);

function allEyesOnMe(event:MouseEvent):void {
	for(var eye:String in eyeArray {
		
		var mousediff_a:Number = mouseY - eyeArray[eye].y;
		var mousediff_b:Number = mouseX - eyeArray[eye].x;
		var radians = Math.atan2(mousediff_a,mousediff_b);
		var degrees = radians / (Math.PI / 180);
		
		eyeArray[eye].rotation = degrees;
	}
}

Random Movement at Random Time
Another AS tutorial that I just cannot get working in HTML5.
I'd like to do something like in the tutorial where a movieclip randomly moves around the screen (within set parameters). But would also like to incorporate this happening at random times (within set parameters - e.g sometimes it might move after 2 seconds, sometimes after 8 seconds). And tweening to a random size each time (within parameters) would be the icing on the cake!

var randX;
var randY;

function randomNumbers(){
	randX = Math.floor(Math.random()*800);
	randY = Math.floor(Math.random()*500);
	moveMe();
}

randomNumbers();

function moveMe(){
	sym.$("myRect").animate({left: randX, top: randY},1000, randomNumbers);
}

There are so many amazing Actionscript tutorials online but some just won't work within the HTML5 environment. It's a shame there's no one doing these kind of tutorials for Animate HTML5.

[kglad]

var eyeA = [this.eye1,this.eye2];

var i,rad,deg

createjs.Ticker.addEventListener("tick",allEyesOnMe.bind(this));
function allEyesOnMe(){
for (i=0;i<eyeA.length;i++){
rad = Math.atan2(stage.mouseY - eyeA[i].y, stage.mouseX - eyeA[i].x);
deg = radians / (Math.PI / 180);
eyeA[i].rotation = deg;
}
}

var randX;
var randY;

function randomNumbers(){
randX = Math.floor(Math.random()*800);
randY = Math.floor(Math.random()*500);
moveMe.bind(this)();
}

randomNumbers.bind(this)();

function moveMe(){
createjs.Tween.get(this.face).to({x: randX, y: randY}, 1000).call(randomNumbers.bind(this));
}

[stme5CFC]

Thank you KGlad!
The random movement code works for me and I have been playing with the code tonight and experimenting with scale too. 

Your first solution for the Following Eyes doesn't seem to work though.
I have two movieclips on the main timeline titles 'eye1' and 'eye2' and your code on the main timeline too.

Tried to see if I could find the fault. Wondered if 'tick' was a mistake but have tonight found out that it's a time interval 🙂 Also wondered if there should be a semi-colon after i,rad,deg but that made no difference.
Did the code work for you?

[stme5CFC]

KGlad,
Despite trying again tonight I've still not managed to work out why the eyes follow code isn't working 😞

However I am quite pleased with (non-coder) self that I've managed to add to the Random Move code and have added random scale so the item changes size and also random time between certian constraints.
Maybe not the cleanest code but it works 🙂

I'm sharing it in case it helps anyone else going forward 🙂

var randX;
var randY;
var scX;
var scY;
var tiM;

function randomNumbers(){
randX = Math.floor(Math.random()*800);
randY = Math.floor(Math.random()*500);
scX = Math.random() * (2 - 0.3) + 0.3;
scY = scX;
tiM = Math.random() * (8000 - 500) + 500;
moveMe.bind(this)();
}

randomNumbers.bind(this)();

function moveMe(){
createjs.Tween.get(this.face).to({x: randX, y: randY, scaleX: scX, scaleY: scY}, tiM).call(randomNumbers.bind(this));
}

[Terismikilis]

Hi!

Hi!

Kglad provided the code correct, but there is just a small mistakes in it.... like some ";" missing and with the rad = radians.

The code is working perfectly on HTML5 display:

var eyeA = [this.eye1,this.eye2];

var i,rad,deg;

createjs.Ticker.addEventListener("tick",allEyesOnMe.bind(this));

function allEyesOnMe(){
for ( i=0; i<eyeA.length; i++){
rad = Math.atan2(stage.mouseY - eyeA[i].y, stage.mouseX - eyeA[i].x);
deg = rad / (Math.PI / 180);
eyeA[i].rotation = deg;
}
}

Thanks Kglad!! :))

[kglad]

you're welcome.