# Using mousePressed to place different indexes of an array on the canvas

**URL:** <https://discourse.processing.org/t/using-mousepressed-to-place-different-indexes-of-an-array-on-the-canvas/32556>\
**Category:** Coding Questions\
**Created:** [October 2, 2021, 5:01am UTC](https://discourse.processing.org/t/using-mousepressed-to-place-different-indexes-of-an-array-on-the-canvas/32556 "2021-10-02T05:01:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cavemind](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@Cavemind](https://discourse.processing.org/u/Cavemind)\
**Post date:** [October 2, 2021, 5:01am UTC](https://discourse.processing.org/t/using-mousepressed-to-place-different-indexes-of-an-array-on-the-canvas/32556/1 "2021-10-02T05:01:17Z")

</div>

Hello Reaching out for some help,

What I am trying to do is when I press mouse button a different part of an array is show and placed on the screen, what is happening is that even though the selected array index is the one being shown once I change the array pressing “c” all of the objects placed already on the canvas change.

My final goal is to have a letter, click to place it down, change the letter, place it somewhere else, etc.

```auto
let tx = ["A", "B", "C", "D", "E", "8", "9", "1"];

class Bubbles {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  preview() {
    push();
    translate(mouseX, mouseY);
    text(tx[z], 0, 0);
    pop();
  }

  show() {
    textSize(100);
    textAlign(CENTER, CENTER);
    text(tx[placed], this.x, this.y);
  }
}

```

```auto

let bubble = [];
let z = 0;
let placed = 0;
let targetX;
let targetY;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(255);
  for (let i = 0; i < bubble.length; i++) {
    bubble[i].preview();
    bubble[i].show();
  }
}

function mouseClicked() {
  let b = new Bubbles(mouseX,mouseY);
  bubble.push(b);
  targetX = mouseX;
  targetY = mouseY;
  placed = z; 
  
}

function keyPressed() {
  if (key == "c") {
   z++;
    if (z == tx.length) {
      z = 0;
    }
  }
}

```

Thank you in advance, if there is anything else I can provide to explain please let me know.

Thank you.

---

<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:** [October 2, 2021, 6:52am UTC](https://discourse.processing.org/t/using-mousepressed-to-place-different-indexes-of-an-array-on-the-canvas/32556/2 "2021-10-02T06:52:50Z")

</div>

> [@Cavemind](#):
>
> once I change the array pressing “c” all of the objects placed already on the canvas change.

Your global variable _placed_ determines the current index for the global array _tx[]_.

So when you change _placed_’s value all instances of class Bubbles also changes along:  
`text(tx[placed], this.x, this.y);`

---

<div class="post-metadata">

**Author:** ![Cavemind](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@Cavemind](https://discourse.processing.org/u/Cavemind)\
**Post date:** [October 2, 2021, 6:47pm UTC](https://discourse.processing.org/t/using-mousepressed-to-place-different-indexes-of-an-array-on-the-canvas/32556/3 "2021-10-02T18:47:21Z")

</div>

The reason that I used the _placed_ variable is so I could change the letter that follows my cursor the “preview” letter without changing the one that is already placed down. But its still changing it.  
when I click or sometimes when I press “c”, depending on where I declared the variable. Putting it as a global variable was the closes I got to having the preview and the one placed different from each other at least until any other action was done.

I am stuck on this one and I feel like I need another variable or may need to go into this a whole different way, without using objects.

Apart from turning the computer off and burning the hard drive, any suggestions ?

---

<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:** [October 2, 2021, 7:02pm UTC](https://discourse.processing.org/t/using-mousepressed-to-place-different-indexes-of-an-array-on-the-canvas/32556/4 "2021-10-02T19:02:55Z")

</div>

You can make your class record which character to display at the moment you instantiate it:

```auto
bubbles.push(new Bubble(mouseX, mouseY, tx[placed]));

class Bubble {
  constructor(x, y, ch) {
    this.x = x;
    this.y = y;
    this.ch = ch;
  }

    text(this.ch, this.x, this.y);

}

```

---

<div class="post-metadata">

**Author:** ![Cavemind](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@Cavemind](https://discourse.processing.org/u/Cavemind)\
**Post date:** [October 2, 2021, 7:40pm UTC](https://discourse.processing.org/t/using-mousepressed-to-place-different-indexes-of-an-array-on-the-canvas/32556/5 "2021-10-02T19:40:28Z")

</div>

THANK YOU VERY MUCH!,

This was the solution, I appreciate you taking the time to help me.