# P5js Question: "Locking" the value of mouseX for event completion

**URL:** <https://discourse.processing.org/t/p5js-question-locking-the-value-of-mousex-for-event-completion/11112>\
**Category:** Coding Questions\
**Created:** [May 10, 2019, 3:22pm UTC](https://discourse.processing.org/t/p5js-question-locking-the-value-of-mousex-for-event-completion/11112 "2019-05-10T15:22:27Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![cryptacritic](https://avatars.discourse-cdn.com/v4/letter/c/3d9bf3/32.png) [@cryptacritic](https://discourse.processing.org/u/cryptacritic)\
**Post date:** [May 10, 2019, 3:22pm UTC](https://discourse.processing.org/t/p5js-question-locking-the-value-of-mousex-for-event-completion/11112/1 "2019-05-10T15:22:27Z")

</div>

How can i store a value of X so that if some condition is met, it is equal to mouseX at the start of an event (like Keypressed)? I don’t want this value to change as i move the mouse, i want it to stay the same after the event initializes. How do i do this? Is it possible?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 10, 2019, 4:03pm UTC](https://discourse.processing.org/t/p5js-question-locking-the-value-of-mousex-for-event-completion/11112/2 "2019-05-10T16:03:12Z")

</div>

Can’t you just declare a global variable for it? 🤔

```auto
let cachedMouseX = -1;

function keyPressed() {
  cachedMouseX = mouseX;
}

```

---

<div class="post-metadata">

**Author:** ![cryptacritic](https://avatars.discourse-cdn.com/v4/letter/c/3d9bf3/32.png) [@cryptacritic](https://discourse.processing.org/u/cryptacritic)\
**Post date:** [May 10, 2019, 7:04pm UTC](https://discourse.processing.org/t/p5js-question-locking-the-value-of-mousex-for-event-completion/11112/3 "2019-05-10T19:04:44Z")

</div>

I tried it. That didn’t seem to do anything to my program. It just reset -1 to mouseX. And since cachedMouseX is a variable we made, i don’t think it introduced anything different.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 10, 2019, 7:23pm UTC](https://discourse.processing.org/t/p5js-question-locking-the-value-of-mousex-for-event-completion/11112/4 "2019-05-10T19:23:38Z")

</div>

> [@cryptacritic](#):
>
> That didn’t seem to do anything to my program.

You should code your program in such a way that it uses _cachedMouseX_ in place of _mouseX_ when it makes sense to do so. 🧐

---

<div class="post-metadata">

**Author:** ![cryptacritic](https://avatars.discourse-cdn.com/v4/letter/c/3d9bf3/32.png) [@cryptacritic](https://discourse.processing.org/u/cryptacritic)\
**Post date:** [May 11, 2019, 12:54am UTC](https://discourse.processing.org/t/p5js-question-locking-the-value-of-mousex-for-event-completion/11112/5 "2019-05-11T00:54:08Z")

</div>

Right, i agree. However i think what you’re saying is basically the same thing as the question I’m asking.

In other words, how might i set up my program in such a way that it could “cache” mouseX within “cachedMouseX”?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 11, 2019, 12:59am UTC](https://discourse.processing.org/t/p5js-question-locking-the-value-of-mousex-for-event-completion/11112/6 "2019-05-11T00:59:04Z")

</div>

**keyPressed()** is a callback function. So _mouseX_ is cached in _cachedMouseX_ every time any key is pressed.

You can do something else when a key is released in callback **keyReleased()**.

I have no idea why would you need to cache _mouseX_. 😳  
Only you know your own code after all. Which, btW, you haven’t posted. 🙄

---

<div class="post-metadata">

**Author:** ![cryptacritic](https://avatars.discourse-cdn.com/v4/letter/c/3d9bf3/32.png) [@cryptacritic](https://discourse.processing.org/u/cryptacritic)\
**Post date:** [May 11, 2019, 5:26pm UTC](https://discourse.processing.org/t/p5js-question-locking-the-value-of-mousex-for-event-completion/11112/7 "2019-05-11T17:26:29Z")

</div>

Alright, i’m just going to paste my code, explain what i’m doing, and tell you my core problem here. Im trying to create a galaga-like game on p5js. I’m currently stuck on a bug. Every time i fire the ship’s weapon, if i move and fire again, it changes the x position of the fire (fireX), which is not what i want. i want to find a way to lock the x position of the fire so that if i fire a new round, the other one remains unaffected. Of course, once i figure out how to do this, my next step is going to be figuring out a way to fire multiple rounds and not have to wait before “fireY” = 0 for another round to be fired.

Quick disclaimer, i’m using pictures, not shapes, so all the files need to be gathered together before you can see the correct thing. if you need me to email you the zip file for it i can. For now i’ll just send you the raw code i typed into sketch.js file and all the other stuff separately, hopefully it is not difficult to piece together.

sketch.js stuff:

function setup() {  
createCanvas(500, 420);  
bchShip = loadImage(‘bchShip.png’);  
SidebarPanel = loadImage(‘SidebarPanel.png’);  
fire = loadImage(‘fire.png’);

}

var x = 180;  
var y = 350;  
var fireX;  
var fireY;  
var fireInit;  
var fireSpeed = 5;

function draw() {

background(0);  
image (bchShip, x, y);  
image (SidebarPanel, 375, 0);

for (i=0;i\<fireSpeed;i=i+1){  
image (fire, fireX, fireY);  
if (fireInit \< i){fireY=fireY-5}

}  
}

function mouseMoved() {  
x = mouseX-15;  
y = mouseY-20;  
if(x\>340){x=340}  
if(y\<250){y=250}  
if(y\>375){y=375}

}

var fireY = y+5;  
var fireX;

function keyPressed(){  
if (keyCode === 32){  
fireInit = 1  
if (fireY\<0){fireY=y+5}  
fireX=x+15

}

}

index.html stuff:

style.css stuff:

html, body {  
margin: 0;  
padding: 0;  
}  
canvas {  
display: block;  
}  
 ![bchShip](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d4496097aa4ebc0eb84eb4506f3342d245c48774.png)

it only let me put one image in the comment. im going to try to comment again to get you the other one

---

<div class="post-metadata">

**Author:** ![cryptacritic](https://avatars.discourse-cdn.com/v4/letter/c/3d9bf3/32.png) [@cryptacritic](https://discourse.processing.org/u/cryptacritic)\
**Post date:** [May 11, 2019, 5:27pm UTC](https://discourse.processing.org/t/p5js-question-locking-the-value-of-mousex-for-event-completion/11112/8 "2019-05-11T17:27:21Z")

</div>

![fire](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6ae2771d94e9cca3318b78849a4c904b1b856c63.png)

---

<div class="post-metadata">

**Author:** ![cryptacritic](https://avatars.discourse-cdn.com/v4/letter/c/3d9bf3/32.png) [@cryptacritic](https://discourse.processing.org/u/cryptacritic)\
**Post date:** [May 11, 2019, 5:32pm UTC](https://discourse.processing.org/t/p5js-question-locking-the-value-of-mousex-for-event-completion/11112/9 "2019-05-11T17:32:00Z")

</div>

![SidebarPanel](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/56378961fc4d43994512c5e6212429f7892a32fa.png)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 11, 2019, 5:46pm UTC](https://discourse.processing.org/t/p5js-question-locking-the-value-of-mousex-for-event-completion/11112/10 "2019-05-11T17:46:46Z")

</div>

You need to learn Object-Oriented Programming (OOP) when creating games:

> **[Object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming)**
>
> Object-oriented programming (OOP) is a programming paradigm based on the concept of "objects", which can contain data, in the form of fields (often known as attributes), and code, in the form of procedures (often known as methods). A feature of objects is an object's procedures that can access and often modify the data fields of the object with which they are associated (objects have a notion of "this" or "self"). In OOP, computer programs are designed by making them out of objects that interact...

You also need to create a `class` to represent each individual Laser object:

> **[class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class)**
>
> The class declaration creates a new class with a given name using prototype-based inheritance.

```auto
class Laser {
  constructor(x = x + (bchShip.width >> 1), y = y) {
    this.x = x;
    this.y = y;
  }

  display() {
    image(fire, this.x, this.y);
  }

  move() {
    --this.y;
  }
}

```

The Laser `class` above is still very incomplete. It needs more methods to deal w/ collision and outta canvas for example. But it’s enough for you to have an idea on how to proceed from now on I hope. 😺

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [May 12, 2019, 10:47am UTC](https://discourse.processing.org/t/p5js-question-locking-the-value-of-mousex-for-event-completion/11112/11 "2019-05-12T10:47:39Z")

</div>

Use a toggle function. Assign a global var as 0, then when the specific event you want happens change the value to 1. Then have an if statement in the mousemoved() function which will store the mouse variable in another variable and reset the toggle value to 0. This way you only get a value when your toggle is 1, and as soon as you do you reset your toggle.