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);
    };
}

phentnil · Accepted Answer · 2021-11-29T01:02:52.160

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>

Thank you for your help with this, I also solved by passing this.position as a single parameter. This is good to know ! — Amber Johnson, Nov 17 '21 at 16:09
Of course! If my answer was helpful, you can mark it as accepted. Or you can also write your solution as an answer and [select it as accepted](https://stackoverflow.blog/2009/01/06/accept-your-own-answers/) — phentnil, Nov 17 '21 at 16:18

Showing a point in p5.js using parameters

1 Answers1