Converting Processing to Javascript

I'm trying to convert this processing code into p5 so I can adapt it for my first website.

I've looked around and found that

• all variable type declarations are replaced with "var"
• "void"s are replaced with "function"s
• size() turns into createCanvas()
• List item

Here's my processing code. (Sorry for length)

//drawing hexagons

Grid grid;
int numColumns;
int numRows;
float radius;
int diameter;

color[] pallet = {#2e2e2e, #52658a, #212c41, #8ba3d4, #a7c0f1};

void setup(){
  size(1440, 900);
  smooth();

  radius = 15;
  diameter = int(radius) * 2;

  //setting length and width for 2-d array of hexagons
  numColumns = int(width / (sqrt(3) * radius)) + 1;
  numRows = int(height / (.75 * diameter)) + 1;

  //create grid of hexagons object
  grid = new Grid(numColumns, numRows, radius);

  //randomly set initial color of hexagons
  for(int i = 0; i < numColumns; i++){
    for(int j = 0; j < numRows; j++){
      Hexagon selected = grid.getHexagon(i, j);
      selected.setFillColor(pallet[int(random(5))]);
    }
  }

  grid.draw();

  frameRate(60);
}

void draw(){
  grid.draw();


  //randomly pick 15 hexagons from grid and randomly assign them a new color
  for(int i = 0; i < 15; i++){
    Hexagon selected = grid.getHexagon(int(random(numColumns)), int(random(numRows)));
    selected.setFillColor(pallet[int(random(5))]);
  }
}

class Hexagon{
  color c;

  float r;
  float x;
  float y;

  float angle = TWO_PI / 6;
  float startAngle = PI / 6;

  Hexagon(float[] center, float radius){
    r = radius;
    x = center[0];
    y = center[1];
  }

  void draw(){
    //noStroke();
    fill(c);

    //arrays of coordinates for beginShape()
    float[] vertY = new float[6];
    float[] vertX = new float[6];

    //spinning the circle and calculating x and y position for vertices
    //removing start angle makes the hexagons flat-topped but they won't be spaced on grid properly
    for(int i = 0; i < 6; i++){
      float angleRad = (angle * i) + startAngle;
      vertX[i] = x + (r * cos(angleRad));
      vertY[i] = y + (r * sin(angleRad));
    }

    beginShape();
    vertex(vertX[0], vertY[0]);
    vertex(vertX[1], vertY[1]);
    vertex(vertX[2], vertY[2]);
    vertex(vertX[3], vertY[3]);
    vertex(vertX[4], vertY[4]);
    vertex(vertX[5], vertY[5]);
    endShape(CLOSE);
  }

  void setFillColor(color setColor){
    c = setColor;
  }
}

class Grid{

  int columns;
  int rows;
  float r;
  Hexagon[][] hexagons;

  Grid(int numColumns, int numRows, float radius){

    columns = numColumns;
    rows = numRows;
    r = radius;

    hexagons = new Hexagon[columns][rows];

    //starts the first hexagon at the corner of the window
    float[] center = {0, 0};

    for(int i = 0; i < rows; i++){
      for(int j = 0; j < columns; j++){
        //create a new hexagon with center center
        hexagons[j][i] = new Hexagon(center, r);
        //add the width of the hexagon to the x-coordinate of center
        center[0] += (r * sqrt(3));
      }
      //add the height spacing to the y-coordinate of center
      center[1] += (r * 3) / 2;

      //if the row number is divisible by two, bump the first center in the row
      if(i % 2 == 0){
        center[0] = (sqrt(3) / 2) * r;
      }else{
        center[0] = 0;
      }
    }
  }

  void draw(){
    for(int i = 0; i < rows; i++){
      for(int j = 0; j < columns; j++){
        hexagons[j][i].draw();
      }
    }
  }

  //for setting the color and possibly other things
  Hexagon getHexagon(int column, int row){
    return hexagons[column][row];
  }
}

And here is what I've got so far for the JS conversion:

//drawing hexagons

var grid;
var numColumns;
var numRows;
var radius;
var diameter;

var pallet = {123, 244, 321, 342, 783};

function setup(){
  var createCanvas(1440, 900);

  canvas.parent("sketch-holder");

  canvas.id("background-canvas");

  smooth();

  radius = 15;
  diameter = radius * 2;

  numColumns = width / (sqrt(3) * radius) + 1;
  numRows = height / (.75 * diameter) + 1;

  grid = new Grid(numColumns, numRows, radius);

  for(var i = 0; i < numColumns; i++){
    for(var j = 0; j < numRows; j++){
      var/*Hexagon*/ selected = grid.getHexagon(i, j);
      selected.setFillColor(pallet[random(5)]);
    }
  }

  grid.draw();

  frameRate(60);
}

function draw(){
  grid.draw();

  for(var i = 0; i < 15; i++){
    var/*Hexagon*/ selected = grid.getHexagon(random(numColumns), random(numRows));
    selected.setFillColor(pallet[random(5)]);
  }
}

class Hexagon{
  var c;

  var r;
  var x;
  var y;

  var angle = TWO_PI / 6;
  var startAngle = PI / 6;

  constructor(center, radius){
    this.r = radius;
    this.x = center[0];
    this.y = center[1];
  }

  function draw(){
    //noStroke();
    fill(c);

    vertY = new Array(6);
    vertX = new Array(6);

    for(var i = 0; i < 6; i++){
      angleRad = (angle * i) + startAngle;
      vertX[i] = x + (r * cos(angleRad));
      vertY[i] = y + (r * sin(angleRad));
    }
    beginShape();
    vertex(vertX[0], vertY[0]);
    vertex(vertX[1], vertY[1]);
    vertex(vertX[2], vertY[2]);
    vertex(vertX[3], vertY[3]);
    vertex(vertX[4], vertY[4]);
    vertex(vertX[5], vertY[5]);
    endShape(CLOSE);
  }

  function setFillColor(color setColor){
  c = setColor;
  }
}

class Grid{

  var columns;
  var rows;
  var r;
  var hexagons = new Array[][];

  constructor(numColumns, numRows, radius){

    this.columns = numColumns;
    this.rows = numRows;
    this.r = radius;

     var hexagons = new Array[columns][rows];

     var center = {0, 0};

    for(var i = 0; i < rows; i++){
      for(var j = 0; j < columns; j++){
        hexagons[j][i] = new Hexagon(center, r);
        center[0] += (r * sqrt(3));
      }
      center[1] += (r * 3) / 2;
      if(i % 2 == 0){
        center[0] = (sqrt(3) / 2) * r;
      }else{
        center[0] = 0;
      }
    }
  }

  function draw(){
    for(var i = 0; i < rows; i++){
      for(var j = 0; j < columns; j++){
        hexagons[j][i].draw();
      }
    }
  }

  function getHexagon(column, row){
    return hexagons[column][row];
  }
}

Any help would be appreciated.