Skip to main content
S
stme5CFC
Participant
October 1, 2021
Question

Eyes Follow Mouse & Random Movement - HTML5

  • October 1, 2021
  • 1 reply
  • 917 views

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.

This topic has been closed for replies.

1 reply

kglad
Community Expert
kgladCommunity Expert
Community Expert
October 2, 2021

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));
}

    S
    stme5CFCAuthor
    Participant
    October 3, 2021

    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?


    S
    stme5CFCAuthor
    Participant
    October 4, 2021

    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));
}



    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices