# Object moves when .move function not called

**URL:** <https://discourse.processing.org/t/object-moves-when-move-function-not-called/12391>\
**Category:** Coding Questions\
**Created:** [June 29, 2019, 9:05pm UTC](https://discourse.processing.org/t/object-moves-when-move-function-not-called/12391 "2019-06-29T21:05:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![itch](https://avatars.discourse-cdn.com/v4/letter/i/8e8cbc/32.png) [@itch](https://discourse.processing.org/u/itch)\
**Post date:** [June 29, 2019, 9:05pm UTC](https://discourse.processing.org/t/object-moves-when-move-function-not-called/12391/1 "2019-06-29T21:05:00Z")

</div>

Hello everyone,

I’m attempting to simulate a light clock a la Einstein’s famous though experiment in p5.

I’ve made mirror and photon objects, and have utilised those in a meta-object called “clock”.

I want to have one static clock and one moving clock, to show the difference in distance that the photon travels in the same duration.

When I call `staticClock.displayStaticClock();` all is good, it displays fine. The same when I call `movingClock.displayClock();` the clock displays and moves in the manner I want it to (for now, I haven’t got to the actual timing yet, just making sure I can get the thing to move first!

So here’s the kicker - when I call both, either the static clock disappears or it moves at the same time as the moving clock, making it invisible…

I’m pulling my hair out, any help on this would be appreciated.

Here’s a link to my sketch: [[https://editor.p5js.org/markAitcheson/sketches/u6UweqK02](https://editor.p5js.org/markAitcheson/sketches/u6UweqK02)]

_Edit_ Also, I have a collision function which seems to work for both my top and bottom mirror, when I call the top and bottom collide functions separately, neither of them work!

```auto
let movingClock;
let staticClock;

let xSpeed = 1;
let ySpeed = -1;

function setup() {
  createCanvas(600, 120);
  movingClock = new clock();
  staticClock = new clock();

}

function draw() {
  background(60);

  staticClock.displayStaticClock();

  movingClock.move();
  movingClock.displayClock();
  movingClock.collide();
}

class mirror {

  constructor(startX, startY, width, height, radius) {
    this.x = startX;
    this.y = startY;
    this.w = width;
    this.h = height;
    this.r = radius;
  }

  show() {
    rect(this.x, this.y, this.w, this.h, this.r);
  }

  move() {
    this.x += xSpeed;
  }

  collide() {
    if (this.x < 0 || this.x > width - 100) {
      xSpeed *= -1;
    }
  }
}

class photon {

  constructor(startX, startY, radius, xSpeed, ySpeed) {
    this.x = startX;
    this.y = startY;
    this.r = radius;

    //this.sec = second();
  }

  move() {
    this.x += xSpeed;
    this.y += ySpeed;

  }

  moveStatic() {

    this.y += ySpeed;

  }
  collide() {
    if (this.y < 20 || this.y > height - 20) {
      ySpeed *= -1;
    }

    if (this.x < 0 || this.x > width - 60) {
      xSpeed *= -1;
    }
  }

 show() {
    ellipse(this.x, this.y, this.r);
  }
}

let mirrorTop;
let mirrorBottom;
let light;

class clock {

  constructor(startX) {
    this.x = startX;

    mirrorTop = new mirror(0, 0, 60, 15, 3);
    mirrorBottom = new mirror(0, height - 15, 60, 15, 3);
    light = new photon(30, height - 20, 10, 1, 1);

  }

  move() {
    mirrorTop.move();
    mirrorBottom.move();

  }

  collide() {

    mirrorTop.collide();
    //mirrorBottom.collide();

  }

  displayClock() {
    mirrorTop.show();
    mirrorBottom.show();
    light.move();
    light.show();
    light.collide();
  }

  displayStaticClock() {
    mirrorTop.show();
    mirrorBottom.show();
    light.moveStatic();
    light.show();
    light.collide();
  }
}

```

---

<div class="post-metadata">

**Author:** ![itch](https://avatars.discourse-cdn.com/v4/letter/i/8e8cbc/32.png) [@itch](https://discourse.processing.org/u/itch)\
**Post date:** [June 29, 2019, 9:28pm UTC](https://discourse.processing.org/t/object-moves-when-move-function-not-called/12391/2 "2019-06-29T21:28:55Z")

</div>

Maybe I’m halfway to the answer - `mirror.show();` is drawing the rectangle at `this.x` and `this.x` is being incremented by `this.x += xSpeed`.

I’m not sure why this would be the case when I’m not calling the move function on the static clock though, but I feel like that might have something to do with it…

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [June 29, 2019, 10:51pm UTC](https://discourse.processing.org/t/object-moves-when-move-function-not-called/12391/3 "2019-06-29T22:51:39Z")

</div>

Sounds like an interesting project. It looks like in clock.js you’re using global variables to keep track of `mirrorTop`, `mirrorBottom`, and `light`.

```auto
let mirrorTop;
let mirrorBottom;
let light;

```

The block above is the same as putting those variables in sketch.js. Which means when you create two clocks then they both are using the same set of variables. You’ll need to assoicate the variables with the class to have a new set for each of the two instances. I think what you’re looking for is something like below.

```auto
// remove (let varNames)

class clock {

  constructor() {

    // there's no need for let when using this. in a class

    this.mirrorTop = new mirror(0, 0, 60, 15, 3);
    this.mirrorBottom = new mirror(0, height - 15, 60, 15, 3);
    this.light = new photon(30, height - 20, 10, 1, 1);

  }

  //... other methods (also need to be changed to this.varName

}

```

There could be other problems but see if doing that fixes your problem. If not then I’ll look at it more.

---

<div class="post-metadata">

**Author:** ![itch](https://avatars.discourse-cdn.com/v4/letter/i/8e8cbc/32.png) [@itch](https://discourse.processing.org/u/itch)\
**Post date:** [June 30, 2019, 4:39pm UTC](https://discourse.processing.org/t/object-moves-when-move-function-not-called/12391/4 "2019-06-30T16:39:57Z")

</div>

Hi Fi,

Thanks for taking a look!

I think you’re on to something here… Removing the global variables and adding `this.` to the methods allows both clocks to be displayed, with one moving and one static.

This has created a secondary issue, now the photon speed and collision detection isn’t accurate, but I’m sure the fix will be along the same lines as your original suggestion, so I’ll work through it.

This really helped me out, and I’ve learned a bit more about “this” as well, so thanks again! :)😀