• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Eyes Follow Mouse & Random Movement - HTML5

Community Beginner ,
Oct 01, 2021 Oct 01, 2021

Copy link to clipboard

Copied

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.

TOPICS
ActionScript , Code , How to

Views

580

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 02, 2021 Oct 02, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 03, 2021 Oct 03, 2021

Copy link to clipboard

Copied

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?


Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 04, 2021 Oct 04, 2021

Copy link to clipboard

Copied

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



Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 09, 2023 Oct 09, 2023

Copy link to clipboard

Copied

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!! :))

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 09, 2023 Oct 09, 2023

Copy link to clipboard

Copied

LATEST

you're welcome.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines