let starsMap = [];

let xCoArr = []

let xCoCounterArr = [0, 0, 0, 0, 0, 0];

let currCanvas = 0;

​

​

function preload(){

  starsMap = loadStrings("stars.csv");

}

​

function setup() {

  background(0);

  let row = [];

  let xCoRow = [];

  createCanvas(700, 500);

  for(let i = 0; i < 6; i++){

    let xCo = 10;

    for(let j = 0; j < 40; j++){

      xCo += 17;

      xCoRow.push(xCo);

    }

    xCoArr.push(xCoRow);

  }

  for(let rowNum = 1; rowNum < starsMap.length - 1; rowNum++){

    row = split(starsMap[rowNum],",");

    stars.push(new star(row, rowNum));

  }

}

​

function draw() {

  background(0);

  drawMenu();

  displayStars(currCanvas);

  //console.log(currCanvas)

}

​

function drawMenu(){

  strokeWeight(1);

  let string = ["Star Type 0", "Star Type 1", "Star Type 2", "Star Type 3", "Star Type 4", "Star Type 5"]

  let test = "Star Type 0";

  for(let i = 0; i < 690; i+= 115){

    fill("white")

    rect(i, 0, 120, 50)

    fill("Black");

    text(string[i/115], i + (textWidth(test)/2), 30);

  }

}

​

function displayStars(canvasNum){

  for(let i = 0; i < stars.length; i++){

    if(stars[i].starType == canvasNum)

      stars[i].display();

  }

}

​

function mouseClicked(){

  if(mouseY < 50){

    if(mouseX < 115){

      currCanvas = 0;

    }

    else if(mouseX < 230){

      currCanvas = 1;

    }

    else if(mouseX < 345){

      currCanvas = 2;

    }

    else if(mouseX < 460){

      currCanvas = 3;

    }

    else if(mouseX < 575){

      currCanvas = 4;

    }

    else if(mouseX < 700){

      currCanvas = 5;

    }

  }

}

​

class star{

  constructor(arr, rowNum){

    this.data = arr;

    this.starType = this.data[4];

    this.color = this.data[5];

    this.radius = this.data[2];

    ///console.log(this.color);

    this.yCo = 250;

    this.xCo = xCoArr[this.starType][xCoCounterArr[this.starType]];

    xCoCounterArr[this.starType]++;

    switch(int(this.starType)){

      case 0:

        this.radius *= 100;

        break;

      case 1:

        this.radius *= 50;

        break;

      case 2:

        this.radius *= 1000;

        break;

      case 3:

        this.radius *= 20;

        break;

      case 4:

        this.radius *= 1;

        break;

      case 5:

        this.radius /= 10;

        break;

    }

  }

  display(){

    fill(this.color);

    strokeWeight(0);

    circle(this.xCo, this.yCo, this.radius);

  }

}