var elements = [];

var goldenNumber = 100;

​

//Preloading the JSON File

​

function preload() {

  myData = loadJSON("elements.json", gotData);

}

​

//Receives Data and draws each element in the JSON

function gotData(data) {

  myData = data;

  for (var i = 0; i < myData.elements.length; i++) {

    elements.push(new Element(myData.elements[i], i * (goldenNumber + 50) + goldenNumber));

​

​

  }

}

​

//Sets Up Canvas

function setup() {

  createCanvas(400, 950);

}

​

//Draws the Element

function draw() {

  background(0);

​

  for (var i = 0; i < elements.length; i++) {

​

    elements[i].drawElement();

  }

​

}

​

//Element Object

function Element(elementInfo, offset) {

  this.nucleus = [];

  this.electrons = [];

  this.orbit = [];

  this.x = goldenNumber;

  this.y = offset;

  //make nucleus a new for loop  and put in eleme

  for (var i = 0; i < elementInfo.nucleus; i++) {

    this.nucleus.push(new Nucleus());

    //This is to change to fit the center of each element

  }

var radiusSpace = goldenNumber / 2 / elementInfo.electrons.length;

  var orbitNumber = elementInfo.electrons.length;

  for (var m = 0; m < orbitNumber; m++) {

    //make a new orbit object to m

    var electronNumber =  elementInfo.electrons[m];

​

    for (var n = 0; n < electronNumber; n++) {

      this.electrons.push(new Electron(radiusSpace  + radiusSpace * m, n * 2 * PI / electronNumber, 0.1));

​

    }

  }

  this.drawElement = function() {

​

    for (var m = 0; m < this.electrons.length; m++) {

      push();

      translate(this.x, this.y);

      this.electrons[m].drawElectron();

      pop();

    }

​

    for (var i = 0; i < this.nucleus.length; i++) {

      push();

      translate(this.x, this.y);

      this.nucleus[i].drawNucleus();

      this.nucleus[i].jitter();

      pop();

    }

​

​

  };

​

}

​

​

//Electron Object

function Electron(radius, angle, speed) {

  this.radius = radius;

  this.angle = angle;

  this.speed = speed;

  this.drawElectron = function() {

    push();

    rotate(this.angle);

    // noStroke();

    fill(255);

    ellipse(this.radius, 0, 5, 5);

    pop();

    this.angle = this.angle + this.speed;

  };

}

​

//Nucleus Object

​

function Nucleus() {

​

  this.x = 0;

  this.y = 0;

​

  this.drawNucleus = function() {

    strokeWeight(1);

    stroke(0);

    fill(255);

    ellipse(this.x, this.y, 5, 5);

​

  };

​

  this.jitter = function() {

    this.x = constrain (this.x + random(-1, 1),-5,5);

    this.y = constrain (this.y  + random(-1, 1), -5, 5);

  };

​

​

}

​

​

// }