Tutorial > 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 styles 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.
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:
<script>
let rotate2D = new ChemDoodle.RotatorCanvas('rotate2D', 200, 200);
rotate2D.styles.atoms_useJMOLColors = true;
rotate2D.styles.atoms_displayTerminalCarbonLabels_2D = true;
let 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';
let mol = ChemDoodle.readMOL(exampleMolFile);
rotate2D.loadMolecule(mol);
rotate2D.startAnimation();
</script>This shows a 3D rotation of a molecule with a "ball and stick" representation:
<script>
let rotate3D = new ChemDoodle.RotatorCanvas('rotate3D', 200, 200, true);
rotate3D.styles.atoms_useJMOLColors = true;
rotate3D.styles.atoms_HBlack_2D = false;
rotate3D.styles.atoms_circles_2D = true;
rotate3D.styles.bonds_symmetrical_2D = true;
rotate3D.styles.backgroundColor = '#E4FFC2';
let 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';
let mol = ChemDoodle.readMOL(exampleMolFile);
rotate3D.loadMolecule(mol);
rotate3D.startAnimation();
</script>
