Object moves when .move function not called

p5.js Coding Questions
1

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]

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!

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();
  }
}
1 Like
2

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…

3

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

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.

// 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.

3 Likes
4

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! :):grinning:

1 Like