Translating Processing classes to js classes

syang

Hi all! Getting practice with p5js and translating Processing code into js. Struggling with this one in particular, especially the move() method. Does anyone mind giving me some pointers as to where it might not be working? I am just getting a stationary white dot, on a black background for now. Thank you!

class Spot {
  constructor() {
let x;
let y;
let speed;
let diameter;
let direction = 1;
  }
  display() {
    ellipse(spot.x, spot.y, spot.diameter, spot.diameter);
  }

  move(x, y, speed, height,  diameter, direction) {
//let x;
//let y;
//let speed;
//let diameter;
    direction = 1;
    y += speed * direction;
    if (y > height - diameter / 2 || y < diameter / 2) {
      direction *= -1;
    }
  }

  // Spot(xpos, ypos, dia, sp) {
  //   x = xpos;
  //   y = ypos;
  //   diameter = dia;
  //   speed = sp;
  // }
}

let spot = new Spot();

   function setup() {
 createCanvas(100, 100);
 noStroke();
 spot = new Spot(33, 50, 30, 1.5);
 console.log(spot);

  //sp = new Spot(33, 50, 30);

  spot.x = 33;
  spot.y = 50;
  spot.diameter = 30;
}

function draw() {
  spot.move();
  fill(0, 15);
  rect(0, 0, width, height);
  fill(255);

  //background(0);
  spot.display();
}

GoToLoop

Your code got some misplaced indentations. You should paste it here: https://Beautifier.io O:-)

Inside a class constructor(), we need to assign values to the newly created this instance object.

Take a look on how to here: https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor

And inside the class, always prefix its own properties w/ this.: :-B
https://www.YouTube.com/watch?v=M5d7vygUPoQ

GoToLoop

Many online sketches w/ both Java Mode & p5js versions of them: :bz
https://www.Reddit.com/r/processing/comments/7dqqvh/openprocessing_converting_code_written_in_java_to/dq0ecac/

syang

Thank you, that dramatically helped! Looking at the original processing code:

Spot[] spots;

and in the set up looks like:

void setup(){
  size(700, 100);
  int numSpots = 70;
  int dia = width/numSpots;
  spots = new Spot[numSpots];
  for (int i = 0; i < spots.length; i++) {
  float x = dia/2 + i * dia;
  float rate = random(0.1, 2.0);
  spots[i] = new Spot(x, 40, dia, rate);
   }
   noStroke();

}

it starts off by declaring an array. What would this look like in javascript? I've googled 'how to declare array with class' but haven't come across anything explicit.

Thank you!

GoToLoop

In JS we merely declare variables, but not their datatype.
There are 5 keywords in JS that can declare variables:

1. var
2. let
3. const
4. function
5. class

At Spot[] spots;, variable spots is just being declared, but not initialized.
In such case, either go w/ let or var keyword: let spots;

In case some value would be used to initialize spots, we could alternatively go w/ keyword const.
Of course, use const only in cases a variable would never need to be reassigned later in the code.
BtW, JS' keyword const is equivalent to Java's keyword final. ;)

At spots = new Spot[numSpots];, an Array of length equal to numSpots is being created & assigned to variable spots.

In JS we don't actually need to specify a length for the Array being created.
So we could just convert that Java statement like this: spots = [];

However, JS also allows us to be more explicitly about the Array's initial length when we create it: O:-)
spots = Array(numSpots);

GoToLoop

Since numSpots is known to be always 70 -> int numSpots = 70;.
You could turn it into a constant and create the array at the same time you declare its variable: :ar!

static final int NUM_SPOTS = 70;
final Spot[] spots = new Spot[NUM_SPOTS];

And converting it to JS would turn out like this now: B-)
const NUM_SPOTS = 70, spots = Array(NUM_SPOTS);

syang

Thank you! You've been a great help, thank you so much. And I will never forget this dot B-)