# Problems with "this.x" variable in a class

**URL:** <https://discourse.processing.org/t/problems-with-this-x-variable-in-a-class/17621>\
**Category:** Beginners\
**Created:** [February 7, 2020, 11:50pm UTC](https://discourse.processing.org/t/problems-with-this-x-variable-in-a-class/17621 "2020-02-07T23:50:37Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rahul](https://avatars.discourse-cdn.com/v4/letter/r/f14d63/32.png) [@Rahul](https://discourse.processing.org/u/Rahul)\
**Post date:** [February 7, 2020, 11:50pm UTC](https://discourse.processing.org/t/problems-with-this-x-variable-in-a-class/17621/1 "2020-02-07T23:50:37Z")

</div>

Hello, everyone!

As practice, I am working on a small sketch that has a black circle appear and move right from a black square if I hit the space bar. So far, everything looks good, but the circle isn’t moving — this.x isn’t changing even though it’s supposed to do so.

```auto
let basicDummy
let basicArray = []
let basicCount = 0

function setup() {
	createCanvas(windowWidth, windowHeight)
	background(255)
}

function draw() {
	strokeWeight(0)
	background(255)

	fill(0)
	rect(width / 4 - 20, height / 2 - 20, 40, 40) // this is the rectangle

	if (keyIsPressed) {
		if (keyCode == 32) {
			basicCount = 1
		}
	}
		
	if (basicCount == 1) {
			basicDummy = new Basic()
			basicArray[0] = basicDummy
			basicArray[0].move()
	}
}

// class below

class Basic {
	
	constructor() {
		this.x = width/4 + 30
		this.y = height/2
	}
	
	move() {
		ellipse(this.x, this.y, 20)
		this.x = this.x + 4 // THIS ISN'T WORKING
		if (this.x > width) {
			basicCount = 0
		}
	}
	
}

```

The reason I’m using a class is so that multiple circles can be emitted at once. If that’s not possible with my current code, please tell me.

Any help would be appreciated! 🙂

---

<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:** [February 8, 2020, 1:37am UTC](https://discourse.processing.org/t/problems-with-this-x-variable-in-a-class/17621/2 "2020-02-08T01:37:38Z")

</div>

> [@Rahul](#):
>
> , but the circle isn’t moving — this.x isn’t changing even though it’s supposed to do so.

The problem is that once you hit space, you keep creating `new Basic()` instances each **draw()**, replacing the previous 1: `basicArray[0] = basicDummy`

Each 1 of those endless instances **move()** once. Obviously not enough to reach the condition `if (this.x > width) {`, which would reset `basicCount = 0`.

Also, _keyIsPressed_ is used for when we need something to be “active” as long something is held pressed.

However, the space key in your code is supposed to be hit once each time we want another Basic instance, not continuously held down.

So you should use callback **keyPressed()** instead:

> **[reference | p5.js](https://p5js.org/reference/#/p5/keyPressed)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

Here’s your code w/ some modifications I did to it:

```javascript
const basicArray = []

function setup() {
  createCanvas(800, 600)
  fill(0).noStroke()
}

function draw() {
  background(255).square(width/4 - 20, height/2 - 20, 40)
  for (const b of basicArray) b.move()
}

function keyPressed() {
  keyCode == 32 && basicArray.push(new Basic)
  return false
}

class Basic {
  constructor() {
    this.x = width/4 + 30
    this.y = height/2
    this.disabled = false
  }

  move() {
    if (this.disabled) return
    circle(this.x += 4, this.y, 20)
    if (this.x > width) this.disabled = true
  }
}

```

---

<div class="post-metadata">

**Author:** ![Rahul](https://avatars.discourse-cdn.com/v4/letter/r/f14d63/32.png) [@Rahul](https://discourse.processing.org/u/Rahul)\
**Post date:** [February 8, 2020, 1:42am UTC](https://discourse.processing.org/t/problems-with-this-x-variable-in-a-class/17621/3 "2020-02-08T01:42:07Z")

</div>

Thank you! I’m quite new to p5js and this is my first post here on the forums, so this is very helpful.