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

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?

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

let cachedMouseX = -1;

function keyPressed() {
  cachedMouseX = mouseX;

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.

You should code your program in such a way that it uses cachedMouseX in place of mouseX when it makes sense to do so. :face_with_monocle:

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”?

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. :flushed:
Only you know your own code after all. Which, btW, you haven’t posted. :roll_eyes:

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() {

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;


var fireY = y+5;
var fireX;

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



index.html stuff:

style.css stuff:

html, body {
margin: 0;
padding: 0;
canvas {
display: block;

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



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

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

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

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

  move() {

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. :smiley_cat:

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.