title: Converting Processing to Javascript
body: <p>I'm trying to convert this processing code into p5 so I can adapt it for my first website.</p>
  
  <p>I've looked around and found that</p>
  
  <ul>
  <li>all variable type declarations are replaced with "var"</li>
  <li>"void"s are replaced with "function"s</li>
  <li>size() turns into createCanvas()</li>
  <li>List item</li>
  </ul>
  
  <p>Here's my processing code. (Sorry for length)</p>
  
  <pre><code>//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 &lt; numColumns; i++){
      for(int j = 0; j &lt; 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 &lt; 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 &lt; 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 &lt; rows; i++){
        for(int j = 0; j &lt; 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 &lt; rows; i++){
        for(int j = 0; j &lt; columns; j++){
          hexagons[j][i].draw();
        }
      }
    }
  
    //for setting the color and possibly other things
    Hexagon getHexagon(int column, int row){
      return hexagons[column][row];
    }
  }
  </code></pre>
  
  <p>And here is what I've got so far for the JS conversion:</p>
  
  <pre><code>//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 &lt; numColumns; i++){
      for(var j = 0; j &lt; 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 &lt; 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 &lt; 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 &lt; rows; i++){
        for(var j = 0; j &lt; 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 &lt; rows; i++){
        for(var j = 0; j &lt; columns; j++){
          hexagons[j][i].draw();
        }
      }
    }
  
    function getHexagon(column, row){
      return hexagons[column][row];
    }
  }
  </code></pre>
  
  <p>Any help would be appreciated.</p>