Rotator Canvas

The RotatorCanvas class will impressively show off your creations and synthetic achievements. You may specify direction of rotation and rotation speed. Play around with different visual specifications to show off different types of models, such as “ball and stick” and “wireframe”. Use these on webpages to help new chemists get a better sense of 3D chemicals.

The RotatorCanvas components are declared similar to the ViewerCanvas, except there is an optional boolean parameter that specifies 3D rotation if true and 2D rotation otherwise. The RotatorCanvas class is a child of the AnimatorCanvas class, which in turn, is a child of the Canvas class.

1
new ChemDoodle.RotatorCanvas(name, width, height[, rotateIn3D]);

After the constructor has been called, several variables can be set to specify rotation increments, animation speed, and to start and stop the animation. There are three rotation increment variables that define the rate of rotation around the given axes in radians/sec: RotatorCanvas.xIncrement, RotatorCanvas.yIncrement and RotatorCanvas.zIncrement. For 2D rotation, only the RotatorCanvas.zIncrement is considered. The default rate for all axes is π/15 radians/sec.

The animation framerate can also be set by specifying the AnimatorCanvas.timeout variable in milliseconds. This variable controls how many milliseconds elapse before the next frame is painted. The default is 33ms, which specifies a refresh rate of about 30 frames per second. When everything is ready, the AnimatorCanvas.startAnimation() function will start the rotation while the AnimatorCanvas.stopAnimation() function will stop it. For convenience, the animation can be toggled by the user by double-clicking on the canvas.

Examples

This is a 2D rotation of a flat molecule:

1
2
3
4
5
6
7
8
9
<script>
  var rotate2D = new ChemDoodle.RotatorCanvas('rotate2D', 200, 200);
  rotate2D.specs.atoms_useJMOLColors = true;
  rotate2D.specs.atoms_displayTerminalCarbonLabels_2D = true;
  var exampleMolFile = 'Molecule Name\n  CHEMDOOD08070920113D 0   0.00000     0.00000     0\n[Insert Comment Here]\n 42 47  0  0  0  0  0  0  0  0  1 V2000\n    2.5688   -1.4702    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -1.3587    0.4207    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n    7.1400   -0.8173    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -4.3466    0.6451    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n   -4.5151    1.6308    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.8921   -0.3846    0.0000   N 0  0  0  2  0  0  0  0  0  0  0  0\n   -1.4280   -1.3100    0.0000   N 0  0  0  2  0  0  0  0  0  0  0  0\n    5.6867    0.1250    0.0000   N 0  0  0  2  0  0  0  0  0  0  0  0\n    4.5987   -1.5532    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    4.2288    1.1115    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n   -3.4856    3.0853    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -3.6298    2.0957    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -3.3412    4.0748    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n   -4.4751    3.2295    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n   -2.4960    2.9409    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n   -2.9141    1.3973    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -3.3571    0.5008    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -5.0449   -0.0706    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -6.0140    0.1763    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -4.7742   -1.0333    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -1.8929   -0.4246    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.4288   -1.3500    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n    0.0361   -2.2353    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n    1.0353   -2.2754    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -6.7123   -0.5395    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -5.4727   -1.7490    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -6.4416   -1.5021    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n    1.5696   -1.4301    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n    0.1055   -0.5047    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    1.1046   -0.5448    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -0.5340   -3.1071    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    1.5338   -3.1900    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -7.1400   -2.2179    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n   -0.0568   -4.0331    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    0.9840   -4.0748    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    3.1030   -0.6249    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n    4.1440   -0.6625    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n    4.6880    0.1766    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n    2.6224    0.2992    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    3.1890    1.1732    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    6.1413   -0.7658    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n    5.5973   -1.6048    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n  1 28  1  0  0  0  0\n  1 36  1  0  0  0  0\n  2 21  2  0  0  0  0\n  3 41  2  0  0  0  0\n  4  5  1  0  0  0  0\n  4 17  1  0  0  0  0\n  4 18  1  0  0  0  0\n  5 12  2  0  0  0  0\n  6 17  1  0  0  0  0\n  6 21  1  0  0  0  0\n  7 21  1  0  0  0  0\n  7 22  1  0  0  0  0\n  8 38  1  0  0  0  0\n  8 41  1  0  0  0  0\n  9 37  1  0  0  0  0\n  9 42  2  0  0  0  0\n 10 38  2  0  0  0  0\n 10 40  1  0  0  0  0\n 11 12  1  0  0  0  0\n 11 13  1  0  0  0  0\n 11 14  1  0  0  0  0\n 11 15  1  0  0  0  0\n 12 16  1  0  0  0  0\n 16 17  2  0  0  0  0\n 18 19  2  0  0  0  0\n 18 20  1  0  0  0  0\n 19 25  1  0  0  0  0\n 20 26  2  0  0  0  0\n 22 23  1  0  0  0  0\n 22 29  2  0  0  0  0\n 23 24  1  0  0  0  0\n 23 31  2  0  0  0  0\n 24 28  1  0  0  0  0\n 24 32  2  0  0  0  0\n 25 27  2  0  0  0  0\n 26 27  1  0  0  0  0\n 27 33  1  0  0  0  0\n 28 30  2  0  0  0  0\n 29 30  1  0  0  0  0\n 31 34  1  0  0  0  0\n 32 35  1  0  0  0  0\n 34 35  2  0  0  0  0\n 36 37  2  0  0  0  0\n 36 39  1  0  0  0  0\n 37 38  1  0  0  0  0\n 39 40  2  0  0  0  0\n 41 42  1  0  0  0  0\nM  END\n';
  var mol = ChemDoodle.readMOL(exampleMolFile);
  rotate2D.loadMolecule(mol);
  rotate2D.startAnimation();
</script>

This shows a 3D rotation of a molecule with a “ball and stick” representation:

1
2
3
4
5
6
7
8
9
10
11
<script>
  var rotate3D = new ChemDoodle.RotatorCanvas('rotate3D', 200, 200, true);
  rotate3D.specs.atoms_useJMOLColors = true;
  rotate3D.specs.atoms_circles_2D = true;
  rotate3D.specs.bonds_symmetrical_2D = true;
  rotate3D.specs.backgroundColor = '#E4FFC2';
  var exampleMolFile = '9570133\n  CHEMDOOD06280922273D\n\n 68 73  0     0  0  0  0  0  0999 V2000\n   -2.7594    4.7937    4.9660 Cl  0  0  0  0  0  0  0  0  0  0  0  0\n    0.1713   12.3898    1.1610 Cl  0  0  0  0  0  0  0  0  0  0  0  0\n    3.9321    2.3762    5.3236 O   0  0  0  0  0  0  0  0  0  0  0  0\n   -5.6821   12.1494   -3.0690 O   0  0  0  0  0  0  0  0  0  0  0  0\n    3.3046    2.3031    7.6295 N   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.0418   13.5130   -4.1490 N   0  0  0  0  0  0  0  0  0  0  0  0\n    0.2397    4.4446    5.3491 N   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.4255   12.0044   -0.3787 N   0  0  0  0  0  0  0  0  0  0  0  0\n    2.2198    2.7741    8.3844 N   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.7320   13.9210   -3.8549 N   0  0  0  0  0  0  0  0  0  0  0  0\n    1.4187    3.8201    5.1425 N   0  0  0  0  0  0  0  0  0  0  0  0\n   -3.5588   11.9239   -1.0942 N   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.9049    7.6732    2.9143 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.2872    8.7871    2.0739 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.1634    5.5180    4.5392 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.0253   10.9339    0.4523 C   0  0  0  0  0  0  0  0  0  0  0  0\n    1.9373    3.3330    6.2089 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -3.5108   12.5947   -2.1937 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.8843    6.8557    3.4783 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.4837    9.9258    2.0156 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.4440    7.4167    3.1601 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.4599    8.7219    1.3215 C   0  0  0  0  0  0  0  0  0  0  0  0\n    1.4021    3.3818    7.5816 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.3923   13.4003   -2.7165 C   0  0  0  0  0  0  0  0  0  0  0  0\n    3.2218    2.5988    6.2757 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.6082   12.6920   -3.1835 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.5149    5.7816    4.2879 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.8526   10.9991    1.2047 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.8133    6.3428    3.9700 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.8290    9.7954    0.5108 C   0  0  0  0  0  0  0  0  0  0  0  0\n    4.3645    1.6047    8.1858 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.7107   13.8957   -5.3008 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.1208    4.0381    7.9279 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.1027   13.5525   -2.0051 C   0  0  0  0  0  0  0  0  0  0  0  0\n    5.4188    1.1603    7.3797 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -6.0179   13.4556   -5.5382 C   0  0  0  0  0  0  0  0  0  0  0  0\n    4.3912    1.3364    9.5591 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.0857   14.7258   -6.2385 C   0  0  0  0  0  0  0  0  0  0  0  0\n    6.4854    0.4571    7.9395 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -6.6910   13.8405   -6.6977 C   0  0  0  0  0  0  0  0  0  0  0  0\n    5.4580    0.6334   10.1190 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.7590   15.1109   -7.3978 C   0  0  0  0  0  0  0  0  0  0  0  0\n    6.5052    0.1938    9.3092 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -6.0616   14.6683   -7.6275 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.9440    7.0496    3.3306 H   0  0  0  0  0  0  0  0  0  0  0  0\n    0.4191   10.0186    2.6146 H   0  0  0  0  0  0  0  0  0  0  0  0\n    1.2426    8.0068    2.7190 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -3.1003    7.8442    1.3098 H   0  0  0  0  0  0  0  0  0  0  0  0\n    1.8722    6.1688    4.1457 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -3.7458    9.7027   -0.0652 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.5336    3.8483    5.6286 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.1470   12.9124   -0.0240 H   0  0  0  0  0  0  0  0  0  0  0  0\n    0.1083    5.0923    7.6446 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.7326    3.4808    7.5372 H   0  0  0  0  0  0  0  0  0  0  0  0\n    0.0189    4.0183    9.0198 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.4226   14.1022   -2.6678 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.2066   14.1725   -1.1131 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.6200   12.5914   -1.8221 H   0  0  0  0  0  0  0  0  0  0  0  0\n    5.4926    1.3152    6.3135 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -6.5862   12.8152   -4.8801 H   0  0  0  0  0  0  0  0  0  0  0  0\n    3.5914    1.6647   10.2178 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -3.0717   15.0881   -6.0901 H   0  0  0  0  0  0  0  0  0  0  0  0\n    7.3017    0.1139    7.3104 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -7.7055   13.4967   -6.8783 H   0  0  0  0  0  0  0  0  0  0  0  0\n    5.4736    0.4281   11.1854 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.2692   15.7553   -8.1220 H   0  0  0  0  0  0  0  0  0  0  0  0\n    7.3358   -0.3536    9.7450 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -6.5858   14.9681   -8.5302 H   0  0  0  0  0  0  0  0  0  0  0  0\n  1 27  1  0  0  0  0\n  2 28  1  0  0  0  0\n  3 25  2  0  0  0  0\n  4 26  2  0  0  0  0\n  5  9  1  0  0  0  0\n  5 25  1  0  0  0  0\n  5 31  1  0  0  0  0\n  6 10  1  0  0  0  0\n  6 26  1  0  0  0  0\n  6 32  1  0  0  0  0\n  7 11  1  0  0  0  0\n  7 15  1  0  0  0  0\n  7 51  1  0  0  0  0\n  8 12  1  0  0  0  0\n  8 16  1  0  0  0  0\n  8 52  1  0  0  0  0\n  9 23  2  0  0  0  0\n 10 24  2  0  0  0  0\n 11 17  2  0  0  0  0\n 12 18  2  0  0  0  0\n 13 14  1  0  0  0  0\n 13 19  2  0  0  0  0\n 13 21  1  0  0  0  0\n 14 20  2  0  0  0  0\n 14 22  1  0  0  0  0\n 15 27  2  0  0  0  0\n 15 29  1  0  0  0  0\n 16 28  2  0  0  0  0\n 16 30  1  0  0  0  0\n 17 23  1  0  0  0  0\n 17 25  1  0  0  0  0\n 18 24  1  0  0  0  0\n 18 26  1  0  0  0  0\n 19 27  1  0  0  0  0\n 19 45  1  0  0  0  0\n 20 28  1  0  0  0  0\n 20 46  1  0  0  0  0\n 21 29  2  0  0  0  0\n 21 47  1  0  0  0  0\n 22 30  2  0  0  0  0\n 22 48  1  0  0  0  0\n 23 33  1  0  0  0  0\n 24 34  1  0  0  0  0\n 29 49  1  0  0  0  0\n 30 50  1  0  0  0  0\n 31 35  2  0  0  0  0\n 31 37  1  0  0  0  0\n 32 36  2  0  0  0  0\n 32 38  1  0  0  0  0\n 33 53  1  0  0  0  0\n 33 54  1  0  0  0  0\n 33 55  1  0  0  0  0\n 34 56  1  0  0  0  0\n 34 57  1  0  0  0  0\n 34 58  1  0  0  0  0\n 35 39  1  0  0  0  0\n 35 59  1  0  0  0  0\n 36 40  1  0  0  0  0\n 36 60  1  0  0  0  0\n 37 41  2  0  0  0  0\n 37 61  1  0  0  0  0\n 38 42  2  0  0  0  0\n 38 62  1  0  0  0  0\n 39 43  2  0  0  0  0\n 39 63  1  0  0  0  0\n 40 44  2  0  0  0  0\n 40 64  1  0  0  0  0\n 41 43  1  0  0  0  0\n 41 65  1  0  0  0  0\n 42 44  1  0  0  0  0\n 42 66  1  0  0  0  0\n 43 67  1  0  0  0  0\n 44 68  1  0  0  0  0\nM  END\n\n';
  var mol = ChemDoodle.readMOL(exampleMolFile);
  rotate3D.loadMolecule(mol);
  rotate3D.startAnimation();
</script>