Showing a point in p5.js using parameters

Question

In my 'show' function I have this command: point(this.position.x, this.position.y);

This does not cause a point to appear, note I have tried printing these values out directly before this point(..) call and they exist and are within the frame. I have also tried parsing them to an int and passing but no luck.

However:

• Passing e.g. 100, 100 to this function makes the point show up
• Setting this.position.x and this.position.y to e.g. 100 before point(..) call makes the point show up
• Passing e.g. 100, 100 to new Particle(random(width), height); instead of using width and height also works
• Assigning new variables to values of this.position.x and this.position.y respectively then passing those to point also does not show the point

Please find below my code, I have no idea what the issue is

var firework;

function setup() {
    createCanvas(500, 400);
    stroke('purple');
    strokeWeight(10);
    firework = new Particle(random(width), height);
}

function draw() {
    background(51);
    firework.update();
    firework.show();
}

function Particle(x, y) {
    this.position = createVector(x, y);
    this.velocity = createVector(0, 0);
    this.acceleration = createVector(0, 0);

    this.applyForce = function(force) {
        this.acceleration.add(force);
    }

    this.update = function() {
        this.position.add(this.velocity);
        this.velocity.add(this.acceleration);
        this.acceleration.mult(0);
    };

    this.show = function() {
        point(this.position.x, this.position.y);
    };
}

Answer 1

The point is actually being drawn on the canvas, it just doesn't seem obvious. This is because you're setting its y value to height which will simply place it at the very bottom of the canvas. The colors also make it hard to see where the point is drawn. The image below shows the point being drawn at (310,399).

---

To resolve this, change the y value to be between 0 and height. One way of achieving this is to randomize the y value as you did with random(width) for x. In my solution below, I also changed the background to be drawn with color value 151 instead of 51 for better contrast.

var firework;

function setup() {
  createCanvas(500, 400);
  stroke("purple");
  strokeWeight(10);
  firework = new Particle(random(width), random(height));
}

function draw() {
  background(151);
  firework.update();
  firework.show();
}

function Particle(x, y) {
  this.position = createVector(x, y);
  this.velocity = createVector(0, 0);
  this.acceleration = createVector(0, 0);

  this.applyForce = function(force) {
    this.acceleration.add(force);
  };

  this.update = function() {
    this.position.add(this.velocity);
    this.velocity.add(this.acceleration);
    this.acceleration.mult(0);
  };

  this.show = function() {
    point(this.position.x, this.position.y);
  };
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>