Adding parameters to functions within addEventListener

[DikshiSak]

I am trying to get a funtion to run from within an addEventListener to animate a circle moving across the screen. The speed of the circle would need to be passed as parameters inside the function. No matter how I change this code, I am unable to get this to work.

//Setting up inital speed of the molecules
var speedX = 8;
var speedY = 10;

//Setting up initial position of the molecules within a certain bound
this.mol.x = Math.random()*(500-250+1)+250;
this.mol.y = Math.random()*(350-50+1)+50;

//animate
this.addEventListener("tick",function.bind(this){moveMol(this.speedX,this.speedY);})

//definition of function that animates
function moveMol(spX,spY)
{
	this.mol.x+=spX;
	this.mol.y+=spY;
	if(this.mol.x>500 || this.mol.x<250)
	{
		spX*=-1
		}
	if(this.mol.y>350 || this.mol.y<50)
		{
		spY*=-1
		}
}

[kglad]

there's no apparent reason to pass speedX and speedY as parameters, but if were needed us the on listener:

this.on("tick", moveMol, this, false, {spX:this.speedX,spY:this.speedY});

 function moveMol(e,data){

// use data.spX and data.spY

}

[DikshiSak]

Thank-you, I plan to eventually add several such "molecules" to the scene. Each of them would have their own speeds and that is the reason I would like to add these as parameters. I will try this and let you know how this works out.

[ClayUUID]

As noted above, you can just use on() instead of addEventListener(), since it supports more advanced functionality for this sort of thing. But if you want to stick with addEventListener(), your bind syntax is backwards. It should be like this:

this.addEventListener("tick",function{moveMol(this.speedX,this.speedY);}.bind(this))

The way you had it isn't even valid JavaScript syntax. If you'd checked your browser's developer console, you would have seen the error message for it.

That being said, you're wrong about needing to pass the speeds as parameters. They're in the event handler function's scope chain, so it can access them directly.

Even further, if you want to animate something moving across the screen to a predetermined destination, that's exactly what the built-in tween module is for. You could replace all that code with something as simple as:

createjs.Tween.get(this.mol).to({x:destX, y:destY}, 1000);

[DikshiSak]

Thank-you for the detailed explaination. That clears up a lot! I am a complete beginner to coding and animation so this has been quite a challenge.

The reason I've been trying to pass speed as parameters was I am trying to create sort of a simulation of multiple "molecules" moving around the screen.

I will next add a slider for temperature and code it such that as temperature goes up, speed of the molecules increases. I hope that makes sense explaining what I am trying to do.

I will try this out and let you know if it works! 🙂 

[kglad]

there's no need to pass parameters whether different molecules move a different speeds or not. from what you describe the speeds will change for them all when the slider is moved.  the click listener function will be able to access the changed speeds.

the only thing you might need help with would be if clicking different buttons caused different speeds to be used in the same listener function:

in that situation, you can use:

this.button1.varx = whatever1;

this.button1.vary= whateverelse1;

this.button2.varx = whatever2;

this.button2.vary= whateverelse2;

this.button1.addEventListener("click",F.bind(this));

this.button2.addEventListener("click",F.bind(this));

function F(e){

// use e.currentTarget.varx and e.currentTarget.vary

}

or just pass parameters if you find that easier to understand.