Skip to main content
D
DikshiSak
Participant
April 10, 2022
Question

Adding parameters to functions within addEventListener

  • April 10, 2022
  • 2 replies
  • 840 views

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

 

This topic has been closed for replies.

2 replies

C
ClayUUID
Legend
April 11, 2022

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

 

    D
    DikshiSakAuthor
    Participant
    April 11, 2022

    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
    Community Expert
    kgladCommunity Expert
    Community Expert
    April 12, 2022

    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.

      kglad
      Community Expert
      kgladCommunity Expert
      Community Expert
      April 11, 2022

      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

      }

        D
        DikshiSakAuthor
        Participant
        April 11, 2022

        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.

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