MolecProc

Molecule

The molecule is rotated and drawn on-the-fly with help from Processing.js. HTML, CSS, and init.js are all from the examples on that site.

float[][] atoms = {{ 0.710900, 0.037800, 0.156700 },
         { 2.503200, 0.016200, -0.016200 },
         { 2.891000, -0.757600, -1.285100 },
         { 2.464200, -2.218700, -1.241500 },
         { 3.023400, 1.457700, -0.000800 },
         { 2.284300, 2.444200, -0.015900 },
         { 4.501400, 1.700400, 0.054300 },
         { 5.440400, 0.664600, 0.139400 },
         { 6.807300, 0.939900, 0.086400 },
         { 7.250400, 2.257200, 0.023400 },
         { 6.328300, 3.301100, 0.002600 },
         { 4.959700, 3.024900, 0.004100 },
         { 2.868300, -0.484600, 0.886500 },
         { 3.973200, -0.754200, -1.439100 },
         { 2.481000, -0.267500, -2.175500 },
         { 2.843500, -2.709100, -0.338600 },
         { 2.864400, -2.753100, -2.108600 },
         { 1.376200, -2.320800, -1.261800 },
         { 5.150800, -0.375700, 0.237800 },
         { 7.524100, 0.122200, 0.097500 },
         { 8.315900, 2.470000, 0.000500 },
         { 6.672500, 4.332000, -0.022800 },
         { 4.252400, 3.852800, -0.032800 }};
bonds = {{ 0, 1 },
         { 1, 4 },
         { 1, 2 },
         { 1, 12 },
         { 2, 3 },
         { 2, 13 },
         { 2, 14 },
         { 3, 15 },
         { 3, 16 },
         { 3, 17 },
         { 4, 6 },
         { 4, 5 },
         { 6, 11 },
         { 6, 7 },
         { 7, 8 },
         { 7, 18 },
         { 8, 9 },
         { 8, 19 },
         { 9, 10 },
         { 9, 20 },
         { 10, 11 },
         { 10, 21 },
         { 11, 22 }};

int mysize = 20;
float[] r = new r[atoms.length];
float[] theta = new theta[atoms.length];
void getpolar() {
  for(i=0; i < atoms.length; i++) {
	  r[i] = sqrt(atoms[i][0] * atoms[i][0] + atoms[i][2] * atoms[i][2]);
	  theta[i] = atan2(atoms[i][2], atoms[i][0]);
  }
}
float angle = 0;

void setup() {
  size(320, 240);
  //smooth();
  noStroke();
  centremol();
  getpolar();
}

void centremol() {
  for(int i=0; i < atoms.length; i++) {
	  atoms[i][0] = atoms[i][0] * mysize;
	  atoms[i][1] = atoms[i][1] * mysize;
	  atoms[i][2] = atoms[i][2] * mysize;
  }
  float totx = 0;
  float toty = 0;
  float totz = 0;
  for(i=0; i < atoms.length; i++) {
	  totx += atoms[i][0];
	  toty += atoms[i][1];
	  totz += atoms[i][2];
  }
  meanx = totx / atoms.length;
  meany = toty / atoms.length;
  meanz = totz / atoms.length;
  for(i=0; i < atoms.length; i++) {
	  atoms[i][0] = atoms[i][0] - meanx;
	  atoms[i][1] = atoms[i][1] - meany;
	  atoms[i][2] = atoms[i][2] - meanz;
  }
}

void zorder() {
  // Need to implement sort myself
  float[] depth = new depth[atoms.length];
  for(int i=0; i < atoms.length; i++) {
    depth[i] = r[i] * sin(theta[i] + angle);
  }
  // A poor man's z-order sort (not worth spending much time
  // on as you can sort using a function in javascript)
  for(int i=0; i < atoms.length; i++) {
    max = 0;
    for(int j=0; j < atoms.length; j++) {
      if(depth[j] > depth[max]) {
        max = j;
      }
    }
    depth[max] = -9999;

    x = r[max] * cos(theta[max] + angle);
    fill(color(0, 0, 0));
    ellipse(x, atoms[max][1], 1*mysize, 1*mysize);
    fill(color(100, 100, 100));
    ellipse(x - mysize*0.05, atoms[max][1] - mysize*0.1, 0.3*mysize, 0.3*mysize);
    fill(color(255, 255, 255));
    ellipse(x - mysize*0.05, atoms[max][1] - mysize*0.1, 0.1*mysize, 0.1*mysize);
  }
}

void draw() {
  background(226);
  //image( a, 0, 0 );
  translate(width/2, height/2);
  
  for(i=0; i< bonds.length; i++) {
    start = bonds[i][0];
    end = bonds[i][1];
    line(r[start] * cos(theta[start] + angle), atoms[start][1], r[end] * cos(theta[end] + angle), atoms[end][1]);
  }
  zorder();
  angle += 0.01;
}