{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Tutorial for Visualization\n",
    "\n",
    "This tutorial contains some examples for the visualization of the different objects dealt with in polymake.\n",
    "\n",
    "\n",
    "## Intro\n",
    "\n",
    "The most straighforward way of visualizing things in `polymake` is by using the `VISUAL` method that visualizable objects provide. For example, you can look at the 3-simplex by doing this:\n",
    "\n",
    "    \n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!--\n",
       "polymake for knusper\n",
       "Thu Aug 27 11:44:14 2020\n",
       "unnamed\n",
       "-->\n",
       "\n",
       "\n",
       "<html>\n",
       "   <head>\n",
       "      <meta charset=utf-8>\n",
       "      <title>unnamed</title>\n",
       "      <style>\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "*/\n",
       "         html {overflow: scroll;}\n",
       "         strong{font-size: 18px;}\n",
       "         canvas { z-index: 8; }\n",
       "         input[type='radio'] {margin-left:0;}\n",
       "         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}\n",
       "         .group{padding-bottom: 15px;}\n",
       "         .settings * {z-index: 11; }\n",
       "         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}\n",
       "         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} \n",
       "         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}\n",
       "         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }\n",
       "         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}\n",
       "         button{margin-left: 0; margin-top: 10px}\n",
       "         img{cursor: pointer;}\n",
       "         .suboption{padding-top: 15px;}\n",
       "         #model37138473249 { width: 100%; height: 100%; }\n",
       "         .threejs_container { width: 100%; height: 75vh;}\n",
       "         .settings{max-height: 74vh} \n",
       "         input[type=range] {\n",
       "           -webkit-appearance: none;\n",
       "           padding:0; \n",
       "           width:90%; \n",
       "           margin-left: auto;\n",
       "           margin-right: auto;\n",
       "           margin-top: 15px;\n",
       "           margin-bottom: 15px;\n",
       "           display: block;\t\n",
       "         }\n",
       "         input[type=range]:focus {\n",
       "           outline: none;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-runnable-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "           -webkit-appearance: none;\n",
       "           margin-top: -5px;\n",
       "         }\n",
       "         input[type=range]:focus::-webkit-slider-runnable-track {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]::-moz-range-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-moz-range-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]::-ms-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           background: transparent;\n",
       "           border-color: transparent;\n",
       "           color: transparent;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_END\n",
       "*/\n",
       "\t\t</style>\n",
       "   </head>\n",
       "<body>\n",
       "   <div class='threejs_container'>\n",
       "\t\t<div id='settings_0' class='settings'>\n",
       "\t\t\t<div class=group id='transparency_0' class='transparency'>\n",
       "\t\t\t\t<strong>Transparency</strong>\n",
       "\t\t\t\t<input id='transparencyRange_0' type='range' min=0 max=1 step=0.01 value=0>\n",
       "\t\t\t</div>\n",
       "\t\t\t\n",
       "\t\t\t<div class=group id='rotation_0'>\n",
       "\t\t\t\t<strong>Rotation</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationX_0'> x-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationY_0'> y-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationZ_0'> z-axis</div>\n",
       "\t\t\t\t\t<button id='resetButton_0'>Reset</button>\n",
       "\t\t\t\t</div>\n",
       "\n",
       "\t\t\t\t<div class=suboption>Rotation speed</div>\n",
       "\t\t\t\t<input id='rotationSpeedRange_0' type='range' min=0 max=5 step=0.01 value=2>\n",
       "\t\t\t</div>\n",
       "\n",
       "\n",
       "\t\t\t<div class=group id='display_0'>\n",
       "\t\t\t\t<strong>Display</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div id='shownObjectTypesList_0' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t\t<div class=suboption>Objects</div>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t   <div id='shownObjectsList_0' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "         \n",
       "         <div class=group id='camera_0'>\n",
       "            <strong>Camera</strong>\n",
       "            <div class=indented>\n",
       "               <form>\n",
       "                  <select id=\"cameraType_0\">\n",
       "                     <option value='perspective' selected> Perspective<br></option>\n",
       "                     <option value='orthographic' > Orthographic<br></option>\n",
       "                  </select>\n",
       "               </form>\n",
       "            </div>\n",
       "         </div>\n",
       "\n",
       "\t\t\t<div class=group id='svg_0'>\n",
       "\t\t\t\t<strong>SVG</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<form>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='download' id='download_0' checked> Download<br>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='tab' id='tab_0' > New tab<br>\n",
       "\t\t\t\t\t</form>\n",
       "\t\t\t\t\t<button id='takeScreenshot_0'>Screenshot</button>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "\n",
       "\t\t</div>\t<!-- end of settings -->\n",
       "\t\t<img id='hideSettingsButton_0' class='hideSettingsButton' src='/kernelspecs/polymake/close.svg' width=20px\">\n",
       "\t\t<img id='showSettingsButton_0' class='showSettingsButton' src='/kernelspecs/polymake/menu.svg' width=20px\">\n",
       "<div id=\"model37138473249\"></div>\n",
       "</div>\n",
       "   <script>\n",
       "    requirejs.config({\n",
       "      paths: {\n",
       "        three: '/kernelspecs/polymake/three',\n",
       "        TrackballControls: '/kernelspecs/polymake/TrackballControls',\n",
       "        OrbitControls: '/kernelspecs/polymake/OrbitControls',\n",
       "        Projector: '/kernelspecs/polymake/Projector',\n",
       "        SVGRenderer: '/kernelspecs/polymake/SVGRenderer',\n",
       "        WEBGL: '/kernelspecs/polymake/WebGL',\n",
       "      },\n",
       "      shim: {\n",
       "        'three': { exports: 'THREE'},\n",
       "        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },\n",
       "        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },\n",
       "        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },\n",
       "        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },\n",
       "        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },\n",
       "      }\n",
       "    });\n",
       "    \n",
       "    require(['three'],function(THREE){\n",
       "        window.THREE = THREE;\n",
       "      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],\n",
       "               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {\n",
       "    THREE.TrackballControls = TrackballControls;\n",
       "    THREE.OrbitControls = OrbitControls;\n",
       "    THREE.Projector = Projector;\n",
       "    THREE.SVGRenderer = SVGRenderer;\n",
       "    THREE.WEBGL = WEBGL;\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "\n",
       "const intervalLength = 25; // for automatic animations\n",
       "const explodableModel = false; \n",
       "const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };\n",
       "const foldables = [];\n",
       "\n",
       "var three = document.getElementById(\"model37138473249\");\n",
       "var scene = new THREE.Scene();\n",
       "var renderer = new THREE.WebGLRenderer( { antialias: true } );\n",
       "var svgRenderer = new THREE.SVGRenderer( { antialias: true } );\n",
       "renderer.setPixelRatio( window.devicePixelRatio );\n",
       "renderer.setClearColor(0xFFFFFF, 1);\n",
       "svgRenderer.setClearColor(0xFFFFFF, 1);\n",
       "three.appendChild(renderer.domElement);\n",
       "\n",
       "var frustumSize = 4;\n",
       "var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];\n",
       "cameras.forEach(function(cam) {\n",
       "    cam.position.set(0, 0, 5);\n",
       "    cam.lookAt(0, 0, 0);  \n",
       "    cam.up.set(0, 1, 0);         \n",
       "});\n",
       "var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];\n",
       "var camera, control;\n",
       "\n",
       "controls[0].zoomSpeed = 0.2;\n",
       "controls[0].rotateSpeed = 4;\n",
       "\n",
       "\n",
       "// class to allow move points together with labels and spheres\n",
       "var PMPoint = function (x,y,z) {\n",
       "   this.vector = new THREE.Vector3(x,y,z);\n",
       "   this.sprite = null;\n",
       "   this.sphere = null;\n",
       "}\n",
       "PMPoint.prototype.addLabel = function(labelsprite) {\n",
       "   this.sprite = labelsprite;\n",
       "   this.sprite.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.addSphere = function(spheremesh) {\n",
       "   this.sphere = spheremesh;\n",
       "   this.sphere.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.set = function(x,y,z) {\n",
       "   this.vector.set(x,y,z);\n",
       "   if (this.sprite) {\n",
       "      this.sprite.position.copy(this.vector);\n",
       "   }\n",
       "   if (this.sphere) {\n",
       "      this.sphere.position.copy(this.vector);\n",
       "   }\n",
       "}\n",
       "PMPoint.prototype.radius = function() {\n",
       "   if (this.sphere) {\n",
       "      return this.sphere.geometry.parameters.radius;\n",
       "   } else {\n",
       "      return 0;\n",
       "   }\n",
       "};\n",
       "// select the target node\n",
       "var target = document.querySelector('#model37138473249');\n",
       "\n",
       "// create an observer instance\n",
       "var observer = new MutationObserver(function(mutations) {\n",
       "   mutations.forEach(function(mutation) {\n",
       "      if (mutation.removedNodes && mutation.removedNodes.length > 0) {\n",
       "         cancelAnimationFrame(renderId);\n",
       "         observer.disconnect();\n",
       "         console.log(\"cancelled frame \"+renderId);\n",
       "      }\n",
       "   });\n",
       "});\n",
       "\n",
       "// configuration of the observer:\n",
       "var config = { childList: true, characterData: true }\n",
       "\n",
       "// pass in the target node, as well as the observer options\n",
       "while (target) {\n",
       "   if (target.className==\"output\") {\n",
       "      observer.observe(target, config);\n",
       "      break;\n",
       "   }\n",
       "   target = target.parentNode;\n",
       "}\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "var obj0 = new THREE.Object3D();\n",
       "obj0.name = \"unnamed__1\";\n",
       "obj0.userData.explodable = 1;\n",
       "obj0.userData.points = [];\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(1, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 1, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 1));\n",
       "\n",
       "obj0.userData.pointradii = 0.02;\n",
       "   <!-- Vertex style -->\n",
       "obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );\n",
       "obj0.userData.pointlabels = [\"0\", \"1\", \"2\", \"3\"];\n",
       "obj0.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];\n",
       "   <!-- Edge style -->\n",
       "obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } );\n",
       "obj0.userData.facets = [[2, 3, 1], [0, 3, 2], [1, 3, 0], [2, 1, 0]];\n",
       "   <!-- Facet style -->\n",
       "obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );\n",
       "init_object(obj0);\n",
       "scene.add(obj0);\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "function textSpriteMaterial(message, parameters) {\n",
       "    if ( parameters === undefined ) parameters = {};\n",
       "    var fontface = \"Helvetica\";\n",
       "    var fontsize = parameters.hasOwnProperty(\"fontsize\") ? parameters[\"fontsize\"] : 15;\n",
       "    fontsize = fontsize*10;\n",
       "    var lines = message.split('\\\\n');\n",
       "    var size = 512;\n",
       "    for(var i = 0; i<lines.length; i++){\n",
       "        var tmp = lines[i].length;\n",
       "        while(tmp*fontsize > size){\n",
       "           fontsize--;\n",
       "        }\n",
       "    }\n",
       "    \n",
       "    var canvas = document.createElement('canvas');\n",
       "    canvas.width = size;\n",
       "    canvas.height = size;\n",
       "    var context = canvas.getContext('2d');\n",
       "    context.fillStyle = \"rgba(255, 255, 255, 0)\";\n",
       "    context.fill();\n",
       "    context.font = fontsize + \"px \" + fontface;\n",
       "    \n",
       "    // text color\n",
       "    context.fillStyle = \"rgba(0, 0, 0, 1.0)\";\n",
       "     for(var i = 0; i<lines.length; i++){\n",
       "        context.fillText(lines[i], size/2, size/2+i*fontsize);\n",
       "     }\n",
       "    \n",
       "    // canvas contents will be used for a texture\n",
       "    var texture = new THREE.Texture(canvas);\n",
       "    texture.needsUpdate = true;\n",
       "    \n",
       "    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });\n",
       "    return spriteMaterial;\n",
       "}\n",
       "\n",
       "\n",
       "// ---------------------- INITIALIZING OBJECTS--------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function init_object(obj) {\n",
       "    if (obj.userData.hasOwnProperty(\"pointmaterial\")) {\n",
       "        init_points(obj);\n",
       "        modelContains.points = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"pointlabels\")) {\n",
       "        init_pointlabels(obj);\n",
       "        modelContains.pointlabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgematerial\")) {\n",
       "        init_lines(obj);\n",
       "        modelContains.lines = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgelabels\")) {\n",
       "        init_edgelabels(obj);\n",
       "        modelContains.edgelabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"arrowstyle\")) {\n",
       "        init_arrowheads(obj);\n",
       "        modelContains.arrowheads = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"facetmaterial\")) {\n",
       "        init_faces(obj);\n",
       "        modelContains.faces = true;\n",
       "    }\n",
       "}\n",
       "\n",
       "function init_points(obj) {\n",
       "    var pointgroup = new THREE.Group();\n",
       "    pointgroup.name = \"points\";\n",
       "    var points = obj.userData.points;\n",
       "    var radii = obj.userData.pointradii;\n",
       "    var materials = obj.userData.pointmaterial;\n",
       "    var geometry,material;\n",
       "    if (!Array.isArray(radii)) {\n",
       "        geometry = new THREE.SphereBufferGeometry(radii);  \n",
       "    }\n",
       "    if (!Array.isArray(materials)) {\n",
       "        material = materials;\n",
       "    }\n",
       "    for (var i=0; i<points.length; i++) {\n",
       "        var point = points[i];\n",
       "        if (Array.isArray(radii)) {\n",
       "            if (radii[i] == 0) {\n",
       "                continue;\n",
       "            }\n",
       "            geometry = new THREE.SphereBufferGeometry(radii[i]);  \n",
       "        } \n",
       "        if (Array.isArray(materials)) {\n",
       "            material = materials[i];     \n",
       "        } \n",
       "        var sphere = new THREE.Mesh(geometry, material);\n",
       "        point.addSphere(sphere);\n",
       "        pointgroup.add(sphere);\n",
       "    }\n",
       "    obj.add(pointgroup);\n",
       "}\n",
       "\n",
       "function init_pointlabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var labels = obj.userData.pointlabels;\n",
       "    var pointlabels = new THREE.Group();\n",
       "    pointlabels.name = \"pointlabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(pointlabels);\n",
       "}\n",
       "\n",
       "function init_lines(obj) {\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var points = obj.userData.points;\n",
       "    var materials = obj.userData.edgematerial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    var bufarr = new Float32Array( obj.userData.edgeindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute( bufarr, 3 );\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position', bufattr);\n",
       "    if (Array.isArray(materials)) {     \n",
       "        for (var i=0; i<materials.length; i++) {\n",
       "            geometry.addGroup(2*i,2,i);\n",
       "        }\n",
       "    }\n",
       "    var lines = new THREE.LineSegments(geometry, materials);\n",
       "    lines.name = \"lines\";\n",
       "    obj.add(lines);\n",
       "    updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "function init_edgelabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var labels = obj.userData.edgelabels;\n",
       "    var edgelabels = new THREE.Group();\n",
       "    edgelabels.name = \"edgelabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            edgelabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(edgelabels);\n",
       "}\n",
       "\n",
       "function init_arrowheads(obj) {\n",
       "    var arrowheads = new THREE.Group();\n",
       "    arrowheads.name = \"arrowheads\";\n",
       "    var arrowstyle = obj.userData.arrowstyle;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var edgematerials = obj.userData.edgematerial;\n",
       "    var points = obj.userData.points;\n",
       "    var material;\n",
       "    if (!Array.isArray(edgematerials)) {\n",
       "        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );\n",
       "    }\n",
       "\n",
       "    for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "        var start = points[edgeindices[i]];\n",
       "        var end = points[edgeindices[i+1]];\n",
       "        var dist = start.vector.distanceTo( end.vector ) - start.radius() - end.radius();\n",
       "        if (dist <= 0) {\n",
       "            continue;\n",
       "        }\n",
       "        var dir = new THREE.Vector3().subVectors(end.vector,start.vector);\n",
       "        dir.normalize();\n",
       "        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);\n",
       "        axis.normalize();\n",
       "        var radians = Math.acos( dir.y );\n",
       "        var radius = dist/25;\n",
       "        var height = dist/5;\n",
       "        var geometry = new THREE.ConeBufferGeometry(radius,height);\n",
       "        var position = new THREE.Vector3().addVectors(start.vector,dir.clone().multiplyScalar(start.radius()+dist-height/2));\n",
       "        if (Array.isArray(edgematerials)) {\n",
       "            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );\n",
       "        }\n",
       "        var cone = new THREE.Mesh( geometry, material );\n",
       "        cone.quaternion.setFromAxisAngle(axis,radians);;\n",
       "        cone.position.copy(position);;\n",
       "        arrowheads.add(cone);\n",
       "    }\n",
       "    obj.add(arrowheads);\n",
       "}\n",
       "\n",
       "function init_faces(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var facets = obj.userData.facets;\n",
       "    obj.userData.triangleindices = [];\n",
       "    for (var i=0; i<facets.length; i++) {\n",
       "        facet = facets[i];\n",
       "        for (var t=0; t<facet.length-2; t++) {\n",
       "            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  \n",
       "        }\n",
       "    }\n",
       "    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);\n",
       "    \n",
       "    var materials = obj.userData.facetmaterial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position',bufattr);\n",
       "    if (Array.isArray(materials)) {\n",
       "        var tricount = 0;\n",
       "        var facet;\n",
       "        for (var i=0; i<facets.length; i++) {\n",
       "            facet = facets[i];\n",
       "            geometry.addGroup(tricount,(facet.length-2)*3,i);\n",
       "            tricount += (facet.length-2)*3;\n",
       "        }\n",
       "    }\n",
       "    var mesh = new THREE.Mesh(geometry, materials);\n",
       "    mesh.name = \"faces\";\n",
       "    obj.add(mesh); \n",
       "    updateFacesPosition(obj);\n",
       "}\n",
       "// //INITIALIZING\n",
       "\n",
       "\n",
       "function updateFacesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.triangleindices;\n",
       "    var faces = obj.getObjectByName(\"faces\");\n",
       "    var ba = faces.geometry.getAttribute(\"position\");\n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    faces.geometry.attributes.position.needsUpdate = true;\n",
       "    \n",
       "}\n",
       "\n",
       "function updateEdgesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.edgeindices;\n",
       "    var lines = obj.getObjectByName(\"lines\");\n",
       "    var ba = lines.geometry.getAttribute(\"position\"); \n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    lines.geometry.attributes.position.needsUpdate = true;\n",
       "}\n",
       "\n",
       "function onWindowResize() {\n",
       "    renderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    svgRenderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "function updateCamera() {\n",
       "    var width = three.clientWidth;\n",
       "    var height = three.clientHeight;\n",
       "    var aspect = width / height;\n",
       "    if (camera.type == \"OrthographicCamera\") {\n",
       "        camera.left = frustumSize * aspect / - 2;\n",
       "        camera.right = frustumSize * aspect / 2;\n",
       "        camera.top = frustumSize / 2;\n",
       "        camera.bottom = - frustumSize / 2;\n",
       "    } else if (camera.type == \"PerspectiveCamera\") {\n",
       "        camera.aspect = aspect;\n",
       "    }\n",
       "    camera.updateProjectionMatrix();\n",
       "}\n",
       "\n",
       "function changeCamera(event) {\n",
       "    var selindex = event.currentTarget.selectedIndex;\n",
       "    camera = cameras[selindex];\n",
       "    control = controls[selindex];\n",
       "    control.enabled = true; \n",
       "    for (var i=0; i<controls.length; i++) {\n",
       "        if (i!=selindex) {\n",
       "            controls[i].enabled = false;\n",
       "        }\n",
       "    }\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "var camtypenode = document.getElementById('cameraType_0');\n",
       "camtypenode.onchange = changeCamera;\n",
       "camtypenode.dispatchEvent(new Event('change'));\n",
       "\n",
       "onWindowResize();\n",
       "window.addEventListener('resize', onWindowResize);\t\n",
       "\n",
       "\n",
       "var xRotationEnabled = false;\n",
       "var yRotationEnabled = false;\n",
       "var zRotationEnabled = false;\n",
       "var rotationSpeedFactor = 1;\n",
       "var settingsShown = false;\n",
       "var labelsShown = true;\n",
       "var intervals = [];\n",
       "var timeouts = [];\n",
       "var explodingSpeed = 0.05;\n",
       "var explodeScale = 0;\n",
       "var XMLS = new XMLSerializer();\n",
       "var svgElement;\n",
       "var renderId;\n",
       "\n",
       "var render = function () {\n",
       "\n",
       "\trenderId = requestAnimationFrame(render);\n",
       "\n",
       "//\tcomment in for automatic explosion\n",
       "//\texplode(updateFactor());\n",
       "\n",
       "    var phi = 0.02 * rotationSpeedFactor;\n",
       "\n",
       "    if (xRotationEnabled) {\n",
       "        scene.rotation.x += phi;\n",
       "    }\n",
       "    if (yRotationEnabled) {\n",
       "        scene.rotation.y += phi;\n",
       "    }\n",
       "    if (zRotationEnabled) {\n",
       "        scene.rotation.z += phi;\n",
       "    }\n",
       "\n",
       "    control.update();\n",
       "    renderer.render(scene, camera);\n",
       "};\n",
       "\n",
       "if ( THREE.WEBGL.isWebGLAvailable() ) {\n",
       "\trender();\n",
       "} else {\n",
       "\tvar warning = WEBGL.getWebGLErrorMessage();\n",
       "\tthree.appendChild( warning );\n",
       "}\n",
       "    \n",
       "function changeTransparency() {\n",
       "    var opacity = 1-Number(event.currentTarget.value);\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        child = scene.children[i];\n",
       "        if ( child.userData.hasOwnProperty(\"facetmaterial\") ) {\n",
       "            if (Array.isArray(child.userData.facetmaterial)) {\n",
       "                for (var j=0; j<child.userData.facetmaterial.length; j++) {\n",
       "                    child.userData.facetmaterial[j].opacity = opacity;\n",
       "                }\n",
       "            } else {\n",
       "                child.userData.facetmaterial.opacity = opacity;\n",
       "            }    \n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function changeRotationX(event){\n",
       "    xRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationY(event){\n",
       "    yRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationZ(event){\n",
       "    zRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "\n",
       "function changeRotationSpeedFactor(event){\n",
       "    rotationSpeedFactor = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function resetScene(){\n",
       "    scene.rotation.set(0,0,0);\n",
       "    camera.position.set(0,0,5);\n",
       "    camera.up.set(0,1,0);\n",
       "}\n",
       "\n",
       "function showSettings(event){\n",
       "    document.getElementById('settings_0').style.visibility = 'visible';\n",
       "    document.getElementById('showSettingsButton_0').style.visibility = 'hidden';\n",
       "    document.getElementById('hideSettingsButton_0').style.visibility = 'visible';\n",
       "    settingsShown = true;\n",
       "}\n",
       "\n",
       "function hideSettings(event){\n",
       "    document.getElementById('settings_0').style.visibility = 'hidden';\n",
       "    document.getElementById('showSettingsButton_0').style.visibility = 'visible';\n",
       "    document.getElementById('hideSettingsButton_0').style.visibility = 'hidden';\n",
       "    settingsShown = false;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "var pos = 150* Math.PI;\n",
       "\n",
       "function updateFactor() {\n",
       "    pos++;\n",
       "    return Math.sin(.01*pos)+1;\n",
       "}\n",
       "\n",
       "// ------------------------ FOLDING ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "// rotate point p around axis defined by points p1 and p2 by given angle\n",
       "function rotate(p, p1, p2, angle ){   \n",
       "    angle = -angle;\n",
       "    var x = p.x, y = p.y, z = p.z, \n",
       "    a = p1.x, b = p1.y, c = p1.z, \n",
       "    u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z;\n",
       "    var result = [];\n",
       "    var L = u*u + v*v + w*w;\n",
       "    var sqrt = Math.sqrt;\n",
       "    var cos = Math.cos;\n",
       "    var sin = Math.sin;\n",
       "\n",
       "    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;\n",
       "    result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L;\n",
       "    result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L;\n",
       "\n",
       "    return result;\n",
       "}\n",
       "\n",
       "var fold = function(event){\n",
       "    var obj = foldables[Number(event.currentTarget.name)];\n",
       "    var foldvalue = Number(event.currentTarget.value);\n",
       "    var scale = foldvalue - obj.userData.oldscale;\n",
       "\n",
       "    for (var j=0; j<obj.userData.axes.length; j++) {\n",
       "        rotateVertices(obj, j, scale);\n",
       "    }\n",
       "    update(obj);\n",
       "    obj.userData.oldscale += scale;\n",
       "    lookAtBarycenter(obj);\n",
       "}\n",
       "\n",
       "function lookAtBarycenter(obj){\n",
       "    control.target = barycenter(obj);\n",
       "}\n",
       "\n",
       "function barycenter(obj) {\n",
       "    var center = new THREE.Vector3(0,0,0);\n",
       "    var points = obj.userData.points;\n",
       "    for (var i=0; i<points.length; i++){\n",
       "        center.add(points[i].vector);\n",
       "    }\n",
       "    center.divideScalar(points.length);\n",
       "    return center;\n",
       "}\n",
       "\n",
       "function rotateVertices(obj, edge, scale) {\n",
       "    var axes = obj.userData.axes;\n",
       "    var subtrees = obj.userData.subtrees;\n",
       "    var points = obj.userData.points;\n",
       "    var angles = obj.userData.angles;\n",
       "    if (edge < axes.length){\n",
       "        for (var j=0; j<subtrees[edge].length; j++){\n",
       "            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));\n",
       "            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function update(obj) {\n",
       "   updateFacesPosition(obj);\n",
       "   updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "if (foldables.length) {\n",
       "    var settings = document.getElementById('settings_0');\n",
       "    var foldDiv = document.createElement('div');\n",
       "    foldDiv.id = 'fold_0';\n",
       "    var title = document.createElement('strong');\n",
       "    title.innerHTML = 'Fold';\n",
       "    foldDiv.appendChild(title);\n",
       "    foldDiv.className = 'group';\n",
       "    for (var i=0; i<foldables.length; i++) {\n",
       "        var range = document.createElement('input');\n",
       "        range.type = 'range';\n",
       "        range.min = 0;\n",
       "        range.max = 1;\n",
       "        range.value = 0;\n",
       "        range.step = 0.001;\n",
       "        range.name = String(i);\n",
       "        range.oninput = fold;\n",
       "        foldDiv.appendChild(range);\n",
       "    }\n",
       "    lookAtBarycenter(foldables[0]);\n",
       "    settings.insertBefore(foldDiv,settings.childNodes[0]);\n",
       "}\n",
       "\n",
       "    \n",
       "// ---------------------- EXPLOSION ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "if (explodableModel) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        obj = scene.children[i];\n",
       "        if ( obj.userData.explodable ) {\n",
       "            computeCentroid(obj);\n",
       "        }\n",
       "    }\n",
       "    document.getElementById('explodeRange_0').oninput = triggerExplode;\n",
       "    document.getElementById('explodeCheckbox_0').onchange = triggerAutomaticExplode;\n",
       "    document.getElementById('explodingSpeedRange_0').oninput = setExplodingSpeed;\n",
       "}\n",
       "\n",
       "function computeCentroid(obj) {\n",
       "    centroid = new THREE.Vector3();\n",
       "    obj.userData.points.forEach(function(pmpoint) {\n",
       "        centroid.add(pmpoint.vector);\t\t\t\n",
       "    });\n",
       "    centroid.divideScalar(obj.userData.points.length);\n",
       "    obj.userData.centroid = centroid;\n",
       "}\n",
       "\n",
       "function explode(factor) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        var obj = scene.children[i];\n",
       "        if (obj.userData.hasOwnProperty(\"centroid\")) { \n",
       "            var c = obj.userData.centroid;\n",
       "            obj.position.set(c.x*factor, c.y*factor, c.z*factor);\n",
       "        }\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function triggerExplode(event){\n",
       "    explodeScale = Number(event.currentTarget.value);\n",
       "    explode(explodeScale);\n",
       "}\n",
       "\n",
       "function setExplodingSpeed(event){\n",
       "    explodingSpeed = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function triggerAutomaticExplode(event){\n",
       "    if (event.currentTarget.checked){\n",
       "        startExploding();\n",
       "    } else {\n",
       "        clearIntervals();\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function startExploding(){\n",
       "    intervals.push(setInterval(explodingInterval, 25));\n",
       "}\n",
       "\n",
       "\n",
       "function explodingInterval(){\n",
       "    explodeScale += explodingSpeed;\n",
       "    if (explodeScale <= 6){ \n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else{\n",
       "        explode(6);\n",
       "        explodeScale = 6;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startUnexploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_0').value = explodeScale;\n",
       "}\n",
       "\n",
       "\n",
       "function startUnexploding(){\n",
       "    intervals.push(setInterval(unexplodingInterval, 25));\n",
       "}\n",
       "\n",
       "function unexplodingInterval(){\n",
       "    explodeScale -= explodingSpeed;\n",
       "    if (explodeScale >= 0){\t\n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else {\n",
       "        explode(0);\n",
       "        explodeScale = 0;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startExploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_0').value = explodeScale;\n",
       "}\n",
       "\n",
       "function clearIntervals(){\n",
       "    intervals.forEach(function(interval){\n",
       "        clearInterval(interval);\n",
       "    });\n",
       "    intervals = [];\n",
       "    timeouts.forEach(function(timeout){\n",
       "        clearTimeout(timeout);\n",
       "    });\n",
       "    timeouts = [];\n",
       "}\n",
       "\n",
       "// ---------------------- DISPLAY --------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "const objectTypeInnerHTMLs = { points: \"Points\", pointlabels: \"Point labels\", lines: \"Edges\", edgelabels: \"Edge labels\", faces: \"Faces\", arrowheads: \"Arrow heads\" };\n",
       "const objectTypeVisible = {};\n",
       "Object.assign(objectTypeVisible,modelContains);\n",
       "const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();\n",
       "const shownObjectTypesList = document.getElementById('shownObjectTypesList_0');\n",
       "\n",
       "function setVisibility(bool,objname) {\n",
       "    for (var i=0; i<scene.children.length; i++){\n",
       "        var obj = scene.children[i].getObjectByName(objname);\n",
       "        if (obj) {\n",
       "            obj.visible = bool;\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function toggleObjectTypeVisibility(event){\n",
       "    var name = event.currentTarget.name;\n",
       "    var checked = event.currentTarget.checked;\n",
       "    objectTypeVisible[name] = checked;\n",
       "    setVisibility(checked,name);\n",
       "}\n",
       "\n",
       "for (var i=0; i<sortedObjectTypeKeys.length; i++){\n",
       "    var key = sortedObjectTypeKeys[i];\n",
       "    if (modelContains[key]) {\n",
       "        var objTypeNode = document.createElement('span');\n",
       "        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';\n",
       "        var checkbox = document.createElement('input');\n",
       "        checkbox.type = 'checkbox';\n",
       "        checkbox.checked = true;\n",
       "        checkbox.name = key;\n",
       "        checkbox.onchange = toggleObjectTypeVisibility;\n",
       "        shownObjectTypesList.appendChild(checkbox);\n",
       "        shownObjectTypesList.appendChild(objTypeNode);\n",
       "    }\n",
       "}\n",
       "\n",
       "// ------------------------------------------------------\n",
       "\n",
       "function toggleObjectVisibility(event){\n",
       "    var nr = Number(event.currentTarget.name);\n",
       "    scene.children[nr].visible = event.currentTarget.checked;\n",
       "}\n",
       "\n",
       "// append checkboxes for displaying or hiding objects\n",
       "var shownObjectsList = document.getElementById('shownObjectsList_0');\n",
       "for (var i=0; i<scene.children.length; i++){\n",
       "    obj = scene.children[i];\n",
       "    var objNode = document.createElement('span');\n",
       "    objNode.innerHTML = obj.name + '<br>';\n",
       "    var checkbox = document.createElement('input');\n",
       "    checkbox.type = 'checkbox';\n",
       "    checkbox.checked = true;\n",
       "    checkbox.name = String(i);\n",
       "    checkbox.onchange = toggleObjectVisibility;\n",
       "    shownObjectsList.appendChild(checkbox);\n",
       "    shownObjectsList.appendChild(objNode);\n",
       "}\n",
       "\n",
       "// ---------------------- SVG ------------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function takeSvgScreenshot() {\n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(false,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(false,\"edgelabels\");\n",
       "    }\n",
       "    svgRenderer.render(scene,camera);\n",
       "    svgElement = XMLS.serializeToString(svgRenderer.domElement);\n",
       "    \n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(true,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(true,\"edgelabels\");\n",
       "    }\n",
       "\n",
       "    if (document.getElementById('tab_0').checked){\n",
       "        //show in new tab\n",
       "        var myWindow = window.open(\"\",\"\");\n",
       "        myWindow.document.body.innerHTML = svgElement;\n",
       "    } else{\n",
       "        // download svg file \n",
       "        download(\"screenshot.svg\", svgElement);\n",
       "    }\n",
       "}\n",
       "\n",
       "function download(filename, text) {\n",
       "    var element = document.createElement('a');\n",
       "    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));\n",
       "    element.setAttribute('download', filename);\n",
       "\n",
       "    element.style.display = 'none';\n",
       "    document.body.appendChild(element);\n",
       "\n",
       "    element.click();\n",
       "\n",
       "    document.body.removeChild(element);\n",
       "}\n",
       "\n",
       "\n",
       "document.getElementById('transparencyRange_0').oninput = changeTransparency;\n",
       "document.getElementById('changeRotationX_0').onchange = changeRotationX;\n",
       "document.getElementById('changeRotationY_0').onchange = changeRotationY;\n",
       "document.getElementById('changeRotationZ_0').onchange = changeRotationZ;\n",
       "document.getElementById('resetButton_0').onclick = resetScene;\n",
       "document.getElementById('rotationSpeedRange_0').oninput = changeRotationSpeedFactor;\n",
       "document.getElementById('takeScreenshot_0').onclick = takeSvgScreenshot;\n",
       "document.getElementById('showSettingsButton_0').onclick = showSettings;\n",
       "document.getElementById('hideSettingsButton_0').onclick = hideSettings;\n",
       "\n",
       "\n",
       "// ------------------ SHORTCUTS --------------------------------------------\n",
       "// -------------------------------------------------------------------------\n",
       "\n",
       "/**\n",
       " * http://www.openjs.com/scripts/events/keyboard_shortcuts/\n",
       " * Version : 2.01.B\n",
       " * By Binny V A\n",
       " * License : BSD\n",
       " */\n",
       "shortcut = {\n",
       "\t'all_shortcuts':{},//All the shortcuts are stored in this array\n",
       "\t'add': function(shortcut_combination,callback,opt) {\n",
       "\t\t//Provide a set of default options\n",
       "\t\tvar default_options = {\n",
       "\t\t\t'type':'keydown',\n",
       "\t\t\t'propagate':false,\n",
       "\t\t\t'disable_in_input':false,\n",
       "\t\t\t'target':document,\n",
       "\t\t\t'keycode':false\n",
       "\t\t}\n",
       "\t\tif(!opt) opt = default_options;\n",
       "\t\telse {\n",
       "\t\t\tfor(var dfo in default_options) {\n",
       "\t\t\t\tif(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\n",
       "\t\tvar ele = opt.target;\n",
       "\t\tif(typeof opt.target == 'string') ele = document.getElementById(opt.target);\n",
       "\t\tvar ths = this;\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\n",
       "\t\t//The function to be called at keypress\n",
       "\t\tvar func = function(e) {\n",
       "\t\t\te = e || window.event;\n",
       "\t\t\t\n",
       "\t\t\tif(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields\n",
       "\t\t\t\tvar element;\n",
       "\t\t\t\tif(e.target) element=e.target;\n",
       "\t\t\t\telse if(e.srcElement) element=e.srcElement;\n",
       "\t\t\t\tif(element.nodeType==3) element=element.parentNode;\n",
       "\n",
       "\t\t\t\tif(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\t//Find Which key is pressed\n",
       "\t\t\tif (e.keyCode) code = e.keyCode;\n",
       "\t\t\telse if (e.which) code = e.which;\n",
       "\t\t\tvar character = String.fromCharCode(code).toLowerCase();\n",
       "\t\t\t\n",
       "\t\t\tif(code == 188) character=\",\"; //If the user presses , when the type is onkeydown\n",
       "\t\t\tif(code == 190) character=\".\"; //If the user presses , when the type is onkeydown\n",
       "\n",
       "\t\t\tvar keys = shortcut_combination.split(\"+\");\n",
       "\t\t\t//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked\n",
       "\t\t\tvar kp = 0;\n",
       "\t\t\t\n",
       "\t\t\t//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken\n",
       "\t\t\tvar shift_nums = {\n",
       "\t\t\t\t\"`\":\"~\",\n",
       "\t\t\t\t\"1\":\"!\",\n",
       "\t\t\t\t\"2\":\"@\",\n",
       "\t\t\t\t\"3\":\"#\",\n",
       "\t\t\t\t\"4\":\"$\",\n",
       "\t\t\t\t\"5\":\"%\",\n",
       "\t\t\t\t\"6\":\"^\",\n",
       "\t\t\t\t\"7\":\"&\",\n",
       "\t\t\t\t\"8\":\"*\",\n",
       "\t\t\t\t\"9\":\"(\",\n",
       "\t\t\t\t\"0\":\")\",\n",
       "\t\t\t\t\"-\":\"_\",\n",
       "\t\t\t\t\"=\":\"+\",\n",
       "\t\t\t\t\";\":\":\",\n",
       "\t\t\t\t\"'\":\"\\\"\",\n",
       "\t\t\t\t\",\":\"<\",\n",
       "\t\t\t\t\".\":\">\",\n",
       "\t\t\t\t\"/\":\"?\",\n",
       "\t\t\t\t\"\\\\\":\"|\"\n",
       "\t\t\t}\n",
       "\t\t\t//Special Keys - and their codes\n",
       "\t\t\tvar special_keys = {\n",
       "\t\t\t\t'esc':27,\n",
       "\t\t\t\t'escape':27,\n",
       "\t\t\t\t'tab':9,\n",
       "\t\t\t\t'space':32,\n",
       "\t\t\t\t'return':13,\n",
       "\t\t\t\t'enter':13,\n",
       "\t\t\t\t'backspace':8,\n",
       "\t\n",
       "\t\t\t\t'scrolllock':145,\n",
       "\t\t\t\t'scroll_lock':145,\n",
       "\t\t\t\t'scroll':145,\n",
       "\t\t\t\t'capslock':20,\n",
       "\t\t\t\t'caps_lock':20,\n",
       "\t\t\t\t'caps':20,\n",
       "\t\t\t\t'numlock':144,\n",
       "\t\t\t\t'num_lock':144,\n",
       "\t\t\t\t'num':144,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pause':19,\n",
       "\t\t\t\t'break':19,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'insert':45,\n",
       "\t\t\t\t'home':36,\n",
       "\t\t\t\t'delete':46,\n",
       "\t\t\t\t'end':35,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pageup':33,\n",
       "\t\t\t\t'page_up':33,\n",
       "\t\t\t\t'pu':33,\n",
       "\t\n",
       "\t\t\t\t'pagedown':34,\n",
       "\t\t\t\t'page_down':34,\n",
       "\t\t\t\t'pd':34,\n",
       "\t\n",
       "\t\t\t\t'left':37,\n",
       "\t\t\t\t'up':38,\n",
       "\t\t\t\t'right':39,\n",
       "\t\t\t\t'down':40,\n",
       "\t\n",
       "\t\t\t\t'f1':112,\n",
       "\t\t\t\t'f2':113,\n",
       "\t\t\t\t'f3':114,\n",
       "\t\t\t\t'f4':115,\n",
       "\t\t\t\t'f5':116,\n",
       "\t\t\t\t'f6':117,\n",
       "\t\t\t\t'f7':118,\n",
       "\t\t\t\t'f8':119,\n",
       "\t\t\t\t'f9':120,\n",
       "\t\t\t\t'f10':121,\n",
       "\t\t\t\t'f11':122,\n",
       "\t\t\t\t'f12':123\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\tvar modifiers = { \n",
       "\t\t\t\tshift: { wanted:false, pressed:false},\n",
       "\t\t\t\tctrl : { wanted:false, pressed:false},\n",
       "\t\t\t\talt  : { wanted:false, pressed:false},\n",
       "\t\t\t\tmeta : { wanted:false, pressed:false}\t//Meta is Mac specific\n",
       "\t\t\t};\n",
       "                        \n",
       "\t\t\tif(e.ctrlKey)\tmodifiers.ctrl.pressed = true;\n",
       "\t\t\tif(e.shiftKey)\tmodifiers.shift.pressed = true;\n",
       "\t\t\tif(e.altKey)\tmodifiers.alt.pressed = true;\n",
       "\t\t\tif(e.metaKey)   modifiers.meta.pressed = true;\n",
       "                        \n",
       "\t\t\tfor(var i=0; k=keys[i],i<keys.length; i++) {\n",
       "\t\t\t\t//Modifiers\n",
       "\t\t\t\tif(k == 'ctrl' || k == 'control') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.ctrl.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'shift') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.shift.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'alt') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.alt.wanted = true;\n",
       "\t\t\t\t} else if(k == 'meta') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.meta.wanted = true;\n",
       "\t\t\t\t} else if(k.length > 1) { //If it is a special key\n",
       "\t\t\t\t\tif(special_keys[k] == code) kp++;\n",
       "\t\t\t\t\t\n",
       "\t\t\t\t} else if(opt['keycode']) {\n",
       "\t\t\t\t\tif(opt['keycode'] == code) kp++;\n",
       "\n",
       "\t\t\t\t} else { //The special keys did not match\n",
       "\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\telse {\n",
       "\t\t\t\t\t\tif(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase\n",
       "\t\t\t\t\t\t\tcharacter = shift_nums[character]; \n",
       "\t\t\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\t\t}\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t\t\n",
       "\t\t\tif(kp == keys.length && \n",
       "\t\t\t\t\t\tmodifiers.ctrl.pressed == modifiers.ctrl.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.shift.pressed == modifiers.shift.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.alt.pressed == modifiers.alt.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.meta.pressed == modifiers.meta.wanted) {\n",
       "\t\t\t\tcallback(e);\n",
       "\t\n",
       "\t\t\t\tif(!opt['propagate']) { //Stop the event\n",
       "\t\t\t\t\t//e.cancelBubble is supported by IE - this will kill the bubbling process.\n",
       "\t\t\t\t\te.cancelBubble = true;\n",
       "\t\t\t\t\te.returnValue = false;\n",
       "\t\n",
       "\t\t\t\t\t//e.stopPropagation works in Firefox.\n",
       "\t\t\t\t\tif (e.stopPropagation) {\n",
       "\t\t\t\t\t\te.stopPropagation();\n",
       "\t\t\t\t\t\te.preventDefault();\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t\treturn false;\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\t\tthis.all_shortcuts[shortcut_combination] = {\n",
       "\t\t\t'callback':func, \n",
       "\t\t\t'target':ele, \n",
       "\t\t\t'event': opt['type']\n",
       "\t\t};\n",
       "\t\t//Attach the function with the event\n",
       "\t\tif(ele.addEventListener) ele.addEventListener(opt['type'], func, false);\n",
       "\t\telse if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);\n",
       "\t\telse ele['on'+opt['type']] = func;\n",
       "\t},\n",
       "\n",
       "\t//Remove the shortcut - just specify the shortcut and I will remove the binding\n",
       "\t'remove':function(shortcut_combination) {\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\t\tvar binding = this.all_shortcuts[shortcut_combination];\n",
       "\t\tdelete(this.all_shortcuts[shortcut_combination])\n",
       "\t\tif(!binding) return;\n",
       "\t\tvar type = binding['event'];\n",
       "\t\tvar ele = binding['target'];\n",
       "\t\tvar callback = binding['callback'];\n",
       "\n",
       "\t\tif(ele.detachEvent) ele.detachEvent('on'+type, callback);\n",
       "\t\telse if(ele.removeEventListener) ele.removeEventListener(type, callback, false);\n",
       "\t\telse ele['on'+type] = false;\n",
       "\t}\n",
       "}\n",
       "\n",
       "shortcut.add(\"Alt+Left\",function() {\n",
       "\tvar event = new Event('click');\n",
       "\tif (settingsShown){\n",
       "\t\tdocument.getElementById('hideSettingsButton_0').dispatchEvent(event);\n",
       "\t} else {\n",
       "\t\tdocument.getElementById('showSettingsButton_0').dispatchEvent(event);\n",
       "\t}\n",
       "});\n",
       "\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "});});\n",
       "      </script>\n",
       "   </body>\n",
       "</html>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<details><summary><pre style=\"display:inline\"><small>Click here for additional output</small></pre></summary>\n",
       "<pre>\n",
       "polymake: used package cdd\n",
       "  cddlib\n",
       "  Implementation of the double description method of Motzkin et al.\n",
       "  Copyright by Komei Fukuda.\n",
       "  http://www-oldurls.inf.ethz.ch/personal/fukudak/cdd_home/\n",
       "\n",
       "polymake: used package threejs\n",
       "   Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser.\n",
       "   See http://github.com/mrdoob for the source code.\n",
       "\n",
       "</pre>\n",
       "</details>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "simplex(3)->VISUAL;"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "By default, this will open `jReality` and show you a tetrahedron in a pretty color. See the [visual_tutorial#Backends](visual_tutorial.ipynb#Backends) section for more information on using other backends.\n",
    "\n",
    "\n",
    "To get a list of visualization methods available, you can use the build-in help system. To obtain the visualization possibilities for, e.g., Polytopes in application `polytope`, type:\n",
    "\n",
    "    \n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       " These methods are for visualization.\n",
       "\n",
       "-------------------\n",
       "Subtopics of polytope/objects/Polytope/methods/Visualization:\n",
       "GALE, SCHLEGEL, VISUAL, VISUAL_DUAL, VISUAL_DUAL_FACE_LATTICE, VISUAL_DUAL_GRAPH, VISUAL_FACE_LATTICE, VISUAL_GRAPH, VISUAL_ORBIT_COLORED_GRAPH, write_stl\n"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "help 'objects/Polytope/methods/Visualization';"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "    \n",
    "    Subtopics of objects/Polytope/methods/Visualization:\n",
    "    GALE, SCHLEGEL, VISUAL, VISUAL_BOUNDED_GRAPH, VISUAL_DUAL, VISUAL_DUAL_FACE_LATTICE,\n",
    "    VISUAL_DUAL_GRAPH, VISUAL_FACE_LATTICE, VISUAL_GRAPH, VISUAL_TRIANGULATION_BOUNDARY\n",
    "\n",
    "Most visualization methods provide a variety of parameters. Get a list for the method of yout choice (here: `VISUAL`) by typing\n",
    "\n",
    "    \n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "VISUAL(Options) -> Visual::Polytope\n",
       "\n",
       " Visualize a polytope as a graph (if 1d), or as a solid object (if 2d or 3d),\n",
       " or as a Schlegel diagram (4d).\n",
       "\n",
       "Options:  Attributes modifying the appearance of a set of polygons (like a polygonal surface).\n",
       "  \u001b[4mFacetColor\u001b[24m => Flexible<Color> filling color of the polygons\n",
       "  \u001b[4mFacetTransparency\u001b[24m => Flexible<Float> transparency factor of the polygons between 0 (opaque) and 1 (completely translucent)\n",
       "  \u001b[4mFacetStyle\u001b[24m => Flexible<String> if set to \"hidden\", the inner area of the polygons are not rendered at all\n",
       "  \u001b[4mFacetLabels\u001b[24m => String if set to \"hidden\", the facet labels are not displayed (in the most cases this is the default behavior)\n",
       "  \u001b[4mEdgeColor\u001b[24m => Color color of the boundary lines\n",
       "  \u001b[4mEdgeThickness\u001b[24m => Float scaling factor for the thickness of the boundary lines\n",
       "  \u001b[4mEdgeStyle\u001b[24m => String if set to \"hidden\", the boundary lines are not rendered\n",
       "  \u001b[4mTitle\u001b[24m => String the name of the drawing\n",
       "  \u001b[4mName\u001b[24m => String the name of this visual object in the drawing\n",
       "  \u001b[4mHidden\u001b[24m => Bool if set to true, the visual object is not rendered\n",
       "    (useful for interactive visualization programs allowing for switching details on and off)\n",
       "  \u001b[4mPointLabels\u001b[24m => String if set to \"hidden\", no point labels are displayed\n",
       "  \u001b[4mVertexLabels\u001b[24m => String alias for PointLabels\n",
       "  \u001b[4mPointColor\u001b[24m => Flexible<Color> color of the spheres or rectangles representing the points\n",
       "  \u001b[4mVertexColor\u001b[24m => Flexible<Color> alias for PointColor\n",
       "  \u001b[4mPointThickness\u001b[24m => Flexible<Float> scaling factor for the size of the spheres or rectangles representing the points\n",
       "  \u001b[4mVertexThickness\u001b[24m => Flexible<Float> alias for PointThickness\n",
       "  \u001b[4mPointBorderColor\u001b[24m => Flexible<Color> color of the border line of rectangles representing the points\n",
       "  \u001b[4mVertexBorderColor\u001b[24m => Flexible<Float> alias for PointBorderColor\n",
       "  \u001b[4mPointBorderThickness\u001b[24m => Flexible<Float> scaling factor for the thickness of the border line of rectangles representing the points\n",
       "  \u001b[4mVertexBorderThickness\u001b[24m => Flexible<Float> alias for PointBorderThickness\n",
       "  \u001b[4mPointStyle\u001b[24m => Flexible<String> if set to \"hidden\", neither point nor its label is rendered\n",
       "  \u001b[4mVertexStyle\u001b[24m => Flexible<String> alias for PointStyle\n",
       "  \u001b[4mViewPoint\u001b[24m => Vector<Float> ViewPoint for Sketch visualization\n",
       "  \u001b[4mViewDirection\u001b[24m => Vector<Float> ViewDirection for Sketch visualization\n",
       "  \u001b[4mViewUp\u001b[24m => Vector<Float> ViewUp for Sketch visualization\n",
       "  \u001b[4mScale\u001b[24m => Float scale for Sketch visualization\n",
       "  \u001b[4mLabelAlignment\u001b[24m => Flexible<String> Defines the alignment of the vertex labels: left, right or center\n",
       "\n",
       "Options:  Attributes modifying the appearance of \"wire frameworks\".\n",
       " Unlike the rest, the flexible edge attributes are retrieved using the \u001b[4medge iterator\u001b[24m as an index/key/argument.\n",
       "  \u001b[4mEdgeColor\u001b[24m => Flexible<Color> color of the lines representing the edges\n",
       "  \u001b[4mEdgeThickness\u001b[24m => Flexible<Float> scaling factor for the thickness of the lines representing the edges\n",
       "  \u001b[4mEdgeLabels\u001b[24m => EdgeMap<String> textual labels to be placed along the edges\n",
       "  \u001b[4mEdgeStyle\u001b[24m => Flexible<String> if set to \"hidden\", neither the edge nor its label is rendered\n",
       "  \u001b[4mTitle\u001b[24m => String the name of the drawing\n",
       "  \u001b[4mName\u001b[24m => String the name of this visual object in the drawing\n",
       "  \u001b[4mHidden\u001b[24m => Bool if set to true, the visual object is not rendered\n",
       "    (useful for interactive visualization programs allowing for switching details on and off)\n",
       "  \u001b[4mPointLabels\u001b[24m => String if set to \"hidden\", no point labels are displayed\n",
       "  \u001b[4mVertexLabels\u001b[24m => String alias for PointLabels\n",
       "  \u001b[4mPointColor\u001b[24m => Flexible<Color> color of the spheres or rectangles representing the points\n",
       "  \u001b[4mVertexColor\u001b[24m => Flexible<Color> alias for PointColor\n",
       "  \u001b[4mPointThickness\u001b[24m => Flexible<Float> scaling factor for the size of the spheres or rectangles representing the points\n",
       "  \u001b[4mVertexThickness\u001b[24m => Flexible<Float> alias for PointThickness\n",
       "  \u001b[4mPointBorderColor\u001b[24m => Flexible<Color> color of the border line of rectangles representing the points\n",
       "  \u001b[4mVertexBorderColor\u001b[24m => Flexible<Float> alias for PointBorderColor\n",
       "  \u001b[4mPointBorderThickness\u001b[24m => Flexible<Float> scaling factor for the thickness of the border line of rectangles representing the points\n",
       "  \u001b[4mVertexBorderThickness\u001b[24m => Flexible<Float> alias for PointBorderThickness\n",
       "  \u001b[4mPointStyle\u001b[24m => Flexible<String> if set to \"hidden\", neither point nor its label is rendered\n",
       "  \u001b[4mVertexStyle\u001b[24m => Flexible<String> alias for PointStyle\n",
       "  \u001b[4mViewPoint\u001b[24m => Vector<Float> ViewPoint for Sketch visualization\n",
       "  \u001b[4mViewDirection\u001b[24m => Vector<Float> ViewDirection for Sketch visualization\n",
       "  \u001b[4mViewUp\u001b[24m => Vector<Float> ViewUp for Sketch visualization\n",
       "  \u001b[4mScale\u001b[24m => Float scale for Sketch visualization\n",
       "  \u001b[4mLabelAlignment\u001b[24m => Flexible<String> Defines the alignment of the vertex labels: left, right or center\n",
       "\n",
       "Options:  Common attributes modifying the appearance of PointSets and all visual objects derived thereof.\n",
       " Please be aware that no one visualization program interfaced to polymake supports all of them.\n",
       " Unsupported options are normally ignored.\n",
       "  \u001b[4mTitle\u001b[24m => String the name of the drawing\n",
       "  \u001b[4mName\u001b[24m => String the name of this visual object in the drawing\n",
       "  \u001b[4mHidden\u001b[24m => Bool if set to true, the visual object is not rendered\n",
       "    (useful for interactive visualization programs allowing for switching details on and off)\n",
       "  \u001b[4mPointLabels\u001b[24m => String if set to \"hidden\", no point labels are displayed\n",
       "  \u001b[4mVertexLabels\u001b[24m => String alias for PointLabels\n",
       "  \u001b[4mPointColor\u001b[24m => Flexible<Color> color of the spheres or rectangles representing the points\n",
       "  \u001b[4mVertexColor\u001b[24m => Flexible<Color> alias for PointColor\n",
       "  \u001b[4mPointThickness\u001b[24m => Flexible<Float> scaling factor for the size of the spheres or rectangles representing the points\n",
       "  \u001b[4mVertexThickness\u001b[24m => Flexible<Float> alias for PointThickness\n",
       "  \u001b[4mPointBorderColor\u001b[24m => Flexible<Color> color of the border line of rectangles representing the points\n",
       "  \u001b[4mVertexBorderColor\u001b[24m => Flexible<Float> alias for PointBorderColor\n",
       "  \u001b[4mPointBorderThickness\u001b[24m => Flexible<Float> scaling factor for the thickness of the border line of rectangles representing the points\n",
       "  \u001b[4mVertexBorderThickness\u001b[24m => Flexible<Float> alias for PointBorderThickness\n",
       "  \u001b[4mPointStyle\u001b[24m => Flexible<String> if set to \"hidden\", neither point nor its label is rendered\n",
       "  \u001b[4mVertexStyle\u001b[24m => Flexible<String> alias for PointStyle\n",
       "  \u001b[4mViewPoint\u001b[24m => Vector<Float> ViewPoint for Sketch visualization\n",
       "  \u001b[4mViewDirection\u001b[24m => Vector<Float> ViewDirection for Sketch visualization\n",
       "  \u001b[4mViewUp\u001b[24m => Vector<Float> ViewUp for Sketch visualization\n",
       "  \u001b[4mScale\u001b[24m => Float scale for Sketch visualization\n",
       "  \u001b[4mLabelAlignment\u001b[24m => Flexible<String> Defines the alignment of the vertex labels: left, right or center\n",
       "\n",
       "Options:  Options for visualizing objects with homogeneous coordinates like Polytope, PolyhedralComplex, SubdivisionOfPoints and PointConfiguration.\n",
       "  \u001b[4mBoundingFacets\u001b[24m => Matrix useful for unbounded polyhedra\n",
       "  \u001b[4mTransformation\u001b[24m => Matrix<Float> linear transformation, to be applied after dehomogenization\n",
       "  \u001b[4mOffset\u001b[24m => Vector<Float> shift, to be applied after dehomogenization and the linear transformation\n",
       "\n",
       "Returns Visual::Polytope \n",
       "\n"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "help 'objects/Polytope/methods/Visualization/VISUAL';"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "The syntax for passing parameters can be seen in this example:\n",
    "\n",
    "    \n",
    "    simplex(3)->VISUAL(EdgeThickness => 10);\n",
    "\n",
    "It visualizes a tetrahedron with really thick edges. See the section on [visual_tutorial#application polytope](visual_tutorial#application polytope) for more.\n",
    "\n",
    "### Specifying colors\n",
    "\n",
    "Some visualization methods requite you to specify colors. There are various ways of doing this in polymake, i.e. the color red may be given by\n",
    "\n",
    "*  the String `'red`', which will be looked up in rgb.txt to obtain the rgb values,\n",
    "\n",
    "*  the String `'1 0 0`', which contains three decimal values in the interval [0,1] corresponding to the 'r g b'-values of the color,\n",
    "\n",
    "*  the String `'255 0 0`', which contains three integer values in the interval [0,255] corresponding to the 'r g b'-values of the color,\n",
    "\n",
    "*  an object `new RGB(1,0,0)` of polymake's RGB class.\n",
    "\n",
    "## application polytope\n",
    "\n",
    "The application 'polytope' contains a large amount of visualization routines. Most\n",
    "of them allow you to change the way things look a various ways. See the following\n",
    "subsections for examples.\n",
    "\n",
    "### Changing vertex attributes \n",
    "\n",
    "It is possible to change the way the vertices are displayed directly from the command line. In the following we will explain how to change the color, labels, and size of the vertices.\n",
    "\n",
    "#### Colors\n",
    "\n",
    "There are different ways to specify the colors of the vertices. You may choose a single color for all vertices or set each vertex color individually. \n",
    "\n",
    "**Single color**: To specify one color for all vertices use the *VertexColor* attribute of the *VISUAL* method: \n",
    "\n",
    "    \n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!--\n",
       "polymake for knusper\n",
       "Thu Aug 27 11:44:14 2020\n",
       "unnamed\n",
       "-->\n",
       "\n",
       "\n",
       "<html>\n",
       "   <head>\n",
       "      <meta charset=utf-8>\n",
       "      <title>unnamed</title>\n",
       "      <style>\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "*/\n",
       "         html {overflow: scroll;}\n",
       "         strong{font-size: 18px;}\n",
       "         canvas { z-index: 8; }\n",
       "         input[type='radio'] {margin-left:0;}\n",
       "         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}\n",
       "         .group{padding-bottom: 15px;}\n",
       "         .settings * {z-index: 11; }\n",
       "         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}\n",
       "         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} \n",
       "         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}\n",
       "         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }\n",
       "         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}\n",
       "         button{margin-left: 0; margin-top: 10px}\n",
       "         img{cursor: pointer;}\n",
       "         .suboption{padding-top: 15px;}\n",
       "         #model20014478019 { width: 100%; height: 100%; }\n",
       "         .threejs_container { width: 100%; height: 75vh;}\n",
       "         .settings{max-height: 74vh} \n",
       "         input[type=range] {\n",
       "           -webkit-appearance: none;\n",
       "           padding:0; \n",
       "           width:90%; \n",
       "           margin-left: auto;\n",
       "           margin-right: auto;\n",
       "           margin-top: 15px;\n",
       "           margin-bottom: 15px;\n",
       "           display: block;\t\n",
       "         }\n",
       "         input[type=range]:focus {\n",
       "           outline: none;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-runnable-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "           -webkit-appearance: none;\n",
       "           margin-top: -5px;\n",
       "         }\n",
       "         input[type=range]:focus::-webkit-slider-runnable-track {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]::-moz-range-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-moz-range-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]::-ms-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           background: transparent;\n",
       "           border-color: transparent;\n",
       "           color: transparent;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_END\n",
       "*/\n",
       "\t\t</style>\n",
       "   </head>\n",
       "<body>\n",
       "   <div class='threejs_container'>\n",
       "\t\t<div id='settings_1' class='settings'>\n",
       "\t\t\t<div class=group id='transparency_1' class='transparency'>\n",
       "\t\t\t\t<strong>Transparency</strong>\n",
       "\t\t\t\t<input id='transparencyRange_1' type='range' min=0 max=1 step=0.01 value=0>\n",
       "\t\t\t</div>\n",
       "\t\t\t\n",
       "\t\t\t<div class=group id='rotation_1'>\n",
       "\t\t\t\t<strong>Rotation</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationX_1'> x-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationY_1'> y-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationZ_1'> z-axis</div>\n",
       "\t\t\t\t\t<button id='resetButton_1'>Reset</button>\n",
       "\t\t\t\t</div>\n",
       "\n",
       "\t\t\t\t<div class=suboption>Rotation speed</div>\n",
       "\t\t\t\t<input id='rotationSpeedRange_1' type='range' min=0 max=5 step=0.01 value=2>\n",
       "\t\t\t</div>\n",
       "\n",
       "\n",
       "\t\t\t<div class=group id='display_1'>\n",
       "\t\t\t\t<strong>Display</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div id='shownObjectTypesList_1' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t\t<div class=suboption>Objects</div>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t   <div id='shownObjectsList_1' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "         \n",
       "         <div class=group id='camera_1'>\n",
       "            <strong>Camera</strong>\n",
       "            <div class=indented>\n",
       "               <form>\n",
       "                  <select id=\"cameraType_1\">\n",
       "                     <option value='perspective' selected> Perspective<br></option>\n",
       "                     <option value='orthographic' > Orthographic<br></option>\n",
       "                  </select>\n",
       "               </form>\n",
       "            </div>\n",
       "         </div>\n",
       "\n",
       "\t\t\t<div class=group id='svg_1'>\n",
       "\t\t\t\t<strong>SVG</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<form>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='download' id='download_1' checked> Download<br>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='tab' id='tab_1' > New tab<br>\n",
       "\t\t\t\t\t</form>\n",
       "\t\t\t\t\t<button id='takeScreenshot_1'>Screenshot</button>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "\n",
       "\t\t</div>\t<!-- end of settings -->\n",
       "\t\t<img id='hideSettingsButton_1' class='hideSettingsButton' src='/kernelspecs/polymake/close.svg' width=20px\">\n",
       "\t\t<img id='showSettingsButton_1' class='showSettingsButton' src='/kernelspecs/polymake/menu.svg' width=20px\">\n",
       "<div id=\"model20014478019\"></div>\n",
       "</div>\n",
       "   <script>\n",
       "    requirejs.config({\n",
       "      paths: {\n",
       "        three: '/kernelspecs/polymake/three',\n",
       "        TrackballControls: '/kernelspecs/polymake/TrackballControls',\n",
       "        OrbitControls: '/kernelspecs/polymake/OrbitControls',\n",
       "        Projector: '/kernelspecs/polymake/Projector',\n",
       "        SVGRenderer: '/kernelspecs/polymake/SVGRenderer',\n",
       "        WEBGL: '/kernelspecs/polymake/WebGL',\n",
       "      },\n",
       "      shim: {\n",
       "        'three': { exports: 'THREE'},\n",
       "        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },\n",
       "        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },\n",
       "        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },\n",
       "        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },\n",
       "        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },\n",
       "      }\n",
       "    });\n",
       "    \n",
       "    require(['three'],function(THREE){\n",
       "        window.THREE = THREE;\n",
       "      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],\n",
       "               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {\n",
       "    THREE.TrackballControls = TrackballControls;\n",
       "    THREE.OrbitControls = OrbitControls;\n",
       "    THREE.Projector = Projector;\n",
       "    THREE.SVGRenderer = SVGRenderer;\n",
       "    THREE.WEBGL = WEBGL;\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "\n",
       "const intervalLength = 25; // for automatic animations\n",
       "const explodableModel = false; \n",
       "const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };\n",
       "const foldables = [];\n",
       "\n",
       "var three = document.getElementById(\"model20014478019\");\n",
       "var scene = new THREE.Scene();\n",
       "var renderer = new THREE.WebGLRenderer( { antialias: true } );\n",
       "var svgRenderer = new THREE.SVGRenderer( { antialias: true } );\n",
       "renderer.setPixelRatio( window.devicePixelRatio );\n",
       "renderer.setClearColor(0xFFFFFF, 1);\n",
       "svgRenderer.setClearColor(0xFFFFFF, 1);\n",
       "three.appendChild(renderer.domElement);\n",
       "\n",
       "var frustumSize = 4;\n",
       "var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];\n",
       "cameras.forEach(function(cam) {\n",
       "    cam.position.set(0, 0, 5);\n",
       "    cam.lookAt(0, 0, 0);  \n",
       "    cam.up.set(0, 1, 0);         \n",
       "});\n",
       "var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];\n",
       "var camera, control;\n",
       "\n",
       "controls[0].zoomSpeed = 0.2;\n",
       "controls[0].rotateSpeed = 4;\n",
       "\n",
       "\n",
       "// class to allow move points together with labels and spheres\n",
       "var PMPoint = function (x,y,z) {\n",
       "   this.vector = new THREE.Vector3(x,y,z);\n",
       "   this.sprite = null;\n",
       "   this.sphere = null;\n",
       "}\n",
       "PMPoint.prototype.addLabel = function(labelsprite) {\n",
       "   this.sprite = labelsprite;\n",
       "   this.sprite.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.addSphere = function(spheremesh) {\n",
       "   this.sphere = spheremesh;\n",
       "   this.sphere.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.set = function(x,y,z) {\n",
       "   this.vector.set(x,y,z);\n",
       "   if (this.sprite) {\n",
       "      this.sprite.position.copy(this.vector);\n",
       "   }\n",
       "   if (this.sphere) {\n",
       "      this.sphere.position.copy(this.vector);\n",
       "   }\n",
       "}\n",
       "PMPoint.prototype.radius = function() {\n",
       "   if (this.sphere) {\n",
       "      return this.sphere.geometry.parameters.radius;\n",
       "   } else {\n",
       "      return 0;\n",
       "   }\n",
       "};\n",
       "// select the target node\n",
       "var target = document.querySelector('#model20014478019');\n",
       "\n",
       "// create an observer instance\n",
       "var observer = new MutationObserver(function(mutations) {\n",
       "   mutations.forEach(function(mutation) {\n",
       "      if (mutation.removedNodes && mutation.removedNodes.length > 0) {\n",
       "         cancelAnimationFrame(renderId);\n",
       "         observer.disconnect();\n",
       "         console.log(\"cancelled frame \"+renderId);\n",
       "      }\n",
       "   });\n",
       "});\n",
       "\n",
       "// configuration of the observer:\n",
       "var config = { childList: true, characterData: true }\n",
       "\n",
       "// pass in the target node, as well as the observer options\n",
       "while (target) {\n",
       "   if (target.className==\"output\") {\n",
       "      observer.observe(target, config);\n",
       "      break;\n",
       "   }\n",
       "   target = target.parentNode;\n",
       "}\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "var obj0 = new THREE.Object3D();\n",
       "obj0.name = \"unnamed__1\";\n",
       "obj0.userData.explodable = 1;\n",
       "obj0.userData.points = [];\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(1, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 1, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 1));\n",
       "\n",
       "obj0.userData.pointradii = 0.02;\n",
       "   <!-- Vertex style -->\n",
       "obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0x0064C8, side: THREE.DoubleSide, transparent: false } );\n",
       "obj0.userData.pointlabels = [\"0\", \"1\", \"2\", \"3\"];\n",
       "obj0.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];\n",
       "   <!-- Edge style -->\n",
       "obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } );\n",
       "obj0.userData.facets = [[2, 3, 1], [0, 3, 2], [1, 3, 0], [2, 1, 0]];\n",
       "   <!-- Facet style -->\n",
       "obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );\n",
       "init_object(obj0);\n",
       "scene.add(obj0);\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "function textSpriteMaterial(message, parameters) {\n",
       "    if ( parameters === undefined ) parameters = {};\n",
       "    var fontface = \"Helvetica\";\n",
       "    var fontsize = parameters.hasOwnProperty(\"fontsize\") ? parameters[\"fontsize\"] : 15;\n",
       "    fontsize = fontsize*10;\n",
       "    var lines = message.split('\\\\n');\n",
       "    var size = 512;\n",
       "    for(var i = 0; i<lines.length; i++){\n",
       "        var tmp = lines[i].length;\n",
       "        while(tmp*fontsize > size){\n",
       "           fontsize--;\n",
       "        }\n",
       "    }\n",
       "    \n",
       "    var canvas = document.createElement('canvas');\n",
       "    canvas.width = size;\n",
       "    canvas.height = size;\n",
       "    var context = canvas.getContext('2d');\n",
       "    context.fillStyle = \"rgba(255, 255, 255, 0)\";\n",
       "    context.fill();\n",
       "    context.font = fontsize + \"px \" + fontface;\n",
       "    \n",
       "    // text color\n",
       "    context.fillStyle = \"rgba(0, 0, 0, 1.0)\";\n",
       "     for(var i = 0; i<lines.length; i++){\n",
       "        context.fillText(lines[i], size/2, size/2+i*fontsize);\n",
       "     }\n",
       "    \n",
       "    // canvas contents will be used for a texture\n",
       "    var texture = new THREE.Texture(canvas);\n",
       "    texture.needsUpdate = true;\n",
       "    \n",
       "    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });\n",
       "    return spriteMaterial;\n",
       "}\n",
       "\n",
       "\n",
       "// ---------------------- INITIALIZING OBJECTS--------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function init_object(obj) {\n",
       "    if (obj.userData.hasOwnProperty(\"pointmaterial\")) {\n",
       "        init_points(obj);\n",
       "        modelContains.points = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"pointlabels\")) {\n",
       "        init_pointlabels(obj);\n",
       "        modelContains.pointlabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgematerial\")) {\n",
       "        init_lines(obj);\n",
       "        modelContains.lines = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgelabels\")) {\n",
       "        init_edgelabels(obj);\n",
       "        modelContains.edgelabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"arrowstyle\")) {\n",
       "        init_arrowheads(obj);\n",
       "        modelContains.arrowheads = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"facetmaterial\")) {\n",
       "        init_faces(obj);\n",
       "        modelContains.faces = true;\n",
       "    }\n",
       "}\n",
       "\n",
       "function init_points(obj) {\n",
       "    var pointgroup = new THREE.Group();\n",
       "    pointgroup.name = \"points\";\n",
       "    var points = obj.userData.points;\n",
       "    var radii = obj.userData.pointradii;\n",
       "    var materials = obj.userData.pointmaterial;\n",
       "    var geometry,material;\n",
       "    if (!Array.isArray(radii)) {\n",
       "        geometry = new THREE.SphereBufferGeometry(radii);  \n",
       "    }\n",
       "    if (!Array.isArray(materials)) {\n",
       "        material = materials;\n",
       "    }\n",
       "    for (var i=0; i<points.length; i++) {\n",
       "        var point = points[i];\n",
       "        if (Array.isArray(radii)) {\n",
       "            if (radii[i] == 0) {\n",
       "                continue;\n",
       "            }\n",
       "            geometry = new THREE.SphereBufferGeometry(radii[i]);  \n",
       "        } \n",
       "        if (Array.isArray(materials)) {\n",
       "            material = materials[i];     \n",
       "        } \n",
       "        var sphere = new THREE.Mesh(geometry, material);\n",
       "        point.addSphere(sphere);\n",
       "        pointgroup.add(sphere);\n",
       "    }\n",
       "    obj.add(pointgroup);\n",
       "}\n",
       "\n",
       "function init_pointlabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var labels = obj.userData.pointlabels;\n",
       "    var pointlabels = new THREE.Group();\n",
       "    pointlabels.name = \"pointlabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(pointlabels);\n",
       "}\n",
       "\n",
       "function init_lines(obj) {\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var points = obj.userData.points;\n",
       "    var materials = obj.userData.edgematerial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    var bufarr = new Float32Array( obj.userData.edgeindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute( bufarr, 3 );\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position', bufattr);\n",
       "    if (Array.isArray(materials)) {     \n",
       "        for (var i=0; i<materials.length; i++) {\n",
       "            geometry.addGroup(2*i,2,i);\n",
       "        }\n",
       "    }\n",
       "    var lines = new THREE.LineSegments(geometry, materials);\n",
       "    lines.name = \"lines\";\n",
       "    obj.add(lines);\n",
       "    updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "function init_edgelabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var labels = obj.userData.edgelabels;\n",
       "    var edgelabels = new THREE.Group();\n",
       "    edgelabels.name = \"edgelabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            edgelabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(edgelabels);\n",
       "}\n",
       "\n",
       "function init_arrowheads(obj) {\n",
       "    var arrowheads = new THREE.Group();\n",
       "    arrowheads.name = \"arrowheads\";\n",
       "    var arrowstyle = obj.userData.arrowstyle;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var edgematerials = obj.userData.edgematerial;\n",
       "    var points = obj.userData.points;\n",
       "    var material;\n",
       "    if (!Array.isArray(edgematerials)) {\n",
       "        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );\n",
       "    }\n",
       "\n",
       "    for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "        var start = points[edgeindices[i]];\n",
       "        var end = points[edgeindices[i+1]];\n",
       "        var dist = start.vector.distanceTo( end.vector ) - start.radius() - end.radius();\n",
       "        if (dist <= 0) {\n",
       "            continue;\n",
       "        }\n",
       "        var dir = new THREE.Vector3().subVectors(end.vector,start.vector);\n",
       "        dir.normalize();\n",
       "        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);\n",
       "        axis.normalize();\n",
       "        var radians = Math.acos( dir.y );\n",
       "        var radius = dist/25;\n",
       "        var height = dist/5;\n",
       "        var geometry = new THREE.ConeBufferGeometry(radius,height);\n",
       "        var position = new THREE.Vector3().addVectors(start.vector,dir.clone().multiplyScalar(start.radius()+dist-height/2));\n",
       "        if (Array.isArray(edgematerials)) {\n",
       "            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );\n",
       "        }\n",
       "        var cone = new THREE.Mesh( geometry, material );\n",
       "        cone.quaternion.setFromAxisAngle(axis,radians);;\n",
       "        cone.position.copy(position);;\n",
       "        arrowheads.add(cone);\n",
       "    }\n",
       "    obj.add(arrowheads);\n",
       "}\n",
       "\n",
       "function init_faces(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var facets = obj.userData.facets;\n",
       "    obj.userData.triangleindices = [];\n",
       "    for (var i=0; i<facets.length; i++) {\n",
       "        facet = facets[i];\n",
       "        for (var t=0; t<facet.length-2; t++) {\n",
       "            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  \n",
       "        }\n",
       "    }\n",
       "    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);\n",
       "    \n",
       "    var materials = obj.userData.facetmaterial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position',bufattr);\n",
       "    if (Array.isArray(materials)) {\n",
       "        var tricount = 0;\n",
       "        var facet;\n",
       "        for (var i=0; i<facets.length; i++) {\n",
       "            facet = facets[i];\n",
       "            geometry.addGroup(tricount,(facet.length-2)*3,i);\n",
       "            tricount += (facet.length-2)*3;\n",
       "        }\n",
       "    }\n",
       "    var mesh = new THREE.Mesh(geometry, materials);\n",
       "    mesh.name = \"faces\";\n",
       "    obj.add(mesh); \n",
       "    updateFacesPosition(obj);\n",
       "}\n",
       "// //INITIALIZING\n",
       "\n",
       "\n",
       "function updateFacesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.triangleindices;\n",
       "    var faces = obj.getObjectByName(\"faces\");\n",
       "    var ba = faces.geometry.getAttribute(\"position\");\n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    faces.geometry.attributes.position.needsUpdate = true;\n",
       "    \n",
       "}\n",
       "\n",
       "function updateEdgesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.edgeindices;\n",
       "    var lines = obj.getObjectByName(\"lines\");\n",
       "    var ba = lines.geometry.getAttribute(\"position\"); \n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    lines.geometry.attributes.position.needsUpdate = true;\n",
       "}\n",
       "\n",
       "function onWindowResize() {\n",
       "    renderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    svgRenderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "function updateCamera() {\n",
       "    var width = three.clientWidth;\n",
       "    var height = three.clientHeight;\n",
       "    var aspect = width / height;\n",
       "    if (camera.type == \"OrthographicCamera\") {\n",
       "        camera.left = frustumSize * aspect / - 2;\n",
       "        camera.right = frustumSize * aspect / 2;\n",
       "        camera.top = frustumSize / 2;\n",
       "        camera.bottom = - frustumSize / 2;\n",
       "    } else if (camera.type == \"PerspectiveCamera\") {\n",
       "        camera.aspect = aspect;\n",
       "    }\n",
       "    camera.updateProjectionMatrix();\n",
       "}\n",
       "\n",
       "function changeCamera(event) {\n",
       "    var selindex = event.currentTarget.selectedIndex;\n",
       "    camera = cameras[selindex];\n",
       "    control = controls[selindex];\n",
       "    control.enabled = true; \n",
       "    for (var i=0; i<controls.length; i++) {\n",
       "        if (i!=selindex) {\n",
       "            controls[i].enabled = false;\n",
       "        }\n",
       "    }\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "var camtypenode = document.getElementById('cameraType_1');\n",
       "camtypenode.onchange = changeCamera;\n",
       "camtypenode.dispatchEvent(new Event('change'));\n",
       "\n",
       "onWindowResize();\n",
       "window.addEventListener('resize', onWindowResize);\t\n",
       "\n",
       "\n",
       "var xRotationEnabled = false;\n",
       "var yRotationEnabled = false;\n",
       "var zRotationEnabled = false;\n",
       "var rotationSpeedFactor = 1;\n",
       "var settingsShown = false;\n",
       "var labelsShown = true;\n",
       "var intervals = [];\n",
       "var timeouts = [];\n",
       "var explodingSpeed = 0.05;\n",
       "var explodeScale = 0;\n",
       "var XMLS = new XMLSerializer();\n",
       "var svgElement;\n",
       "var renderId;\n",
       "\n",
       "var render = function () {\n",
       "\n",
       "\trenderId = requestAnimationFrame(render);\n",
       "\n",
       "//\tcomment in for automatic explosion\n",
       "//\texplode(updateFactor());\n",
       "\n",
       "    var phi = 0.02 * rotationSpeedFactor;\n",
       "\n",
       "    if (xRotationEnabled) {\n",
       "        scene.rotation.x += phi;\n",
       "    }\n",
       "    if (yRotationEnabled) {\n",
       "        scene.rotation.y += phi;\n",
       "    }\n",
       "    if (zRotationEnabled) {\n",
       "        scene.rotation.z += phi;\n",
       "    }\n",
       "\n",
       "    control.update();\n",
       "    renderer.render(scene, camera);\n",
       "};\n",
       "\n",
       "if ( THREE.WEBGL.isWebGLAvailable() ) {\n",
       "\trender();\n",
       "} else {\n",
       "\tvar warning = WEBGL.getWebGLErrorMessage();\n",
       "\tthree.appendChild( warning );\n",
       "}\n",
       "    \n",
       "function changeTransparency() {\n",
       "    var opacity = 1-Number(event.currentTarget.value);\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        child = scene.children[i];\n",
       "        if ( child.userData.hasOwnProperty(\"facetmaterial\") ) {\n",
       "            if (Array.isArray(child.userData.facetmaterial)) {\n",
       "                for (var j=0; j<child.userData.facetmaterial.length; j++) {\n",
       "                    child.userData.facetmaterial[j].opacity = opacity;\n",
       "                }\n",
       "            } else {\n",
       "                child.userData.facetmaterial.opacity = opacity;\n",
       "            }    \n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function changeRotationX(event){\n",
       "    xRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationY(event){\n",
       "    yRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationZ(event){\n",
       "    zRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "\n",
       "function changeRotationSpeedFactor(event){\n",
       "    rotationSpeedFactor = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function resetScene(){\n",
       "    scene.rotation.set(0,0,0);\n",
       "    camera.position.set(0,0,5);\n",
       "    camera.up.set(0,1,0);\n",
       "}\n",
       "\n",
       "function showSettings(event){\n",
       "    document.getElementById('settings_1').style.visibility = 'visible';\n",
       "    document.getElementById('showSettingsButton_1').style.visibility = 'hidden';\n",
       "    document.getElementById('hideSettingsButton_1').style.visibility = 'visible';\n",
       "    settingsShown = true;\n",
       "}\n",
       "\n",
       "function hideSettings(event){\n",
       "    document.getElementById('settings_1').style.visibility = 'hidden';\n",
       "    document.getElementById('showSettingsButton_1').style.visibility = 'visible';\n",
       "    document.getElementById('hideSettingsButton_1').style.visibility = 'hidden';\n",
       "    settingsShown = false;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "var pos = 150* Math.PI;\n",
       "\n",
       "function updateFactor() {\n",
       "    pos++;\n",
       "    return Math.sin(.01*pos)+1;\n",
       "}\n",
       "\n",
       "// ------------------------ FOLDING ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "// rotate point p around axis defined by points p1 and p2 by given angle\n",
       "function rotate(p, p1, p2, angle ){   \n",
       "    angle = -angle;\n",
       "    var x = p.x, y = p.y, z = p.z, \n",
       "    a = p1.x, b = p1.y, c = p1.z, \n",
       "    u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z;\n",
       "    var result = [];\n",
       "    var L = u*u + v*v + w*w;\n",
       "    var sqrt = Math.sqrt;\n",
       "    var cos = Math.cos;\n",
       "    var sin = Math.sin;\n",
       "\n",
       "    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;\n",
       "    result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L;\n",
       "    result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L;\n",
       "\n",
       "    return result;\n",
       "}\n",
       "\n",
       "var fold = function(event){\n",
       "    var obj = foldables[Number(event.currentTarget.name)];\n",
       "    var foldvalue = Number(event.currentTarget.value);\n",
       "    var scale = foldvalue - obj.userData.oldscale;\n",
       "\n",
       "    for (var j=0; j<obj.userData.axes.length; j++) {\n",
       "        rotateVertices(obj, j, scale);\n",
       "    }\n",
       "    update(obj);\n",
       "    obj.userData.oldscale += scale;\n",
       "    lookAtBarycenter(obj);\n",
       "}\n",
       "\n",
       "function lookAtBarycenter(obj){\n",
       "    control.target = barycenter(obj);\n",
       "}\n",
       "\n",
       "function barycenter(obj) {\n",
       "    var center = new THREE.Vector3(0,0,0);\n",
       "    var points = obj.userData.points;\n",
       "    for (var i=0; i<points.length; i++){\n",
       "        center.add(points[i].vector);\n",
       "    }\n",
       "    center.divideScalar(points.length);\n",
       "    return center;\n",
       "}\n",
       "\n",
       "function rotateVertices(obj, edge, scale) {\n",
       "    var axes = obj.userData.axes;\n",
       "    var subtrees = obj.userData.subtrees;\n",
       "    var points = obj.userData.points;\n",
       "    var angles = obj.userData.angles;\n",
       "    if (edge < axes.length){\n",
       "        for (var j=0; j<subtrees[edge].length; j++){\n",
       "            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));\n",
       "            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function update(obj) {\n",
       "   updateFacesPosition(obj);\n",
       "   updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "if (foldables.length) {\n",
       "    var settings = document.getElementById('settings_1');\n",
       "    var foldDiv = document.createElement('div');\n",
       "    foldDiv.id = 'fold_1';\n",
       "    var title = document.createElement('strong');\n",
       "    title.innerHTML = 'Fold';\n",
       "    foldDiv.appendChild(title);\n",
       "    foldDiv.className = 'group';\n",
       "    for (var i=0; i<foldables.length; i++) {\n",
       "        var range = document.createElement('input');\n",
       "        range.type = 'range';\n",
       "        range.min = 0;\n",
       "        range.max = 1;\n",
       "        range.value = 0;\n",
       "        range.step = 0.001;\n",
       "        range.name = String(i);\n",
       "        range.oninput = fold;\n",
       "        foldDiv.appendChild(range);\n",
       "    }\n",
       "    lookAtBarycenter(foldables[0]);\n",
       "    settings.insertBefore(foldDiv,settings.childNodes[0]);\n",
       "}\n",
       "\n",
       "    \n",
       "// ---------------------- EXPLOSION ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "if (explodableModel) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        obj = scene.children[i];\n",
       "        if ( obj.userData.explodable ) {\n",
       "            computeCentroid(obj);\n",
       "        }\n",
       "    }\n",
       "    document.getElementById('explodeRange_1').oninput = triggerExplode;\n",
       "    document.getElementById('explodeCheckbox_1').onchange = triggerAutomaticExplode;\n",
       "    document.getElementById('explodingSpeedRange_1').oninput = setExplodingSpeed;\n",
       "}\n",
       "\n",
       "function computeCentroid(obj) {\n",
       "    centroid = new THREE.Vector3();\n",
       "    obj.userData.points.forEach(function(pmpoint) {\n",
       "        centroid.add(pmpoint.vector);\t\t\t\n",
       "    });\n",
       "    centroid.divideScalar(obj.userData.points.length);\n",
       "    obj.userData.centroid = centroid;\n",
       "}\n",
       "\n",
       "function explode(factor) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        var obj = scene.children[i];\n",
       "        if (obj.userData.hasOwnProperty(\"centroid\")) { \n",
       "            var c = obj.userData.centroid;\n",
       "            obj.position.set(c.x*factor, c.y*factor, c.z*factor);\n",
       "        }\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function triggerExplode(event){\n",
       "    explodeScale = Number(event.currentTarget.value);\n",
       "    explode(explodeScale);\n",
       "}\n",
       "\n",
       "function setExplodingSpeed(event){\n",
       "    explodingSpeed = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function triggerAutomaticExplode(event){\n",
       "    if (event.currentTarget.checked){\n",
       "        startExploding();\n",
       "    } else {\n",
       "        clearIntervals();\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function startExploding(){\n",
       "    intervals.push(setInterval(explodingInterval, 25));\n",
       "}\n",
       "\n",
       "\n",
       "function explodingInterval(){\n",
       "    explodeScale += explodingSpeed;\n",
       "    if (explodeScale <= 6){ \n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else{\n",
       "        explode(6);\n",
       "        explodeScale = 6;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startUnexploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_1').value = explodeScale;\n",
       "}\n",
       "\n",
       "\n",
       "function startUnexploding(){\n",
       "    intervals.push(setInterval(unexplodingInterval, 25));\n",
       "}\n",
       "\n",
       "function unexplodingInterval(){\n",
       "    explodeScale -= explodingSpeed;\n",
       "    if (explodeScale >= 0){\t\n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else {\n",
       "        explode(0);\n",
       "        explodeScale = 0;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startExploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_1').value = explodeScale;\n",
       "}\n",
       "\n",
       "function clearIntervals(){\n",
       "    intervals.forEach(function(interval){\n",
       "        clearInterval(interval);\n",
       "    });\n",
       "    intervals = [];\n",
       "    timeouts.forEach(function(timeout){\n",
       "        clearTimeout(timeout);\n",
       "    });\n",
       "    timeouts = [];\n",
       "}\n",
       "\n",
       "// ---------------------- DISPLAY --------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "const objectTypeInnerHTMLs = { points: \"Points\", pointlabels: \"Point labels\", lines: \"Edges\", edgelabels: \"Edge labels\", faces: \"Faces\", arrowheads: \"Arrow heads\" };\n",
       "const objectTypeVisible = {};\n",
       "Object.assign(objectTypeVisible,modelContains);\n",
       "const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();\n",
       "const shownObjectTypesList = document.getElementById('shownObjectTypesList_1');\n",
       "\n",
       "function setVisibility(bool,objname) {\n",
       "    for (var i=0; i<scene.children.length; i++){\n",
       "        var obj = scene.children[i].getObjectByName(objname);\n",
       "        if (obj) {\n",
       "            obj.visible = bool;\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function toggleObjectTypeVisibility(event){\n",
       "    var name = event.currentTarget.name;\n",
       "    var checked = event.currentTarget.checked;\n",
       "    objectTypeVisible[name] = checked;\n",
       "    setVisibility(checked,name);\n",
       "}\n",
       "\n",
       "for (var i=0; i<sortedObjectTypeKeys.length; i++){\n",
       "    var key = sortedObjectTypeKeys[i];\n",
       "    if (modelContains[key]) {\n",
       "        var objTypeNode = document.createElement('span');\n",
       "        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';\n",
       "        var checkbox = document.createElement('input');\n",
       "        checkbox.type = 'checkbox';\n",
       "        checkbox.checked = true;\n",
       "        checkbox.name = key;\n",
       "        checkbox.onchange = toggleObjectTypeVisibility;\n",
       "        shownObjectTypesList.appendChild(checkbox);\n",
       "        shownObjectTypesList.appendChild(objTypeNode);\n",
       "    }\n",
       "}\n",
       "\n",
       "// ------------------------------------------------------\n",
       "\n",
       "function toggleObjectVisibility(event){\n",
       "    var nr = Number(event.currentTarget.name);\n",
       "    scene.children[nr].visible = event.currentTarget.checked;\n",
       "}\n",
       "\n",
       "// append checkboxes for displaying or hiding objects\n",
       "var shownObjectsList = document.getElementById('shownObjectsList_1');\n",
       "for (var i=0; i<scene.children.length; i++){\n",
       "    obj = scene.children[i];\n",
       "    var objNode = document.createElement('span');\n",
       "    objNode.innerHTML = obj.name + '<br>';\n",
       "    var checkbox = document.createElement('input');\n",
       "    checkbox.type = 'checkbox';\n",
       "    checkbox.checked = true;\n",
       "    checkbox.name = String(i);\n",
       "    checkbox.onchange = toggleObjectVisibility;\n",
       "    shownObjectsList.appendChild(checkbox);\n",
       "    shownObjectsList.appendChild(objNode);\n",
       "}\n",
       "\n",
       "// ---------------------- SVG ------------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function takeSvgScreenshot() {\n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(false,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(false,\"edgelabels\");\n",
       "    }\n",
       "    svgRenderer.render(scene,camera);\n",
       "    svgElement = XMLS.serializeToString(svgRenderer.domElement);\n",
       "    \n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(true,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(true,\"edgelabels\");\n",
       "    }\n",
       "\n",
       "    if (document.getElementById('tab_1').checked){\n",
       "        //show in new tab\n",
       "        var myWindow = window.open(\"\",\"\");\n",
       "        myWindow.document.body.innerHTML = svgElement;\n",
       "    } else{\n",
       "        // download svg file \n",
       "        download(\"screenshot.svg\", svgElement);\n",
       "    }\n",
       "}\n",
       "\n",
       "function download(filename, text) {\n",
       "    var element = document.createElement('a');\n",
       "    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));\n",
       "    element.setAttribute('download', filename);\n",
       "\n",
       "    element.style.display = 'none';\n",
       "    document.body.appendChild(element);\n",
       "\n",
       "    element.click();\n",
       "\n",
       "    document.body.removeChild(element);\n",
       "}\n",
       "\n",
       "\n",
       "document.getElementById('transparencyRange_1').oninput = changeTransparency;\n",
       "document.getElementById('changeRotationX_1').onchange = changeRotationX;\n",
       "document.getElementById('changeRotationY_1').onchange = changeRotationY;\n",
       "document.getElementById('changeRotationZ_1').onchange = changeRotationZ;\n",
       "document.getElementById('resetButton_1').onclick = resetScene;\n",
       "document.getElementById('rotationSpeedRange_1').oninput = changeRotationSpeedFactor;\n",
       "document.getElementById('takeScreenshot_1').onclick = takeSvgScreenshot;\n",
       "document.getElementById('showSettingsButton_1').onclick = showSettings;\n",
       "document.getElementById('hideSettingsButton_1').onclick = hideSettings;\n",
       "\n",
       "\n",
       "// ------------------ SHORTCUTS --------------------------------------------\n",
       "// -------------------------------------------------------------------------\n",
       "\n",
       "/**\n",
       " * http://www.openjs.com/scripts/events/keyboard_shortcuts/\n",
       " * Version : 2.01.B\n",
       " * By Binny V A\n",
       " * License : BSD\n",
       " */\n",
       "shortcut = {\n",
       "\t'all_shortcuts':{},//All the shortcuts are stored in this array\n",
       "\t'add': function(shortcut_combination,callback,opt) {\n",
       "\t\t//Provide a set of default options\n",
       "\t\tvar default_options = {\n",
       "\t\t\t'type':'keydown',\n",
       "\t\t\t'propagate':false,\n",
       "\t\t\t'disable_in_input':false,\n",
       "\t\t\t'target':document,\n",
       "\t\t\t'keycode':false\n",
       "\t\t}\n",
       "\t\tif(!opt) opt = default_options;\n",
       "\t\telse {\n",
       "\t\t\tfor(var dfo in default_options) {\n",
       "\t\t\t\tif(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\n",
       "\t\tvar ele = opt.target;\n",
       "\t\tif(typeof opt.target == 'string') ele = document.getElementById(opt.target);\n",
       "\t\tvar ths = this;\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\n",
       "\t\t//The function to be called at keypress\n",
       "\t\tvar func = function(e) {\n",
       "\t\t\te = e || window.event;\n",
       "\t\t\t\n",
       "\t\t\tif(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields\n",
       "\t\t\t\tvar element;\n",
       "\t\t\t\tif(e.target) element=e.target;\n",
       "\t\t\t\telse if(e.srcElement) element=e.srcElement;\n",
       "\t\t\t\tif(element.nodeType==3) element=element.parentNode;\n",
       "\n",
       "\t\t\t\tif(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\t//Find Which key is pressed\n",
       "\t\t\tif (e.keyCode) code = e.keyCode;\n",
       "\t\t\telse if (e.which) code = e.which;\n",
       "\t\t\tvar character = String.fromCharCode(code).toLowerCase();\n",
       "\t\t\t\n",
       "\t\t\tif(code == 188) character=\",\"; //If the user presses , when the type is onkeydown\n",
       "\t\t\tif(code == 190) character=\".\"; //If the user presses , when the type is onkeydown\n",
       "\n",
       "\t\t\tvar keys = shortcut_combination.split(\"+\");\n",
       "\t\t\t//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked\n",
       "\t\t\tvar kp = 0;\n",
       "\t\t\t\n",
       "\t\t\t//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken\n",
       "\t\t\tvar shift_nums = {\n",
       "\t\t\t\t\"`\":\"~\",\n",
       "\t\t\t\t\"1\":\"!\",\n",
       "\t\t\t\t\"2\":\"@\",\n",
       "\t\t\t\t\"3\":\"#\",\n",
       "\t\t\t\t\"4\":\"$\",\n",
       "\t\t\t\t\"5\":\"%\",\n",
       "\t\t\t\t\"6\":\"^\",\n",
       "\t\t\t\t\"7\":\"&\",\n",
       "\t\t\t\t\"8\":\"*\",\n",
       "\t\t\t\t\"9\":\"(\",\n",
       "\t\t\t\t\"0\":\")\",\n",
       "\t\t\t\t\"-\":\"_\",\n",
       "\t\t\t\t\"=\":\"+\",\n",
       "\t\t\t\t\";\":\":\",\n",
       "\t\t\t\t\"'\":\"\\\"\",\n",
       "\t\t\t\t\",\":\"<\",\n",
       "\t\t\t\t\".\":\">\",\n",
       "\t\t\t\t\"/\":\"?\",\n",
       "\t\t\t\t\"\\\\\":\"|\"\n",
       "\t\t\t}\n",
       "\t\t\t//Special Keys - and their codes\n",
       "\t\t\tvar special_keys = {\n",
       "\t\t\t\t'esc':27,\n",
       "\t\t\t\t'escape':27,\n",
       "\t\t\t\t'tab':9,\n",
       "\t\t\t\t'space':32,\n",
       "\t\t\t\t'return':13,\n",
       "\t\t\t\t'enter':13,\n",
       "\t\t\t\t'backspace':8,\n",
       "\t\n",
       "\t\t\t\t'scrolllock':145,\n",
       "\t\t\t\t'scroll_lock':145,\n",
       "\t\t\t\t'scroll':145,\n",
       "\t\t\t\t'capslock':20,\n",
       "\t\t\t\t'caps_lock':20,\n",
       "\t\t\t\t'caps':20,\n",
       "\t\t\t\t'numlock':144,\n",
       "\t\t\t\t'num_lock':144,\n",
       "\t\t\t\t'num':144,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pause':19,\n",
       "\t\t\t\t'break':19,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'insert':45,\n",
       "\t\t\t\t'home':36,\n",
       "\t\t\t\t'delete':46,\n",
       "\t\t\t\t'end':35,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pageup':33,\n",
       "\t\t\t\t'page_up':33,\n",
       "\t\t\t\t'pu':33,\n",
       "\t\n",
       "\t\t\t\t'pagedown':34,\n",
       "\t\t\t\t'page_down':34,\n",
       "\t\t\t\t'pd':34,\n",
       "\t\n",
       "\t\t\t\t'left':37,\n",
       "\t\t\t\t'up':38,\n",
       "\t\t\t\t'right':39,\n",
       "\t\t\t\t'down':40,\n",
       "\t\n",
       "\t\t\t\t'f1':112,\n",
       "\t\t\t\t'f2':113,\n",
       "\t\t\t\t'f3':114,\n",
       "\t\t\t\t'f4':115,\n",
       "\t\t\t\t'f5':116,\n",
       "\t\t\t\t'f6':117,\n",
       "\t\t\t\t'f7':118,\n",
       "\t\t\t\t'f8':119,\n",
       "\t\t\t\t'f9':120,\n",
       "\t\t\t\t'f10':121,\n",
       "\t\t\t\t'f11':122,\n",
       "\t\t\t\t'f12':123\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\tvar modifiers = { \n",
       "\t\t\t\tshift: { wanted:false, pressed:false},\n",
       "\t\t\t\tctrl : { wanted:false, pressed:false},\n",
       "\t\t\t\talt  : { wanted:false, pressed:false},\n",
       "\t\t\t\tmeta : { wanted:false, pressed:false}\t//Meta is Mac specific\n",
       "\t\t\t};\n",
       "                        \n",
       "\t\t\tif(e.ctrlKey)\tmodifiers.ctrl.pressed = true;\n",
       "\t\t\tif(e.shiftKey)\tmodifiers.shift.pressed = true;\n",
       "\t\t\tif(e.altKey)\tmodifiers.alt.pressed = true;\n",
       "\t\t\tif(e.metaKey)   modifiers.meta.pressed = true;\n",
       "                        \n",
       "\t\t\tfor(var i=0; k=keys[i],i<keys.length; i++) {\n",
       "\t\t\t\t//Modifiers\n",
       "\t\t\t\tif(k == 'ctrl' || k == 'control') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.ctrl.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'shift') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.shift.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'alt') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.alt.wanted = true;\n",
       "\t\t\t\t} else if(k == 'meta') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.meta.wanted = true;\n",
       "\t\t\t\t} else if(k.length > 1) { //If it is a special key\n",
       "\t\t\t\t\tif(special_keys[k] == code) kp++;\n",
       "\t\t\t\t\t\n",
       "\t\t\t\t} else if(opt['keycode']) {\n",
       "\t\t\t\t\tif(opt['keycode'] == code) kp++;\n",
       "\n",
       "\t\t\t\t} else { //The special keys did not match\n",
       "\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\telse {\n",
       "\t\t\t\t\t\tif(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase\n",
       "\t\t\t\t\t\t\tcharacter = shift_nums[character]; \n",
       "\t\t\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\t\t}\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t\t\n",
       "\t\t\tif(kp == keys.length && \n",
       "\t\t\t\t\t\tmodifiers.ctrl.pressed == modifiers.ctrl.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.shift.pressed == modifiers.shift.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.alt.pressed == modifiers.alt.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.meta.pressed == modifiers.meta.wanted) {\n",
       "\t\t\t\tcallback(e);\n",
       "\t\n",
       "\t\t\t\tif(!opt['propagate']) { //Stop the event\n",
       "\t\t\t\t\t//e.cancelBubble is supported by IE - this will kill the bubbling process.\n",
       "\t\t\t\t\te.cancelBubble = true;\n",
       "\t\t\t\t\te.returnValue = false;\n",
       "\t\n",
       "\t\t\t\t\t//e.stopPropagation works in Firefox.\n",
       "\t\t\t\t\tif (e.stopPropagation) {\n",
       "\t\t\t\t\t\te.stopPropagation();\n",
       "\t\t\t\t\t\te.preventDefault();\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t\treturn false;\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\t\tthis.all_shortcuts[shortcut_combination] = {\n",
       "\t\t\t'callback':func, \n",
       "\t\t\t'target':ele, \n",
       "\t\t\t'event': opt['type']\n",
       "\t\t};\n",
       "\t\t//Attach the function with the event\n",
       "\t\tif(ele.addEventListener) ele.addEventListener(opt['type'], func, false);\n",
       "\t\telse if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);\n",
       "\t\telse ele['on'+opt['type']] = func;\n",
       "\t},\n",
       "\n",
       "\t//Remove the shortcut - just specify the shortcut and I will remove the binding\n",
       "\t'remove':function(shortcut_combination) {\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\t\tvar binding = this.all_shortcuts[shortcut_combination];\n",
       "\t\tdelete(this.all_shortcuts[shortcut_combination])\n",
       "\t\tif(!binding) return;\n",
       "\t\tvar type = binding['event'];\n",
       "\t\tvar ele = binding['target'];\n",
       "\t\tvar callback = binding['callback'];\n",
       "\n",
       "\t\tif(ele.detachEvent) ele.detachEvent('on'+type, callback);\n",
       "\t\telse if(ele.removeEventListener) ele.removeEventListener(type, callback, false);\n",
       "\t\telse ele['on'+type] = false;\n",
       "\t}\n",
       "}\n",
       "\n",
       "shortcut.add(\"Alt+Left\",function() {\n",
       "\tvar event = new Event('click');\n",
       "\tif (settingsShown){\n",
       "\t\tdocument.getElementById('hideSettingsButton_1').dispatchEvent(event);\n",
       "\t} else {\n",
       "\t\tdocument.getElementById('showSettingsButton_1').dispatchEvent(event);\n",
       "\t}\n",
       "});\n",
       "\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "});});\n",
       "      </script>\n",
       "   </body>\n",
       "</html>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "simplex(3)->VISUAL(VertexColor=> '0 100 200');"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can also change the colors in the visualization backends (e.g. jReality). How to do this is explained below.\n",
    "\n",
    "To set the colors of the vertices individually, you can either specify an array that contains a color for each of the vertices or a perl function, i.e. `sub {...}`, that returns a color depending on the vertex index.\n",
    "\n",
    "**Array of colors**: Instead of passing one color to the *VertexColor* attribute, you can pass an array of colors:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!--\n",
       "polymake for knusper\n",
       "Thu Aug 27 11:44:14 2020\n",
       "unnamed\n",
       "-->\n",
       "\n",
       "\n",
       "<html>\n",
       "   <head>\n",
       "      <meta charset=utf-8>\n",
       "      <title>unnamed</title>\n",
       "      <style>\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "*/\n",
       "         html {overflow: scroll;}\n",
       "         strong{font-size: 18px;}\n",
       "         canvas { z-index: 8; }\n",
       "         input[type='radio'] {margin-left:0;}\n",
       "         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}\n",
       "         .group{padding-bottom: 15px;}\n",
       "         .settings * {z-index: 11; }\n",
       "         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}\n",
       "         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} \n",
       "         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}\n",
       "         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }\n",
       "         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}\n",
       "         button{margin-left: 0; margin-top: 10px}\n",
       "         img{cursor: pointer;}\n",
       "         .suboption{padding-top: 15px;}\n",
       "         #model2332691689 { width: 100%; height: 100%; }\n",
       "         .threejs_container { width: 100%; height: 75vh;}\n",
       "         .settings{max-height: 74vh} \n",
       "         input[type=range] {\n",
       "           -webkit-appearance: none;\n",
       "           padding:0; \n",
       "           width:90%; \n",
       "           margin-left: auto;\n",
       "           margin-right: auto;\n",
       "           margin-top: 15px;\n",
       "           margin-bottom: 15px;\n",
       "           display: block;\t\n",
       "         }\n",
       "         input[type=range]:focus {\n",
       "           outline: none;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-runnable-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "           -webkit-appearance: none;\n",
       "           margin-top: -5px;\n",
       "         }\n",
       "         input[type=range]:focus::-webkit-slider-runnable-track {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]::-moz-range-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-moz-range-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]::-ms-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           background: transparent;\n",
       "           border-color: transparent;\n",
       "           color: transparent;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_END\n",
       "*/\n",
       "\t\t</style>\n",
       "   </head>\n",
       "<body>\n",
       "   <div class='threejs_container'>\n",
       "\t\t<div id='settings_2' class='settings'>\n",
       "\t\t\t<div class=group id='transparency_2' class='transparency'>\n",
       "\t\t\t\t<strong>Transparency</strong>\n",
       "\t\t\t\t<input id='transparencyRange_2' type='range' min=0 max=1 step=0.01 value=0>\n",
       "\t\t\t</div>\n",
       "\t\t\t\n",
       "\t\t\t<div class=group id='rotation_2'>\n",
       "\t\t\t\t<strong>Rotation</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationX_2'> x-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationY_2'> y-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationZ_2'> z-axis</div>\n",
       "\t\t\t\t\t<button id='resetButton_2'>Reset</button>\n",
       "\t\t\t\t</div>\n",
       "\n",
       "\t\t\t\t<div class=suboption>Rotation speed</div>\n",
       "\t\t\t\t<input id='rotationSpeedRange_2' type='range' min=0 max=5 step=0.01 value=2>\n",
       "\t\t\t</div>\n",
       "\n",
       "\n",
       "\t\t\t<div class=group id='display_2'>\n",
       "\t\t\t\t<strong>Display</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div id='shownObjectTypesList_2' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t\t<div class=suboption>Objects</div>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t   <div id='shownObjectsList_2' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "         \n",
       "         <div class=group id='camera_2'>\n",
       "            <strong>Camera</strong>\n",
       "            <div class=indented>\n",
       "               <form>\n",
       "                  <select id=\"cameraType_2\">\n",
       "                     <option value='perspective' selected> Perspective<br></option>\n",
       "                     <option value='orthographic' > Orthographic<br></option>\n",
       "                  </select>\n",
       "               </form>\n",
       "            </div>\n",
       "         </div>\n",
       "\n",
       "\t\t\t<div class=group id='svg_2'>\n",
       "\t\t\t\t<strong>SVG</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<form>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='download' id='download_2' checked> Download<br>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='tab' id='tab_2' > New tab<br>\n",
       "\t\t\t\t\t</form>\n",
       "\t\t\t\t\t<button id='takeScreenshot_2'>Screenshot</button>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "\n",
       "\t\t</div>\t<!-- end of settings -->\n",
       "\t\t<img id='hideSettingsButton_2' class='hideSettingsButton' src='/kernelspecs/polymake/close.svg' width=20px\">\n",
       "\t\t<img id='showSettingsButton_2' class='showSettingsButton' src='/kernelspecs/polymake/menu.svg' width=20px\">\n",
       "<div id=\"model2332691689\"></div>\n",
       "</div>\n",
       "   <script>\n",
       "    requirejs.config({\n",
       "      paths: {\n",
       "        three: '/kernelspecs/polymake/three',\n",
       "        TrackballControls: '/kernelspecs/polymake/TrackballControls',\n",
       "        OrbitControls: '/kernelspecs/polymake/OrbitControls',\n",
       "        Projector: '/kernelspecs/polymake/Projector',\n",
       "        SVGRenderer: '/kernelspecs/polymake/SVGRenderer',\n",
       "        WEBGL: '/kernelspecs/polymake/WebGL',\n",
       "      },\n",
       "      shim: {\n",
       "        'three': { exports: 'THREE'},\n",
       "        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },\n",
       "        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },\n",
       "        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },\n",
       "        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },\n",
       "        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },\n",
       "      }\n",
       "    });\n",
       "    \n",
       "    require(['three'],function(THREE){\n",
       "        window.THREE = THREE;\n",
       "      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],\n",
       "               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {\n",
       "    THREE.TrackballControls = TrackballControls;\n",
       "    THREE.OrbitControls = OrbitControls;\n",
       "    THREE.Projector = Projector;\n",
       "    THREE.SVGRenderer = SVGRenderer;\n",
       "    THREE.WEBGL = WEBGL;\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "\n",
       "const intervalLength = 25; // for automatic animations\n",
       "const explodableModel = false; \n",
       "const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };\n",
       "const foldables = [];\n",
       "\n",
       "var three = document.getElementById(\"model2332691689\");\n",
       "var scene = new THREE.Scene();\n",
       "var renderer = new THREE.WebGLRenderer( { antialias: true } );\n",
       "var svgRenderer = new THREE.SVGRenderer( { antialias: true } );\n",
       "renderer.setPixelRatio( window.devicePixelRatio );\n",
       "renderer.setClearColor(0xFFFFFF, 1);\n",
       "svgRenderer.setClearColor(0xFFFFFF, 1);\n",
       "three.appendChild(renderer.domElement);\n",
       "\n",
       "var frustumSize = 4;\n",
       "var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];\n",
       "cameras.forEach(function(cam) {\n",
       "    cam.position.set(0, 0, 5);\n",
       "    cam.lookAt(0, 0, 0);  \n",
       "    cam.up.set(0, 1, 0);         \n",
       "});\n",
       "var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];\n",
       "var camera, control;\n",
       "\n",
       "controls[0].zoomSpeed = 0.2;\n",
       "controls[0].rotateSpeed = 4;\n",
       "\n",
       "\n",
       "// class to allow move points together with labels and spheres\n",
       "var PMPoint = function (x,y,z) {\n",
       "   this.vector = new THREE.Vector3(x,y,z);\n",
       "   this.sprite = null;\n",
       "   this.sphere = null;\n",
       "}\n",
       "PMPoint.prototype.addLabel = function(labelsprite) {\n",
       "   this.sprite = labelsprite;\n",
       "   this.sprite.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.addSphere = function(spheremesh) {\n",
       "   this.sphere = spheremesh;\n",
       "   this.sphere.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.set = function(x,y,z) {\n",
       "   this.vector.set(x,y,z);\n",
       "   if (this.sprite) {\n",
       "      this.sprite.position.copy(this.vector);\n",
       "   }\n",
       "   if (this.sphere) {\n",
       "      this.sphere.position.copy(this.vector);\n",
       "   }\n",
       "}\n",
       "PMPoint.prototype.radius = function() {\n",
       "   if (this.sphere) {\n",
       "      return this.sphere.geometry.parameters.radius;\n",
       "   } else {\n",
       "      return 0;\n",
       "   }\n",
       "};\n",
       "// select the target node\n",
       "var target = document.querySelector('#model2332691689');\n",
       "\n",
       "// create an observer instance\n",
       "var observer = new MutationObserver(function(mutations) {\n",
       "   mutations.forEach(function(mutation) {\n",
       "      if (mutation.removedNodes && mutation.removedNodes.length > 0) {\n",
       "         cancelAnimationFrame(renderId);\n",
       "         observer.disconnect();\n",
       "         console.log(\"cancelled frame \"+renderId);\n",
       "      }\n",
       "   });\n",
       "});\n",
       "\n",
       "// configuration of the observer:\n",
       "var config = { childList: true, characterData: true }\n",
       "\n",
       "// pass in the target node, as well as the observer options\n",
       "while (target) {\n",
       "   if (target.className==\"output\") {\n",
       "      observer.observe(target, config);\n",
       "      break;\n",
       "   }\n",
       "   target = target.parentNode;\n",
       "}\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "var obj0 = new THREE.Object3D();\n",
       "obj0.name = \"unnamed__1\";\n",
       "obj0.userData.explodable = 1;\n",
       "obj0.userData.points = [];\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(1, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 1, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 1));\n",
       "\n",
       "obj0.userData.pointradii = 0.02;\n",
       "   <!-- Vertex style -->\n",
       "obj0.userData.pointmaterial = [new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } ),\n",
       "new THREE.MeshBasicMaterial( { color: 0x00FF00, side: THREE.DoubleSide, transparent: false } ),\n",
       "new THREE.MeshBasicMaterial( { color: 0x0000FF, side: THREE.DoubleSide, transparent: false } ),\n",
       "new THREE.MeshBasicMaterial( { color: 0xFFFF00, side: THREE.DoubleSide, transparent: false } )];\n",
       "obj0.userData.pointlabels = [\"0\", \"1\", \"2\", \"3\"];\n",
       "obj0.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];\n",
       "   <!-- Edge style -->\n",
       "obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } );\n",
       "obj0.userData.facets = [[2, 3, 1], [0, 3, 2], [1, 3, 0], [2, 1, 0]];\n",
       "   <!-- Facet style -->\n",
       "obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );\n",
       "init_object(obj0);\n",
       "scene.add(obj0);\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "function textSpriteMaterial(message, parameters) {\n",
       "    if ( parameters === undefined ) parameters = {};\n",
       "    var fontface = \"Helvetica\";\n",
       "    var fontsize = parameters.hasOwnProperty(\"fontsize\") ? parameters[\"fontsize\"] : 15;\n",
       "    fontsize = fontsize*10;\n",
       "    var lines = message.split('\\\\n');\n",
       "    var size = 512;\n",
       "    for(var i = 0; i<lines.length; i++){\n",
       "        var tmp = lines[i].length;\n",
       "        while(tmp*fontsize > size){\n",
       "           fontsize--;\n",
       "        }\n",
       "    }\n",
       "    \n",
       "    var canvas = document.createElement('canvas');\n",
       "    canvas.width = size;\n",
       "    canvas.height = size;\n",
       "    var context = canvas.getContext('2d');\n",
       "    context.fillStyle = \"rgba(255, 255, 255, 0)\";\n",
       "    context.fill();\n",
       "    context.font = fontsize + \"px \" + fontface;\n",
       "    \n",
       "    // text color\n",
       "    context.fillStyle = \"rgba(0, 0, 0, 1.0)\";\n",
       "     for(var i = 0; i<lines.length; i++){\n",
       "        context.fillText(lines[i], size/2, size/2+i*fontsize);\n",
       "     }\n",
       "    \n",
       "    // canvas contents will be used for a texture\n",
       "    var texture = new THREE.Texture(canvas);\n",
       "    texture.needsUpdate = true;\n",
       "    \n",
       "    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });\n",
       "    return spriteMaterial;\n",
       "}\n",
       "\n",
       "\n",
       "// ---------------------- INITIALIZING OBJECTS--------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function init_object(obj) {\n",
       "    if (obj.userData.hasOwnProperty(\"pointmaterial\")) {\n",
       "        init_points(obj);\n",
       "        modelContains.points = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"pointlabels\")) {\n",
       "        init_pointlabels(obj);\n",
       "        modelContains.pointlabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgematerial\")) {\n",
       "        init_lines(obj);\n",
       "        modelContains.lines = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgelabels\")) {\n",
       "        init_edgelabels(obj);\n",
       "        modelContains.edgelabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"arrowstyle\")) {\n",
       "        init_arrowheads(obj);\n",
       "        modelContains.arrowheads = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"facetmaterial\")) {\n",
       "        init_faces(obj);\n",
       "        modelContains.faces = true;\n",
       "    }\n",
       "}\n",
       "\n",
       "function init_points(obj) {\n",
       "    var pointgroup = new THREE.Group();\n",
       "    pointgroup.name = \"points\";\n",
       "    var points = obj.userData.points;\n",
       "    var radii = obj.userData.pointradii;\n",
       "    var materials = obj.userData.pointmaterial;\n",
       "    var geometry,material;\n",
       "    if (!Array.isArray(radii)) {\n",
       "        geometry = new THREE.SphereBufferGeometry(radii);  \n",
       "    }\n",
       "    if (!Array.isArray(materials)) {\n",
       "        material = materials;\n",
       "    }\n",
       "    for (var i=0; i<points.length; i++) {\n",
       "        var point = points[i];\n",
       "        if (Array.isArray(radii)) {\n",
       "            if (radii[i] == 0) {\n",
       "                continue;\n",
       "            }\n",
       "            geometry = new THREE.SphereBufferGeometry(radii[i]);  \n",
       "        } \n",
       "        if (Array.isArray(materials)) {\n",
       "            material = materials[i];     \n",
       "        } \n",
       "        var sphere = new THREE.Mesh(geometry, material);\n",
       "        point.addSphere(sphere);\n",
       "        pointgroup.add(sphere);\n",
       "    }\n",
       "    obj.add(pointgroup);\n",
       "}\n",
       "\n",
       "function init_pointlabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var labels = obj.userData.pointlabels;\n",
       "    var pointlabels = new THREE.Group();\n",
       "    pointlabels.name = \"pointlabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(pointlabels);\n",
       "}\n",
       "\n",
       "function init_lines(obj) {\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var points = obj.userData.points;\n",
       "    var materials = obj.userData.edgematerial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    var bufarr = new Float32Array( obj.userData.edgeindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute( bufarr, 3 );\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position', bufattr);\n",
       "    if (Array.isArray(materials)) {     \n",
       "        for (var i=0; i<materials.length; i++) {\n",
       "            geometry.addGroup(2*i,2,i);\n",
       "        }\n",
       "    }\n",
       "    var lines = new THREE.LineSegments(geometry, materials);\n",
       "    lines.name = \"lines\";\n",
       "    obj.add(lines);\n",
       "    updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "function init_edgelabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var labels = obj.userData.edgelabels;\n",
       "    var edgelabels = new THREE.Group();\n",
       "    edgelabels.name = \"edgelabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            edgelabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(edgelabels);\n",
       "}\n",
       "\n",
       "function init_arrowheads(obj) {\n",
       "    var arrowheads = new THREE.Group();\n",
       "    arrowheads.name = \"arrowheads\";\n",
       "    var arrowstyle = obj.userData.arrowstyle;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var edgematerials = obj.userData.edgematerial;\n",
       "    var points = obj.userData.points;\n",
       "    var material;\n",
       "    if (!Array.isArray(edgematerials)) {\n",
       "        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );\n",
       "    }\n",
       "\n",
       "    for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "        var start = points[edgeindices[i]];\n",
       "        var end = points[edgeindices[i+1]];\n",
       "        var dist = start.vector.distanceTo( end.vector ) - start.radius() - end.radius();\n",
       "        if (dist <= 0) {\n",
       "            continue;\n",
       "        }\n",
       "        var dir = new THREE.Vector3().subVectors(end.vector,start.vector);\n",
       "        dir.normalize();\n",
       "        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);\n",
       "        axis.normalize();\n",
       "        var radians = Math.acos( dir.y );\n",
       "        var radius = dist/25;\n",
       "        var height = dist/5;\n",
       "        var geometry = new THREE.ConeBufferGeometry(radius,height);\n",
       "        var position = new THREE.Vector3().addVectors(start.vector,dir.clone().multiplyScalar(start.radius()+dist-height/2));\n",
       "        if (Array.isArray(edgematerials)) {\n",
       "            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );\n",
       "        }\n",
       "        var cone = new THREE.Mesh( geometry, material );\n",
       "        cone.quaternion.setFromAxisAngle(axis,radians);;\n",
       "        cone.position.copy(position);;\n",
       "        arrowheads.add(cone);\n",
       "    }\n",
       "    obj.add(arrowheads);\n",
       "}\n",
       "\n",
       "function init_faces(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var facets = obj.userData.facets;\n",
       "    obj.userData.triangleindices = [];\n",
       "    for (var i=0; i<facets.length; i++) {\n",
       "        facet = facets[i];\n",
       "        for (var t=0; t<facet.length-2; t++) {\n",
       "            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  \n",
       "        }\n",
       "    }\n",
       "    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);\n",
       "    \n",
       "    var materials = obj.userData.facetmaterial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position',bufattr);\n",
       "    if (Array.isArray(materials)) {\n",
       "        var tricount = 0;\n",
       "        var facet;\n",
       "        for (var i=0; i<facets.length; i++) {\n",
       "            facet = facets[i];\n",
       "            geometry.addGroup(tricount,(facet.length-2)*3,i);\n",
       "            tricount += (facet.length-2)*3;\n",
       "        }\n",
       "    }\n",
       "    var mesh = new THREE.Mesh(geometry, materials);\n",
       "    mesh.name = \"faces\";\n",
       "    obj.add(mesh); \n",
       "    updateFacesPosition(obj);\n",
       "}\n",
       "// //INITIALIZING\n",
       "\n",
       "\n",
       "function updateFacesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.triangleindices;\n",
       "    var faces = obj.getObjectByName(\"faces\");\n",
       "    var ba = faces.geometry.getAttribute(\"position\");\n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    faces.geometry.attributes.position.needsUpdate = true;\n",
       "    \n",
       "}\n",
       "\n",
       "function updateEdgesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.edgeindices;\n",
       "    var lines = obj.getObjectByName(\"lines\");\n",
       "    var ba = lines.geometry.getAttribute(\"position\"); \n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    lines.geometry.attributes.position.needsUpdate = true;\n",
       "}\n",
       "\n",
       "function onWindowResize() {\n",
       "    renderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    svgRenderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "function updateCamera() {\n",
       "    var width = three.clientWidth;\n",
       "    var height = three.clientHeight;\n",
       "    var aspect = width / height;\n",
       "    if (camera.type == \"OrthographicCamera\") {\n",
       "        camera.left = frustumSize * aspect / - 2;\n",
       "        camera.right = frustumSize * aspect / 2;\n",
       "        camera.top = frustumSize / 2;\n",
       "        camera.bottom = - frustumSize / 2;\n",
       "    } else if (camera.type == \"PerspectiveCamera\") {\n",
       "        camera.aspect = aspect;\n",
       "    }\n",
       "    camera.updateProjectionMatrix();\n",
       "}\n",
       "\n",
       "function changeCamera(event) {\n",
       "    var selindex = event.currentTarget.selectedIndex;\n",
       "    camera = cameras[selindex];\n",
       "    control = controls[selindex];\n",
       "    control.enabled = true; \n",
       "    for (var i=0; i<controls.length; i++) {\n",
       "        if (i!=selindex) {\n",
       "            controls[i].enabled = false;\n",
       "        }\n",
       "    }\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "var camtypenode = document.getElementById('cameraType_2');\n",
       "camtypenode.onchange = changeCamera;\n",
       "camtypenode.dispatchEvent(new Event('change'));\n",
       "\n",
       "onWindowResize();\n",
       "window.addEventListener('resize', onWindowResize);\t\n",
       "\n",
       "\n",
       "var xRotationEnabled = false;\n",
       "var yRotationEnabled = false;\n",
       "var zRotationEnabled = false;\n",
       "var rotationSpeedFactor = 1;\n",
       "var settingsShown = false;\n",
       "var labelsShown = true;\n",
       "var intervals = [];\n",
       "var timeouts = [];\n",
       "var explodingSpeed = 0.05;\n",
       "var explodeScale = 0;\n",
       "var XMLS = new XMLSerializer();\n",
       "var svgElement;\n",
       "var renderId;\n",
       "\n",
       "var render = function () {\n",
       "\n",
       "\trenderId = requestAnimationFrame(render);\n",
       "\n",
       "//\tcomment in for automatic explosion\n",
       "//\texplode(updateFactor());\n",
       "\n",
       "    var phi = 0.02 * rotationSpeedFactor;\n",
       "\n",
       "    if (xRotationEnabled) {\n",
       "        scene.rotation.x += phi;\n",
       "    }\n",
       "    if (yRotationEnabled) {\n",
       "        scene.rotation.y += phi;\n",
       "    }\n",
       "    if (zRotationEnabled) {\n",
       "        scene.rotation.z += phi;\n",
       "    }\n",
       "\n",
       "    control.update();\n",
       "    renderer.render(scene, camera);\n",
       "};\n",
       "\n",
       "if ( THREE.WEBGL.isWebGLAvailable() ) {\n",
       "\trender();\n",
       "} else {\n",
       "\tvar warning = WEBGL.getWebGLErrorMessage();\n",
       "\tthree.appendChild( warning );\n",
       "}\n",
       "    \n",
       "function changeTransparency() {\n",
       "    var opacity = 1-Number(event.currentTarget.value);\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        child = scene.children[i];\n",
       "        if ( child.userData.hasOwnProperty(\"facetmaterial\") ) {\n",
       "            if (Array.isArray(child.userData.facetmaterial)) {\n",
       "                for (var j=0; j<child.userData.facetmaterial.length; j++) {\n",
       "                    child.userData.facetmaterial[j].opacity = opacity;\n",
       "                }\n",
       "            } else {\n",
       "                child.userData.facetmaterial.opacity = opacity;\n",
       "            }    \n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function changeRotationX(event){\n",
       "    xRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationY(event){\n",
       "    yRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationZ(event){\n",
       "    zRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "\n",
       "function changeRotationSpeedFactor(event){\n",
       "    rotationSpeedFactor = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function resetScene(){\n",
       "    scene.rotation.set(0,0,0);\n",
       "    camera.position.set(0,0,5);\n",
       "    camera.up.set(0,1,0);\n",
       "}\n",
       "\n",
       "function showSettings(event){\n",
       "    document.getElementById('settings_2').style.visibility = 'visible';\n",
       "    document.getElementById('showSettingsButton_2').style.visibility = 'hidden';\n",
       "    document.getElementById('hideSettingsButton_2').style.visibility = 'visible';\n",
       "    settingsShown = true;\n",
       "}\n",
       "\n",
       "function hideSettings(event){\n",
       "    document.getElementById('settings_2').style.visibility = 'hidden';\n",
       "    document.getElementById('showSettingsButton_2').style.visibility = 'visible';\n",
       "    document.getElementById('hideSettingsButton_2').style.visibility = 'hidden';\n",
       "    settingsShown = false;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "var pos = 150* Math.PI;\n",
       "\n",
       "function updateFactor() {\n",
       "    pos++;\n",
       "    return Math.sin(.01*pos)+1;\n",
       "}\n",
       "\n",
       "// ------------------------ FOLDING ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "// rotate point p around axis defined by points p1 and p2 by given angle\n",
       "function rotate(p, p1, p2, angle ){   \n",
       "    angle = -angle;\n",
       "    var x = p.x, y = p.y, z = p.z, \n",
       "    a = p1.x, b = p1.y, c = p1.z, \n",
       "    u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z;\n",
       "    var result = [];\n",
       "    var L = u*u + v*v + w*w;\n",
       "    var sqrt = Math.sqrt;\n",
       "    var cos = Math.cos;\n",
       "    var sin = Math.sin;\n",
       "\n",
       "    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;\n",
       "    result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L;\n",
       "    result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L;\n",
       "\n",
       "    return result;\n",
       "}\n",
       "\n",
       "var fold = function(event){\n",
       "    var obj = foldables[Number(event.currentTarget.name)];\n",
       "    var foldvalue = Number(event.currentTarget.value);\n",
       "    var scale = foldvalue - obj.userData.oldscale;\n",
       "\n",
       "    for (var j=0; j<obj.userData.axes.length; j++) {\n",
       "        rotateVertices(obj, j, scale);\n",
       "    }\n",
       "    update(obj);\n",
       "    obj.userData.oldscale += scale;\n",
       "    lookAtBarycenter(obj);\n",
       "}\n",
       "\n",
       "function lookAtBarycenter(obj){\n",
       "    control.target = barycenter(obj);\n",
       "}\n",
       "\n",
       "function barycenter(obj) {\n",
       "    var center = new THREE.Vector3(0,0,0);\n",
       "    var points = obj.userData.points;\n",
       "    for (var i=0; i<points.length; i++){\n",
       "        center.add(points[i].vector);\n",
       "    }\n",
       "    center.divideScalar(points.length);\n",
       "    return center;\n",
       "}\n",
       "\n",
       "function rotateVertices(obj, edge, scale) {\n",
       "    var axes = obj.userData.axes;\n",
       "    var subtrees = obj.userData.subtrees;\n",
       "    var points = obj.userData.points;\n",
       "    var angles = obj.userData.angles;\n",
       "    if (edge < axes.length){\n",
       "        for (var j=0; j<subtrees[edge].length; j++){\n",
       "            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));\n",
       "            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function update(obj) {\n",
       "   updateFacesPosition(obj);\n",
       "   updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "if (foldables.length) {\n",
       "    var settings = document.getElementById('settings_2');\n",
       "    var foldDiv = document.createElement('div');\n",
       "    foldDiv.id = 'fold_2';\n",
       "    var title = document.createElement('strong');\n",
       "    title.innerHTML = 'Fold';\n",
       "    foldDiv.appendChild(title);\n",
       "    foldDiv.className = 'group';\n",
       "    for (var i=0; i<foldables.length; i++) {\n",
       "        var range = document.createElement('input');\n",
       "        range.type = 'range';\n",
       "        range.min = 0;\n",
       "        range.max = 1;\n",
       "        range.value = 0;\n",
       "        range.step = 0.001;\n",
       "        range.name = String(i);\n",
       "        range.oninput = fold;\n",
       "        foldDiv.appendChild(range);\n",
       "    }\n",
       "    lookAtBarycenter(foldables[0]);\n",
       "    settings.insertBefore(foldDiv,settings.childNodes[0]);\n",
       "}\n",
       "\n",
       "    \n",
       "// ---------------------- EXPLOSION ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "if (explodableModel) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        obj = scene.children[i];\n",
       "        if ( obj.userData.explodable ) {\n",
       "            computeCentroid(obj);\n",
       "        }\n",
       "    }\n",
       "    document.getElementById('explodeRange_2').oninput = triggerExplode;\n",
       "    document.getElementById('explodeCheckbox_2').onchange = triggerAutomaticExplode;\n",
       "    document.getElementById('explodingSpeedRange_2').oninput = setExplodingSpeed;\n",
       "}\n",
       "\n",
       "function computeCentroid(obj) {\n",
       "    centroid = new THREE.Vector3();\n",
       "    obj.userData.points.forEach(function(pmpoint) {\n",
       "        centroid.add(pmpoint.vector);\t\t\t\n",
       "    });\n",
       "    centroid.divideScalar(obj.userData.points.length);\n",
       "    obj.userData.centroid = centroid;\n",
       "}\n",
       "\n",
       "function explode(factor) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        var obj = scene.children[i];\n",
       "        if (obj.userData.hasOwnProperty(\"centroid\")) { \n",
       "            var c = obj.userData.centroid;\n",
       "            obj.position.set(c.x*factor, c.y*factor, c.z*factor);\n",
       "        }\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function triggerExplode(event){\n",
       "    explodeScale = Number(event.currentTarget.value);\n",
       "    explode(explodeScale);\n",
       "}\n",
       "\n",
       "function setExplodingSpeed(event){\n",
       "    explodingSpeed = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function triggerAutomaticExplode(event){\n",
       "    if (event.currentTarget.checked){\n",
       "        startExploding();\n",
       "    } else {\n",
       "        clearIntervals();\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function startExploding(){\n",
       "    intervals.push(setInterval(explodingInterval, 25));\n",
       "}\n",
       "\n",
       "\n",
       "function explodingInterval(){\n",
       "    explodeScale += explodingSpeed;\n",
       "    if (explodeScale <= 6){ \n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else{\n",
       "        explode(6);\n",
       "        explodeScale = 6;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startUnexploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_2').value = explodeScale;\n",
       "}\n",
       "\n",
       "\n",
       "function startUnexploding(){\n",
       "    intervals.push(setInterval(unexplodingInterval, 25));\n",
       "}\n",
       "\n",
       "function unexplodingInterval(){\n",
       "    explodeScale -= explodingSpeed;\n",
       "    if (explodeScale >= 0){\t\n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else {\n",
       "        explode(0);\n",
       "        explodeScale = 0;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startExploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_2').value = explodeScale;\n",
       "}\n",
       "\n",
       "function clearIntervals(){\n",
       "    intervals.forEach(function(interval){\n",
       "        clearInterval(interval);\n",
       "    });\n",
       "    intervals = [];\n",
       "    timeouts.forEach(function(timeout){\n",
       "        clearTimeout(timeout);\n",
       "    });\n",
       "    timeouts = [];\n",
       "}\n",
       "\n",
       "// ---------------------- DISPLAY --------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "const objectTypeInnerHTMLs = { points: \"Points\", pointlabels: \"Point labels\", lines: \"Edges\", edgelabels: \"Edge labels\", faces: \"Faces\", arrowheads: \"Arrow heads\" };\n",
       "const objectTypeVisible = {};\n",
       "Object.assign(objectTypeVisible,modelContains);\n",
       "const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();\n",
       "const shownObjectTypesList = document.getElementById('shownObjectTypesList_2');\n",
       "\n",
       "function setVisibility(bool,objname) {\n",
       "    for (var i=0; i<scene.children.length; i++){\n",
       "        var obj = scene.children[i].getObjectByName(objname);\n",
       "        if (obj) {\n",
       "            obj.visible = bool;\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function toggleObjectTypeVisibility(event){\n",
       "    var name = event.currentTarget.name;\n",
       "    var checked = event.currentTarget.checked;\n",
       "    objectTypeVisible[name] = checked;\n",
       "    setVisibility(checked,name);\n",
       "}\n",
       "\n",
       "for (var i=0; i<sortedObjectTypeKeys.length; i++){\n",
       "    var key = sortedObjectTypeKeys[i];\n",
       "    if (modelContains[key]) {\n",
       "        var objTypeNode = document.createElement('span');\n",
       "        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';\n",
       "        var checkbox = document.createElement('input');\n",
       "        checkbox.type = 'checkbox';\n",
       "        checkbox.checked = true;\n",
       "        checkbox.name = key;\n",
       "        checkbox.onchange = toggleObjectTypeVisibility;\n",
       "        shownObjectTypesList.appendChild(checkbox);\n",
       "        shownObjectTypesList.appendChild(objTypeNode);\n",
       "    }\n",
       "}\n",
       "\n",
       "// ------------------------------------------------------\n",
       "\n",
       "function toggleObjectVisibility(event){\n",
       "    var nr = Number(event.currentTarget.name);\n",
       "    scene.children[nr].visible = event.currentTarget.checked;\n",
       "}\n",
       "\n",
       "// append checkboxes for displaying or hiding objects\n",
       "var shownObjectsList = document.getElementById('shownObjectsList_2');\n",
       "for (var i=0; i<scene.children.length; i++){\n",
       "    obj = scene.children[i];\n",
       "    var objNode = document.createElement('span');\n",
       "    objNode.innerHTML = obj.name + '<br>';\n",
       "    var checkbox = document.createElement('input');\n",
       "    checkbox.type = 'checkbox';\n",
       "    checkbox.checked = true;\n",
       "    checkbox.name = String(i);\n",
       "    checkbox.onchange = toggleObjectVisibility;\n",
       "    shownObjectsList.appendChild(checkbox);\n",
       "    shownObjectsList.appendChild(objNode);\n",
       "}\n",
       "\n",
       "// ---------------------- SVG ------------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function takeSvgScreenshot() {\n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(false,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(false,\"edgelabels\");\n",
       "    }\n",
       "    svgRenderer.render(scene,camera);\n",
       "    svgElement = XMLS.serializeToString(svgRenderer.domElement);\n",
       "    \n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(true,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(true,\"edgelabels\");\n",
       "    }\n",
       "\n",
       "    if (document.getElementById('tab_2').checked){\n",
       "        //show in new tab\n",
       "        var myWindow = window.open(\"\",\"\");\n",
       "        myWindow.document.body.innerHTML = svgElement;\n",
       "    } else{\n",
       "        // download svg file \n",
       "        download(\"screenshot.svg\", svgElement);\n",
       "    }\n",
       "}\n",
       "\n",
       "function download(filename, text) {\n",
       "    var element = document.createElement('a');\n",
       "    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));\n",
       "    element.setAttribute('download', filename);\n",
       "\n",
       "    element.style.display = 'none';\n",
       "    document.body.appendChild(element);\n",
       "\n",
       "    element.click();\n",
       "\n",
       "    document.body.removeChild(element);\n",
       "}\n",
       "\n",
       "\n",
       "document.getElementById('transparencyRange_2').oninput = changeTransparency;\n",
       "document.getElementById('changeRotationX_2').onchange = changeRotationX;\n",
       "document.getElementById('changeRotationY_2').onchange = changeRotationY;\n",
       "document.getElementById('changeRotationZ_2').onchange = changeRotationZ;\n",
       "document.getElementById('resetButton_2').onclick = resetScene;\n",
       "document.getElementById('rotationSpeedRange_2').oninput = changeRotationSpeedFactor;\n",
       "document.getElementById('takeScreenshot_2').onclick = takeSvgScreenshot;\n",
       "document.getElementById('showSettingsButton_2').onclick = showSettings;\n",
       "document.getElementById('hideSettingsButton_2').onclick = hideSettings;\n",
       "\n",
       "\n",
       "// ------------------ SHORTCUTS --------------------------------------------\n",
       "// -------------------------------------------------------------------------\n",
       "\n",
       "/**\n",
       " * http://www.openjs.com/scripts/events/keyboard_shortcuts/\n",
       " * Version : 2.01.B\n",
       " * By Binny V A\n",
       " * License : BSD\n",
       " */\n",
       "shortcut = {\n",
       "\t'all_shortcuts':{},//All the shortcuts are stored in this array\n",
       "\t'add': function(shortcut_combination,callback,opt) {\n",
       "\t\t//Provide a set of default options\n",
       "\t\tvar default_options = {\n",
       "\t\t\t'type':'keydown',\n",
       "\t\t\t'propagate':false,\n",
       "\t\t\t'disable_in_input':false,\n",
       "\t\t\t'target':document,\n",
       "\t\t\t'keycode':false\n",
       "\t\t}\n",
       "\t\tif(!opt) opt = default_options;\n",
       "\t\telse {\n",
       "\t\t\tfor(var dfo in default_options) {\n",
       "\t\t\t\tif(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\n",
       "\t\tvar ele = opt.target;\n",
       "\t\tif(typeof opt.target == 'string') ele = document.getElementById(opt.target);\n",
       "\t\tvar ths = this;\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\n",
       "\t\t//The function to be called at keypress\n",
       "\t\tvar func = function(e) {\n",
       "\t\t\te = e || window.event;\n",
       "\t\t\t\n",
       "\t\t\tif(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields\n",
       "\t\t\t\tvar element;\n",
       "\t\t\t\tif(e.target) element=e.target;\n",
       "\t\t\t\telse if(e.srcElement) element=e.srcElement;\n",
       "\t\t\t\tif(element.nodeType==3) element=element.parentNode;\n",
       "\n",
       "\t\t\t\tif(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\t//Find Which key is pressed\n",
       "\t\t\tif (e.keyCode) code = e.keyCode;\n",
       "\t\t\telse if (e.which) code = e.which;\n",
       "\t\t\tvar character = String.fromCharCode(code).toLowerCase();\n",
       "\t\t\t\n",
       "\t\t\tif(code == 188) character=\",\"; //If the user presses , when the type is onkeydown\n",
       "\t\t\tif(code == 190) character=\".\"; //If the user presses , when the type is onkeydown\n",
       "\n",
       "\t\t\tvar keys = shortcut_combination.split(\"+\");\n",
       "\t\t\t//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked\n",
       "\t\t\tvar kp = 0;\n",
       "\t\t\t\n",
       "\t\t\t//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken\n",
       "\t\t\tvar shift_nums = {\n",
       "\t\t\t\t\"`\":\"~\",\n",
       "\t\t\t\t\"1\":\"!\",\n",
       "\t\t\t\t\"2\":\"@\",\n",
       "\t\t\t\t\"3\":\"#\",\n",
       "\t\t\t\t\"4\":\"$\",\n",
       "\t\t\t\t\"5\":\"%\",\n",
       "\t\t\t\t\"6\":\"^\",\n",
       "\t\t\t\t\"7\":\"&\",\n",
       "\t\t\t\t\"8\":\"*\",\n",
       "\t\t\t\t\"9\":\"(\",\n",
       "\t\t\t\t\"0\":\")\",\n",
       "\t\t\t\t\"-\":\"_\",\n",
       "\t\t\t\t\"=\":\"+\",\n",
       "\t\t\t\t\";\":\":\",\n",
       "\t\t\t\t\"'\":\"\\\"\",\n",
       "\t\t\t\t\",\":\"<\",\n",
       "\t\t\t\t\".\":\">\",\n",
       "\t\t\t\t\"/\":\"?\",\n",
       "\t\t\t\t\"\\\\\":\"|\"\n",
       "\t\t\t}\n",
       "\t\t\t//Special Keys - and their codes\n",
       "\t\t\tvar special_keys = {\n",
       "\t\t\t\t'esc':27,\n",
       "\t\t\t\t'escape':27,\n",
       "\t\t\t\t'tab':9,\n",
       "\t\t\t\t'space':32,\n",
       "\t\t\t\t'return':13,\n",
       "\t\t\t\t'enter':13,\n",
       "\t\t\t\t'backspace':8,\n",
       "\t\n",
       "\t\t\t\t'scrolllock':145,\n",
       "\t\t\t\t'scroll_lock':145,\n",
       "\t\t\t\t'scroll':145,\n",
       "\t\t\t\t'capslock':20,\n",
       "\t\t\t\t'caps_lock':20,\n",
       "\t\t\t\t'caps':20,\n",
       "\t\t\t\t'numlock':144,\n",
       "\t\t\t\t'num_lock':144,\n",
       "\t\t\t\t'num':144,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pause':19,\n",
       "\t\t\t\t'break':19,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'insert':45,\n",
       "\t\t\t\t'home':36,\n",
       "\t\t\t\t'delete':46,\n",
       "\t\t\t\t'end':35,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pageup':33,\n",
       "\t\t\t\t'page_up':33,\n",
       "\t\t\t\t'pu':33,\n",
       "\t\n",
       "\t\t\t\t'pagedown':34,\n",
       "\t\t\t\t'page_down':34,\n",
       "\t\t\t\t'pd':34,\n",
       "\t\n",
       "\t\t\t\t'left':37,\n",
       "\t\t\t\t'up':38,\n",
       "\t\t\t\t'right':39,\n",
       "\t\t\t\t'down':40,\n",
       "\t\n",
       "\t\t\t\t'f1':112,\n",
       "\t\t\t\t'f2':113,\n",
       "\t\t\t\t'f3':114,\n",
       "\t\t\t\t'f4':115,\n",
       "\t\t\t\t'f5':116,\n",
       "\t\t\t\t'f6':117,\n",
       "\t\t\t\t'f7':118,\n",
       "\t\t\t\t'f8':119,\n",
       "\t\t\t\t'f9':120,\n",
       "\t\t\t\t'f10':121,\n",
       "\t\t\t\t'f11':122,\n",
       "\t\t\t\t'f12':123\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\tvar modifiers = { \n",
       "\t\t\t\tshift: { wanted:false, pressed:false},\n",
       "\t\t\t\tctrl : { wanted:false, pressed:false},\n",
       "\t\t\t\talt  : { wanted:false, pressed:false},\n",
       "\t\t\t\tmeta : { wanted:false, pressed:false}\t//Meta is Mac specific\n",
       "\t\t\t};\n",
       "                        \n",
       "\t\t\tif(e.ctrlKey)\tmodifiers.ctrl.pressed = true;\n",
       "\t\t\tif(e.shiftKey)\tmodifiers.shift.pressed = true;\n",
       "\t\t\tif(e.altKey)\tmodifiers.alt.pressed = true;\n",
       "\t\t\tif(e.metaKey)   modifiers.meta.pressed = true;\n",
       "                        \n",
       "\t\t\tfor(var i=0; k=keys[i],i<keys.length; i++) {\n",
       "\t\t\t\t//Modifiers\n",
       "\t\t\t\tif(k == 'ctrl' || k == 'control') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.ctrl.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'shift') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.shift.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'alt') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.alt.wanted = true;\n",
       "\t\t\t\t} else if(k == 'meta') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.meta.wanted = true;\n",
       "\t\t\t\t} else if(k.length > 1) { //If it is a special key\n",
       "\t\t\t\t\tif(special_keys[k] == code) kp++;\n",
       "\t\t\t\t\t\n",
       "\t\t\t\t} else if(opt['keycode']) {\n",
       "\t\t\t\t\tif(opt['keycode'] == code) kp++;\n",
       "\n",
       "\t\t\t\t} else { //The special keys did not match\n",
       "\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\telse {\n",
       "\t\t\t\t\t\tif(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase\n",
       "\t\t\t\t\t\t\tcharacter = shift_nums[character]; \n",
       "\t\t\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\t\t}\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t\t\n",
       "\t\t\tif(kp == keys.length && \n",
       "\t\t\t\t\t\tmodifiers.ctrl.pressed == modifiers.ctrl.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.shift.pressed == modifiers.shift.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.alt.pressed == modifiers.alt.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.meta.pressed == modifiers.meta.wanted) {\n",
       "\t\t\t\tcallback(e);\n",
       "\t\n",
       "\t\t\t\tif(!opt['propagate']) { //Stop the event\n",
       "\t\t\t\t\t//e.cancelBubble is supported by IE - this will kill the bubbling process.\n",
       "\t\t\t\t\te.cancelBubble = true;\n",
       "\t\t\t\t\te.returnValue = false;\n",
       "\t\n",
       "\t\t\t\t\t//e.stopPropagation works in Firefox.\n",
       "\t\t\t\t\tif (e.stopPropagation) {\n",
       "\t\t\t\t\t\te.stopPropagation();\n",
       "\t\t\t\t\t\te.preventDefault();\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t\treturn false;\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\t\tthis.all_shortcuts[shortcut_combination] = {\n",
       "\t\t\t'callback':func, \n",
       "\t\t\t'target':ele, \n",
       "\t\t\t'event': opt['type']\n",
       "\t\t};\n",
       "\t\t//Attach the function with the event\n",
       "\t\tif(ele.addEventListener) ele.addEventListener(opt['type'], func, false);\n",
       "\t\telse if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);\n",
       "\t\telse ele['on'+opt['type']] = func;\n",
       "\t},\n",
       "\n",
       "\t//Remove the shortcut - just specify the shortcut and I will remove the binding\n",
       "\t'remove':function(shortcut_combination) {\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\t\tvar binding = this.all_shortcuts[shortcut_combination];\n",
       "\t\tdelete(this.all_shortcuts[shortcut_combination])\n",
       "\t\tif(!binding) return;\n",
       "\t\tvar type = binding['event'];\n",
       "\t\tvar ele = binding['target'];\n",
       "\t\tvar callback = binding['callback'];\n",
       "\n",
       "\t\tif(ele.detachEvent) ele.detachEvent('on'+type, callback);\n",
       "\t\telse if(ele.removeEventListener) ele.removeEventListener(type, callback, false);\n",
       "\t\telse ele['on'+type] = false;\n",
       "\t}\n",
       "}\n",
       "\n",
       "shortcut.add(\"Alt+Left\",function() {\n",
       "\tvar event = new Event('click');\n",
       "\tif (settingsShown){\n",
       "\t\tdocument.getElementById('hideSettingsButton_2').dispatchEvent(event);\n",
       "\t} else {\n",
       "\t\tdocument.getElementById('showSettingsButton_2').dispatchEvent(event);\n",
       "\t}\n",
       "});\n",
       "\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "});});\n",
       "      </script>\n",
       "   </body>\n",
       "</html>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "simplex(3)->VISUAL(VertexColor=>['red','green','blue','yellow']);"
   ]
  },
  {
   "attachments": {
    "visual_vertexcolor_sub.jpg": {
     "image/jpg": "[encoded data, 8240 characters]"
    }
   },
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The following line produces the same picture but each color is specified using a different color format: \n",
    "\n",
    "    \n",
    "     polytope > simplex(3)->VISUAL(VertexColor=>['red','0 1 0',new RGB(0,0,1),'255 255 0']); \n",
    "\n",
    "\n",
    "See [](visual_tutorial#Specifying Colors) for different ways to specify colors.\n",
    "\n",
    "**Function**: You may also pass a function, i.e. a perl `sub`, to the *VertexColors* attribute that returns a color depending on the vertex index. The following line produces a tetrahedron with colors ranging from black for vertex 0 to yellow for vertex 3:\n",
    "\n",
    "    \n",
    "     polytope > simplex(3)->VISUAL(VertexColor=> sub { $i = shift; new RGB($i*0.33,$i*0.33,0); });\n",
    "\n",
    "\n",
    "![](attachment:visual_vertexcolor_sub.jpg)\n",
    "\n",
    "#### Labels\n",
    "\n",
    "The labels can be specified either by an array or a function that returns a label depending on the index of the vertex.\n",
    "\n",
    "** Array of labels **: To label the vertices of a tetrahedron by A, B, C, and D we just pass the array `[\"A\", \"B\", \"C\", \"D\"]` to the *VertexLabels* attribute:\n",
    "\n",
    "    \n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!--\n",
       "polymake for knusper\n",
       "Thu Aug 27 11:44:14 2020\n",
       "unnamed\n",
       "-->\n",
       "\n",
       "\n",
       "<html>\n",
       "   <head>\n",
       "      <meta charset=utf-8>\n",
       "      <title>unnamed</title>\n",
       "      <style>\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "*/\n",
       "         html {overflow: scroll;}\n",
       "         strong{font-size: 18px;}\n",
       "         canvas { z-index: 8; }\n",
       "         input[type='radio'] {margin-left:0;}\n",
       "         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}\n",
       "         .group{padding-bottom: 15px;}\n",
       "         .settings * {z-index: 11; }\n",
       "         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}\n",
       "         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} \n",
       "         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}\n",
       "         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }\n",
       "         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}\n",
       "         button{margin-left: 0; margin-top: 10px}\n",
       "         img{cursor: pointer;}\n",
       "         .suboption{padding-top: 15px;}\n",
       "         #model9369832053 { width: 100%; height: 100%; }\n",
       "         .threejs_container { width: 100%; height: 75vh;}\n",
       "         .settings{max-height: 74vh} \n",
       "         input[type=range] {\n",
       "           -webkit-appearance: none;\n",
       "           padding:0; \n",
       "           width:90%; \n",
       "           margin-left: auto;\n",
       "           margin-right: auto;\n",
       "           margin-top: 15px;\n",
       "           margin-bottom: 15px;\n",
       "           display: block;\t\n",
       "         }\n",
       "         input[type=range]:focus {\n",
       "           outline: none;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-runnable-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "           -webkit-appearance: none;\n",
       "           margin-top: -5px;\n",
       "         }\n",
       "         input[type=range]:focus::-webkit-slider-runnable-track {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]::-moz-range-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-moz-range-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]::-ms-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           background: transparent;\n",
       "           border-color: transparent;\n",
       "           color: transparent;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_END\n",
       "*/\n",
       "\t\t</style>\n",
       "   </head>\n",
       "<body>\n",
       "   <div class='threejs_container'>\n",
       "\t\t<div id='settings_3' class='settings'>\n",
       "\t\t\t<div class=group id='transparency_3' class='transparency'>\n",
       "\t\t\t\t<strong>Transparency</strong>\n",
       "\t\t\t\t<input id='transparencyRange_3' type='range' min=0 max=1 step=0.01 value=0>\n",
       "\t\t\t</div>\n",
       "\t\t\t\n",
       "\t\t\t<div class=group id='rotation_3'>\n",
       "\t\t\t\t<strong>Rotation</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationX_3'> x-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationY_3'> y-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationZ_3'> z-axis</div>\n",
       "\t\t\t\t\t<button id='resetButton_3'>Reset</button>\n",
       "\t\t\t\t</div>\n",
       "\n",
       "\t\t\t\t<div class=suboption>Rotation speed</div>\n",
       "\t\t\t\t<input id='rotationSpeedRange_3' type='range' min=0 max=5 step=0.01 value=2>\n",
       "\t\t\t</div>\n",
       "\n",
       "\n",
       "\t\t\t<div class=group id='display_3'>\n",
       "\t\t\t\t<strong>Display</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div id='shownObjectTypesList_3' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t\t<div class=suboption>Objects</div>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t   <div id='shownObjectsList_3' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "         \n",
       "         <div class=group id='camera_3'>\n",
       "            <strong>Camera</strong>\n",
       "            <div class=indented>\n",
       "               <form>\n",
       "                  <select id=\"cameraType_3\">\n",
       "                     <option value='perspective' selected> Perspective<br></option>\n",
       "                     <option value='orthographic' > Orthographic<br></option>\n",
       "                  </select>\n",
       "               </form>\n",
       "            </div>\n",
       "         </div>\n",
       "\n",
       "\t\t\t<div class=group id='svg_3'>\n",
       "\t\t\t\t<strong>SVG</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<form>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='download' id='download_3' checked> Download<br>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='tab' id='tab_3' > New tab<br>\n",
       "\t\t\t\t\t</form>\n",
       "\t\t\t\t\t<button id='takeScreenshot_3'>Screenshot</button>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "\n",
       "\t\t</div>\t<!-- end of settings -->\n",
       "\t\t<img id='hideSettingsButton_3' class='hideSettingsButton' src='/kernelspecs/polymake/close.svg' width=20px\">\n",
       "\t\t<img id='showSettingsButton_3' class='showSettingsButton' src='/kernelspecs/polymake/menu.svg' width=20px\">\n",
       "<div id=\"model9369832053\"></div>\n",
       "</div>\n",
       "   <script>\n",
       "    requirejs.config({\n",
       "      paths: {\n",
       "        three: '/kernelspecs/polymake/three',\n",
       "        TrackballControls: '/kernelspecs/polymake/TrackballControls',\n",
       "        OrbitControls: '/kernelspecs/polymake/OrbitControls',\n",
       "        Projector: '/kernelspecs/polymake/Projector',\n",
       "        SVGRenderer: '/kernelspecs/polymake/SVGRenderer',\n",
       "        WEBGL: '/kernelspecs/polymake/WebGL',\n",
       "      },\n",
       "      shim: {\n",
       "        'three': { exports: 'THREE'},\n",
       "        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },\n",
       "        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },\n",
       "        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },\n",
       "        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },\n",
       "        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },\n",
       "      }\n",
       "    });\n",
       "    \n",
       "    require(['three'],function(THREE){\n",
       "        window.THREE = THREE;\n",
       "      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],\n",
       "               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {\n",
       "    THREE.TrackballControls = TrackballControls;\n",
       "    THREE.OrbitControls = OrbitControls;\n",
       "    THREE.Projector = Projector;\n",
       "    THREE.SVGRenderer = SVGRenderer;\n",
       "    THREE.WEBGL = WEBGL;\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "\n",
       "const intervalLength = 25; // for automatic animations\n",
       "const explodableModel = false; \n",
       "const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };\n",
       "const foldables = [];\n",
       "\n",
       "var three = document.getElementById(\"model9369832053\");\n",
       "var scene = new THREE.Scene();\n",
       "var renderer = new THREE.WebGLRenderer( { antialias: true } );\n",
       "var svgRenderer = new THREE.SVGRenderer( { antialias: true } );\n",
       "renderer.setPixelRatio( window.devicePixelRatio );\n",
       "renderer.setClearColor(0xFFFFFF, 1);\n",
       "svgRenderer.setClearColor(0xFFFFFF, 1);\n",
       "three.appendChild(renderer.domElement);\n",
       "\n",
       "var frustumSize = 4;\n",
       "var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];\n",
       "cameras.forEach(function(cam) {\n",
       "    cam.position.set(0, 0, 5);\n",
       "    cam.lookAt(0, 0, 0);  \n",
       "    cam.up.set(0, 1, 0);         \n",
       "});\n",
       "var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];\n",
       "var camera, control;\n",
       "\n",
       "controls[0].zoomSpeed = 0.2;\n",
       "controls[0].rotateSpeed = 4;\n",
       "\n",
       "\n",
       "// class to allow move points together with labels and spheres\n",
       "var PMPoint = function (x,y,z) {\n",
       "   this.vector = new THREE.Vector3(x,y,z);\n",
       "   this.sprite = null;\n",
       "   this.sphere = null;\n",
       "}\n",
       "PMPoint.prototype.addLabel = function(labelsprite) {\n",
       "   this.sprite = labelsprite;\n",
       "   this.sprite.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.addSphere = function(spheremesh) {\n",
       "   this.sphere = spheremesh;\n",
       "   this.sphere.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.set = function(x,y,z) {\n",
       "   this.vector.set(x,y,z);\n",
       "   if (this.sprite) {\n",
       "      this.sprite.position.copy(this.vector);\n",
       "   }\n",
       "   if (this.sphere) {\n",
       "      this.sphere.position.copy(this.vector);\n",
       "   }\n",
       "}\n",
       "PMPoint.prototype.radius = function() {\n",
       "   if (this.sphere) {\n",
       "      return this.sphere.geometry.parameters.radius;\n",
       "   } else {\n",
       "      return 0;\n",
       "   }\n",
       "};\n",
       "// select the target node\n",
       "var target = document.querySelector('#model9369832053');\n",
       "\n",
       "// create an observer instance\n",
       "var observer = new MutationObserver(function(mutations) {\n",
       "   mutations.forEach(function(mutation) {\n",
       "      if (mutation.removedNodes && mutation.removedNodes.length > 0) {\n",
       "         cancelAnimationFrame(renderId);\n",
       "         observer.disconnect();\n",
       "         console.log(\"cancelled frame \"+renderId);\n",
       "      }\n",
       "   });\n",
       "});\n",
       "\n",
       "// configuration of the observer:\n",
       "var config = { childList: true, characterData: true }\n",
       "\n",
       "// pass in the target node, as well as the observer options\n",
       "while (target) {\n",
       "   if (target.className==\"output\") {\n",
       "      observer.observe(target, config);\n",
       "      break;\n",
       "   }\n",
       "   target = target.parentNode;\n",
       "}\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "var obj0 = new THREE.Object3D();\n",
       "obj0.name = \"unnamed__1\";\n",
       "obj0.userData.explodable = 1;\n",
       "obj0.userData.points = [];\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(1, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 1, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 1));\n",
       "\n",
       "obj0.userData.pointradii = 0.02;\n",
       "   <!-- Vertex style -->\n",
       "obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );\n",
       "obj0.userData.pointlabels = [\"A\", \"B\", \"C\", \"D\"];\n",
       "obj0.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];\n",
       "   <!-- Edge style -->\n",
       "obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } );\n",
       "obj0.userData.facets = [[2, 3, 1], [0, 3, 2], [1, 3, 0], [2, 1, 0]];\n",
       "   <!-- Facet style -->\n",
       "obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );\n",
       "init_object(obj0);\n",
       "scene.add(obj0);\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "function textSpriteMaterial(message, parameters) {\n",
       "    if ( parameters === undefined ) parameters = {};\n",
       "    var fontface = \"Helvetica\";\n",
       "    var fontsize = parameters.hasOwnProperty(\"fontsize\") ? parameters[\"fontsize\"] : 15;\n",
       "    fontsize = fontsize*10;\n",
       "    var lines = message.split('\\\\n');\n",
       "    var size = 512;\n",
       "    for(var i = 0; i<lines.length; i++){\n",
       "        var tmp = lines[i].length;\n",
       "        while(tmp*fontsize > size){\n",
       "           fontsize--;\n",
       "        }\n",
       "    }\n",
       "    \n",
       "    var canvas = document.createElement('canvas');\n",
       "    canvas.width = size;\n",
       "    canvas.height = size;\n",
       "    var context = canvas.getContext('2d');\n",
       "    context.fillStyle = \"rgba(255, 255, 255, 0)\";\n",
       "    context.fill();\n",
       "    context.font = fontsize + \"px \" + fontface;\n",
       "    \n",
       "    // text color\n",
       "    context.fillStyle = \"rgba(0, 0, 0, 1.0)\";\n",
       "     for(var i = 0; i<lines.length; i++){\n",
       "        context.fillText(lines[i], size/2, size/2+i*fontsize);\n",
       "     }\n",
       "    \n",
       "    // canvas contents will be used for a texture\n",
       "    var texture = new THREE.Texture(canvas);\n",
       "    texture.needsUpdate = true;\n",
       "    \n",
       "    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });\n",
       "    return spriteMaterial;\n",
       "}\n",
       "\n",
       "\n",
       "// ---------------------- INITIALIZING OBJECTS--------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function init_object(obj) {\n",
       "    if (obj.userData.hasOwnProperty(\"pointmaterial\")) {\n",
       "        init_points(obj);\n",
       "        modelContains.points = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"pointlabels\")) {\n",
       "        init_pointlabels(obj);\n",
       "        modelContains.pointlabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgematerial\")) {\n",
       "        init_lines(obj);\n",
       "        modelContains.lines = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgelabels\")) {\n",
       "        init_edgelabels(obj);\n",
       "        modelContains.edgelabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"arrowstyle\")) {\n",
       "        init_arrowheads(obj);\n",
       "        modelContains.arrowheads = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"facetmaterial\")) {\n",
       "        init_faces(obj);\n",
       "        modelContains.faces = true;\n",
       "    }\n",
       "}\n",
       "\n",
       "function init_points(obj) {\n",
       "    var pointgroup = new THREE.Group();\n",
       "    pointgroup.name = \"points\";\n",
       "    var points = obj.userData.points;\n",
       "    var radii = obj.userData.pointradii;\n",
       "    var materials = obj.userData.pointmaterial;\n",
       "    var geometry,material;\n",
       "    if (!Array.isArray(radii)) {\n",
       "        geometry = new THREE.SphereBufferGeometry(radii);  \n",
       "    }\n",
       "    if (!Array.isArray(materials)) {\n",
       "        material = materials;\n",
       "    }\n",
       "    for (var i=0; i<points.length; i++) {\n",
       "        var point = points[i];\n",
       "        if (Array.isArray(radii)) {\n",
       "            if (radii[i] == 0) {\n",
       "                continue;\n",
       "            }\n",
       "            geometry = new THREE.SphereBufferGeometry(radii[i]);  \n",
       "        } \n",
       "        if (Array.isArray(materials)) {\n",
       "            material = materials[i];     \n",
       "        } \n",
       "        var sphere = new THREE.Mesh(geometry, material);\n",
       "        point.addSphere(sphere);\n",
       "        pointgroup.add(sphere);\n",
       "    }\n",
       "    obj.add(pointgroup);\n",
       "}\n",
       "\n",
       "function init_pointlabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var labels = obj.userData.pointlabels;\n",
       "    var pointlabels = new THREE.Group();\n",
       "    pointlabels.name = \"pointlabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(pointlabels);\n",
       "}\n",
       "\n",
       "function init_lines(obj) {\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var points = obj.userData.points;\n",
       "    var materials = obj.userData.edgematerial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    var bufarr = new Float32Array( obj.userData.edgeindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute( bufarr, 3 );\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position', bufattr);\n",
       "    if (Array.isArray(materials)) {     \n",
       "        for (var i=0; i<materials.length; i++) {\n",
       "            geometry.addGroup(2*i,2,i);\n",
       "        }\n",
       "    }\n",
       "    var lines = new THREE.LineSegments(geometry, materials);\n",
       "    lines.name = \"lines\";\n",
       "    obj.add(lines);\n",
       "    updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "function init_edgelabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var labels = obj.userData.edgelabels;\n",
       "    var edgelabels = new THREE.Group();\n",
       "    edgelabels.name = \"edgelabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            edgelabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(edgelabels);\n",
       "}\n",
       "\n",
       "function init_arrowheads(obj) {\n",
       "    var arrowheads = new THREE.Group();\n",
       "    arrowheads.name = \"arrowheads\";\n",
       "    var arrowstyle = obj.userData.arrowstyle;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var edgematerials = obj.userData.edgematerial;\n",
       "    var points = obj.userData.points;\n",
       "    var material;\n",
       "    if (!Array.isArray(edgematerials)) {\n",
       "        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );\n",
       "    }\n",
       "\n",
       "    for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "        var start = points[edgeindices[i]];\n",
       "        var end = points[edgeindices[i+1]];\n",
       "        var dist = start.vector.distanceTo( end.vector ) - start.radius() - end.radius();\n",
       "        if (dist <= 0) {\n",
       "            continue;\n",
       "        }\n",
       "        var dir = new THREE.Vector3().subVectors(end.vector,start.vector);\n",
       "        dir.normalize();\n",
       "        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);\n",
       "        axis.normalize();\n",
       "        var radians = Math.acos( dir.y );\n",
       "        var radius = dist/25;\n",
       "        var height = dist/5;\n",
       "        var geometry = new THREE.ConeBufferGeometry(radius,height);\n",
       "        var position = new THREE.Vector3().addVectors(start.vector,dir.clone().multiplyScalar(start.radius()+dist-height/2));\n",
       "        if (Array.isArray(edgematerials)) {\n",
       "            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );\n",
       "        }\n",
       "        var cone = new THREE.Mesh( geometry, material );\n",
       "        cone.quaternion.setFromAxisAngle(axis,radians);;\n",
       "        cone.position.copy(position);;\n",
       "        arrowheads.add(cone);\n",
       "    }\n",
       "    obj.add(arrowheads);\n",
       "}\n",
       "\n",
       "function init_faces(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var facets = obj.userData.facets;\n",
       "    obj.userData.triangleindices = [];\n",
       "    for (var i=0; i<facets.length; i++) {\n",
       "        facet = facets[i];\n",
       "        for (var t=0; t<facet.length-2; t++) {\n",
       "            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  \n",
       "        }\n",
       "    }\n",
       "    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);\n",
       "    \n",
       "    var materials = obj.userData.facetmaterial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position',bufattr);\n",
       "    if (Array.isArray(materials)) {\n",
       "        var tricount = 0;\n",
       "        var facet;\n",
       "        for (var i=0; i<facets.length; i++) {\n",
       "            facet = facets[i];\n",
       "            geometry.addGroup(tricount,(facet.length-2)*3,i);\n",
       "            tricount += (facet.length-2)*3;\n",
       "        }\n",
       "    }\n",
       "    var mesh = new THREE.Mesh(geometry, materials);\n",
       "    mesh.name = \"faces\";\n",
       "    obj.add(mesh); \n",
       "    updateFacesPosition(obj);\n",
       "}\n",
       "// //INITIALIZING\n",
       "\n",
       "\n",
       "function updateFacesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.triangleindices;\n",
       "    var faces = obj.getObjectByName(\"faces\");\n",
       "    var ba = faces.geometry.getAttribute(\"position\");\n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    faces.geometry.attributes.position.needsUpdate = true;\n",
       "    \n",
       "}\n",
       "\n",
       "function updateEdgesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.edgeindices;\n",
       "    var lines = obj.getObjectByName(\"lines\");\n",
       "    var ba = lines.geometry.getAttribute(\"position\"); \n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    lines.geometry.attributes.position.needsUpdate = true;\n",
       "}\n",
       "\n",
       "function onWindowResize() {\n",
       "    renderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    svgRenderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "function updateCamera() {\n",
       "    var width = three.clientWidth;\n",
       "    var height = three.clientHeight;\n",
       "    var aspect = width / height;\n",
       "    if (camera.type == \"OrthographicCamera\") {\n",
       "        camera.left = frustumSize * aspect / - 2;\n",
       "        camera.right = frustumSize * aspect / 2;\n",
       "        camera.top = frustumSize / 2;\n",
       "        camera.bottom = - frustumSize / 2;\n",
       "    } else if (camera.type == \"PerspectiveCamera\") {\n",
       "        camera.aspect = aspect;\n",
       "    }\n",
       "    camera.updateProjectionMatrix();\n",
       "}\n",
       "\n",
       "function changeCamera(event) {\n",
       "    var selindex = event.currentTarget.selectedIndex;\n",
       "    camera = cameras[selindex];\n",
       "    control = controls[selindex];\n",
       "    control.enabled = true; \n",
       "    for (var i=0; i<controls.length; i++) {\n",
       "        if (i!=selindex) {\n",
       "            controls[i].enabled = false;\n",
       "        }\n",
       "    }\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "var camtypenode = document.getElementById('cameraType_3');\n",
       "camtypenode.onchange = changeCamera;\n",
       "camtypenode.dispatchEvent(new Event('change'));\n",
       "\n",
       "onWindowResize();\n",
       "window.addEventListener('resize', onWindowResize);\t\n",
       "\n",
       "\n",
       "var xRotationEnabled = false;\n",
       "var yRotationEnabled = false;\n",
       "var zRotationEnabled = false;\n",
       "var rotationSpeedFactor = 1;\n",
       "var settingsShown = false;\n",
       "var labelsShown = true;\n",
       "var intervals = [];\n",
       "var timeouts = [];\n",
       "var explodingSpeed = 0.05;\n",
       "var explodeScale = 0;\n",
       "var XMLS = new XMLSerializer();\n",
       "var svgElement;\n",
       "var renderId;\n",
       "\n",
       "var render = function () {\n",
       "\n",
       "\trenderId = requestAnimationFrame(render);\n",
       "\n",
       "//\tcomment in for automatic explosion\n",
       "//\texplode(updateFactor());\n",
       "\n",
       "    var phi = 0.02 * rotationSpeedFactor;\n",
       "\n",
       "    if (xRotationEnabled) {\n",
       "        scene.rotation.x += phi;\n",
       "    }\n",
       "    if (yRotationEnabled) {\n",
       "        scene.rotation.y += phi;\n",
       "    }\n",
       "    if (zRotationEnabled) {\n",
       "        scene.rotation.z += phi;\n",
       "    }\n",
       "\n",
       "    control.update();\n",
       "    renderer.render(scene, camera);\n",
       "};\n",
       "\n",
       "if ( THREE.WEBGL.isWebGLAvailable() ) {\n",
       "\trender();\n",
       "} else {\n",
       "\tvar warning = WEBGL.getWebGLErrorMessage();\n",
       "\tthree.appendChild( warning );\n",
       "}\n",
       "    \n",
       "function changeTransparency() {\n",
       "    var opacity = 1-Number(event.currentTarget.value);\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        child = scene.children[i];\n",
       "        if ( child.userData.hasOwnProperty(\"facetmaterial\") ) {\n",
       "            if (Array.isArray(child.userData.facetmaterial)) {\n",
       "                for (var j=0; j<child.userData.facetmaterial.length; j++) {\n",
       "                    child.userData.facetmaterial[j].opacity = opacity;\n",
       "                }\n",
       "            } else {\n",
       "                child.userData.facetmaterial.opacity = opacity;\n",
       "            }    \n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function changeRotationX(event){\n",
       "    xRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationY(event){\n",
       "    yRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationZ(event){\n",
       "    zRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "\n",
       "function changeRotationSpeedFactor(event){\n",
       "    rotationSpeedFactor = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function resetScene(){\n",
       "    scene.rotation.set(0,0,0);\n",
       "    camera.position.set(0,0,5);\n",
       "    camera.up.set(0,1,0);\n",
       "}\n",
       "\n",
       "function showSettings(event){\n",
       "    document.getElementById('settings_3').style.visibility = 'visible';\n",
       "    document.getElementById('showSettingsButton_3').style.visibility = 'hidden';\n",
       "    document.getElementById('hideSettingsButton_3').style.visibility = 'visible';\n",
       "    settingsShown = true;\n",
       "}\n",
       "\n",
       "function hideSettings(event){\n",
       "    document.getElementById('settings_3').style.visibility = 'hidden';\n",
       "    document.getElementById('showSettingsButton_3').style.visibility = 'visible';\n",
       "    document.getElementById('hideSettingsButton_3').style.visibility = 'hidden';\n",
       "    settingsShown = false;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "var pos = 150* Math.PI;\n",
       "\n",
       "function updateFactor() {\n",
       "    pos++;\n",
       "    return Math.sin(.01*pos)+1;\n",
       "}\n",
       "\n",
       "// ------------------------ FOLDING ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "// rotate point p around axis defined by points p1 and p2 by given angle\n",
       "function rotate(p, p1, p2, angle ){   \n",
       "    angle = -angle;\n",
       "    var x = p.x, y = p.y, z = p.z, \n",
       "    a = p1.x, b = p1.y, c = p1.z, \n",
       "    u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z;\n",
       "    var result = [];\n",
       "    var L = u*u + v*v + w*w;\n",
       "    var sqrt = Math.sqrt;\n",
       "    var cos = Math.cos;\n",
       "    var sin = Math.sin;\n",
       "\n",
       "    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;\n",
       "    result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L;\n",
       "    result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L;\n",
       "\n",
       "    return result;\n",
       "}\n",
       "\n",
       "var fold = function(event){\n",
       "    var obj = foldables[Number(event.currentTarget.name)];\n",
       "    var foldvalue = Number(event.currentTarget.value);\n",
       "    var scale = foldvalue - obj.userData.oldscale;\n",
       "\n",
       "    for (var j=0; j<obj.userData.axes.length; j++) {\n",
       "        rotateVertices(obj, j, scale);\n",
       "    }\n",
       "    update(obj);\n",
       "    obj.userData.oldscale += scale;\n",
       "    lookAtBarycenter(obj);\n",
       "}\n",
       "\n",
       "function lookAtBarycenter(obj){\n",
       "    control.target = barycenter(obj);\n",
       "}\n",
       "\n",
       "function barycenter(obj) {\n",
       "    var center = new THREE.Vector3(0,0,0);\n",
       "    var points = obj.userData.points;\n",
       "    for (var i=0; i<points.length; i++){\n",
       "        center.add(points[i].vector);\n",
       "    }\n",
       "    center.divideScalar(points.length);\n",
       "    return center;\n",
       "}\n",
       "\n",
       "function rotateVertices(obj, edge, scale) {\n",
       "    var axes = obj.userData.axes;\n",
       "    var subtrees = obj.userData.subtrees;\n",
       "    var points = obj.userData.points;\n",
       "    var angles = obj.userData.angles;\n",
       "    if (edge < axes.length){\n",
       "        for (var j=0; j<subtrees[edge].length; j++){\n",
       "            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));\n",
       "            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function update(obj) {\n",
       "   updateFacesPosition(obj);\n",
       "   updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "if (foldables.length) {\n",
       "    var settings = document.getElementById('settings_3');\n",
       "    var foldDiv = document.createElement('div');\n",
       "    foldDiv.id = 'fold_3';\n",
       "    var title = document.createElement('strong');\n",
       "    title.innerHTML = 'Fold';\n",
       "    foldDiv.appendChild(title);\n",
       "    foldDiv.className = 'group';\n",
       "    for (var i=0; i<foldables.length; i++) {\n",
       "        var range = document.createElement('input');\n",
       "        range.type = 'range';\n",
       "        range.min = 0;\n",
       "        range.max = 1;\n",
       "        range.value = 0;\n",
       "        range.step = 0.001;\n",
       "        range.name = String(i);\n",
       "        range.oninput = fold;\n",
       "        foldDiv.appendChild(range);\n",
       "    }\n",
       "    lookAtBarycenter(foldables[0]);\n",
       "    settings.insertBefore(foldDiv,settings.childNodes[0]);\n",
       "}\n",
       "\n",
       "    \n",
       "// ---------------------- EXPLOSION ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "if (explodableModel) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        obj = scene.children[i];\n",
       "        if ( obj.userData.explodable ) {\n",
       "            computeCentroid(obj);\n",
       "        }\n",
       "    }\n",
       "    document.getElementById('explodeRange_3').oninput = triggerExplode;\n",
       "    document.getElementById('explodeCheckbox_3').onchange = triggerAutomaticExplode;\n",
       "    document.getElementById('explodingSpeedRange_3').oninput = setExplodingSpeed;\n",
       "}\n",
       "\n",
       "function computeCentroid(obj) {\n",
       "    centroid = new THREE.Vector3();\n",
       "    obj.userData.points.forEach(function(pmpoint) {\n",
       "        centroid.add(pmpoint.vector);\t\t\t\n",
       "    });\n",
       "    centroid.divideScalar(obj.userData.points.length);\n",
       "    obj.userData.centroid = centroid;\n",
       "}\n",
       "\n",
       "function explode(factor) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        var obj = scene.children[i];\n",
       "        if (obj.userData.hasOwnProperty(\"centroid\")) { \n",
       "            var c = obj.userData.centroid;\n",
       "            obj.position.set(c.x*factor, c.y*factor, c.z*factor);\n",
       "        }\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function triggerExplode(event){\n",
       "    explodeScale = Number(event.currentTarget.value);\n",
       "    explode(explodeScale);\n",
       "}\n",
       "\n",
       "function setExplodingSpeed(event){\n",
       "    explodingSpeed = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function triggerAutomaticExplode(event){\n",
       "    if (event.currentTarget.checked){\n",
       "        startExploding();\n",
       "    } else {\n",
       "        clearIntervals();\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function startExploding(){\n",
       "    intervals.push(setInterval(explodingInterval, 25));\n",
       "}\n",
       "\n",
       "\n",
       "function explodingInterval(){\n",
       "    explodeScale += explodingSpeed;\n",
       "    if (explodeScale <= 6){ \n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else{\n",
       "        explode(6);\n",
       "        explodeScale = 6;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startUnexploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_3').value = explodeScale;\n",
       "}\n",
       "\n",
       "\n",
       "function startUnexploding(){\n",
       "    intervals.push(setInterval(unexplodingInterval, 25));\n",
       "}\n",
       "\n",
       "function unexplodingInterval(){\n",
       "    explodeScale -= explodingSpeed;\n",
       "    if (explodeScale >= 0){\t\n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else {\n",
       "        explode(0);\n",
       "        explodeScale = 0;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startExploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_3').value = explodeScale;\n",
       "}\n",
       "\n",
       "function clearIntervals(){\n",
       "    intervals.forEach(function(interval){\n",
       "        clearInterval(interval);\n",
       "    });\n",
       "    intervals = [];\n",
       "    timeouts.forEach(function(timeout){\n",
       "        clearTimeout(timeout);\n",
       "    });\n",
       "    timeouts = [];\n",
       "}\n",
       "\n",
       "// ---------------------- DISPLAY --------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "const objectTypeInnerHTMLs = { points: \"Points\", pointlabels: \"Point labels\", lines: \"Edges\", edgelabels: \"Edge labels\", faces: \"Faces\", arrowheads: \"Arrow heads\" };\n",
       "const objectTypeVisible = {};\n",
       "Object.assign(objectTypeVisible,modelContains);\n",
       "const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();\n",
       "const shownObjectTypesList = document.getElementById('shownObjectTypesList_3');\n",
       "\n",
       "function setVisibility(bool,objname) {\n",
       "    for (var i=0; i<scene.children.length; i++){\n",
       "        var obj = scene.children[i].getObjectByName(objname);\n",
       "        if (obj) {\n",
       "            obj.visible = bool;\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function toggleObjectTypeVisibility(event){\n",
       "    var name = event.currentTarget.name;\n",
       "    var checked = event.currentTarget.checked;\n",
       "    objectTypeVisible[name] = checked;\n",
       "    setVisibility(checked,name);\n",
       "}\n",
       "\n",
       "for (var i=0; i<sortedObjectTypeKeys.length; i++){\n",
       "    var key = sortedObjectTypeKeys[i];\n",
       "    if (modelContains[key]) {\n",
       "        var objTypeNode = document.createElement('span');\n",
       "        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';\n",
       "        var checkbox = document.createElement('input');\n",
       "        checkbox.type = 'checkbox';\n",
       "        checkbox.checked = true;\n",
       "        checkbox.name = key;\n",
       "        checkbox.onchange = toggleObjectTypeVisibility;\n",
       "        shownObjectTypesList.appendChild(checkbox);\n",
       "        shownObjectTypesList.appendChild(objTypeNode);\n",
       "    }\n",
       "}\n",
       "\n",
       "// ------------------------------------------------------\n",
       "\n",
       "function toggleObjectVisibility(event){\n",
       "    var nr = Number(event.currentTarget.name);\n",
       "    scene.children[nr].visible = event.currentTarget.checked;\n",
       "}\n",
       "\n",
       "// append checkboxes for displaying or hiding objects\n",
       "var shownObjectsList = document.getElementById('shownObjectsList_3');\n",
       "for (var i=0; i<scene.children.length; i++){\n",
       "    obj = scene.children[i];\n",
       "    var objNode = document.createElement('span');\n",
       "    objNode.innerHTML = obj.name + '<br>';\n",
       "    var checkbox = document.createElement('input');\n",
       "    checkbox.type = 'checkbox';\n",
       "    checkbox.checked = true;\n",
       "    checkbox.name = String(i);\n",
       "    checkbox.onchange = toggleObjectVisibility;\n",
       "    shownObjectsList.appendChild(checkbox);\n",
       "    shownObjectsList.appendChild(objNode);\n",
       "}\n",
       "\n",
       "// ---------------------- SVG ------------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function takeSvgScreenshot() {\n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(false,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(false,\"edgelabels\");\n",
       "    }\n",
       "    svgRenderer.render(scene,camera);\n",
       "    svgElement = XMLS.serializeToString(svgRenderer.domElement);\n",
       "    \n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(true,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(true,\"edgelabels\");\n",
       "    }\n",
       "\n",
       "    if (document.getElementById('tab_3').checked){\n",
       "        //show in new tab\n",
       "        var myWindow = window.open(\"\",\"\");\n",
       "        myWindow.document.body.innerHTML = svgElement;\n",
       "    } else{\n",
       "        // download svg file \n",
       "        download(\"screenshot.svg\", svgElement);\n",
       "    }\n",
       "}\n",
       "\n",
       "function download(filename, text) {\n",
       "    var element = document.createElement('a');\n",
       "    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));\n",
       "    element.setAttribute('download', filename);\n",
       "\n",
       "    element.style.display = 'none';\n",
       "    document.body.appendChild(element);\n",
       "\n",
       "    element.click();\n",
       "\n",
       "    document.body.removeChild(element);\n",
       "}\n",
       "\n",
       "\n",
       "document.getElementById('transparencyRange_3').oninput = changeTransparency;\n",
       "document.getElementById('changeRotationX_3').onchange = changeRotationX;\n",
       "document.getElementById('changeRotationY_3').onchange = changeRotationY;\n",
       "document.getElementById('changeRotationZ_3').onchange = changeRotationZ;\n",
       "document.getElementById('resetButton_3').onclick = resetScene;\n",
       "document.getElementById('rotationSpeedRange_3').oninput = changeRotationSpeedFactor;\n",
       "document.getElementById('takeScreenshot_3').onclick = takeSvgScreenshot;\n",
       "document.getElementById('showSettingsButton_3').onclick = showSettings;\n",
       "document.getElementById('hideSettingsButton_3').onclick = hideSettings;\n",
       "\n",
       "\n",
       "// ------------------ SHORTCUTS --------------------------------------------\n",
       "// -------------------------------------------------------------------------\n",
       "\n",
       "/**\n",
       " * http://www.openjs.com/scripts/events/keyboard_shortcuts/\n",
       " * Version : 2.01.B\n",
       " * By Binny V A\n",
       " * License : BSD\n",
       " */\n",
       "shortcut = {\n",
       "\t'all_shortcuts':{},//All the shortcuts are stored in this array\n",
       "\t'add': function(shortcut_combination,callback,opt) {\n",
       "\t\t//Provide a set of default options\n",
       "\t\tvar default_options = {\n",
       "\t\t\t'type':'keydown',\n",
       "\t\t\t'propagate':false,\n",
       "\t\t\t'disable_in_input':false,\n",
       "\t\t\t'target':document,\n",
       "\t\t\t'keycode':false\n",
       "\t\t}\n",
       "\t\tif(!opt) opt = default_options;\n",
       "\t\telse {\n",
       "\t\t\tfor(var dfo in default_options) {\n",
       "\t\t\t\tif(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\n",
       "\t\tvar ele = opt.target;\n",
       "\t\tif(typeof opt.target == 'string') ele = document.getElementById(opt.target);\n",
       "\t\tvar ths = this;\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\n",
       "\t\t//The function to be called at keypress\n",
       "\t\tvar func = function(e) {\n",
       "\t\t\te = e || window.event;\n",
       "\t\t\t\n",
       "\t\t\tif(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields\n",
       "\t\t\t\tvar element;\n",
       "\t\t\t\tif(e.target) element=e.target;\n",
       "\t\t\t\telse if(e.srcElement) element=e.srcElement;\n",
       "\t\t\t\tif(element.nodeType==3) element=element.parentNode;\n",
       "\n",
       "\t\t\t\tif(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\t//Find Which key is pressed\n",
       "\t\t\tif (e.keyCode) code = e.keyCode;\n",
       "\t\t\telse if (e.which) code = e.which;\n",
       "\t\t\tvar character = String.fromCharCode(code).toLowerCase();\n",
       "\t\t\t\n",
       "\t\t\tif(code == 188) character=\",\"; //If the user presses , when the type is onkeydown\n",
       "\t\t\tif(code == 190) character=\".\"; //If the user presses , when the type is onkeydown\n",
       "\n",
       "\t\t\tvar keys = shortcut_combination.split(\"+\");\n",
       "\t\t\t//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked\n",
       "\t\t\tvar kp = 0;\n",
       "\t\t\t\n",
       "\t\t\t//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken\n",
       "\t\t\tvar shift_nums = {\n",
       "\t\t\t\t\"`\":\"~\",\n",
       "\t\t\t\t\"1\":\"!\",\n",
       "\t\t\t\t\"2\":\"@\",\n",
       "\t\t\t\t\"3\":\"#\",\n",
       "\t\t\t\t\"4\":\"$\",\n",
       "\t\t\t\t\"5\":\"%\",\n",
       "\t\t\t\t\"6\":\"^\",\n",
       "\t\t\t\t\"7\":\"&\",\n",
       "\t\t\t\t\"8\":\"*\",\n",
       "\t\t\t\t\"9\":\"(\",\n",
       "\t\t\t\t\"0\":\")\",\n",
       "\t\t\t\t\"-\":\"_\",\n",
       "\t\t\t\t\"=\":\"+\",\n",
       "\t\t\t\t\";\":\":\",\n",
       "\t\t\t\t\"'\":\"\\\"\",\n",
       "\t\t\t\t\",\":\"<\",\n",
       "\t\t\t\t\".\":\">\",\n",
       "\t\t\t\t\"/\":\"?\",\n",
       "\t\t\t\t\"\\\\\":\"|\"\n",
       "\t\t\t}\n",
       "\t\t\t//Special Keys - and their codes\n",
       "\t\t\tvar special_keys = {\n",
       "\t\t\t\t'esc':27,\n",
       "\t\t\t\t'escape':27,\n",
       "\t\t\t\t'tab':9,\n",
       "\t\t\t\t'space':32,\n",
       "\t\t\t\t'return':13,\n",
       "\t\t\t\t'enter':13,\n",
       "\t\t\t\t'backspace':8,\n",
       "\t\n",
       "\t\t\t\t'scrolllock':145,\n",
       "\t\t\t\t'scroll_lock':145,\n",
       "\t\t\t\t'scroll':145,\n",
       "\t\t\t\t'capslock':20,\n",
       "\t\t\t\t'caps_lock':20,\n",
       "\t\t\t\t'caps':20,\n",
       "\t\t\t\t'numlock':144,\n",
       "\t\t\t\t'num_lock':144,\n",
       "\t\t\t\t'num':144,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pause':19,\n",
       "\t\t\t\t'break':19,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'insert':45,\n",
       "\t\t\t\t'home':36,\n",
       "\t\t\t\t'delete':46,\n",
       "\t\t\t\t'end':35,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pageup':33,\n",
       "\t\t\t\t'page_up':33,\n",
       "\t\t\t\t'pu':33,\n",
       "\t\n",
       "\t\t\t\t'pagedown':34,\n",
       "\t\t\t\t'page_down':34,\n",
       "\t\t\t\t'pd':34,\n",
       "\t\n",
       "\t\t\t\t'left':37,\n",
       "\t\t\t\t'up':38,\n",
       "\t\t\t\t'right':39,\n",
       "\t\t\t\t'down':40,\n",
       "\t\n",
       "\t\t\t\t'f1':112,\n",
       "\t\t\t\t'f2':113,\n",
       "\t\t\t\t'f3':114,\n",
       "\t\t\t\t'f4':115,\n",
       "\t\t\t\t'f5':116,\n",
       "\t\t\t\t'f6':117,\n",
       "\t\t\t\t'f7':118,\n",
       "\t\t\t\t'f8':119,\n",
       "\t\t\t\t'f9':120,\n",
       "\t\t\t\t'f10':121,\n",
       "\t\t\t\t'f11':122,\n",
       "\t\t\t\t'f12':123\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\tvar modifiers = { \n",
       "\t\t\t\tshift: { wanted:false, pressed:false},\n",
       "\t\t\t\tctrl : { wanted:false, pressed:false},\n",
       "\t\t\t\talt  : { wanted:false, pressed:false},\n",
       "\t\t\t\tmeta : { wanted:false, pressed:false}\t//Meta is Mac specific\n",
       "\t\t\t};\n",
       "                        \n",
       "\t\t\tif(e.ctrlKey)\tmodifiers.ctrl.pressed = true;\n",
       "\t\t\tif(e.shiftKey)\tmodifiers.shift.pressed = true;\n",
       "\t\t\tif(e.altKey)\tmodifiers.alt.pressed = true;\n",
       "\t\t\tif(e.metaKey)   modifiers.meta.pressed = true;\n",
       "                        \n",
       "\t\t\tfor(var i=0; k=keys[i],i<keys.length; i++) {\n",
       "\t\t\t\t//Modifiers\n",
       "\t\t\t\tif(k == 'ctrl' || k == 'control') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.ctrl.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'shift') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.shift.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'alt') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.alt.wanted = true;\n",
       "\t\t\t\t} else if(k == 'meta') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.meta.wanted = true;\n",
       "\t\t\t\t} else if(k.length > 1) { //If it is a special key\n",
       "\t\t\t\t\tif(special_keys[k] == code) kp++;\n",
       "\t\t\t\t\t\n",
       "\t\t\t\t} else if(opt['keycode']) {\n",
       "\t\t\t\t\tif(opt['keycode'] == code) kp++;\n",
       "\n",
       "\t\t\t\t} else { //The special keys did not match\n",
       "\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\telse {\n",
       "\t\t\t\t\t\tif(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase\n",
       "\t\t\t\t\t\t\tcharacter = shift_nums[character]; \n",
       "\t\t\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\t\t}\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t\t\n",
       "\t\t\tif(kp == keys.length && \n",
       "\t\t\t\t\t\tmodifiers.ctrl.pressed == modifiers.ctrl.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.shift.pressed == modifiers.shift.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.alt.pressed == modifiers.alt.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.meta.pressed == modifiers.meta.wanted) {\n",
       "\t\t\t\tcallback(e);\n",
       "\t\n",
       "\t\t\t\tif(!opt['propagate']) { //Stop the event\n",
       "\t\t\t\t\t//e.cancelBubble is supported by IE - this will kill the bubbling process.\n",
       "\t\t\t\t\te.cancelBubble = true;\n",
       "\t\t\t\t\te.returnValue = false;\n",
       "\t\n",
       "\t\t\t\t\t//e.stopPropagation works in Firefox.\n",
       "\t\t\t\t\tif (e.stopPropagation) {\n",
       "\t\t\t\t\t\te.stopPropagation();\n",
       "\t\t\t\t\t\te.preventDefault();\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t\treturn false;\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\t\tthis.all_shortcuts[shortcut_combination] = {\n",
       "\t\t\t'callback':func, \n",
       "\t\t\t'target':ele, \n",
       "\t\t\t'event': opt['type']\n",
       "\t\t};\n",
       "\t\t//Attach the function with the event\n",
       "\t\tif(ele.addEventListener) ele.addEventListener(opt['type'], func, false);\n",
       "\t\telse if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);\n",
       "\t\telse ele['on'+opt['type']] = func;\n",
       "\t},\n",
       "\n",
       "\t//Remove the shortcut - just specify the shortcut and I will remove the binding\n",
       "\t'remove':function(shortcut_combination) {\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\t\tvar binding = this.all_shortcuts[shortcut_combination];\n",
       "\t\tdelete(this.all_shortcuts[shortcut_combination])\n",
       "\t\tif(!binding) return;\n",
       "\t\tvar type = binding['event'];\n",
       "\t\tvar ele = binding['target'];\n",
       "\t\tvar callback = binding['callback'];\n",
       "\n",
       "\t\tif(ele.detachEvent) ele.detachEvent('on'+type, callback);\n",
       "\t\telse if(ele.removeEventListener) ele.removeEventListener(type, callback, false);\n",
       "\t\telse ele['on'+type] = false;\n",
       "\t}\n",
       "}\n",
       "\n",
       "shortcut.add(\"Alt+Left\",function() {\n",
       "\tvar event = new Event('click');\n",
       "\tif (settingsShown){\n",
       "\t\tdocument.getElementById('hideSettingsButton_3').dispatchEvent(event);\n",
       "\t} else {\n",
       "\t\tdocument.getElementById('showSettingsButton_3').dispatchEvent(event);\n",
       "\t}\n",
       "});\n",
       "\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "});});\n",
       "      </script>\n",
       "   </body>\n",
       "</html>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "simplex(3)->VISUAL(VertexLabels=>[\"A\", \"B\", \"C\", \"D\"]);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you want to set only one label for example, you can do so by passing the empty string `\"\"` for the other vertices:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!--\n",
       "polymake for knusper\n",
       "Thu Aug 27 11:44:14 2020\n",
       "unnamed\n",
       "-->\n",
       "\n",
       "\n",
       "<html>\n",
       "   <head>\n",
       "      <meta charset=utf-8>\n",
       "      <title>unnamed</title>\n",
       "      <style>\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "*/\n",
       "         html {overflow: scroll;}\n",
       "         strong{font-size: 18px;}\n",
       "         canvas { z-index: 8; }\n",
       "         input[type='radio'] {margin-left:0;}\n",
       "         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}\n",
       "         .group{padding-bottom: 15px;}\n",
       "         .settings * {z-index: 11; }\n",
       "         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}\n",
       "         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} \n",
       "         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}\n",
       "         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }\n",
       "         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}\n",
       "         button{margin-left: 0; margin-top: 10px}\n",
       "         img{cursor: pointer;}\n",
       "         .suboption{padding-top: 15px;}\n",
       "         #model46580916027 { width: 100%; height: 100%; }\n",
       "         .threejs_container { width: 100%; height: 75vh;}\n",
       "         .settings{max-height: 74vh} \n",
       "         input[type=range] {\n",
       "           -webkit-appearance: none;\n",
       "           padding:0; \n",
       "           width:90%; \n",
       "           margin-left: auto;\n",
       "           margin-right: auto;\n",
       "           margin-top: 15px;\n",
       "           margin-bottom: 15px;\n",
       "           display: block;\t\n",
       "         }\n",
       "         input[type=range]:focus {\n",
       "           outline: none;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-runnable-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "           -webkit-appearance: none;\n",
       "           margin-top: -5px;\n",
       "         }\n",
       "         input[type=range]:focus::-webkit-slider-runnable-track {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]::-moz-range-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-moz-range-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]::-ms-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           background: transparent;\n",
       "           border-color: transparent;\n",
       "           color: transparent;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_END\n",
       "*/\n",
       "\t\t</style>\n",
       "   </head>\n",
       "<body>\n",
       "   <div class='threejs_container'>\n",
       "\t\t<div id='settings_4' class='settings'>\n",
       "\t\t\t<div class=group id='transparency_4' class='transparency'>\n",
       "\t\t\t\t<strong>Transparency</strong>\n",
       "\t\t\t\t<input id='transparencyRange_4' type='range' min=0 max=1 step=0.01 value=0>\n",
       "\t\t\t</div>\n",
       "\t\t\t\n",
       "\t\t\t<div class=group id='rotation_4'>\n",
       "\t\t\t\t<strong>Rotation</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationX_4'> x-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationY_4'> y-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationZ_4'> z-axis</div>\n",
       "\t\t\t\t\t<button id='resetButton_4'>Reset</button>\n",
       "\t\t\t\t</div>\n",
       "\n",
       "\t\t\t\t<div class=suboption>Rotation speed</div>\n",
       "\t\t\t\t<input id='rotationSpeedRange_4' type='range' min=0 max=5 step=0.01 value=2>\n",
       "\t\t\t</div>\n",
       "\n",
       "\n",
       "\t\t\t<div class=group id='display_4'>\n",
       "\t\t\t\t<strong>Display</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div id='shownObjectTypesList_4' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t\t<div class=suboption>Objects</div>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t   <div id='shownObjectsList_4' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "         \n",
       "         <div class=group id='camera_4'>\n",
       "            <strong>Camera</strong>\n",
       "            <div class=indented>\n",
       "               <form>\n",
       "                  <select id=\"cameraType_4\">\n",
       "                     <option value='perspective' selected> Perspective<br></option>\n",
       "                     <option value='orthographic' > Orthographic<br></option>\n",
       "                  </select>\n",
       "               </form>\n",
       "            </div>\n",
       "         </div>\n",
       "\n",
       "\t\t\t<div class=group id='svg_4'>\n",
       "\t\t\t\t<strong>SVG</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<form>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='download' id='download_4' checked> Download<br>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='tab' id='tab_4' > New tab<br>\n",
       "\t\t\t\t\t</form>\n",
       "\t\t\t\t\t<button id='takeScreenshot_4'>Screenshot</button>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "\n",
       "\t\t</div>\t<!-- end of settings -->\n",
       "\t\t<img id='hideSettingsButton_4' class='hideSettingsButton' src='/kernelspecs/polymake/close.svg' width=20px\">\n",
       "\t\t<img id='showSettingsButton_4' class='showSettingsButton' src='/kernelspecs/polymake/menu.svg' width=20px\">\n",
       "<div id=\"model46580916027\"></div>\n",
       "</div>\n",
       "   <script>\n",
       "    requirejs.config({\n",
       "      paths: {\n",
       "        three: '/kernelspecs/polymake/three',\n",
       "        TrackballControls: '/kernelspecs/polymake/TrackballControls',\n",
       "        OrbitControls: '/kernelspecs/polymake/OrbitControls',\n",
       "        Projector: '/kernelspecs/polymake/Projector',\n",
       "        SVGRenderer: '/kernelspecs/polymake/SVGRenderer',\n",
       "        WEBGL: '/kernelspecs/polymake/WebGL',\n",
       "      },\n",
       "      shim: {\n",
       "        'three': { exports: 'THREE'},\n",
       "        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },\n",
       "        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },\n",
       "        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },\n",
       "        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },\n",
       "        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },\n",
       "      }\n",
       "    });\n",
       "    \n",
       "    require(['three'],function(THREE){\n",
       "        window.THREE = THREE;\n",
       "      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],\n",
       "               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {\n",
       "    THREE.TrackballControls = TrackballControls;\n",
       "    THREE.OrbitControls = OrbitControls;\n",
       "    THREE.Projector = Projector;\n",
       "    THREE.SVGRenderer = SVGRenderer;\n",
       "    THREE.WEBGL = WEBGL;\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "\n",
       "const intervalLength = 25; // for automatic animations\n",
       "const explodableModel = false; \n",
       "const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };\n",
       "const foldables = [];\n",
       "\n",
       "var three = document.getElementById(\"model46580916027\");\n",
       "var scene = new THREE.Scene();\n",
       "var renderer = new THREE.WebGLRenderer( { antialias: true } );\n",
       "var svgRenderer = new THREE.SVGRenderer( { antialias: true } );\n",
       "renderer.setPixelRatio( window.devicePixelRatio );\n",
       "renderer.setClearColor(0xFFFFFF, 1);\n",
       "svgRenderer.setClearColor(0xFFFFFF, 1);\n",
       "three.appendChild(renderer.domElement);\n",
       "\n",
       "var frustumSize = 4;\n",
       "var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];\n",
       "cameras.forEach(function(cam) {\n",
       "    cam.position.set(0, 0, 5);\n",
       "    cam.lookAt(0, 0, 0);  \n",
       "    cam.up.set(0, 1, 0);         \n",
       "});\n",
       "var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];\n",
       "var camera, control;\n",
       "\n",
       "controls[0].zoomSpeed = 0.2;\n",
       "controls[0].rotateSpeed = 4;\n",
       "\n",
       "\n",
       "// class to allow move points together with labels and spheres\n",
       "var PMPoint = function (x,y,z) {\n",
       "   this.vector = new THREE.Vector3(x,y,z);\n",
       "   this.sprite = null;\n",
       "   this.sphere = null;\n",
       "}\n",
       "PMPoint.prototype.addLabel = function(labelsprite) {\n",
       "   this.sprite = labelsprite;\n",
       "   this.sprite.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.addSphere = function(spheremesh) {\n",
       "   this.sphere = spheremesh;\n",
       "   this.sphere.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.set = function(x,y,z) {\n",
       "   this.vector.set(x,y,z);\n",
       "   if (this.sprite) {\n",
       "      this.sprite.position.copy(this.vector);\n",
       "   }\n",
       "   if (this.sphere) {\n",
       "      this.sphere.position.copy(this.vector);\n",
       "   }\n",
       "}\n",
       "PMPoint.prototype.radius = function() {\n",
       "   if (this.sphere) {\n",
       "      return this.sphere.geometry.parameters.radius;\n",
       "   } else {\n",
       "      return 0;\n",
       "   }\n",
       "};\n",
       "// select the target node\n",
       "var target = document.querySelector('#model46580916027');\n",
       "\n",
       "// create an observer instance\n",
       "var observer = new MutationObserver(function(mutations) {\n",
       "   mutations.forEach(function(mutation) {\n",
       "      if (mutation.removedNodes && mutation.removedNodes.length > 0) {\n",
       "         cancelAnimationFrame(renderId);\n",
       "         observer.disconnect();\n",
       "         console.log(\"cancelled frame \"+renderId);\n",
       "      }\n",
       "   });\n",
       "});\n",
       "\n",
       "// configuration of the observer:\n",
       "var config = { childList: true, characterData: true }\n",
       "\n",
       "// pass in the target node, as well as the observer options\n",
       "while (target) {\n",
       "   if (target.className==\"output\") {\n",
       "      observer.observe(target, config);\n",
       "      break;\n",
       "   }\n",
       "   target = target.parentNode;\n",
       "}\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "var obj0 = new THREE.Object3D();\n",
       "obj0.name = \"unnamed__1\";\n",
       "obj0.userData.explodable = 1;\n",
       "obj0.userData.points = [];\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(1, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 1, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 1));\n",
       "\n",
       "obj0.userData.pointradii = 0.02;\n",
       "   <!-- Vertex style -->\n",
       "obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );\n",
       "obj0.userData.pointlabels = [\"\", \"\", \"My favorite vertex\", \"\"];\n",
       "obj0.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];\n",
       "   <!-- Edge style -->\n",
       "obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } );\n",
       "obj0.userData.facets = [[2, 3, 1], [0, 3, 2], [1, 3, 0], [2, 1, 0]];\n",
       "   <!-- Facet style -->\n",
       "obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );\n",
       "init_object(obj0);\n",
       "scene.add(obj0);\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "function textSpriteMaterial(message, parameters) {\n",
       "    if ( parameters === undefined ) parameters = {};\n",
       "    var fontface = \"Helvetica\";\n",
       "    var fontsize = parameters.hasOwnProperty(\"fontsize\") ? parameters[\"fontsize\"] : 15;\n",
       "    fontsize = fontsize*10;\n",
       "    var lines = message.split('\\\\n');\n",
       "    var size = 512;\n",
       "    for(var i = 0; i<lines.length; i++){\n",
       "        var tmp = lines[i].length;\n",
       "        while(tmp*fontsize > size){\n",
       "           fontsize--;\n",
       "        }\n",
       "    }\n",
       "    \n",
       "    var canvas = document.createElement('canvas');\n",
       "    canvas.width = size;\n",
       "    canvas.height = size;\n",
       "    var context = canvas.getContext('2d');\n",
       "    context.fillStyle = \"rgba(255, 255, 255, 0)\";\n",
       "    context.fill();\n",
       "    context.font = fontsize + \"px \" + fontface;\n",
       "    \n",
       "    // text color\n",
       "    context.fillStyle = \"rgba(0, 0, 0, 1.0)\";\n",
       "     for(var i = 0; i<lines.length; i++){\n",
       "        context.fillText(lines[i], size/2, size/2+i*fontsize);\n",
       "     }\n",
       "    \n",
       "    // canvas contents will be used for a texture\n",
       "    var texture = new THREE.Texture(canvas);\n",
       "    texture.needsUpdate = true;\n",
       "    \n",
       "    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });\n",
       "    return spriteMaterial;\n",
       "}\n",
       "\n",
       "\n",
       "// ---------------------- INITIALIZING OBJECTS--------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function init_object(obj) {\n",
       "    if (obj.userData.hasOwnProperty(\"pointmaterial\")) {\n",
       "        init_points(obj);\n",
       "        modelContains.points = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"pointlabels\")) {\n",
       "        init_pointlabels(obj);\n",
       "        modelContains.pointlabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgematerial\")) {\n",
       "        init_lines(obj);\n",
       "        modelContains.lines = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgelabels\")) {\n",
       "        init_edgelabels(obj);\n",
       "        modelContains.edgelabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"arrowstyle\")) {\n",
       "        init_arrowheads(obj);\n",
       "        modelContains.arrowheads = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"facetmaterial\")) {\n",
       "        init_faces(obj);\n",
       "        modelContains.faces = true;\n",
       "    }\n",
       "}\n",
       "\n",
       "function init_points(obj) {\n",
       "    var pointgroup = new THREE.Group();\n",
       "    pointgroup.name = \"points\";\n",
       "    var points = obj.userData.points;\n",
       "    var radii = obj.userData.pointradii;\n",
       "    var materials = obj.userData.pointmaterial;\n",
       "    var geometry,material;\n",
       "    if (!Array.isArray(radii)) {\n",
       "        geometry = new THREE.SphereBufferGeometry(radii);  \n",
       "    }\n",
       "    if (!Array.isArray(materials)) {\n",
       "        material = materials;\n",
       "    }\n",
       "    for (var i=0; i<points.length; i++) {\n",
       "        var point = points[i];\n",
       "        if (Array.isArray(radii)) {\n",
       "            if (radii[i] == 0) {\n",
       "                continue;\n",
       "            }\n",
       "            geometry = new THREE.SphereBufferGeometry(radii[i]);  \n",
       "        } \n",
       "        if (Array.isArray(materials)) {\n",
       "            material = materials[i];     \n",
       "        } \n",
       "        var sphere = new THREE.Mesh(geometry, material);\n",
       "        point.addSphere(sphere);\n",
       "        pointgroup.add(sphere);\n",
       "    }\n",
       "    obj.add(pointgroup);\n",
       "}\n",
       "\n",
       "function init_pointlabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var labels = obj.userData.pointlabels;\n",
       "    var pointlabels = new THREE.Group();\n",
       "    pointlabels.name = \"pointlabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(pointlabels);\n",
       "}\n",
       "\n",
       "function init_lines(obj) {\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var points = obj.userData.points;\n",
       "    var materials = obj.userData.edgematerial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    var bufarr = new Float32Array( obj.userData.edgeindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute( bufarr, 3 );\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position', bufattr);\n",
       "    if (Array.isArray(materials)) {     \n",
       "        for (var i=0; i<materials.length; i++) {\n",
       "            geometry.addGroup(2*i,2,i);\n",
       "        }\n",
       "    }\n",
       "    var lines = new THREE.LineSegments(geometry, materials);\n",
       "    lines.name = \"lines\";\n",
       "    obj.add(lines);\n",
       "    updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "function init_edgelabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var labels = obj.userData.edgelabels;\n",
       "    var edgelabels = new THREE.Group();\n",
       "    edgelabels.name = \"edgelabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            edgelabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(edgelabels);\n",
       "}\n",
       "\n",
       "function init_arrowheads(obj) {\n",
       "    var arrowheads = new THREE.Group();\n",
       "    arrowheads.name = \"arrowheads\";\n",
       "    var arrowstyle = obj.userData.arrowstyle;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var edgematerials = obj.userData.edgematerial;\n",
       "    var points = obj.userData.points;\n",
       "    var material;\n",
       "    if (!Array.isArray(edgematerials)) {\n",
       "        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );\n",
       "    }\n",
       "\n",
       "    for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "        var start = points[edgeindices[i]];\n",
       "        var end = points[edgeindices[i+1]];\n",
       "        var dist = start.vector.distanceTo( end.vector ) - start.radius() - end.radius();\n",
       "        if (dist <= 0) {\n",
       "            continue;\n",
       "        }\n",
       "        var dir = new THREE.Vector3().subVectors(end.vector,start.vector);\n",
       "        dir.normalize();\n",
       "        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);\n",
       "        axis.normalize();\n",
       "        var radians = Math.acos( dir.y );\n",
       "        var radius = dist/25;\n",
       "        var height = dist/5;\n",
       "        var geometry = new THREE.ConeBufferGeometry(radius,height);\n",
       "        var position = new THREE.Vector3().addVectors(start.vector,dir.clone().multiplyScalar(start.radius()+dist-height/2));\n",
       "        if (Array.isArray(edgematerials)) {\n",
       "            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );\n",
       "        }\n",
       "        var cone = new THREE.Mesh( geometry, material );\n",
       "        cone.quaternion.setFromAxisAngle(axis,radians);;\n",
       "        cone.position.copy(position);;\n",
       "        arrowheads.add(cone);\n",
       "    }\n",
       "    obj.add(arrowheads);\n",
       "}\n",
       "\n",
       "function init_faces(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var facets = obj.userData.facets;\n",
       "    obj.userData.triangleindices = [];\n",
       "    for (var i=0; i<facets.length; i++) {\n",
       "        facet = facets[i];\n",
       "        for (var t=0; t<facet.length-2; t++) {\n",
       "            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  \n",
       "        }\n",
       "    }\n",
       "    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);\n",
       "    \n",
       "    var materials = obj.userData.facetmaterial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position',bufattr);\n",
       "    if (Array.isArray(materials)) {\n",
       "        var tricount = 0;\n",
       "        var facet;\n",
       "        for (var i=0; i<facets.length; i++) {\n",
       "            facet = facets[i];\n",
       "            geometry.addGroup(tricount,(facet.length-2)*3,i);\n",
       "            tricount += (facet.length-2)*3;\n",
       "        }\n",
       "    }\n",
       "    var mesh = new THREE.Mesh(geometry, materials);\n",
       "    mesh.name = \"faces\";\n",
       "    obj.add(mesh); \n",
       "    updateFacesPosition(obj);\n",
       "}\n",
       "// //INITIALIZING\n",
       "\n",
       "\n",
       "function updateFacesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.triangleindices;\n",
       "    var faces = obj.getObjectByName(\"faces\");\n",
       "    var ba = faces.geometry.getAttribute(\"position\");\n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    faces.geometry.attributes.position.needsUpdate = true;\n",
       "    \n",
       "}\n",
       "\n",
       "function updateEdgesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.edgeindices;\n",
       "    var lines = obj.getObjectByName(\"lines\");\n",
       "    var ba = lines.geometry.getAttribute(\"position\"); \n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    lines.geometry.attributes.position.needsUpdate = true;\n",
       "}\n",
       "\n",
       "function onWindowResize() {\n",
       "    renderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    svgRenderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "function updateCamera() {\n",
       "    var width = three.clientWidth;\n",
       "    var height = three.clientHeight;\n",
       "    var aspect = width / height;\n",
       "    if (camera.type == \"OrthographicCamera\") {\n",
       "        camera.left = frustumSize * aspect / - 2;\n",
       "        camera.right = frustumSize * aspect / 2;\n",
       "        camera.top = frustumSize / 2;\n",
       "        camera.bottom = - frustumSize / 2;\n",
       "    } else if (camera.type == \"PerspectiveCamera\") {\n",
       "        camera.aspect = aspect;\n",
       "    }\n",
       "    camera.updateProjectionMatrix();\n",
       "}\n",
       "\n",
       "function changeCamera(event) {\n",
       "    var selindex = event.currentTarget.selectedIndex;\n",
       "    camera = cameras[selindex];\n",
       "    control = controls[selindex];\n",
       "    control.enabled = true; \n",
       "    for (var i=0; i<controls.length; i++) {\n",
       "        if (i!=selindex) {\n",
       "            controls[i].enabled = false;\n",
       "        }\n",
       "    }\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "var camtypenode = document.getElementById('cameraType_4');\n",
       "camtypenode.onchange = changeCamera;\n",
       "camtypenode.dispatchEvent(new Event('change'));\n",
       "\n",
       "onWindowResize();\n",
       "window.addEventListener('resize', onWindowResize);\t\n",
       "\n",
       "\n",
       "var xRotationEnabled = false;\n",
       "var yRotationEnabled = false;\n",
       "var zRotationEnabled = false;\n",
       "var rotationSpeedFactor = 1;\n",
       "var settingsShown = false;\n",
       "var labelsShown = true;\n",
       "var intervals = [];\n",
       "var timeouts = [];\n",
       "var explodingSpeed = 0.05;\n",
       "var explodeScale = 0;\n",
       "var XMLS = new XMLSerializer();\n",
       "var svgElement;\n",
       "var renderId;\n",
       "\n",
       "var render = function () {\n",
       "\n",
       "\trenderId = requestAnimationFrame(render);\n",
       "\n",
       "//\tcomment in for automatic explosion\n",
       "//\texplode(updateFactor());\n",
       "\n",
       "    var phi = 0.02 * rotationSpeedFactor;\n",
       "\n",
       "    if (xRotationEnabled) {\n",
       "        scene.rotation.x += phi;\n",
       "    }\n",
       "    if (yRotationEnabled) {\n",
       "        scene.rotation.y += phi;\n",
       "    }\n",
       "    if (zRotationEnabled) {\n",
       "        scene.rotation.z += phi;\n",
       "    }\n",
       "\n",
       "    control.update();\n",
       "    renderer.render(scene, camera);\n",
       "};\n",
       "\n",
       "if ( THREE.WEBGL.isWebGLAvailable() ) {\n",
       "\trender();\n",
       "} else {\n",
       "\tvar warning = WEBGL.getWebGLErrorMessage();\n",
       "\tthree.appendChild( warning );\n",
       "}\n",
       "    \n",
       "function changeTransparency() {\n",
       "    var opacity = 1-Number(event.currentTarget.value);\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        child = scene.children[i];\n",
       "        if ( child.userData.hasOwnProperty(\"facetmaterial\") ) {\n",
       "            if (Array.isArray(child.userData.facetmaterial)) {\n",
       "                for (var j=0; j<child.userData.facetmaterial.length; j++) {\n",
       "                    child.userData.facetmaterial[j].opacity = opacity;\n",
       "                }\n",
       "            } else {\n",
       "                child.userData.facetmaterial.opacity = opacity;\n",
       "            }    \n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function changeRotationX(event){\n",
       "    xRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationY(event){\n",
       "    yRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationZ(event){\n",
       "    zRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "\n",
       "function changeRotationSpeedFactor(event){\n",
       "    rotationSpeedFactor = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function resetScene(){\n",
       "    scene.rotation.set(0,0,0);\n",
       "    camera.position.set(0,0,5);\n",
       "    camera.up.set(0,1,0);\n",
       "}\n",
       "\n",
       "function showSettings(event){\n",
       "    document.getElementById('settings_4').style.visibility = 'visible';\n",
       "    document.getElementById('showSettingsButton_4').style.visibility = 'hidden';\n",
       "    document.getElementById('hideSettingsButton_4').style.visibility = 'visible';\n",
       "    settingsShown = true;\n",
       "}\n",
       "\n",
       "function hideSettings(event){\n",
       "    document.getElementById('settings_4').style.visibility = 'hidden';\n",
       "    document.getElementById('showSettingsButton_4').style.visibility = 'visible';\n",
       "    document.getElementById('hideSettingsButton_4').style.visibility = 'hidden';\n",
       "    settingsShown = false;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "var pos = 150* Math.PI;\n",
       "\n",
       "function updateFactor() {\n",
       "    pos++;\n",
       "    return Math.sin(.01*pos)+1;\n",
       "}\n",
       "\n",
       "// ------------------------ FOLDING ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "// rotate point p around axis defined by points p1 and p2 by given angle\n",
       "function rotate(p, p1, p2, angle ){   \n",
       "    angle = -angle;\n",
       "    var x = p.x, y = p.y, z = p.z, \n",
       "    a = p1.x, b = p1.y, c = p1.z, \n",
       "    u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z;\n",
       "    var result = [];\n",
       "    var L = u*u + v*v + w*w;\n",
       "    var sqrt = Math.sqrt;\n",
       "    var cos = Math.cos;\n",
       "    var sin = Math.sin;\n",
       "\n",
       "    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;\n",
       "    result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L;\n",
       "    result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L;\n",
       "\n",
       "    return result;\n",
       "}\n",
       "\n",
       "var fold = function(event){\n",
       "    var obj = foldables[Number(event.currentTarget.name)];\n",
       "    var foldvalue = Number(event.currentTarget.value);\n",
       "    var scale = foldvalue - obj.userData.oldscale;\n",
       "\n",
       "    for (var j=0; j<obj.userData.axes.length; j++) {\n",
       "        rotateVertices(obj, j, scale);\n",
       "    }\n",
       "    update(obj);\n",
       "    obj.userData.oldscale += scale;\n",
       "    lookAtBarycenter(obj);\n",
       "}\n",
       "\n",
       "function lookAtBarycenter(obj){\n",
       "    control.target = barycenter(obj);\n",
       "}\n",
       "\n",
       "function barycenter(obj) {\n",
       "    var center = new THREE.Vector3(0,0,0);\n",
       "    var points = obj.userData.points;\n",
       "    for (var i=0; i<points.length; i++){\n",
       "        center.add(points[i].vector);\n",
       "    }\n",
       "    center.divideScalar(points.length);\n",
       "    return center;\n",
       "}\n",
       "\n",
       "function rotateVertices(obj, edge, scale) {\n",
       "    var axes = obj.userData.axes;\n",
       "    var subtrees = obj.userData.subtrees;\n",
       "    var points = obj.userData.points;\n",
       "    var angles = obj.userData.angles;\n",
       "    if (edge < axes.length){\n",
       "        for (var j=0; j<subtrees[edge].length; j++){\n",
       "            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));\n",
       "            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function update(obj) {\n",
       "   updateFacesPosition(obj);\n",
       "   updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "if (foldables.length) {\n",
       "    var settings = document.getElementById('settings_4');\n",
       "    var foldDiv = document.createElement('div');\n",
       "    foldDiv.id = 'fold_4';\n",
       "    var title = document.createElement('strong');\n",
       "    title.innerHTML = 'Fold';\n",
       "    foldDiv.appendChild(title);\n",
       "    foldDiv.className = 'group';\n",
       "    for (var i=0; i<foldables.length; i++) {\n",
       "        var range = document.createElement('input');\n",
       "        range.type = 'range';\n",
       "        range.min = 0;\n",
       "        range.max = 1;\n",
       "        range.value = 0;\n",
       "        range.step = 0.001;\n",
       "        range.name = String(i);\n",
       "        range.oninput = fold;\n",
       "        foldDiv.appendChild(range);\n",
       "    }\n",
       "    lookAtBarycenter(foldables[0]);\n",
       "    settings.insertBefore(foldDiv,settings.childNodes[0]);\n",
       "}\n",
       "\n",
       "    \n",
       "// ---------------------- EXPLOSION ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "if (explodableModel) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        obj = scene.children[i];\n",
       "        if ( obj.userData.explodable ) {\n",
       "            computeCentroid(obj);\n",
       "        }\n",
       "    }\n",
       "    document.getElementById('explodeRange_4').oninput = triggerExplode;\n",
       "    document.getElementById('explodeCheckbox_4').onchange = triggerAutomaticExplode;\n",
       "    document.getElementById('explodingSpeedRange_4').oninput = setExplodingSpeed;\n",
       "}\n",
       "\n",
       "function computeCentroid(obj) {\n",
       "    centroid = new THREE.Vector3();\n",
       "    obj.userData.points.forEach(function(pmpoint) {\n",
       "        centroid.add(pmpoint.vector);\t\t\t\n",
       "    });\n",
       "    centroid.divideScalar(obj.userData.points.length);\n",
       "    obj.userData.centroid = centroid;\n",
       "}\n",
       "\n",
       "function explode(factor) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        var obj = scene.children[i];\n",
       "        if (obj.userData.hasOwnProperty(\"centroid\")) { \n",
       "            var c = obj.userData.centroid;\n",
       "            obj.position.set(c.x*factor, c.y*factor, c.z*factor);\n",
       "        }\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function triggerExplode(event){\n",
       "    explodeScale = Number(event.currentTarget.value);\n",
       "    explode(explodeScale);\n",
       "}\n",
       "\n",
       "function setExplodingSpeed(event){\n",
       "    explodingSpeed = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function triggerAutomaticExplode(event){\n",
       "    if (event.currentTarget.checked){\n",
       "        startExploding();\n",
       "    } else {\n",
       "        clearIntervals();\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function startExploding(){\n",
       "    intervals.push(setInterval(explodingInterval, 25));\n",
       "}\n",
       "\n",
       "\n",
       "function explodingInterval(){\n",
       "    explodeScale += explodingSpeed;\n",
       "    if (explodeScale <= 6){ \n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else{\n",
       "        explode(6);\n",
       "        explodeScale = 6;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startUnexploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_4').value = explodeScale;\n",
       "}\n",
       "\n",
       "\n",
       "function startUnexploding(){\n",
       "    intervals.push(setInterval(unexplodingInterval, 25));\n",
       "}\n",
       "\n",
       "function unexplodingInterval(){\n",
       "    explodeScale -= explodingSpeed;\n",
       "    if (explodeScale >= 0){\t\n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else {\n",
       "        explode(0);\n",
       "        explodeScale = 0;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startExploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_4').value = explodeScale;\n",
       "}\n",
       "\n",
       "function clearIntervals(){\n",
       "    intervals.forEach(function(interval){\n",
       "        clearInterval(interval);\n",
       "    });\n",
       "    intervals = [];\n",
       "    timeouts.forEach(function(timeout){\n",
       "        clearTimeout(timeout);\n",
       "    });\n",
       "    timeouts = [];\n",
       "}\n",
       "\n",
       "// ---------------------- DISPLAY --------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "const objectTypeInnerHTMLs = { points: \"Points\", pointlabels: \"Point labels\", lines: \"Edges\", edgelabels: \"Edge labels\", faces: \"Faces\", arrowheads: \"Arrow heads\" };\n",
       "const objectTypeVisible = {};\n",
       "Object.assign(objectTypeVisible,modelContains);\n",
       "const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();\n",
       "const shownObjectTypesList = document.getElementById('shownObjectTypesList_4');\n",
       "\n",
       "function setVisibility(bool,objname) {\n",
       "    for (var i=0; i<scene.children.length; i++){\n",
       "        var obj = scene.children[i].getObjectByName(objname);\n",
       "        if (obj) {\n",
       "            obj.visible = bool;\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function toggleObjectTypeVisibility(event){\n",
       "    var name = event.currentTarget.name;\n",
       "    var checked = event.currentTarget.checked;\n",
       "    objectTypeVisible[name] = checked;\n",
       "    setVisibility(checked,name);\n",
       "}\n",
       "\n",
       "for (var i=0; i<sortedObjectTypeKeys.length; i++){\n",
       "    var key = sortedObjectTypeKeys[i];\n",
       "    if (modelContains[key]) {\n",
       "        var objTypeNode = document.createElement('span');\n",
       "        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';\n",
       "        var checkbox = document.createElement('input');\n",
       "        checkbox.type = 'checkbox';\n",
       "        checkbox.checked = true;\n",
       "        checkbox.name = key;\n",
       "        checkbox.onchange = toggleObjectTypeVisibility;\n",
       "        shownObjectTypesList.appendChild(checkbox);\n",
       "        shownObjectTypesList.appendChild(objTypeNode);\n",
       "    }\n",
       "}\n",
       "\n",
       "// ------------------------------------------------------\n",
       "\n",
       "function toggleObjectVisibility(event){\n",
       "    var nr = Number(event.currentTarget.name);\n",
       "    scene.children[nr].visible = event.currentTarget.checked;\n",
       "}\n",
       "\n",
       "// append checkboxes for displaying or hiding objects\n",
       "var shownObjectsList = document.getElementById('shownObjectsList_4');\n",
       "for (var i=0; i<scene.children.length; i++){\n",
       "    obj = scene.children[i];\n",
       "    var objNode = document.createElement('span');\n",
       "    objNode.innerHTML = obj.name + '<br>';\n",
       "    var checkbox = document.createElement('input');\n",
       "    checkbox.type = 'checkbox';\n",
       "    checkbox.checked = true;\n",
       "    checkbox.name = String(i);\n",
       "    checkbox.onchange = toggleObjectVisibility;\n",
       "    shownObjectsList.appendChild(checkbox);\n",
       "    shownObjectsList.appendChild(objNode);\n",
       "}\n",
       "\n",
       "// ---------------------- SVG ------------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function takeSvgScreenshot() {\n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(false,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(false,\"edgelabels\");\n",
       "    }\n",
       "    svgRenderer.render(scene,camera);\n",
       "    svgElement = XMLS.serializeToString(svgRenderer.domElement);\n",
       "    \n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(true,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(true,\"edgelabels\");\n",
       "    }\n",
       "\n",
       "    if (document.getElementById('tab_4').checked){\n",
       "        //show in new tab\n",
       "        var myWindow = window.open(\"\",\"\");\n",
       "        myWindow.document.body.innerHTML = svgElement;\n",
       "    } else{\n",
       "        // download svg file \n",
       "        download(\"screenshot.svg\", svgElement);\n",
       "    }\n",
       "}\n",
       "\n",
       "function download(filename, text) {\n",
       "    var element = document.createElement('a');\n",
       "    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));\n",
       "    element.setAttribute('download', filename);\n",
       "\n",
       "    element.style.display = 'none';\n",
       "    document.body.appendChild(element);\n",
       "\n",
       "    element.click();\n",
       "\n",
       "    document.body.removeChild(element);\n",
       "}\n",
       "\n",
       "\n",
       "document.getElementById('transparencyRange_4').oninput = changeTransparency;\n",
       "document.getElementById('changeRotationX_4').onchange = changeRotationX;\n",
       "document.getElementById('changeRotationY_4').onchange = changeRotationY;\n",
       "document.getElementById('changeRotationZ_4').onchange = changeRotationZ;\n",
       "document.getElementById('resetButton_4').onclick = resetScene;\n",
       "document.getElementById('rotationSpeedRange_4').oninput = changeRotationSpeedFactor;\n",
       "document.getElementById('takeScreenshot_4').onclick = takeSvgScreenshot;\n",
       "document.getElementById('showSettingsButton_4').onclick = showSettings;\n",
       "document.getElementById('hideSettingsButton_4').onclick = hideSettings;\n",
       "\n",
       "\n",
       "// ------------------ SHORTCUTS --------------------------------------------\n",
       "// -------------------------------------------------------------------------\n",
       "\n",
       "/**\n",
       " * http://www.openjs.com/scripts/events/keyboard_shortcuts/\n",
       " * Version : 2.01.B\n",
       " * By Binny V A\n",
       " * License : BSD\n",
       " */\n",
       "shortcut = {\n",
       "\t'all_shortcuts':{},//All the shortcuts are stored in this array\n",
       "\t'add': function(shortcut_combination,callback,opt) {\n",
       "\t\t//Provide a set of default options\n",
       "\t\tvar default_options = {\n",
       "\t\t\t'type':'keydown',\n",
       "\t\t\t'propagate':false,\n",
       "\t\t\t'disable_in_input':false,\n",
       "\t\t\t'target':document,\n",
       "\t\t\t'keycode':false\n",
       "\t\t}\n",
       "\t\tif(!opt) opt = default_options;\n",
       "\t\telse {\n",
       "\t\t\tfor(var dfo in default_options) {\n",
       "\t\t\t\tif(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\n",
       "\t\tvar ele = opt.target;\n",
       "\t\tif(typeof opt.target == 'string') ele = document.getElementById(opt.target);\n",
       "\t\tvar ths = this;\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\n",
       "\t\t//The function to be called at keypress\n",
       "\t\tvar func = function(e) {\n",
       "\t\t\te = e || window.event;\n",
       "\t\t\t\n",
       "\t\t\tif(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields\n",
       "\t\t\t\tvar element;\n",
       "\t\t\t\tif(e.target) element=e.target;\n",
       "\t\t\t\telse if(e.srcElement) element=e.srcElement;\n",
       "\t\t\t\tif(element.nodeType==3) element=element.parentNode;\n",
       "\n",
       "\t\t\t\tif(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\t//Find Which key is pressed\n",
       "\t\t\tif (e.keyCode) code = e.keyCode;\n",
       "\t\t\telse if (e.which) code = e.which;\n",
       "\t\t\tvar character = String.fromCharCode(code).toLowerCase();\n",
       "\t\t\t\n",
       "\t\t\tif(code == 188) character=\",\"; //If the user presses , when the type is onkeydown\n",
       "\t\t\tif(code == 190) character=\".\"; //If the user presses , when the type is onkeydown\n",
       "\n",
       "\t\t\tvar keys = shortcut_combination.split(\"+\");\n",
       "\t\t\t//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked\n",
       "\t\t\tvar kp = 0;\n",
       "\t\t\t\n",
       "\t\t\t//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken\n",
       "\t\t\tvar shift_nums = {\n",
       "\t\t\t\t\"`\":\"~\",\n",
       "\t\t\t\t\"1\":\"!\",\n",
       "\t\t\t\t\"2\":\"@\",\n",
       "\t\t\t\t\"3\":\"#\",\n",
       "\t\t\t\t\"4\":\"$\",\n",
       "\t\t\t\t\"5\":\"%\",\n",
       "\t\t\t\t\"6\":\"^\",\n",
       "\t\t\t\t\"7\":\"&\",\n",
       "\t\t\t\t\"8\":\"*\",\n",
       "\t\t\t\t\"9\":\"(\",\n",
       "\t\t\t\t\"0\":\")\",\n",
       "\t\t\t\t\"-\":\"_\",\n",
       "\t\t\t\t\"=\":\"+\",\n",
       "\t\t\t\t\";\":\":\",\n",
       "\t\t\t\t\"'\":\"\\\"\",\n",
       "\t\t\t\t\",\":\"<\",\n",
       "\t\t\t\t\".\":\">\",\n",
       "\t\t\t\t\"/\":\"?\",\n",
       "\t\t\t\t\"\\\\\":\"|\"\n",
       "\t\t\t}\n",
       "\t\t\t//Special Keys - and their codes\n",
       "\t\t\tvar special_keys = {\n",
       "\t\t\t\t'esc':27,\n",
       "\t\t\t\t'escape':27,\n",
       "\t\t\t\t'tab':9,\n",
       "\t\t\t\t'space':32,\n",
       "\t\t\t\t'return':13,\n",
       "\t\t\t\t'enter':13,\n",
       "\t\t\t\t'backspace':8,\n",
       "\t\n",
       "\t\t\t\t'scrolllock':145,\n",
       "\t\t\t\t'scroll_lock':145,\n",
       "\t\t\t\t'scroll':145,\n",
       "\t\t\t\t'capslock':20,\n",
       "\t\t\t\t'caps_lock':20,\n",
       "\t\t\t\t'caps':20,\n",
       "\t\t\t\t'numlock':144,\n",
       "\t\t\t\t'num_lock':144,\n",
       "\t\t\t\t'num':144,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pause':19,\n",
       "\t\t\t\t'break':19,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'insert':45,\n",
       "\t\t\t\t'home':36,\n",
       "\t\t\t\t'delete':46,\n",
       "\t\t\t\t'end':35,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pageup':33,\n",
       "\t\t\t\t'page_up':33,\n",
       "\t\t\t\t'pu':33,\n",
       "\t\n",
       "\t\t\t\t'pagedown':34,\n",
       "\t\t\t\t'page_down':34,\n",
       "\t\t\t\t'pd':34,\n",
       "\t\n",
       "\t\t\t\t'left':37,\n",
       "\t\t\t\t'up':38,\n",
       "\t\t\t\t'right':39,\n",
       "\t\t\t\t'down':40,\n",
       "\t\n",
       "\t\t\t\t'f1':112,\n",
       "\t\t\t\t'f2':113,\n",
       "\t\t\t\t'f3':114,\n",
       "\t\t\t\t'f4':115,\n",
       "\t\t\t\t'f5':116,\n",
       "\t\t\t\t'f6':117,\n",
       "\t\t\t\t'f7':118,\n",
       "\t\t\t\t'f8':119,\n",
       "\t\t\t\t'f9':120,\n",
       "\t\t\t\t'f10':121,\n",
       "\t\t\t\t'f11':122,\n",
       "\t\t\t\t'f12':123\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\tvar modifiers = { \n",
       "\t\t\t\tshift: { wanted:false, pressed:false},\n",
       "\t\t\t\tctrl : { wanted:false, pressed:false},\n",
       "\t\t\t\talt  : { wanted:false, pressed:false},\n",
       "\t\t\t\tmeta : { wanted:false, pressed:false}\t//Meta is Mac specific\n",
       "\t\t\t};\n",
       "                        \n",
       "\t\t\tif(e.ctrlKey)\tmodifiers.ctrl.pressed = true;\n",
       "\t\t\tif(e.shiftKey)\tmodifiers.shift.pressed = true;\n",
       "\t\t\tif(e.altKey)\tmodifiers.alt.pressed = true;\n",
       "\t\t\tif(e.metaKey)   modifiers.meta.pressed = true;\n",
       "                        \n",
       "\t\t\tfor(var i=0; k=keys[i],i<keys.length; i++) {\n",
       "\t\t\t\t//Modifiers\n",
       "\t\t\t\tif(k == 'ctrl' || k == 'control') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.ctrl.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'shift') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.shift.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'alt') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.alt.wanted = true;\n",
       "\t\t\t\t} else if(k == 'meta') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.meta.wanted = true;\n",
       "\t\t\t\t} else if(k.length > 1) { //If it is a special key\n",
       "\t\t\t\t\tif(special_keys[k] == code) kp++;\n",
       "\t\t\t\t\t\n",
       "\t\t\t\t} else if(opt['keycode']) {\n",
       "\t\t\t\t\tif(opt['keycode'] == code) kp++;\n",
       "\n",
       "\t\t\t\t} else { //The special keys did not match\n",
       "\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\telse {\n",
       "\t\t\t\t\t\tif(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase\n",
       "\t\t\t\t\t\t\tcharacter = shift_nums[character]; \n",
       "\t\t\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\t\t}\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t\t\n",
       "\t\t\tif(kp == keys.length && \n",
       "\t\t\t\t\t\tmodifiers.ctrl.pressed == modifiers.ctrl.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.shift.pressed == modifiers.shift.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.alt.pressed == modifiers.alt.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.meta.pressed == modifiers.meta.wanted) {\n",
       "\t\t\t\tcallback(e);\n",
       "\t\n",
       "\t\t\t\tif(!opt['propagate']) { //Stop the event\n",
       "\t\t\t\t\t//e.cancelBubble is supported by IE - this will kill the bubbling process.\n",
       "\t\t\t\t\te.cancelBubble = true;\n",
       "\t\t\t\t\te.returnValue = false;\n",
       "\t\n",
       "\t\t\t\t\t//e.stopPropagation works in Firefox.\n",
       "\t\t\t\t\tif (e.stopPropagation) {\n",
       "\t\t\t\t\t\te.stopPropagation();\n",
       "\t\t\t\t\t\te.preventDefault();\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t\treturn false;\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\t\tthis.all_shortcuts[shortcut_combination] = {\n",
       "\t\t\t'callback':func, \n",
       "\t\t\t'target':ele, \n",
       "\t\t\t'event': opt['type']\n",
       "\t\t};\n",
       "\t\t//Attach the function with the event\n",
       "\t\tif(ele.addEventListener) ele.addEventListener(opt['type'], func, false);\n",
       "\t\telse if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);\n",
       "\t\telse ele['on'+opt['type']] = func;\n",
       "\t},\n",
       "\n",
       "\t//Remove the shortcut - just specify the shortcut and I will remove the binding\n",
       "\t'remove':function(shortcut_combination) {\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\t\tvar binding = this.all_shortcuts[shortcut_combination];\n",
       "\t\tdelete(this.all_shortcuts[shortcut_combination])\n",
       "\t\tif(!binding) return;\n",
       "\t\tvar type = binding['event'];\n",
       "\t\tvar ele = binding['target'];\n",
       "\t\tvar callback = binding['callback'];\n",
       "\n",
       "\t\tif(ele.detachEvent) ele.detachEvent('on'+type, callback);\n",
       "\t\telse if(ele.removeEventListener) ele.removeEventListener(type, callback, false);\n",
       "\t\telse ele['on'+type] = false;\n",
       "\t}\n",
       "}\n",
       "\n",
       "shortcut.add(\"Alt+Left\",function() {\n",
       "\tvar event = new Event('click');\n",
       "\tif (settingsShown){\n",
       "\t\tdocument.getElementById('hideSettingsButton_4').dispatchEvent(event);\n",
       "\t} else {\n",
       "\t\tdocument.getElementById('showSettingsButton_4').dispatchEvent(event);\n",
       "\t}\n",
       "});\n",
       "\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "});});\n",
       "      </script>\n",
       "   </body>\n",
       "</html>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "simplex(3)->VISUAL(VertexLabels=>[\"\", \"\", \"My favorite vertex\", \"\"]);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "** Function **: We may also write a perl function that returns a label depending on the index of the vertex. For example, if we want to label the vertices by their coordinates, we can use the following commands:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!--\n",
       "polymake for knusper\n",
       "Thu Aug 27 11:44:14 2020\n",
       "tet\n",
       "-->\n",
       "\n",
       "\n",
       "<html>\n",
       "   <head>\n",
       "      <meta charset=utf-8>\n",
       "      <title>tet</title>\n",
       "      <style>\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "*/\n",
       "         html {overflow: scroll;}\n",
       "         strong{font-size: 18px;}\n",
       "         canvas { z-index: 8; }\n",
       "         input[type='radio'] {margin-left:0;}\n",
       "         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}\n",
       "         .group{padding-bottom: 15px;}\n",
       "         .settings * {z-index: 11; }\n",
       "         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}\n",
       "         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} \n",
       "         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}\n",
       "         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }\n",
       "         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}\n",
       "         button{margin-left: 0; margin-top: 10px}\n",
       "         img{cursor: pointer;}\n",
       "         .suboption{padding-top: 15px;}\n",
       "         #model95004033156 { width: 100%; height: 100%; }\n",
       "         .threejs_container { width: 100%; height: 75vh;}\n",
       "         .settings{max-height: 74vh} \n",
       "         input[type=range] {\n",
       "           -webkit-appearance: none;\n",
       "           padding:0; \n",
       "           width:90%; \n",
       "           margin-left: auto;\n",
       "           margin-right: auto;\n",
       "           margin-top: 15px;\n",
       "           margin-bottom: 15px;\n",
       "           display: block;\t\n",
       "         }\n",
       "         input[type=range]:focus {\n",
       "           outline: none;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-runnable-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "           -webkit-appearance: none;\n",
       "           margin-top: -5px;\n",
       "         }\n",
       "         input[type=range]:focus::-webkit-slider-runnable-track {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]::-moz-range-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-moz-range-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]::-ms-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           background: transparent;\n",
       "           border-color: transparent;\n",
       "           color: transparent;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_END\n",
       "*/\n",
       "\t\t</style>\n",
       "   </head>\n",
       "<body>\n",
       "   <div class='threejs_container'>\n",
       "\t\t<div id='settings_5' class='settings'>\n",
       "\t\t\t<div class=group id='transparency_5' class='transparency'>\n",
       "\t\t\t\t<strong>Transparency</strong>\n",
       "\t\t\t\t<input id='transparencyRange_5' type='range' min=0 max=1 step=0.01 value=0>\n",
       "\t\t\t</div>\n",
       "\t\t\t\n",
       "\t\t\t<div class=group id='rotation_5'>\n",
       "\t\t\t\t<strong>Rotation</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationX_5'> x-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationY_5'> y-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationZ_5'> z-axis</div>\n",
       "\t\t\t\t\t<button id='resetButton_5'>Reset</button>\n",
       "\t\t\t\t</div>\n",
       "\n",
       "\t\t\t\t<div class=suboption>Rotation speed</div>\n",
       "\t\t\t\t<input id='rotationSpeedRange_5' type='range' min=0 max=5 step=0.01 value=2>\n",
       "\t\t\t</div>\n",
       "\n",
       "\n",
       "\t\t\t<div class=group id='display_5'>\n",
       "\t\t\t\t<strong>Display</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div id='shownObjectTypesList_5' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t\t<div class=suboption>Objects</div>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t   <div id='shownObjectsList_5' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "         \n",
       "         <div class=group id='camera_5'>\n",
       "            <strong>Camera</strong>\n",
       "            <div class=indented>\n",
       "               <form>\n",
       "                  <select id=\"cameraType_5\">\n",
       "                     <option value='perspective' selected> Perspective<br></option>\n",
       "                     <option value='orthographic' > Orthographic<br></option>\n",
       "                  </select>\n",
       "               </form>\n",
       "            </div>\n",
       "         </div>\n",
       "\n",
       "\t\t\t<div class=group id='svg_5'>\n",
       "\t\t\t\t<strong>SVG</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<form>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='download' id='download_5' checked> Download<br>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='tab' id='tab_5' > New tab<br>\n",
       "\t\t\t\t\t</form>\n",
       "\t\t\t\t\t<button id='takeScreenshot_5'>Screenshot</button>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "\n",
       "\t\t</div>\t<!-- end of settings -->\n",
       "\t\t<img id='hideSettingsButton_5' class='hideSettingsButton' src='/kernelspecs/polymake/close.svg' width=20px\">\n",
       "\t\t<img id='showSettingsButton_5' class='showSettingsButton' src='/kernelspecs/polymake/menu.svg' width=20px\">\n",
       "<div id=\"model95004033156\"></div>\n",
       "</div>\n",
       "   <script>\n",
       "    requirejs.config({\n",
       "      paths: {\n",
       "        three: '/kernelspecs/polymake/three',\n",
       "        TrackballControls: '/kernelspecs/polymake/TrackballControls',\n",
       "        OrbitControls: '/kernelspecs/polymake/OrbitControls',\n",
       "        Projector: '/kernelspecs/polymake/Projector',\n",
       "        SVGRenderer: '/kernelspecs/polymake/SVGRenderer',\n",
       "        WEBGL: '/kernelspecs/polymake/WebGL',\n",
       "      },\n",
       "      shim: {\n",
       "        'three': { exports: 'THREE'},\n",
       "        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },\n",
       "        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },\n",
       "        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },\n",
       "        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },\n",
       "        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },\n",
       "      }\n",
       "    });\n",
       "    \n",
       "    require(['three'],function(THREE){\n",
       "        window.THREE = THREE;\n",
       "      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],\n",
       "               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {\n",
       "    THREE.TrackballControls = TrackballControls;\n",
       "    THREE.OrbitControls = OrbitControls;\n",
       "    THREE.Projector = Projector;\n",
       "    THREE.SVGRenderer = SVGRenderer;\n",
       "    THREE.WEBGL = WEBGL;\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "\n",
       "const intervalLength = 25; // for automatic animations\n",
       "const explodableModel = false; \n",
       "const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };\n",
       "const foldables = [];\n",
       "\n",
       "var three = document.getElementById(\"model95004033156\");\n",
       "var scene = new THREE.Scene();\n",
       "var renderer = new THREE.WebGLRenderer( { antialias: true } );\n",
       "var svgRenderer = new THREE.SVGRenderer( { antialias: true } );\n",
       "renderer.setPixelRatio( window.devicePixelRatio );\n",
       "renderer.setClearColor(0xFFFFFF, 1);\n",
       "svgRenderer.setClearColor(0xFFFFFF, 1);\n",
       "three.appendChild(renderer.domElement);\n",
       "\n",
       "var frustumSize = 4;\n",
       "var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];\n",
       "cameras.forEach(function(cam) {\n",
       "    cam.position.set(0, 0, 5);\n",
       "    cam.lookAt(0, 0, 0);  \n",
       "    cam.up.set(0, 1, 0);         \n",
       "});\n",
       "var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];\n",
       "var camera, control;\n",
       "\n",
       "controls[0].zoomSpeed = 0.2;\n",
       "controls[0].rotateSpeed = 4;\n",
       "\n",
       "\n",
       "// class to allow move points together with labels and spheres\n",
       "var PMPoint = function (x,y,z) {\n",
       "   this.vector = new THREE.Vector3(x,y,z);\n",
       "   this.sprite = null;\n",
       "   this.sphere = null;\n",
       "}\n",
       "PMPoint.prototype.addLabel = function(labelsprite) {\n",
       "   this.sprite = labelsprite;\n",
       "   this.sprite.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.addSphere = function(spheremesh) {\n",
       "   this.sphere = spheremesh;\n",
       "   this.sphere.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.set = function(x,y,z) {\n",
       "   this.vector.set(x,y,z);\n",
       "   if (this.sprite) {\n",
       "      this.sprite.position.copy(this.vector);\n",
       "   }\n",
       "   if (this.sphere) {\n",
       "      this.sphere.position.copy(this.vector);\n",
       "   }\n",
       "}\n",
       "PMPoint.prototype.radius = function() {\n",
       "   if (this.sphere) {\n",
       "      return this.sphere.geometry.parameters.radius;\n",
       "   } else {\n",
       "      return 0;\n",
       "   }\n",
       "};\n",
       "// select the target node\n",
       "var target = document.querySelector('#model95004033156');\n",
       "\n",
       "// create an observer instance\n",
       "var observer = new MutationObserver(function(mutations) {\n",
       "   mutations.forEach(function(mutation) {\n",
       "      if (mutation.removedNodes && mutation.removedNodes.length > 0) {\n",
       "         cancelAnimationFrame(renderId);\n",
       "         observer.disconnect();\n",
       "         console.log(\"cancelled frame \"+renderId);\n",
       "      }\n",
       "   });\n",
       "});\n",
       "\n",
       "// configuration of the observer:\n",
       "var config = { childList: true, characterData: true }\n",
       "\n",
       "// pass in the target node, as well as the observer options\n",
       "while (target) {\n",
       "   if (target.className==\"output\") {\n",
       "      observer.observe(target, config);\n",
       "      break;\n",
       "   }\n",
       "   target = target.parentNode;\n",
       "}\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "var obj0 = new THREE.Object3D();\n",
       "obj0.name = \"tet\";\n",
       "obj0.userData.explodable = 1;\n",
       "obj0.userData.points = [];\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(1, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 1, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 1));\n",
       "\n",
       "obj0.userData.pointradii = 0.02;\n",
       "   <!-- Vertex style -->\n",
       "obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );\n",
       "obj0.userData.pointlabels = [\"(4) (0 1)\", \"1 1 0 0\", \"1 0 1 0\", \"1 0 0 1\"];\n",
       "obj0.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];\n",
       "   <!-- Edge style -->\n",
       "obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } );\n",
       "obj0.userData.facets = [[2, 3, 1], [0, 3, 2], [1, 3, 0], [2, 1, 0]];\n",
       "   <!-- Facet style -->\n",
       "obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );\n",
       "init_object(obj0);\n",
       "scene.add(obj0);\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "function textSpriteMaterial(message, parameters) {\n",
       "    if ( parameters === undefined ) parameters = {};\n",
       "    var fontface = \"Helvetica\";\n",
       "    var fontsize = parameters.hasOwnProperty(\"fontsize\") ? parameters[\"fontsize\"] : 15;\n",
       "    fontsize = fontsize*10;\n",
       "    var lines = message.split('\\\\n');\n",
       "    var size = 512;\n",
       "    for(var i = 0; i<lines.length; i++){\n",
       "        var tmp = lines[i].length;\n",
       "        while(tmp*fontsize > size){\n",
       "           fontsize--;\n",
       "        }\n",
       "    }\n",
       "    \n",
       "    var canvas = document.createElement('canvas');\n",
       "    canvas.width = size;\n",
       "    canvas.height = size;\n",
       "    var context = canvas.getContext('2d');\n",
       "    context.fillStyle = \"rgba(255, 255, 255, 0)\";\n",
       "    context.fill();\n",
       "    context.font = fontsize + \"px \" + fontface;\n",
       "    \n",
       "    // text color\n",
       "    context.fillStyle = \"rgba(0, 0, 0, 1.0)\";\n",
       "     for(var i = 0; i<lines.length; i++){\n",
       "        context.fillText(lines[i], size/2, size/2+i*fontsize);\n",
       "     }\n",
       "    \n",
       "    // canvas contents will be used for a texture\n",
       "    var texture = new THREE.Texture(canvas);\n",
       "    texture.needsUpdate = true;\n",
       "    \n",
       "    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });\n",
       "    return spriteMaterial;\n",
       "}\n",
       "\n",
       "\n",
       "// ---------------------- INITIALIZING OBJECTS--------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function init_object(obj) {\n",
       "    if (obj.userData.hasOwnProperty(\"pointmaterial\")) {\n",
       "        init_points(obj);\n",
       "        modelContains.points = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"pointlabels\")) {\n",
       "        init_pointlabels(obj);\n",
       "        modelContains.pointlabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgematerial\")) {\n",
       "        init_lines(obj);\n",
       "        modelContains.lines = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgelabels\")) {\n",
       "        init_edgelabels(obj);\n",
       "        modelContains.edgelabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"arrowstyle\")) {\n",
       "        init_arrowheads(obj);\n",
       "        modelContains.arrowheads = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"facetmaterial\")) {\n",
       "        init_faces(obj);\n",
       "        modelContains.faces = true;\n",
       "    }\n",
       "}\n",
       "\n",
       "function init_points(obj) {\n",
       "    var pointgroup = new THREE.Group();\n",
       "    pointgroup.name = \"points\";\n",
       "    var points = obj.userData.points;\n",
       "    var radii = obj.userData.pointradii;\n",
       "    var materials = obj.userData.pointmaterial;\n",
       "    var geometry,material;\n",
       "    if (!Array.isArray(radii)) {\n",
       "        geometry = new THREE.SphereBufferGeometry(radii);  \n",
       "    }\n",
       "    if (!Array.isArray(materials)) {\n",
       "        material = materials;\n",
       "    }\n",
       "    for (var i=0; i<points.length; i++) {\n",
       "        var point = points[i];\n",
       "        if (Array.isArray(radii)) {\n",
       "            if (radii[i] == 0) {\n",
       "                continue;\n",
       "            }\n",
       "            geometry = new THREE.SphereBufferGeometry(radii[i]);  \n",
       "        } \n",
       "        if (Array.isArray(materials)) {\n",
       "            material = materials[i];     \n",
       "        } \n",
       "        var sphere = new THREE.Mesh(geometry, material);\n",
       "        point.addSphere(sphere);\n",
       "        pointgroup.add(sphere);\n",
       "    }\n",
       "    obj.add(pointgroup);\n",
       "}\n",
       "\n",
       "function init_pointlabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var labels = obj.userData.pointlabels;\n",
       "    var pointlabels = new THREE.Group();\n",
       "    pointlabels.name = \"pointlabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(pointlabels);\n",
       "}\n",
       "\n",
       "function init_lines(obj) {\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var points = obj.userData.points;\n",
       "    var materials = obj.userData.edgematerial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    var bufarr = new Float32Array( obj.userData.edgeindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute( bufarr, 3 );\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position', bufattr);\n",
       "    if (Array.isArray(materials)) {     \n",
       "        for (var i=0; i<materials.length; i++) {\n",
       "            geometry.addGroup(2*i,2,i);\n",
       "        }\n",
       "    }\n",
       "    var lines = new THREE.LineSegments(geometry, materials);\n",
       "    lines.name = \"lines\";\n",
       "    obj.add(lines);\n",
       "    updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "function init_edgelabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var labels = obj.userData.edgelabels;\n",
       "    var edgelabels = new THREE.Group();\n",
       "    edgelabels.name = \"edgelabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            edgelabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(edgelabels);\n",
       "}\n",
       "\n",
       "function init_arrowheads(obj) {\n",
       "    var arrowheads = new THREE.Group();\n",
       "    arrowheads.name = \"arrowheads\";\n",
       "    var arrowstyle = obj.userData.arrowstyle;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var edgematerials = obj.userData.edgematerial;\n",
       "    var points = obj.userData.points;\n",
       "    var material;\n",
       "    if (!Array.isArray(edgematerials)) {\n",
       "        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );\n",
       "    }\n",
       "\n",
       "    for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "        var start = points[edgeindices[i]];\n",
       "        var end = points[edgeindices[i+1]];\n",
       "        var dist = start.vector.distanceTo( end.vector ) - start.radius() - end.radius();\n",
       "        if (dist <= 0) {\n",
       "            continue;\n",
       "        }\n",
       "        var dir = new THREE.Vector3().subVectors(end.vector,start.vector);\n",
       "        dir.normalize();\n",
       "        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);\n",
       "        axis.normalize();\n",
       "        var radians = Math.acos( dir.y );\n",
       "        var radius = dist/25;\n",
       "        var height = dist/5;\n",
       "        var geometry = new THREE.ConeBufferGeometry(radius,height);\n",
       "        var position = new THREE.Vector3().addVectors(start.vector,dir.clone().multiplyScalar(start.radius()+dist-height/2));\n",
       "        if (Array.isArray(edgematerials)) {\n",
       "            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );\n",
       "        }\n",
       "        var cone = new THREE.Mesh( geometry, material );\n",
       "        cone.quaternion.setFromAxisAngle(axis,radians);;\n",
       "        cone.position.copy(position);;\n",
       "        arrowheads.add(cone);\n",
       "    }\n",
       "    obj.add(arrowheads);\n",
       "}\n",
       "\n",
       "function init_faces(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var facets = obj.userData.facets;\n",
       "    obj.userData.triangleindices = [];\n",
       "    for (var i=0; i<facets.length; i++) {\n",
       "        facet = facets[i];\n",
       "        for (var t=0; t<facet.length-2; t++) {\n",
       "            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  \n",
       "        }\n",
       "    }\n",
       "    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);\n",
       "    \n",
       "    var materials = obj.userData.facetmaterial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position',bufattr);\n",
       "    if (Array.isArray(materials)) {\n",
       "        var tricount = 0;\n",
       "        var facet;\n",
       "        for (var i=0; i<facets.length; i++) {\n",
       "            facet = facets[i];\n",
       "            geometry.addGroup(tricount,(facet.length-2)*3,i);\n",
       "            tricount += (facet.length-2)*3;\n",
       "        }\n",
       "    }\n",
       "    var mesh = new THREE.Mesh(geometry, materials);\n",
       "    mesh.name = \"faces\";\n",
       "    obj.add(mesh); \n",
       "    updateFacesPosition(obj);\n",
       "}\n",
       "// //INITIALIZING\n",
       "\n",
       "\n",
       "function updateFacesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.triangleindices;\n",
       "    var faces = obj.getObjectByName(\"faces\");\n",
       "    var ba = faces.geometry.getAttribute(\"position\");\n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    faces.geometry.attributes.position.needsUpdate = true;\n",
       "    \n",
       "}\n",
       "\n",
       "function updateEdgesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.edgeindices;\n",
       "    var lines = obj.getObjectByName(\"lines\");\n",
       "    var ba = lines.geometry.getAttribute(\"position\"); \n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    lines.geometry.attributes.position.needsUpdate = true;\n",
       "}\n",
       "\n",
       "function onWindowResize() {\n",
       "    renderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    svgRenderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "function updateCamera() {\n",
       "    var width = three.clientWidth;\n",
       "    var height = three.clientHeight;\n",
       "    var aspect = width / height;\n",
       "    if (camera.type == \"OrthographicCamera\") {\n",
       "        camera.left = frustumSize * aspect / - 2;\n",
       "        camera.right = frustumSize * aspect / 2;\n",
       "        camera.top = frustumSize / 2;\n",
       "        camera.bottom = - frustumSize / 2;\n",
       "    } else if (camera.type == \"PerspectiveCamera\") {\n",
       "        camera.aspect = aspect;\n",
       "    }\n",
       "    camera.updateProjectionMatrix();\n",
       "}\n",
       "\n",
       "function changeCamera(event) {\n",
       "    var selindex = event.currentTarget.selectedIndex;\n",
       "    camera = cameras[selindex];\n",
       "    control = controls[selindex];\n",
       "    control.enabled = true; \n",
       "    for (var i=0; i<controls.length; i++) {\n",
       "        if (i!=selindex) {\n",
       "            controls[i].enabled = false;\n",
       "        }\n",
       "    }\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "var camtypenode = document.getElementById('cameraType_5');\n",
       "camtypenode.onchange = changeCamera;\n",
       "camtypenode.dispatchEvent(new Event('change'));\n",
       "\n",
       "onWindowResize();\n",
       "window.addEventListener('resize', onWindowResize);\t\n",
       "\n",
       "\n",
       "var xRotationEnabled = false;\n",
       "var yRotationEnabled = false;\n",
       "var zRotationEnabled = false;\n",
       "var rotationSpeedFactor = 1;\n",
       "var settingsShown = false;\n",
       "var labelsShown = true;\n",
       "var intervals = [];\n",
       "var timeouts = [];\n",
       "var explodingSpeed = 0.05;\n",
       "var explodeScale = 0;\n",
       "var XMLS = new XMLSerializer();\n",
       "var svgElement;\n",
       "var renderId;\n",
       "\n",
       "var render = function () {\n",
       "\n",
       "\trenderId = requestAnimationFrame(render);\n",
       "\n",
       "//\tcomment in for automatic explosion\n",
       "//\texplode(updateFactor());\n",
       "\n",
       "    var phi = 0.02 * rotationSpeedFactor;\n",
       "\n",
       "    if (xRotationEnabled) {\n",
       "        scene.rotation.x += phi;\n",
       "    }\n",
       "    if (yRotationEnabled) {\n",
       "        scene.rotation.y += phi;\n",
       "    }\n",
       "    if (zRotationEnabled) {\n",
       "        scene.rotation.z += phi;\n",
       "    }\n",
       "\n",
       "    control.update();\n",
       "    renderer.render(scene, camera);\n",
       "};\n",
       "\n",
       "if ( THREE.WEBGL.isWebGLAvailable() ) {\n",
       "\trender();\n",
       "} else {\n",
       "\tvar warning = WEBGL.getWebGLErrorMessage();\n",
       "\tthree.appendChild( warning );\n",
       "}\n",
       "    \n",
       "function changeTransparency() {\n",
       "    var opacity = 1-Number(event.currentTarget.value);\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        child = scene.children[i];\n",
       "        if ( child.userData.hasOwnProperty(\"facetmaterial\") ) {\n",
       "            if (Array.isArray(child.userData.facetmaterial)) {\n",
       "                for (var j=0; j<child.userData.facetmaterial.length; j++) {\n",
       "                    child.userData.facetmaterial[j].opacity = opacity;\n",
       "                }\n",
       "            } else {\n",
       "                child.userData.facetmaterial.opacity = opacity;\n",
       "            }    \n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function changeRotationX(event){\n",
       "    xRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationY(event){\n",
       "    yRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationZ(event){\n",
       "    zRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "\n",
       "function changeRotationSpeedFactor(event){\n",
       "    rotationSpeedFactor = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function resetScene(){\n",
       "    scene.rotation.set(0,0,0);\n",
       "    camera.position.set(0,0,5);\n",
       "    camera.up.set(0,1,0);\n",
       "}\n",
       "\n",
       "function showSettings(event){\n",
       "    document.getElementById('settings_5').style.visibility = 'visible';\n",
       "    document.getElementById('showSettingsButton_5').style.visibility = 'hidden';\n",
       "    document.getElementById('hideSettingsButton_5').style.visibility = 'visible';\n",
       "    settingsShown = true;\n",
       "}\n",
       "\n",
       "function hideSettings(event){\n",
       "    document.getElementById('settings_5').style.visibility = 'hidden';\n",
       "    document.getElementById('showSettingsButton_5').style.visibility = 'visible';\n",
       "    document.getElementById('hideSettingsButton_5').style.visibility = 'hidden';\n",
       "    settingsShown = false;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "var pos = 150* Math.PI;\n",
       "\n",
       "function updateFactor() {\n",
       "    pos++;\n",
       "    return Math.sin(.01*pos)+1;\n",
       "}\n",
       "\n",
       "// ------------------------ FOLDING ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "// rotate point p around axis defined by points p1 and p2 by given angle\n",
       "function rotate(p, p1, p2, angle ){   \n",
       "    angle = -angle;\n",
       "    var x = p.x, y = p.y, z = p.z, \n",
       "    a = p1.x, b = p1.y, c = p1.z, \n",
       "    u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z;\n",
       "    var result = [];\n",
       "    var L = u*u + v*v + w*w;\n",
       "    var sqrt = Math.sqrt;\n",
       "    var cos = Math.cos;\n",
       "    var sin = Math.sin;\n",
       "\n",
       "    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;\n",
       "    result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L;\n",
       "    result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L;\n",
       "\n",
       "    return result;\n",
       "}\n",
       "\n",
       "var fold = function(event){\n",
       "    var obj = foldables[Number(event.currentTarget.name)];\n",
       "    var foldvalue = Number(event.currentTarget.value);\n",
       "    var scale = foldvalue - obj.userData.oldscale;\n",
       "\n",
       "    for (var j=0; j<obj.userData.axes.length; j++) {\n",
       "        rotateVertices(obj, j, scale);\n",
       "    }\n",
       "    update(obj);\n",
       "    obj.userData.oldscale += scale;\n",
       "    lookAtBarycenter(obj);\n",
       "}\n",
       "\n",
       "function lookAtBarycenter(obj){\n",
       "    control.target = barycenter(obj);\n",
       "}\n",
       "\n",
       "function barycenter(obj) {\n",
       "    var center = new THREE.Vector3(0,0,0);\n",
       "    var points = obj.userData.points;\n",
       "    for (var i=0; i<points.length; i++){\n",
       "        center.add(points[i].vector);\n",
       "    }\n",
       "    center.divideScalar(points.length);\n",
       "    return center;\n",
       "}\n",
       "\n",
       "function rotateVertices(obj, edge, scale) {\n",
       "    var axes = obj.userData.axes;\n",
       "    var subtrees = obj.userData.subtrees;\n",
       "    var points = obj.userData.points;\n",
       "    var angles = obj.userData.angles;\n",
       "    if (edge < axes.length){\n",
       "        for (var j=0; j<subtrees[edge].length; j++){\n",
       "            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));\n",
       "            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function update(obj) {\n",
       "   updateFacesPosition(obj);\n",
       "   updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "if (foldables.length) {\n",
       "    var settings = document.getElementById('settings_5');\n",
       "    var foldDiv = document.createElement('div');\n",
       "    foldDiv.id = 'fold_5';\n",
       "    var title = document.createElement('strong');\n",
       "    title.innerHTML = 'Fold';\n",
       "    foldDiv.appendChild(title);\n",
       "    foldDiv.className = 'group';\n",
       "    for (var i=0; i<foldables.length; i++) {\n",
       "        var range = document.createElement('input');\n",
       "        range.type = 'range';\n",
       "        range.min = 0;\n",
       "        range.max = 1;\n",
       "        range.value = 0;\n",
       "        range.step = 0.001;\n",
       "        range.name = String(i);\n",
       "        range.oninput = fold;\n",
       "        foldDiv.appendChild(range);\n",
       "    }\n",
       "    lookAtBarycenter(foldables[0]);\n",
       "    settings.insertBefore(foldDiv,settings.childNodes[0]);\n",
       "}\n",
       "\n",
       "    \n",
       "// ---------------------- EXPLOSION ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "if (explodableModel) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        obj = scene.children[i];\n",
       "        if ( obj.userData.explodable ) {\n",
       "            computeCentroid(obj);\n",
       "        }\n",
       "    }\n",
       "    document.getElementById('explodeRange_5').oninput = triggerExplode;\n",
       "    document.getElementById('explodeCheckbox_5').onchange = triggerAutomaticExplode;\n",
       "    document.getElementById('explodingSpeedRange_5').oninput = setExplodingSpeed;\n",
       "}\n",
       "\n",
       "function computeCentroid(obj) {\n",
       "    centroid = new THREE.Vector3();\n",
       "    obj.userData.points.forEach(function(pmpoint) {\n",
       "        centroid.add(pmpoint.vector);\t\t\t\n",
       "    });\n",
       "    centroid.divideScalar(obj.userData.points.length);\n",
       "    obj.userData.centroid = centroid;\n",
       "}\n",
       "\n",
       "function explode(factor) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        var obj = scene.children[i];\n",
       "        if (obj.userData.hasOwnProperty(\"centroid\")) { \n",
       "            var c = obj.userData.centroid;\n",
       "            obj.position.set(c.x*factor, c.y*factor, c.z*factor);\n",
       "        }\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function triggerExplode(event){\n",
       "    explodeScale = Number(event.currentTarget.value);\n",
       "    explode(explodeScale);\n",
       "}\n",
       "\n",
       "function setExplodingSpeed(event){\n",
       "    explodingSpeed = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function triggerAutomaticExplode(event){\n",
       "    if (event.currentTarget.checked){\n",
       "        startExploding();\n",
       "    } else {\n",
       "        clearIntervals();\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function startExploding(){\n",
       "    intervals.push(setInterval(explodingInterval, 25));\n",
       "}\n",
       "\n",
       "\n",
       "function explodingInterval(){\n",
       "    explodeScale += explodingSpeed;\n",
       "    if (explodeScale <= 6){ \n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else{\n",
       "        explode(6);\n",
       "        explodeScale = 6;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startUnexploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_5').value = explodeScale;\n",
       "}\n",
       "\n",
       "\n",
       "function startUnexploding(){\n",
       "    intervals.push(setInterval(unexplodingInterval, 25));\n",
       "}\n",
       "\n",
       "function unexplodingInterval(){\n",
       "    explodeScale -= explodingSpeed;\n",
       "    if (explodeScale >= 0){\t\n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else {\n",
       "        explode(0);\n",
       "        explodeScale = 0;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startExploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_5').value = explodeScale;\n",
       "}\n",
       "\n",
       "function clearIntervals(){\n",
       "    intervals.forEach(function(interval){\n",
       "        clearInterval(interval);\n",
       "    });\n",
       "    intervals = [];\n",
       "    timeouts.forEach(function(timeout){\n",
       "        clearTimeout(timeout);\n",
       "    });\n",
       "    timeouts = [];\n",
       "}\n",
       "\n",
       "// ---------------------- DISPLAY --------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "const objectTypeInnerHTMLs = { points: \"Points\", pointlabels: \"Point labels\", lines: \"Edges\", edgelabels: \"Edge labels\", faces: \"Faces\", arrowheads: \"Arrow heads\" };\n",
       "const objectTypeVisible = {};\n",
       "Object.assign(objectTypeVisible,modelContains);\n",
       "const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();\n",
       "const shownObjectTypesList = document.getElementById('shownObjectTypesList_5');\n",
       "\n",
       "function setVisibility(bool,objname) {\n",
       "    for (var i=0; i<scene.children.length; i++){\n",
       "        var obj = scene.children[i].getObjectByName(objname);\n",
       "        if (obj) {\n",
       "            obj.visible = bool;\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function toggleObjectTypeVisibility(event){\n",
       "    var name = event.currentTarget.name;\n",
       "    var checked = event.currentTarget.checked;\n",
       "    objectTypeVisible[name] = checked;\n",
       "    setVisibility(checked,name);\n",
       "}\n",
       "\n",
       "for (var i=0; i<sortedObjectTypeKeys.length; i++){\n",
       "    var key = sortedObjectTypeKeys[i];\n",
       "    if (modelContains[key]) {\n",
       "        var objTypeNode = document.createElement('span');\n",
       "        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';\n",
       "        var checkbox = document.createElement('input');\n",
       "        checkbox.type = 'checkbox';\n",
       "        checkbox.checked = true;\n",
       "        checkbox.name = key;\n",
       "        checkbox.onchange = toggleObjectTypeVisibility;\n",
       "        shownObjectTypesList.appendChild(checkbox);\n",
       "        shownObjectTypesList.appendChild(objTypeNode);\n",
       "    }\n",
       "}\n",
       "\n",
       "// ------------------------------------------------------\n",
       "\n",
       "function toggleObjectVisibility(event){\n",
       "    var nr = Number(event.currentTarget.name);\n",
       "    scene.children[nr].visible = event.currentTarget.checked;\n",
       "}\n",
       "\n",
       "// append checkboxes for displaying or hiding objects\n",
       "var shownObjectsList = document.getElementById('shownObjectsList_5');\n",
       "for (var i=0; i<scene.children.length; i++){\n",
       "    obj = scene.children[i];\n",
       "    var objNode = document.createElement('span');\n",
       "    objNode.innerHTML = obj.name + '<br>';\n",
       "    var checkbox = document.createElement('input');\n",
       "    checkbox.type = 'checkbox';\n",
       "    checkbox.checked = true;\n",
       "    checkbox.name = String(i);\n",
       "    checkbox.onchange = toggleObjectVisibility;\n",
       "    shownObjectsList.appendChild(checkbox);\n",
       "    shownObjectsList.appendChild(objNode);\n",
       "}\n",
       "\n",
       "// ---------------------- SVG ------------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function takeSvgScreenshot() {\n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(false,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(false,\"edgelabels\");\n",
       "    }\n",
       "    svgRenderer.render(scene,camera);\n",
       "    svgElement = XMLS.serializeToString(svgRenderer.domElement);\n",
       "    \n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(true,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(true,\"edgelabels\");\n",
       "    }\n",
       "\n",
       "    if (document.getElementById('tab_5').checked){\n",
       "        //show in new tab\n",
       "        var myWindow = window.open(\"\",\"\");\n",
       "        myWindow.document.body.innerHTML = svgElement;\n",
       "    } else{\n",
       "        // download svg file \n",
       "        download(\"screenshot.svg\", svgElement);\n",
       "    }\n",
       "}\n",
       "\n",
       "function download(filename, text) {\n",
       "    var element = document.createElement('a');\n",
       "    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));\n",
       "    element.setAttribute('download', filename);\n",
       "\n",
       "    element.style.display = 'none';\n",
       "    document.body.appendChild(element);\n",
       "\n",
       "    element.click();\n",
       "\n",
       "    document.body.removeChild(element);\n",
       "}\n",
       "\n",
       "\n",
       "document.getElementById('transparencyRange_5').oninput = changeTransparency;\n",
       "document.getElementById('changeRotationX_5').onchange = changeRotationX;\n",
       "document.getElementById('changeRotationY_5').onchange = changeRotationY;\n",
       "document.getElementById('changeRotationZ_5').onchange = changeRotationZ;\n",
       "document.getElementById('resetButton_5').onclick = resetScene;\n",
       "document.getElementById('rotationSpeedRange_5').oninput = changeRotationSpeedFactor;\n",
       "document.getElementById('takeScreenshot_5').onclick = takeSvgScreenshot;\n",
       "document.getElementById('showSettingsButton_5').onclick = showSettings;\n",
       "document.getElementById('hideSettingsButton_5').onclick = hideSettings;\n",
       "\n",
       "\n",
       "// ------------------ SHORTCUTS --------------------------------------------\n",
       "// -------------------------------------------------------------------------\n",
       "\n",
       "/**\n",
       " * http://www.openjs.com/scripts/events/keyboard_shortcuts/\n",
       " * Version : 2.01.B\n",
       " * By Binny V A\n",
       " * License : BSD\n",
       " */\n",
       "shortcut = {\n",
       "\t'all_shortcuts':{},//All the shortcuts are stored in this array\n",
       "\t'add': function(shortcut_combination,callback,opt) {\n",
       "\t\t//Provide a set of default options\n",
       "\t\tvar default_options = {\n",
       "\t\t\t'type':'keydown',\n",
       "\t\t\t'propagate':false,\n",
       "\t\t\t'disable_in_input':false,\n",
       "\t\t\t'target':document,\n",
       "\t\t\t'keycode':false\n",
       "\t\t}\n",
       "\t\tif(!opt) opt = default_options;\n",
       "\t\telse {\n",
       "\t\t\tfor(var dfo in default_options) {\n",
       "\t\t\t\tif(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\n",
       "\t\tvar ele = opt.target;\n",
       "\t\tif(typeof opt.target == 'string') ele = document.getElementById(opt.target);\n",
       "\t\tvar ths = this;\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\n",
       "\t\t//The function to be called at keypress\n",
       "\t\tvar func = function(e) {\n",
       "\t\t\te = e || window.event;\n",
       "\t\t\t\n",
       "\t\t\tif(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields\n",
       "\t\t\t\tvar element;\n",
       "\t\t\t\tif(e.target) element=e.target;\n",
       "\t\t\t\telse if(e.srcElement) element=e.srcElement;\n",
       "\t\t\t\tif(element.nodeType==3) element=element.parentNode;\n",
       "\n",
       "\t\t\t\tif(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\t//Find Which key is pressed\n",
       "\t\t\tif (e.keyCode) code = e.keyCode;\n",
       "\t\t\telse if (e.which) code = e.which;\n",
       "\t\t\tvar character = String.fromCharCode(code).toLowerCase();\n",
       "\t\t\t\n",
       "\t\t\tif(code == 188) character=\",\"; //If the user presses , when the type is onkeydown\n",
       "\t\t\tif(code == 190) character=\".\"; //If the user presses , when the type is onkeydown\n",
       "\n",
       "\t\t\tvar keys = shortcut_combination.split(\"+\");\n",
       "\t\t\t//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked\n",
       "\t\t\tvar kp = 0;\n",
       "\t\t\t\n",
       "\t\t\t//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken\n",
       "\t\t\tvar shift_nums = {\n",
       "\t\t\t\t\"`\":\"~\",\n",
       "\t\t\t\t\"1\":\"!\",\n",
       "\t\t\t\t\"2\":\"@\",\n",
       "\t\t\t\t\"3\":\"#\",\n",
       "\t\t\t\t\"4\":\"$\",\n",
       "\t\t\t\t\"5\":\"%\",\n",
       "\t\t\t\t\"6\":\"^\",\n",
       "\t\t\t\t\"7\":\"&\",\n",
       "\t\t\t\t\"8\":\"*\",\n",
       "\t\t\t\t\"9\":\"(\",\n",
       "\t\t\t\t\"0\":\")\",\n",
       "\t\t\t\t\"-\":\"_\",\n",
       "\t\t\t\t\"=\":\"+\",\n",
       "\t\t\t\t\";\":\":\",\n",
       "\t\t\t\t\"'\":\"\\\"\",\n",
       "\t\t\t\t\",\":\"<\",\n",
       "\t\t\t\t\".\":\">\",\n",
       "\t\t\t\t\"/\":\"?\",\n",
       "\t\t\t\t\"\\\\\":\"|\"\n",
       "\t\t\t}\n",
       "\t\t\t//Special Keys - and their codes\n",
       "\t\t\tvar special_keys = {\n",
       "\t\t\t\t'esc':27,\n",
       "\t\t\t\t'escape':27,\n",
       "\t\t\t\t'tab':9,\n",
       "\t\t\t\t'space':32,\n",
       "\t\t\t\t'return':13,\n",
       "\t\t\t\t'enter':13,\n",
       "\t\t\t\t'backspace':8,\n",
       "\t\n",
       "\t\t\t\t'scrolllock':145,\n",
       "\t\t\t\t'scroll_lock':145,\n",
       "\t\t\t\t'scroll':145,\n",
       "\t\t\t\t'capslock':20,\n",
       "\t\t\t\t'caps_lock':20,\n",
       "\t\t\t\t'caps':20,\n",
       "\t\t\t\t'numlock':144,\n",
       "\t\t\t\t'num_lock':144,\n",
       "\t\t\t\t'num':144,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pause':19,\n",
       "\t\t\t\t'break':19,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'insert':45,\n",
       "\t\t\t\t'home':36,\n",
       "\t\t\t\t'delete':46,\n",
       "\t\t\t\t'end':35,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pageup':33,\n",
       "\t\t\t\t'page_up':33,\n",
       "\t\t\t\t'pu':33,\n",
       "\t\n",
       "\t\t\t\t'pagedown':34,\n",
       "\t\t\t\t'page_down':34,\n",
       "\t\t\t\t'pd':34,\n",
       "\t\n",
       "\t\t\t\t'left':37,\n",
       "\t\t\t\t'up':38,\n",
       "\t\t\t\t'right':39,\n",
       "\t\t\t\t'down':40,\n",
       "\t\n",
       "\t\t\t\t'f1':112,\n",
       "\t\t\t\t'f2':113,\n",
       "\t\t\t\t'f3':114,\n",
       "\t\t\t\t'f4':115,\n",
       "\t\t\t\t'f5':116,\n",
       "\t\t\t\t'f6':117,\n",
       "\t\t\t\t'f7':118,\n",
       "\t\t\t\t'f8':119,\n",
       "\t\t\t\t'f9':120,\n",
       "\t\t\t\t'f10':121,\n",
       "\t\t\t\t'f11':122,\n",
       "\t\t\t\t'f12':123\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\tvar modifiers = { \n",
       "\t\t\t\tshift: { wanted:false, pressed:false},\n",
       "\t\t\t\tctrl : { wanted:false, pressed:false},\n",
       "\t\t\t\talt  : { wanted:false, pressed:false},\n",
       "\t\t\t\tmeta : { wanted:false, pressed:false}\t//Meta is Mac specific\n",
       "\t\t\t};\n",
       "                        \n",
       "\t\t\tif(e.ctrlKey)\tmodifiers.ctrl.pressed = true;\n",
       "\t\t\tif(e.shiftKey)\tmodifiers.shift.pressed = true;\n",
       "\t\t\tif(e.altKey)\tmodifiers.alt.pressed = true;\n",
       "\t\t\tif(e.metaKey)   modifiers.meta.pressed = true;\n",
       "                        \n",
       "\t\t\tfor(var i=0; k=keys[i],i<keys.length; i++) {\n",
       "\t\t\t\t//Modifiers\n",
       "\t\t\t\tif(k == 'ctrl' || k == 'control') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.ctrl.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'shift') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.shift.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'alt') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.alt.wanted = true;\n",
       "\t\t\t\t} else if(k == 'meta') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.meta.wanted = true;\n",
       "\t\t\t\t} else if(k.length > 1) { //If it is a special key\n",
       "\t\t\t\t\tif(special_keys[k] == code) kp++;\n",
       "\t\t\t\t\t\n",
       "\t\t\t\t} else if(opt['keycode']) {\n",
       "\t\t\t\t\tif(opt['keycode'] == code) kp++;\n",
       "\n",
       "\t\t\t\t} else { //The special keys did not match\n",
       "\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\telse {\n",
       "\t\t\t\t\t\tif(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase\n",
       "\t\t\t\t\t\t\tcharacter = shift_nums[character]; \n",
       "\t\t\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\t\t}\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t\t\n",
       "\t\t\tif(kp == keys.length && \n",
       "\t\t\t\t\t\tmodifiers.ctrl.pressed == modifiers.ctrl.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.shift.pressed == modifiers.shift.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.alt.pressed == modifiers.alt.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.meta.pressed == modifiers.meta.wanted) {\n",
       "\t\t\t\tcallback(e);\n",
       "\t\n",
       "\t\t\t\tif(!opt['propagate']) { //Stop the event\n",
       "\t\t\t\t\t//e.cancelBubble is supported by IE - this will kill the bubbling process.\n",
       "\t\t\t\t\te.cancelBubble = true;\n",
       "\t\t\t\t\te.returnValue = false;\n",
       "\t\n",
       "\t\t\t\t\t//e.stopPropagation works in Firefox.\n",
       "\t\t\t\t\tif (e.stopPropagation) {\n",
       "\t\t\t\t\t\te.stopPropagation();\n",
       "\t\t\t\t\t\te.preventDefault();\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t\treturn false;\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\t\tthis.all_shortcuts[shortcut_combination] = {\n",
       "\t\t\t'callback':func, \n",
       "\t\t\t'target':ele, \n",
       "\t\t\t'event': opt['type']\n",
       "\t\t};\n",
       "\t\t//Attach the function with the event\n",
       "\t\tif(ele.addEventListener) ele.addEventListener(opt['type'], func, false);\n",
       "\t\telse if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);\n",
       "\t\telse ele['on'+opt['type']] = func;\n",
       "\t},\n",
       "\n",
       "\t//Remove the shortcut - just specify the shortcut and I will remove the binding\n",
       "\t'remove':function(shortcut_combination) {\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\t\tvar binding = this.all_shortcuts[shortcut_combination];\n",
       "\t\tdelete(this.all_shortcuts[shortcut_combination])\n",
       "\t\tif(!binding) return;\n",
       "\t\tvar type = binding['event'];\n",
       "\t\tvar ele = binding['target'];\n",
       "\t\tvar callback = binding['callback'];\n",
       "\n",
       "\t\tif(ele.detachEvent) ele.detachEvent('on'+type, callback);\n",
       "\t\telse if(ele.removeEventListener) ele.removeEventListener(type, callback, false);\n",
       "\t\telse ele['on'+type] = false;\n",
       "\t}\n",
       "}\n",
       "\n",
       "shortcut.add(\"Alt+Left\",function() {\n",
       "\tvar event = new Event('click');\n",
       "\tif (settingsShown){\n",
       "\t\tdocument.getElementById('hideSettingsButton_5').dispatchEvent(event);\n",
       "\t} else {\n",
       "\t\tdocument.getElementById('showSettingsButton_5').dispatchEvent(event);\n",
       "\t}\n",
       "});\n",
       "\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "});});\n",
       "      </script>\n",
       "   </body>\n",
       "</html>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "$tet = simplex(3);\n",
    "$tet->VISUAL(VertexLabels=> sub { my $i = shift; return $tet->VERTICES->[$i]; });"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you prefer dehomogenized float coordinates, then you need to use:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!--\n",
       "polymake for knusper\n",
       "Thu Aug 27 11:44:14 2020\n",
       "tet\n",
       "-->\n",
       "\n",
       "\n",
       "<html>\n",
       "   <head>\n",
       "      <meta charset=utf-8>\n",
       "      <title>tet</title>\n",
       "      <style>\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "*/\n",
       "         html {overflow: scroll;}\n",
       "         strong{font-size: 18px;}\n",
       "         canvas { z-index: 8; }\n",
       "         input[type='radio'] {margin-left:0;}\n",
       "         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}\n",
       "         .group{padding-bottom: 15px;}\n",
       "         .settings * {z-index: 11; }\n",
       "         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}\n",
       "         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} \n",
       "         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}\n",
       "         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }\n",
       "         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}\n",
       "         button{margin-left: 0; margin-top: 10px}\n",
       "         img{cursor: pointer;}\n",
       "         .suboption{padding-top: 15px;}\n",
       "         #model59687004787 { width: 100%; height: 100%; }\n",
       "         .threejs_container { width: 100%; height: 75vh;}\n",
       "         .settings{max-height: 74vh} \n",
       "         input[type=range] {\n",
       "           -webkit-appearance: none;\n",
       "           padding:0; \n",
       "           width:90%; \n",
       "           margin-left: auto;\n",
       "           margin-right: auto;\n",
       "           margin-top: 15px;\n",
       "           margin-bottom: 15px;\n",
       "           display: block;\t\n",
       "         }\n",
       "         input[type=range]:focus {\n",
       "           outline: none;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-runnable-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "           -webkit-appearance: none;\n",
       "           margin-top: -5px;\n",
       "         }\n",
       "         input[type=range]:focus::-webkit-slider-runnable-track {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]::-moz-range-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-moz-range-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]::-ms-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           background: transparent;\n",
       "           border-color: transparent;\n",
       "           color: transparent;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_END\n",
       "*/\n",
       "\t\t</style>\n",
       "   </head>\n",
       "<body>\n",
       "   <div class='threejs_container'>\n",
       "\t\t<div id='settings_6' class='settings'>\n",
       "\t\t\t<div class=group id='transparency_6' class='transparency'>\n",
       "\t\t\t\t<strong>Transparency</strong>\n",
       "\t\t\t\t<input id='transparencyRange_6' type='range' min=0 max=1 step=0.01 value=0>\n",
       "\t\t\t</div>\n",
       "\t\t\t\n",
       "\t\t\t<div class=group id='rotation_6'>\n",
       "\t\t\t\t<strong>Rotation</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationX_6'> x-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationY_6'> y-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationZ_6'> z-axis</div>\n",
       "\t\t\t\t\t<button id='resetButton_6'>Reset</button>\n",
       "\t\t\t\t</div>\n",
       "\n",
       "\t\t\t\t<div class=suboption>Rotation speed</div>\n",
       "\t\t\t\t<input id='rotationSpeedRange_6' type='range' min=0 max=5 step=0.01 value=2>\n",
       "\t\t\t</div>\n",
       "\n",
       "\n",
       "\t\t\t<div class=group id='display_6'>\n",
       "\t\t\t\t<strong>Display</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div id='shownObjectTypesList_6' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t\t<div class=suboption>Objects</div>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t   <div id='shownObjectsList_6' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "         \n",
       "         <div class=group id='camera_6'>\n",
       "            <strong>Camera</strong>\n",
       "            <div class=indented>\n",
       "               <form>\n",
       "                  <select id=\"cameraType_6\">\n",
       "                     <option value='perspective' selected> Perspective<br></option>\n",
       "                     <option value='orthographic' > Orthographic<br></option>\n",
       "                  </select>\n",
       "               </form>\n",
       "            </div>\n",
       "         </div>\n",
       "\n",
       "\t\t\t<div class=group id='svg_6'>\n",
       "\t\t\t\t<strong>SVG</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<form>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='download' id='download_6' checked> Download<br>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='tab' id='tab_6' > New tab<br>\n",
       "\t\t\t\t\t</form>\n",
       "\t\t\t\t\t<button id='takeScreenshot_6'>Screenshot</button>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "\n",
       "\t\t</div>\t<!-- end of settings -->\n",
       "\t\t<img id='hideSettingsButton_6' class='hideSettingsButton' src='/kernelspecs/polymake/close.svg' width=20px\">\n",
       "\t\t<img id='showSettingsButton_6' class='showSettingsButton' src='/kernelspecs/polymake/menu.svg' width=20px\">\n",
       "<div id=\"model59687004787\"></div>\n",
       "</div>\n",
       "   <script>\n",
       "    requirejs.config({\n",
       "      paths: {\n",
       "        three: '/kernelspecs/polymake/three',\n",
       "        TrackballControls: '/kernelspecs/polymake/TrackballControls',\n",
       "        OrbitControls: '/kernelspecs/polymake/OrbitControls',\n",
       "        Projector: '/kernelspecs/polymake/Projector',\n",
       "        SVGRenderer: '/kernelspecs/polymake/SVGRenderer',\n",
       "        WEBGL: '/kernelspecs/polymake/WebGL',\n",
       "      },\n",
       "      shim: {\n",
       "        'three': { exports: 'THREE'},\n",
       "        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },\n",
       "        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },\n",
       "        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },\n",
       "        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },\n",
       "        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },\n",
       "      }\n",
       "    });\n",
       "    \n",
       "    require(['three'],function(THREE){\n",
       "        window.THREE = THREE;\n",
       "      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],\n",
       "               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {\n",
       "    THREE.TrackballControls = TrackballControls;\n",
       "    THREE.OrbitControls = OrbitControls;\n",
       "    THREE.Projector = Projector;\n",
       "    THREE.SVGRenderer = SVGRenderer;\n",
       "    THREE.WEBGL = WEBGL;\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "\n",
       "const intervalLength = 25; // for automatic animations\n",
       "const explodableModel = false; \n",
       "const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };\n",
       "const foldables = [];\n",
       "\n",
       "var three = document.getElementById(\"model59687004787\");\n",
       "var scene = new THREE.Scene();\n",
       "var renderer = new THREE.WebGLRenderer( { antialias: true } );\n",
       "var svgRenderer = new THREE.SVGRenderer( { antialias: true } );\n",
       "renderer.setPixelRatio( window.devicePixelRatio );\n",
       "renderer.setClearColor(0xFFFFFF, 1);\n",
       "svgRenderer.setClearColor(0xFFFFFF, 1);\n",
       "three.appendChild(renderer.domElement);\n",
       "\n",
       "var frustumSize = 4;\n",
       "var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];\n",
       "cameras.forEach(function(cam) {\n",
       "    cam.position.set(0, 0, 5);\n",
       "    cam.lookAt(0, 0, 0);  \n",
       "    cam.up.set(0, 1, 0);         \n",
       "});\n",
       "var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];\n",
       "var camera, control;\n",
       "\n",
       "controls[0].zoomSpeed = 0.2;\n",
       "controls[0].rotateSpeed = 4;\n",
       "\n",
       "\n",
       "// class to allow move points together with labels and spheres\n",
       "var PMPoint = function (x,y,z) {\n",
       "   this.vector = new THREE.Vector3(x,y,z);\n",
       "   this.sprite = null;\n",
       "   this.sphere = null;\n",
       "}\n",
       "PMPoint.prototype.addLabel = function(labelsprite) {\n",
       "   this.sprite = labelsprite;\n",
       "   this.sprite.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.addSphere = function(spheremesh) {\n",
       "   this.sphere = spheremesh;\n",
       "   this.sphere.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.set = function(x,y,z) {\n",
       "   this.vector.set(x,y,z);\n",
       "   if (this.sprite) {\n",
       "      this.sprite.position.copy(this.vector);\n",
       "   }\n",
       "   if (this.sphere) {\n",
       "      this.sphere.position.copy(this.vector);\n",
       "   }\n",
       "}\n",
       "PMPoint.prototype.radius = function() {\n",
       "   if (this.sphere) {\n",
       "      return this.sphere.geometry.parameters.radius;\n",
       "   } else {\n",
       "      return 0;\n",
       "   }\n",
       "};\n",
       "// select the target node\n",
       "var target = document.querySelector('#model59687004787');\n",
       "\n",
       "// create an observer instance\n",
       "var observer = new MutationObserver(function(mutations) {\n",
       "   mutations.forEach(function(mutation) {\n",
       "      if (mutation.removedNodes && mutation.removedNodes.length > 0) {\n",
       "         cancelAnimationFrame(renderId);\n",
       "         observer.disconnect();\n",
       "         console.log(\"cancelled frame \"+renderId);\n",
       "      }\n",
       "   });\n",
       "});\n",
       "\n",
       "// configuration of the observer:\n",
       "var config = { childList: true, characterData: true }\n",
       "\n",
       "// pass in the target node, as well as the observer options\n",
       "while (target) {\n",
       "   if (target.className==\"output\") {\n",
       "      observer.observe(target, config);\n",
       "      break;\n",
       "   }\n",
       "   target = target.parentNode;\n",
       "}\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "var obj0 = new THREE.Object3D();\n",
       "obj0.name = \"tet\";\n",
       "obj0.userData.explodable = 1;\n",
       "obj0.userData.points = [];\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(1, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 1, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 1));\n",
       "\n",
       "obj0.userData.pointradii = 0.02;\n",
       "   <!-- Vertex style -->\n",
       "obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );\n",
       "obj0.userData.pointlabels = [\"(3)\", \"(3) (0 1)\", \"(3) (1 1)\", \"(3) (2 1)\"];\n",
       "obj0.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];\n",
       "   <!-- Edge style -->\n",
       "obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } );\n",
       "obj0.userData.facets = [[2, 3, 1], [0, 3, 2], [1, 3, 0], [2, 1, 0]];\n",
       "   <!-- Facet style -->\n",
       "obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );\n",
       "init_object(obj0);\n",
       "scene.add(obj0);\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "function textSpriteMaterial(message, parameters) {\n",
       "    if ( parameters === undefined ) parameters = {};\n",
       "    var fontface = \"Helvetica\";\n",
       "    var fontsize = parameters.hasOwnProperty(\"fontsize\") ? parameters[\"fontsize\"] : 15;\n",
       "    fontsize = fontsize*10;\n",
       "    var lines = message.split('\\\\n');\n",
       "    var size = 512;\n",
       "    for(var i = 0; i<lines.length; i++){\n",
       "        var tmp = lines[i].length;\n",
       "        while(tmp*fontsize > size){\n",
       "           fontsize--;\n",
       "        }\n",
       "    }\n",
       "    \n",
       "    var canvas = document.createElement('canvas');\n",
       "    canvas.width = size;\n",
       "    canvas.height = size;\n",
       "    var context = canvas.getContext('2d');\n",
       "    context.fillStyle = \"rgba(255, 255, 255, 0)\";\n",
       "    context.fill();\n",
       "    context.font = fontsize + \"px \" + fontface;\n",
       "    \n",
       "    // text color\n",
       "    context.fillStyle = \"rgba(0, 0, 0, 1.0)\";\n",
       "     for(var i = 0; i<lines.length; i++){\n",
       "        context.fillText(lines[i], size/2, size/2+i*fontsize);\n",
       "     }\n",
       "    \n",
       "    // canvas contents will be used for a texture\n",
       "    var texture = new THREE.Texture(canvas);\n",
       "    texture.needsUpdate = true;\n",
       "    \n",
       "    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });\n",
       "    return spriteMaterial;\n",
       "}\n",
       "\n",
       "\n",
       "// ---------------------- INITIALIZING OBJECTS--------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function init_object(obj) {\n",
       "    if (obj.userData.hasOwnProperty(\"pointmaterial\")) {\n",
       "        init_points(obj);\n",
       "        modelContains.points = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"pointlabels\")) {\n",
       "        init_pointlabels(obj);\n",
       "        modelContains.pointlabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgematerial\")) {\n",
       "        init_lines(obj);\n",
       "        modelContains.lines = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgelabels\")) {\n",
       "        init_edgelabels(obj);\n",
       "        modelContains.edgelabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"arrowstyle\")) {\n",
       "        init_arrowheads(obj);\n",
       "        modelContains.arrowheads = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"facetmaterial\")) {\n",
       "        init_faces(obj);\n",
       "        modelContains.faces = true;\n",
       "    }\n",
       "}\n",
       "\n",
       "function init_points(obj) {\n",
       "    var pointgroup = new THREE.Group();\n",
       "    pointgroup.name = \"points\";\n",
       "    var points = obj.userData.points;\n",
       "    var radii = obj.userData.pointradii;\n",
       "    var materials = obj.userData.pointmaterial;\n",
       "    var geometry,material;\n",
       "    if (!Array.isArray(radii)) {\n",
       "        geometry = new THREE.SphereBufferGeometry(radii);  \n",
       "    }\n",
       "    if (!Array.isArray(materials)) {\n",
       "        material = materials;\n",
       "    }\n",
       "    for (var i=0; i<points.length; i++) {\n",
       "        var point = points[i];\n",
       "        if (Array.isArray(radii)) {\n",
       "            if (radii[i] == 0) {\n",
       "                continue;\n",
       "            }\n",
       "            geometry = new THREE.SphereBufferGeometry(radii[i]);  \n",
       "        } \n",
       "        if (Array.isArray(materials)) {\n",
       "            material = materials[i];     \n",
       "        } \n",
       "        var sphere = new THREE.Mesh(geometry, material);\n",
       "        point.addSphere(sphere);\n",
       "        pointgroup.add(sphere);\n",
       "    }\n",
       "    obj.add(pointgroup);\n",
       "}\n",
       "\n",
       "function init_pointlabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var labels = obj.userData.pointlabels;\n",
       "    var pointlabels = new THREE.Group();\n",
       "    pointlabels.name = \"pointlabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(pointlabels);\n",
       "}\n",
       "\n",
       "function init_lines(obj) {\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var points = obj.userData.points;\n",
       "    var materials = obj.userData.edgematerial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    var bufarr = new Float32Array( obj.userData.edgeindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute( bufarr, 3 );\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position', bufattr);\n",
       "    if (Array.isArray(materials)) {     \n",
       "        for (var i=0; i<materials.length; i++) {\n",
       "            geometry.addGroup(2*i,2,i);\n",
       "        }\n",
       "    }\n",
       "    var lines = new THREE.LineSegments(geometry, materials);\n",
       "    lines.name = \"lines\";\n",
       "    obj.add(lines);\n",
       "    updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "function init_edgelabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var labels = obj.userData.edgelabels;\n",
       "    var edgelabels = new THREE.Group();\n",
       "    edgelabels.name = \"edgelabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            edgelabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(edgelabels);\n",
       "}\n",
       "\n",
       "function init_arrowheads(obj) {\n",
       "    var arrowheads = new THREE.Group();\n",
       "    arrowheads.name = \"arrowheads\";\n",
       "    var arrowstyle = obj.userData.arrowstyle;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var edgematerials = obj.userData.edgematerial;\n",
       "    var points = obj.userData.points;\n",
       "    var material;\n",
       "    if (!Array.isArray(edgematerials)) {\n",
       "        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );\n",
       "    }\n",
       "\n",
       "    for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "        var start = points[edgeindices[i]];\n",
       "        var end = points[edgeindices[i+1]];\n",
       "        var dist = start.vector.distanceTo( end.vector ) - start.radius() - end.radius();\n",
       "        if (dist <= 0) {\n",
       "            continue;\n",
       "        }\n",
       "        var dir = new THREE.Vector3().subVectors(end.vector,start.vector);\n",
       "        dir.normalize();\n",
       "        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);\n",
       "        axis.normalize();\n",
       "        var radians = Math.acos( dir.y );\n",
       "        var radius = dist/25;\n",
       "        var height = dist/5;\n",
       "        var geometry = new THREE.ConeBufferGeometry(radius,height);\n",
       "        var position = new THREE.Vector3().addVectors(start.vector,dir.clone().multiplyScalar(start.radius()+dist-height/2));\n",
       "        if (Array.isArray(edgematerials)) {\n",
       "            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );\n",
       "        }\n",
       "        var cone = new THREE.Mesh( geometry, material );\n",
       "        cone.quaternion.setFromAxisAngle(axis,radians);;\n",
       "        cone.position.copy(position);;\n",
       "        arrowheads.add(cone);\n",
       "    }\n",
       "    obj.add(arrowheads);\n",
       "}\n",
       "\n",
       "function init_faces(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var facets = obj.userData.facets;\n",
       "    obj.userData.triangleindices = [];\n",
       "    for (var i=0; i<facets.length; i++) {\n",
       "        facet = facets[i];\n",
       "        for (var t=0; t<facet.length-2; t++) {\n",
       "            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  \n",
       "        }\n",
       "    }\n",
       "    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);\n",
       "    \n",
       "    var materials = obj.userData.facetmaterial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position',bufattr);\n",
       "    if (Array.isArray(materials)) {\n",
       "        var tricount = 0;\n",
       "        var facet;\n",
       "        for (var i=0; i<facets.length; i++) {\n",
       "            facet = facets[i];\n",
       "            geometry.addGroup(tricount,(facet.length-2)*3,i);\n",
       "            tricount += (facet.length-2)*3;\n",
       "        }\n",
       "    }\n",
       "    var mesh = new THREE.Mesh(geometry, materials);\n",
       "    mesh.name = \"faces\";\n",
       "    obj.add(mesh); \n",
       "    updateFacesPosition(obj);\n",
       "}\n",
       "// //INITIALIZING\n",
       "\n",
       "\n",
       "function updateFacesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.triangleindices;\n",
       "    var faces = obj.getObjectByName(\"faces\");\n",
       "    var ba = faces.geometry.getAttribute(\"position\");\n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    faces.geometry.attributes.position.needsUpdate = true;\n",
       "    \n",
       "}\n",
       "\n",
       "function updateEdgesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.edgeindices;\n",
       "    var lines = obj.getObjectByName(\"lines\");\n",
       "    var ba = lines.geometry.getAttribute(\"position\"); \n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    lines.geometry.attributes.position.needsUpdate = true;\n",
       "}\n",
       "\n",
       "function onWindowResize() {\n",
       "    renderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    svgRenderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "function updateCamera() {\n",
       "    var width = three.clientWidth;\n",
       "    var height = three.clientHeight;\n",
       "    var aspect = width / height;\n",
       "    if (camera.type == \"OrthographicCamera\") {\n",
       "        camera.left = frustumSize * aspect / - 2;\n",
       "        camera.right = frustumSize * aspect / 2;\n",
       "        camera.top = frustumSize / 2;\n",
       "        camera.bottom = - frustumSize / 2;\n",
       "    } else if (camera.type == \"PerspectiveCamera\") {\n",
       "        camera.aspect = aspect;\n",
       "    }\n",
       "    camera.updateProjectionMatrix();\n",
       "}\n",
       "\n",
       "function changeCamera(event) {\n",
       "    var selindex = event.currentTarget.selectedIndex;\n",
       "    camera = cameras[selindex];\n",
       "    control = controls[selindex];\n",
       "    control.enabled = true; \n",
       "    for (var i=0; i<controls.length; i++) {\n",
       "        if (i!=selindex) {\n",
       "            controls[i].enabled = false;\n",
       "        }\n",
       "    }\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "var camtypenode = document.getElementById('cameraType_6');\n",
       "camtypenode.onchange = changeCamera;\n",
       "camtypenode.dispatchEvent(new Event('change'));\n",
       "\n",
       "onWindowResize();\n",
       "window.addEventListener('resize', onWindowResize);\t\n",
       "\n",
       "\n",
       "var xRotationEnabled = false;\n",
       "var yRotationEnabled = false;\n",
       "var zRotationEnabled = false;\n",
       "var rotationSpeedFactor = 1;\n",
       "var settingsShown = false;\n",
       "var labelsShown = true;\n",
       "var intervals = [];\n",
       "var timeouts = [];\n",
       "var explodingSpeed = 0.05;\n",
       "var explodeScale = 0;\n",
       "var XMLS = new XMLSerializer();\n",
       "var svgElement;\n",
       "var renderId;\n",
       "\n",
       "var render = function () {\n",
       "\n",
       "\trenderId = requestAnimationFrame(render);\n",
       "\n",
       "//\tcomment in for automatic explosion\n",
       "//\texplode(updateFactor());\n",
       "\n",
       "    var phi = 0.02 * rotationSpeedFactor;\n",
       "\n",
       "    if (xRotationEnabled) {\n",
       "        scene.rotation.x += phi;\n",
       "    }\n",
       "    if (yRotationEnabled) {\n",
       "        scene.rotation.y += phi;\n",
       "    }\n",
       "    if (zRotationEnabled) {\n",
       "        scene.rotation.z += phi;\n",
       "    }\n",
       "\n",
       "    control.update();\n",
       "    renderer.render(scene, camera);\n",
       "};\n",
       "\n",
       "if ( THREE.WEBGL.isWebGLAvailable() ) {\n",
       "\trender();\n",
       "} else {\n",
       "\tvar warning = WEBGL.getWebGLErrorMessage();\n",
       "\tthree.appendChild( warning );\n",
       "}\n",
       "    \n",
       "function changeTransparency() {\n",
       "    var opacity = 1-Number(event.currentTarget.value);\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        child = scene.children[i];\n",
       "        if ( child.userData.hasOwnProperty(\"facetmaterial\") ) {\n",
       "            if (Array.isArray(child.userData.facetmaterial)) {\n",
       "                for (var j=0; j<child.userData.facetmaterial.length; j++) {\n",
       "                    child.userData.facetmaterial[j].opacity = opacity;\n",
       "                }\n",
       "            } else {\n",
       "                child.userData.facetmaterial.opacity = opacity;\n",
       "            }    \n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function changeRotationX(event){\n",
       "    xRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationY(event){\n",
       "    yRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationZ(event){\n",
       "    zRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "\n",
       "function changeRotationSpeedFactor(event){\n",
       "    rotationSpeedFactor = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function resetScene(){\n",
       "    scene.rotation.set(0,0,0);\n",
       "    camera.position.set(0,0,5);\n",
       "    camera.up.set(0,1,0);\n",
       "}\n",
       "\n",
       "function showSettings(event){\n",
       "    document.getElementById('settings_6').style.visibility = 'visible';\n",
       "    document.getElementById('showSettingsButton_6').style.visibility = 'hidden';\n",
       "    document.getElementById('hideSettingsButton_6').style.visibility = 'visible';\n",
       "    settingsShown = true;\n",
       "}\n",
       "\n",
       "function hideSettings(event){\n",
       "    document.getElementById('settings_6').style.visibility = 'hidden';\n",
       "    document.getElementById('showSettingsButton_6').style.visibility = 'visible';\n",
       "    document.getElementById('hideSettingsButton_6').style.visibility = 'hidden';\n",
       "    settingsShown = false;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "var pos = 150* Math.PI;\n",
       "\n",
       "function updateFactor() {\n",
       "    pos++;\n",
       "    return Math.sin(.01*pos)+1;\n",
       "}\n",
       "\n",
       "// ------------------------ FOLDING ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "// rotate point p around axis defined by points p1 and p2 by given angle\n",
       "function rotate(p, p1, p2, angle ){   \n",
       "    angle = -angle;\n",
       "    var x = p.x, y = p.y, z = p.z, \n",
       "    a = p1.x, b = p1.y, c = p1.z, \n",
       "    u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z;\n",
       "    var result = [];\n",
       "    var L = u*u + v*v + w*w;\n",
       "    var sqrt = Math.sqrt;\n",
       "    var cos = Math.cos;\n",
       "    var sin = Math.sin;\n",
       "\n",
       "    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;\n",
       "    result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L;\n",
       "    result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L;\n",
       "\n",
       "    return result;\n",
       "}\n",
       "\n",
       "var fold = function(event){\n",
       "    var obj = foldables[Number(event.currentTarget.name)];\n",
       "    var foldvalue = Number(event.currentTarget.value);\n",
       "    var scale = foldvalue - obj.userData.oldscale;\n",
       "\n",
       "    for (var j=0; j<obj.userData.axes.length; j++) {\n",
       "        rotateVertices(obj, j, scale);\n",
       "    }\n",
       "    update(obj);\n",
       "    obj.userData.oldscale += scale;\n",
       "    lookAtBarycenter(obj);\n",
       "}\n",
       "\n",
       "function lookAtBarycenter(obj){\n",
       "    control.target = barycenter(obj);\n",
       "}\n",
       "\n",
       "function barycenter(obj) {\n",
       "    var center = new THREE.Vector3(0,0,0);\n",
       "    var points = obj.userData.points;\n",
       "    for (var i=0; i<points.length; i++){\n",
       "        center.add(points[i].vector);\n",
       "    }\n",
       "    center.divideScalar(points.length);\n",
       "    return center;\n",
       "}\n",
       "\n",
       "function rotateVertices(obj, edge, scale) {\n",
       "    var axes = obj.userData.axes;\n",
       "    var subtrees = obj.userData.subtrees;\n",
       "    var points = obj.userData.points;\n",
       "    var angles = obj.userData.angles;\n",
       "    if (edge < axes.length){\n",
       "        for (var j=0; j<subtrees[edge].length; j++){\n",
       "            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));\n",
       "            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function update(obj) {\n",
       "   updateFacesPosition(obj);\n",
       "   updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "if (foldables.length) {\n",
       "    var settings = document.getElementById('settings_6');\n",
       "    var foldDiv = document.createElement('div');\n",
       "    foldDiv.id = 'fold_6';\n",
       "    var title = document.createElement('strong');\n",
       "    title.innerHTML = 'Fold';\n",
       "    foldDiv.appendChild(title);\n",
       "    foldDiv.className = 'group';\n",
       "    for (var i=0; i<foldables.length; i++) {\n",
       "        var range = document.createElement('input');\n",
       "        range.type = 'range';\n",
       "        range.min = 0;\n",
       "        range.max = 1;\n",
       "        range.value = 0;\n",
       "        range.step = 0.001;\n",
       "        range.name = String(i);\n",
       "        range.oninput = fold;\n",
       "        foldDiv.appendChild(range);\n",
       "    }\n",
       "    lookAtBarycenter(foldables[0]);\n",
       "    settings.insertBefore(foldDiv,settings.childNodes[0]);\n",
       "}\n",
       "\n",
       "    \n",
       "// ---------------------- EXPLOSION ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "if (explodableModel) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        obj = scene.children[i];\n",
       "        if ( obj.userData.explodable ) {\n",
       "            computeCentroid(obj);\n",
       "        }\n",
       "    }\n",
       "    document.getElementById('explodeRange_6').oninput = triggerExplode;\n",
       "    document.getElementById('explodeCheckbox_6').onchange = triggerAutomaticExplode;\n",
       "    document.getElementById('explodingSpeedRange_6').oninput = setExplodingSpeed;\n",
       "}\n",
       "\n",
       "function computeCentroid(obj) {\n",
       "    centroid = new THREE.Vector3();\n",
       "    obj.userData.points.forEach(function(pmpoint) {\n",
       "        centroid.add(pmpoint.vector);\t\t\t\n",
       "    });\n",
       "    centroid.divideScalar(obj.userData.points.length);\n",
       "    obj.userData.centroid = centroid;\n",
       "}\n",
       "\n",
       "function explode(factor) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        var obj = scene.children[i];\n",
       "        if (obj.userData.hasOwnProperty(\"centroid\")) { \n",
       "            var c = obj.userData.centroid;\n",
       "            obj.position.set(c.x*factor, c.y*factor, c.z*factor);\n",
       "        }\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function triggerExplode(event){\n",
       "    explodeScale = Number(event.currentTarget.value);\n",
       "    explode(explodeScale);\n",
       "}\n",
       "\n",
       "function setExplodingSpeed(event){\n",
       "    explodingSpeed = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function triggerAutomaticExplode(event){\n",
       "    if (event.currentTarget.checked){\n",
       "        startExploding();\n",
       "    } else {\n",
       "        clearIntervals();\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function startExploding(){\n",
       "    intervals.push(setInterval(explodingInterval, 25));\n",
       "}\n",
       "\n",
       "\n",
       "function explodingInterval(){\n",
       "    explodeScale += explodingSpeed;\n",
       "    if (explodeScale <= 6){ \n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else{\n",
       "        explode(6);\n",
       "        explodeScale = 6;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startUnexploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_6').value = explodeScale;\n",
       "}\n",
       "\n",
       "\n",
       "function startUnexploding(){\n",
       "    intervals.push(setInterval(unexplodingInterval, 25));\n",
       "}\n",
       "\n",
       "function unexplodingInterval(){\n",
       "    explodeScale -= explodingSpeed;\n",
       "    if (explodeScale >= 0){\t\n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else {\n",
       "        explode(0);\n",
       "        explodeScale = 0;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startExploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_6').value = explodeScale;\n",
       "}\n",
       "\n",
       "function clearIntervals(){\n",
       "    intervals.forEach(function(interval){\n",
       "        clearInterval(interval);\n",
       "    });\n",
       "    intervals = [];\n",
       "    timeouts.forEach(function(timeout){\n",
       "        clearTimeout(timeout);\n",
       "    });\n",
       "    timeouts = [];\n",
       "}\n",
       "\n",
       "// ---------------------- DISPLAY --------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "const objectTypeInnerHTMLs = { points: \"Points\", pointlabels: \"Point labels\", lines: \"Edges\", edgelabels: \"Edge labels\", faces: \"Faces\", arrowheads: \"Arrow heads\" };\n",
       "const objectTypeVisible = {};\n",
       "Object.assign(objectTypeVisible,modelContains);\n",
       "const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();\n",
       "const shownObjectTypesList = document.getElementById('shownObjectTypesList_6');\n",
       "\n",
       "function setVisibility(bool,objname) {\n",
       "    for (var i=0; i<scene.children.length; i++){\n",
       "        var obj = scene.children[i].getObjectByName(objname);\n",
       "        if (obj) {\n",
       "            obj.visible = bool;\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function toggleObjectTypeVisibility(event){\n",
       "    var name = event.currentTarget.name;\n",
       "    var checked = event.currentTarget.checked;\n",
       "    objectTypeVisible[name] = checked;\n",
       "    setVisibility(checked,name);\n",
       "}\n",
       "\n",
       "for (var i=0; i<sortedObjectTypeKeys.length; i++){\n",
       "    var key = sortedObjectTypeKeys[i];\n",
       "    if (modelContains[key]) {\n",
       "        var objTypeNode = document.createElement('span');\n",
       "        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';\n",
       "        var checkbox = document.createElement('input');\n",
       "        checkbox.type = 'checkbox';\n",
       "        checkbox.checked = true;\n",
       "        checkbox.name = key;\n",
       "        checkbox.onchange = toggleObjectTypeVisibility;\n",
       "        shownObjectTypesList.appendChild(checkbox);\n",
       "        shownObjectTypesList.appendChild(objTypeNode);\n",
       "    }\n",
       "}\n",
       "\n",
       "// ------------------------------------------------------\n",
       "\n",
       "function toggleObjectVisibility(event){\n",
       "    var nr = Number(event.currentTarget.name);\n",
       "    scene.children[nr].visible = event.currentTarget.checked;\n",
       "}\n",
       "\n",
       "// append checkboxes for displaying or hiding objects\n",
       "var shownObjectsList = document.getElementById('shownObjectsList_6');\n",
       "for (var i=0; i<scene.children.length; i++){\n",
       "    obj = scene.children[i];\n",
       "    var objNode = document.createElement('span');\n",
       "    objNode.innerHTML = obj.name + '<br>';\n",
       "    var checkbox = document.createElement('input');\n",
       "    checkbox.type = 'checkbox';\n",
       "    checkbox.checked = true;\n",
       "    checkbox.name = String(i);\n",
       "    checkbox.onchange = toggleObjectVisibility;\n",
       "    shownObjectsList.appendChild(checkbox);\n",
       "    shownObjectsList.appendChild(objNode);\n",
       "}\n",
       "\n",
       "// ---------------------- SVG ------------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function takeSvgScreenshot() {\n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(false,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(false,\"edgelabels\");\n",
       "    }\n",
       "    svgRenderer.render(scene,camera);\n",
       "    svgElement = XMLS.serializeToString(svgRenderer.domElement);\n",
       "    \n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(true,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(true,\"edgelabels\");\n",
       "    }\n",
       "\n",
       "    if (document.getElementById('tab_6').checked){\n",
       "        //show in new tab\n",
       "        var myWindow = window.open(\"\",\"\");\n",
       "        myWindow.document.body.innerHTML = svgElement;\n",
       "    } else{\n",
       "        // download svg file \n",
       "        download(\"screenshot.svg\", svgElement);\n",
       "    }\n",
       "}\n",
       "\n",
       "function download(filename, text) {\n",
       "    var element = document.createElement('a');\n",
       "    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));\n",
       "    element.setAttribute('download', filename);\n",
       "\n",
       "    element.style.display = 'none';\n",
       "    document.body.appendChild(element);\n",
       "\n",
       "    element.click();\n",
       "\n",
       "    document.body.removeChild(element);\n",
       "}\n",
       "\n",
       "\n",
       "document.getElementById('transparencyRange_6').oninput = changeTransparency;\n",
       "document.getElementById('changeRotationX_6').onchange = changeRotationX;\n",
       "document.getElementById('changeRotationY_6').onchange = changeRotationY;\n",
       "document.getElementById('changeRotationZ_6').onchange = changeRotationZ;\n",
       "document.getElementById('resetButton_6').onclick = resetScene;\n",
       "document.getElementById('rotationSpeedRange_6').oninput = changeRotationSpeedFactor;\n",
       "document.getElementById('takeScreenshot_6').onclick = takeSvgScreenshot;\n",
       "document.getElementById('showSettingsButton_6').onclick = showSettings;\n",
       "document.getElementById('hideSettingsButton_6').onclick = hideSettings;\n",
       "\n",
       "\n",
       "// ------------------ SHORTCUTS --------------------------------------------\n",
       "// -------------------------------------------------------------------------\n",
       "\n",
       "/**\n",
       " * http://www.openjs.com/scripts/events/keyboard_shortcuts/\n",
       " * Version : 2.01.B\n",
       " * By Binny V A\n",
       " * License : BSD\n",
       " */\n",
       "shortcut = {\n",
       "\t'all_shortcuts':{},//All the shortcuts are stored in this array\n",
       "\t'add': function(shortcut_combination,callback,opt) {\n",
       "\t\t//Provide a set of default options\n",
       "\t\tvar default_options = {\n",
       "\t\t\t'type':'keydown',\n",
       "\t\t\t'propagate':false,\n",
       "\t\t\t'disable_in_input':false,\n",
       "\t\t\t'target':document,\n",
       "\t\t\t'keycode':false\n",
       "\t\t}\n",
       "\t\tif(!opt) opt = default_options;\n",
       "\t\telse {\n",
       "\t\t\tfor(var dfo in default_options) {\n",
       "\t\t\t\tif(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\n",
       "\t\tvar ele = opt.target;\n",
       "\t\tif(typeof opt.target == 'string') ele = document.getElementById(opt.target);\n",
       "\t\tvar ths = this;\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\n",
       "\t\t//The function to be called at keypress\n",
       "\t\tvar func = function(e) {\n",
       "\t\t\te = e || window.event;\n",
       "\t\t\t\n",
       "\t\t\tif(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields\n",
       "\t\t\t\tvar element;\n",
       "\t\t\t\tif(e.target) element=e.target;\n",
       "\t\t\t\telse if(e.srcElement) element=e.srcElement;\n",
       "\t\t\t\tif(element.nodeType==3) element=element.parentNode;\n",
       "\n",
       "\t\t\t\tif(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\t//Find Which key is pressed\n",
       "\t\t\tif (e.keyCode) code = e.keyCode;\n",
       "\t\t\telse if (e.which) code = e.which;\n",
       "\t\t\tvar character = String.fromCharCode(code).toLowerCase();\n",
       "\t\t\t\n",
       "\t\t\tif(code == 188) character=\",\"; //If the user presses , when the type is onkeydown\n",
       "\t\t\tif(code == 190) character=\".\"; //If the user presses , when the type is onkeydown\n",
       "\n",
       "\t\t\tvar keys = shortcut_combination.split(\"+\");\n",
       "\t\t\t//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked\n",
       "\t\t\tvar kp = 0;\n",
       "\t\t\t\n",
       "\t\t\t//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken\n",
       "\t\t\tvar shift_nums = {\n",
       "\t\t\t\t\"`\":\"~\",\n",
       "\t\t\t\t\"1\":\"!\",\n",
       "\t\t\t\t\"2\":\"@\",\n",
       "\t\t\t\t\"3\":\"#\",\n",
       "\t\t\t\t\"4\":\"$\",\n",
       "\t\t\t\t\"5\":\"%\",\n",
       "\t\t\t\t\"6\":\"^\",\n",
       "\t\t\t\t\"7\":\"&\",\n",
       "\t\t\t\t\"8\":\"*\",\n",
       "\t\t\t\t\"9\":\"(\",\n",
       "\t\t\t\t\"0\":\")\",\n",
       "\t\t\t\t\"-\":\"_\",\n",
       "\t\t\t\t\"=\":\"+\",\n",
       "\t\t\t\t\";\":\":\",\n",
       "\t\t\t\t\"'\":\"\\\"\",\n",
       "\t\t\t\t\",\":\"<\",\n",
       "\t\t\t\t\".\":\">\",\n",
       "\t\t\t\t\"/\":\"?\",\n",
       "\t\t\t\t\"\\\\\":\"|\"\n",
       "\t\t\t}\n",
       "\t\t\t//Special Keys - and their codes\n",
       "\t\t\tvar special_keys = {\n",
       "\t\t\t\t'esc':27,\n",
       "\t\t\t\t'escape':27,\n",
       "\t\t\t\t'tab':9,\n",
       "\t\t\t\t'space':32,\n",
       "\t\t\t\t'return':13,\n",
       "\t\t\t\t'enter':13,\n",
       "\t\t\t\t'backspace':8,\n",
       "\t\n",
       "\t\t\t\t'scrolllock':145,\n",
       "\t\t\t\t'scroll_lock':145,\n",
       "\t\t\t\t'scroll':145,\n",
       "\t\t\t\t'capslock':20,\n",
       "\t\t\t\t'caps_lock':20,\n",
       "\t\t\t\t'caps':20,\n",
       "\t\t\t\t'numlock':144,\n",
       "\t\t\t\t'num_lock':144,\n",
       "\t\t\t\t'num':144,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pause':19,\n",
       "\t\t\t\t'break':19,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'insert':45,\n",
       "\t\t\t\t'home':36,\n",
       "\t\t\t\t'delete':46,\n",
       "\t\t\t\t'end':35,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pageup':33,\n",
       "\t\t\t\t'page_up':33,\n",
       "\t\t\t\t'pu':33,\n",
       "\t\n",
       "\t\t\t\t'pagedown':34,\n",
       "\t\t\t\t'page_down':34,\n",
       "\t\t\t\t'pd':34,\n",
       "\t\n",
       "\t\t\t\t'left':37,\n",
       "\t\t\t\t'up':38,\n",
       "\t\t\t\t'right':39,\n",
       "\t\t\t\t'down':40,\n",
       "\t\n",
       "\t\t\t\t'f1':112,\n",
       "\t\t\t\t'f2':113,\n",
       "\t\t\t\t'f3':114,\n",
       "\t\t\t\t'f4':115,\n",
       "\t\t\t\t'f5':116,\n",
       "\t\t\t\t'f6':117,\n",
       "\t\t\t\t'f7':118,\n",
       "\t\t\t\t'f8':119,\n",
       "\t\t\t\t'f9':120,\n",
       "\t\t\t\t'f10':121,\n",
       "\t\t\t\t'f11':122,\n",
       "\t\t\t\t'f12':123\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\tvar modifiers = { \n",
       "\t\t\t\tshift: { wanted:false, pressed:false},\n",
       "\t\t\t\tctrl : { wanted:false, pressed:false},\n",
       "\t\t\t\talt  : { wanted:false, pressed:false},\n",
       "\t\t\t\tmeta : { wanted:false, pressed:false}\t//Meta is Mac specific\n",
       "\t\t\t};\n",
       "                        \n",
       "\t\t\tif(e.ctrlKey)\tmodifiers.ctrl.pressed = true;\n",
       "\t\t\tif(e.shiftKey)\tmodifiers.shift.pressed = true;\n",
       "\t\t\tif(e.altKey)\tmodifiers.alt.pressed = true;\n",
       "\t\t\tif(e.metaKey)   modifiers.meta.pressed = true;\n",
       "                        \n",
       "\t\t\tfor(var i=0; k=keys[i],i<keys.length; i++) {\n",
       "\t\t\t\t//Modifiers\n",
       "\t\t\t\tif(k == 'ctrl' || k == 'control') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.ctrl.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'shift') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.shift.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'alt') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.alt.wanted = true;\n",
       "\t\t\t\t} else if(k == 'meta') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.meta.wanted = true;\n",
       "\t\t\t\t} else if(k.length > 1) { //If it is a special key\n",
       "\t\t\t\t\tif(special_keys[k] == code) kp++;\n",
       "\t\t\t\t\t\n",
       "\t\t\t\t} else if(opt['keycode']) {\n",
       "\t\t\t\t\tif(opt['keycode'] == code) kp++;\n",
       "\n",
       "\t\t\t\t} else { //The special keys did not match\n",
       "\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\telse {\n",
       "\t\t\t\t\t\tif(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase\n",
       "\t\t\t\t\t\t\tcharacter = shift_nums[character]; \n",
       "\t\t\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\t\t}\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t\t\n",
       "\t\t\tif(kp == keys.length && \n",
       "\t\t\t\t\t\tmodifiers.ctrl.pressed == modifiers.ctrl.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.shift.pressed == modifiers.shift.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.alt.pressed == modifiers.alt.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.meta.pressed == modifiers.meta.wanted) {\n",
       "\t\t\t\tcallback(e);\n",
       "\t\n",
       "\t\t\t\tif(!opt['propagate']) { //Stop the event\n",
       "\t\t\t\t\t//e.cancelBubble is supported by IE - this will kill the bubbling process.\n",
       "\t\t\t\t\te.cancelBubble = true;\n",
       "\t\t\t\t\te.returnValue = false;\n",
       "\t\n",
       "\t\t\t\t\t//e.stopPropagation works in Firefox.\n",
       "\t\t\t\t\tif (e.stopPropagation) {\n",
       "\t\t\t\t\t\te.stopPropagation();\n",
       "\t\t\t\t\t\te.preventDefault();\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t\treturn false;\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\t\tthis.all_shortcuts[shortcut_combination] = {\n",
       "\t\t\t'callback':func, \n",
       "\t\t\t'target':ele, \n",
       "\t\t\t'event': opt['type']\n",
       "\t\t};\n",
       "\t\t//Attach the function with the event\n",
       "\t\tif(ele.addEventListener) ele.addEventListener(opt['type'], func, false);\n",
       "\t\telse if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);\n",
       "\t\telse ele['on'+opt['type']] = func;\n",
       "\t},\n",
       "\n",
       "\t//Remove the shortcut - just specify the shortcut and I will remove the binding\n",
       "\t'remove':function(shortcut_combination) {\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\t\tvar binding = this.all_shortcuts[shortcut_combination];\n",
       "\t\tdelete(this.all_shortcuts[shortcut_combination])\n",
       "\t\tif(!binding) return;\n",
       "\t\tvar type = binding['event'];\n",
       "\t\tvar ele = binding['target'];\n",
       "\t\tvar callback = binding['callback'];\n",
       "\n",
       "\t\tif(ele.detachEvent) ele.detachEvent('on'+type, callback);\n",
       "\t\telse if(ele.removeEventListener) ele.removeEventListener(type, callback, false);\n",
       "\t\telse ele['on'+type] = false;\n",
       "\t}\n",
       "}\n",
       "\n",
       "shortcut.add(\"Alt+Left\",function() {\n",
       "\tvar event = new Event('click');\n",
       "\tif (settingsShown){\n",
       "\t\tdocument.getElementById('hideSettingsButton_6').dispatchEvent(event);\n",
       "\t} else {\n",
       "\t\tdocument.getElementById('showSettingsButton_6').dispatchEvent(event);\n",
       "\t}\n",
       "});\n",
       "\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "});});\n",
       "      </script>\n",
       "   </body>\n",
       "</html>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "$tet->VISUAL(VertexLabels=> sub { my $i = shift; return convert_to<Float>(dehomogenize($tet->VERTICES->[$i]));});"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Vertex Size\n",
    "\n",
    "Similar to changing the colors using the *VertexColor* attribute you are able to change the sizes of the vertices via the *VertexThickness*\n",
    "attribute. Again, you may set the sizes of all vertices by a single value or use an array or a function to specify individual sizes.\n",
    "\n",
    "** Single size **: To increase the size of the vertices, just pass a number larger than 1 to the *VertexThickness*"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!--\n",
       "polymake for knusper\n",
       "Thu Aug 27 11:44:14 2020\n",
       "unnamed\n",
       "-->\n",
       "\n",
       "\n",
       "<html>\n",
       "   <head>\n",
       "      <meta charset=utf-8>\n",
       "      <title>unnamed</title>\n",
       "      <style>\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "*/\n",
       "         html {overflow: scroll;}\n",
       "         strong{font-size: 18px;}\n",
       "         canvas { z-index: 8; }\n",
       "         input[type='radio'] {margin-left:0;}\n",
       "         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}\n",
       "         .group{padding-bottom: 15px;}\n",
       "         .settings * {z-index: 11; }\n",
       "         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}\n",
       "         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} \n",
       "         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}\n",
       "         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }\n",
       "         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}\n",
       "         button{margin-left: 0; margin-top: 10px}\n",
       "         img{cursor: pointer;}\n",
       "         .suboption{padding-top: 15px;}\n",
       "         #model11614694846 { width: 100%; height: 100%; }\n",
       "         .threejs_container { width: 100%; height: 75vh;}\n",
       "         .settings{max-height: 74vh} \n",
       "         input[type=range] {\n",
       "           -webkit-appearance: none;\n",
       "           padding:0; \n",
       "           width:90%; \n",
       "           margin-left: auto;\n",
       "           margin-right: auto;\n",
       "           margin-top: 15px;\n",
       "           margin-bottom: 15px;\n",
       "           display: block;\t\n",
       "         }\n",
       "         input[type=range]:focus {\n",
       "           outline: none;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-runnable-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "           -webkit-appearance: none;\n",
       "           margin-top: -5px;\n",
       "         }\n",
       "         input[type=range]:focus::-webkit-slider-runnable-track {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]::-moz-range-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-moz-range-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]::-ms-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           background: transparent;\n",
       "           border-color: transparent;\n",
       "           color: transparent;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_END\n",
       "*/\n",
       "\t\t</style>\n",
       "   </head>\n",
       "<body>\n",
       "   <div class='threejs_container'>\n",
       "\t\t<div id='settings_7' class='settings'>\n",
       "\t\t\t<div class=group id='transparency_7' class='transparency'>\n",
       "\t\t\t\t<strong>Transparency</strong>\n",
       "\t\t\t\t<input id='transparencyRange_7' type='range' min=0 max=1 step=0.01 value=0>\n",
       "\t\t\t</div>\n",
       "\t\t\t\n",
       "\t\t\t<div class=group id='rotation_7'>\n",
       "\t\t\t\t<strong>Rotation</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationX_7'> x-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationY_7'> y-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationZ_7'> z-axis</div>\n",
       "\t\t\t\t\t<button id='resetButton_7'>Reset</button>\n",
       "\t\t\t\t</div>\n",
       "\n",
       "\t\t\t\t<div class=suboption>Rotation speed</div>\n",
       "\t\t\t\t<input id='rotationSpeedRange_7' type='range' min=0 max=5 step=0.01 value=2>\n",
       "\t\t\t</div>\n",
       "\n",
       "\n",
       "\t\t\t<div class=group id='display_7'>\n",
       "\t\t\t\t<strong>Display</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div id='shownObjectTypesList_7' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t\t<div class=suboption>Objects</div>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t   <div id='shownObjectsList_7' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "         \n",
       "         <div class=group id='camera_7'>\n",
       "            <strong>Camera</strong>\n",
       "            <div class=indented>\n",
       "               <form>\n",
       "                  <select id=\"cameraType_7\">\n",
       "                     <option value='perspective' selected> Perspective<br></option>\n",
       "                     <option value='orthographic' > Orthographic<br></option>\n",
       "                  </select>\n",
       "               </form>\n",
       "            </div>\n",
       "         </div>\n",
       "\n",
       "\t\t\t<div class=group id='svg_7'>\n",
       "\t\t\t\t<strong>SVG</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<form>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='download' id='download_7' checked> Download<br>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='tab' id='tab_7' > New tab<br>\n",
       "\t\t\t\t\t</form>\n",
       "\t\t\t\t\t<button id='takeScreenshot_7'>Screenshot</button>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "\n",
       "\t\t</div>\t<!-- end of settings -->\n",
       "\t\t<img id='hideSettingsButton_7' class='hideSettingsButton' src='/kernelspecs/polymake/close.svg' width=20px\">\n",
       "\t\t<img id='showSettingsButton_7' class='showSettingsButton' src='/kernelspecs/polymake/menu.svg' width=20px\">\n",
       "<div id=\"model11614694846\"></div>\n",
       "</div>\n",
       "   <script>\n",
       "    requirejs.config({\n",
       "      paths: {\n",
       "        three: '/kernelspecs/polymake/three',\n",
       "        TrackballControls: '/kernelspecs/polymake/TrackballControls',\n",
       "        OrbitControls: '/kernelspecs/polymake/OrbitControls',\n",
       "        Projector: '/kernelspecs/polymake/Projector',\n",
       "        SVGRenderer: '/kernelspecs/polymake/SVGRenderer',\n",
       "        WEBGL: '/kernelspecs/polymake/WebGL',\n",
       "      },\n",
       "      shim: {\n",
       "        'three': { exports: 'THREE'},\n",
       "        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },\n",
       "        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },\n",
       "        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },\n",
       "        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },\n",
       "        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },\n",
       "      }\n",
       "    });\n",
       "    \n",
       "    require(['three'],function(THREE){\n",
       "        window.THREE = THREE;\n",
       "      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],\n",
       "               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {\n",
       "    THREE.TrackballControls = TrackballControls;\n",
       "    THREE.OrbitControls = OrbitControls;\n",
       "    THREE.Projector = Projector;\n",
       "    THREE.SVGRenderer = SVGRenderer;\n",
       "    THREE.WEBGL = WEBGL;\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "\n",
       "const intervalLength = 25; // for automatic animations\n",
       "const explodableModel = false; \n",
       "const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };\n",
       "const foldables = [];\n",
       "\n",
       "var three = document.getElementById(\"model11614694846\");\n",
       "var scene = new THREE.Scene();\n",
       "var renderer = new THREE.WebGLRenderer( { antialias: true } );\n",
       "var svgRenderer = new THREE.SVGRenderer( { antialias: true } );\n",
       "renderer.setPixelRatio( window.devicePixelRatio );\n",
       "renderer.setClearColor(0xFFFFFF, 1);\n",
       "svgRenderer.setClearColor(0xFFFFFF, 1);\n",
       "three.appendChild(renderer.domElement);\n",
       "\n",
       "var frustumSize = 4;\n",
       "var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];\n",
       "cameras.forEach(function(cam) {\n",
       "    cam.position.set(0, 0, 5);\n",
       "    cam.lookAt(0, 0, 0);  \n",
       "    cam.up.set(0, 1, 0);         \n",
       "});\n",
       "var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];\n",
       "var camera, control;\n",
       "\n",
       "controls[0].zoomSpeed = 0.2;\n",
       "controls[0].rotateSpeed = 4;\n",
       "\n",
       "\n",
       "// class to allow move points together with labels and spheres\n",
       "var PMPoint = function (x,y,z) {\n",
       "   this.vector = new THREE.Vector3(x,y,z);\n",
       "   this.sprite = null;\n",
       "   this.sphere = null;\n",
       "}\n",
       "PMPoint.prototype.addLabel = function(labelsprite) {\n",
       "   this.sprite = labelsprite;\n",
       "   this.sprite.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.addSphere = function(spheremesh) {\n",
       "   this.sphere = spheremesh;\n",
       "   this.sphere.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.set = function(x,y,z) {\n",
       "   this.vector.set(x,y,z);\n",
       "   if (this.sprite) {\n",
       "      this.sprite.position.copy(this.vector);\n",
       "   }\n",
       "   if (this.sphere) {\n",
       "      this.sphere.position.copy(this.vector);\n",
       "   }\n",
       "}\n",
       "PMPoint.prototype.radius = function() {\n",
       "   if (this.sphere) {\n",
       "      return this.sphere.geometry.parameters.radius;\n",
       "   } else {\n",
       "      return 0;\n",
       "   }\n",
       "};\n",
       "// select the target node\n",
       "var target = document.querySelector('#model11614694846');\n",
       "\n",
       "// create an observer instance\n",
       "var observer = new MutationObserver(function(mutations) {\n",
       "   mutations.forEach(function(mutation) {\n",
       "      if (mutation.removedNodes && mutation.removedNodes.length > 0) {\n",
       "         cancelAnimationFrame(renderId);\n",
       "         observer.disconnect();\n",
       "         console.log(\"cancelled frame \"+renderId);\n",
       "      }\n",
       "   });\n",
       "});\n",
       "\n",
       "// configuration of the observer:\n",
       "var config = { childList: true, characterData: true }\n",
       "\n",
       "// pass in the target node, as well as the observer options\n",
       "while (target) {\n",
       "   if (target.className==\"output\") {\n",
       "      observer.observe(target, config);\n",
       "      break;\n",
       "   }\n",
       "   target = target.parentNode;\n",
       "}\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "var obj0 = new THREE.Object3D();\n",
       "obj0.name = \"unnamed__1\";\n",
       "obj0.userData.explodable = 1;\n",
       "obj0.userData.points = [];\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(1, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 1, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 1));\n",
       "\n",
       "obj0.userData.pointradii = 0.04;\n",
       "   <!-- Vertex style -->\n",
       "obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );\n",
       "obj0.userData.pointlabels = [\"0\", \"1\", \"2\", \"3\"];\n",
       "obj0.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];\n",
       "   <!-- Edge style -->\n",
       "obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } );\n",
       "obj0.userData.facets = [[2, 3, 1], [0, 3, 2], [1, 3, 0], [2, 1, 0]];\n",
       "   <!-- Facet style -->\n",
       "obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );\n",
       "init_object(obj0);\n",
       "scene.add(obj0);\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "function textSpriteMaterial(message, parameters) {\n",
       "    if ( parameters === undefined ) parameters = {};\n",
       "    var fontface = \"Helvetica\";\n",
       "    var fontsize = parameters.hasOwnProperty(\"fontsize\") ? parameters[\"fontsize\"] : 15;\n",
       "    fontsize = fontsize*10;\n",
       "    var lines = message.split('\\\\n');\n",
       "    var size = 512;\n",
       "    for(var i = 0; i<lines.length; i++){\n",
       "        var tmp = lines[i].length;\n",
       "        while(tmp*fontsize > size){\n",
       "           fontsize--;\n",
       "        }\n",
       "    }\n",
       "    \n",
       "    var canvas = document.createElement('canvas');\n",
       "    canvas.width = size;\n",
       "    canvas.height = size;\n",
       "    var context = canvas.getContext('2d');\n",
       "    context.fillStyle = \"rgba(255, 255, 255, 0)\";\n",
       "    context.fill();\n",
       "    context.font = fontsize + \"px \" + fontface;\n",
       "    \n",
       "    // text color\n",
       "    context.fillStyle = \"rgba(0, 0, 0, 1.0)\";\n",
       "     for(var i = 0; i<lines.length; i++){\n",
       "        context.fillText(lines[i], size/2, size/2+i*fontsize);\n",
       "     }\n",
       "    \n",
       "    // canvas contents will be used for a texture\n",
       "    var texture = new THREE.Texture(canvas);\n",
       "    texture.needsUpdate = true;\n",
       "    \n",
       "    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });\n",
       "    return spriteMaterial;\n",
       "}\n",
       "\n",
       "\n",
       "// ---------------------- INITIALIZING OBJECTS--------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function init_object(obj) {\n",
       "    if (obj.userData.hasOwnProperty(\"pointmaterial\")) {\n",
       "        init_points(obj);\n",
       "        modelContains.points = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"pointlabels\")) {\n",
       "        init_pointlabels(obj);\n",
       "        modelContains.pointlabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgematerial\")) {\n",
       "        init_lines(obj);\n",
       "        modelContains.lines = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgelabels\")) {\n",
       "        init_edgelabels(obj);\n",
       "        modelContains.edgelabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"arrowstyle\")) {\n",
       "        init_arrowheads(obj);\n",
       "        modelContains.arrowheads = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"facetmaterial\")) {\n",
       "        init_faces(obj);\n",
       "        modelContains.faces = true;\n",
       "    }\n",
       "}\n",
       "\n",
       "function init_points(obj) {\n",
       "    var pointgroup = new THREE.Group();\n",
       "    pointgroup.name = \"points\";\n",
       "    var points = obj.userData.points;\n",
       "    var radii = obj.userData.pointradii;\n",
       "    var materials = obj.userData.pointmaterial;\n",
       "    var geometry,material;\n",
       "    if (!Array.isArray(radii)) {\n",
       "        geometry = new THREE.SphereBufferGeometry(radii);  \n",
       "    }\n",
       "    if (!Array.isArray(materials)) {\n",
       "        material = materials;\n",
       "    }\n",
       "    for (var i=0; i<points.length; i++) {\n",
       "        var point = points[i];\n",
       "        if (Array.isArray(radii)) {\n",
       "            if (radii[i] == 0) {\n",
       "                continue;\n",
       "            }\n",
       "            geometry = new THREE.SphereBufferGeometry(radii[i]);  \n",
       "        } \n",
       "        if (Array.isArray(materials)) {\n",
       "            material = materials[i];     \n",
       "        } \n",
       "        var sphere = new THREE.Mesh(geometry, material);\n",
       "        point.addSphere(sphere);\n",
       "        pointgroup.add(sphere);\n",
       "    }\n",
       "    obj.add(pointgroup);\n",
       "}\n",
       "\n",
       "function init_pointlabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var labels = obj.userData.pointlabels;\n",
       "    var pointlabels = new THREE.Group();\n",
       "    pointlabels.name = \"pointlabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(pointlabels);\n",
       "}\n",
       "\n",
       "function init_lines(obj) {\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var points = obj.userData.points;\n",
       "    var materials = obj.userData.edgematerial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    var bufarr = new Float32Array( obj.userData.edgeindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute( bufarr, 3 );\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position', bufattr);\n",
       "    if (Array.isArray(materials)) {     \n",
       "        for (var i=0; i<materials.length; i++) {\n",
       "            geometry.addGroup(2*i,2,i);\n",
       "        }\n",
       "    }\n",
       "    var lines = new THREE.LineSegments(geometry, materials);\n",
       "    lines.name = \"lines\";\n",
       "    obj.add(lines);\n",
       "    updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "function init_edgelabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var labels = obj.userData.edgelabels;\n",
       "    var edgelabels = new THREE.Group();\n",
       "    edgelabels.name = \"edgelabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            edgelabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(edgelabels);\n",
       "}\n",
       "\n",
       "function init_arrowheads(obj) {\n",
       "    var arrowheads = new THREE.Group();\n",
       "    arrowheads.name = \"arrowheads\";\n",
       "    var arrowstyle = obj.userData.arrowstyle;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var edgematerials = obj.userData.edgematerial;\n",
       "    var points = obj.userData.points;\n",
       "    var material;\n",
       "    if (!Array.isArray(edgematerials)) {\n",
       "        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );\n",
       "    }\n",
       "\n",
       "    for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "        var start = points[edgeindices[i]];\n",
       "        var end = points[edgeindices[i+1]];\n",
       "        var dist = start.vector.distanceTo( end.vector ) - start.radius() - end.radius();\n",
       "        if (dist <= 0) {\n",
       "            continue;\n",
       "        }\n",
       "        var dir = new THREE.Vector3().subVectors(end.vector,start.vector);\n",
       "        dir.normalize();\n",
       "        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);\n",
       "        axis.normalize();\n",
       "        var radians = Math.acos( dir.y );\n",
       "        var radius = dist/25;\n",
       "        var height = dist/5;\n",
       "        var geometry = new THREE.ConeBufferGeometry(radius,height);\n",
       "        var position = new THREE.Vector3().addVectors(start.vector,dir.clone().multiplyScalar(start.radius()+dist-height/2));\n",
       "        if (Array.isArray(edgematerials)) {\n",
       "            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );\n",
       "        }\n",
       "        var cone = new THREE.Mesh( geometry, material );\n",
       "        cone.quaternion.setFromAxisAngle(axis,radians);;\n",
       "        cone.position.copy(position);;\n",
       "        arrowheads.add(cone);\n",
       "    }\n",
       "    obj.add(arrowheads);\n",
       "}\n",
       "\n",
       "function init_faces(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var facets = obj.userData.facets;\n",
       "    obj.userData.triangleindices = [];\n",
       "    for (var i=0; i<facets.length; i++) {\n",
       "        facet = facets[i];\n",
       "        for (var t=0; t<facet.length-2; t++) {\n",
       "            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  \n",
       "        }\n",
       "    }\n",
       "    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);\n",
       "    \n",
       "    var materials = obj.userData.facetmaterial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position',bufattr);\n",
       "    if (Array.isArray(materials)) {\n",
       "        var tricount = 0;\n",
       "        var facet;\n",
       "        for (var i=0; i<facets.length; i++) {\n",
       "            facet = facets[i];\n",
       "            geometry.addGroup(tricount,(facet.length-2)*3,i);\n",
       "            tricount += (facet.length-2)*3;\n",
       "        }\n",
       "    }\n",
       "    var mesh = new THREE.Mesh(geometry, materials);\n",
       "    mesh.name = \"faces\";\n",
       "    obj.add(mesh); \n",
       "    updateFacesPosition(obj);\n",
       "}\n",
       "// //INITIALIZING\n",
       "\n",
       "\n",
       "function updateFacesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.triangleindices;\n",
       "    var faces = obj.getObjectByName(\"faces\");\n",
       "    var ba = faces.geometry.getAttribute(\"position\");\n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    faces.geometry.attributes.position.needsUpdate = true;\n",
       "    \n",
       "}\n",
       "\n",
       "function updateEdgesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.edgeindices;\n",
       "    var lines = obj.getObjectByName(\"lines\");\n",
       "    var ba = lines.geometry.getAttribute(\"position\"); \n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    lines.geometry.attributes.position.needsUpdate = true;\n",
       "}\n",
       "\n",
       "function onWindowResize() {\n",
       "    renderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    svgRenderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "function updateCamera() {\n",
       "    var width = three.clientWidth;\n",
       "    var height = three.clientHeight;\n",
       "    var aspect = width / height;\n",
       "    if (camera.type == \"OrthographicCamera\") {\n",
       "        camera.left = frustumSize * aspect / - 2;\n",
       "        camera.right = frustumSize * aspect / 2;\n",
       "        camera.top = frustumSize / 2;\n",
       "        camera.bottom = - frustumSize / 2;\n",
       "    } else if (camera.type == \"PerspectiveCamera\") {\n",
       "        camera.aspect = aspect;\n",
       "    }\n",
       "    camera.updateProjectionMatrix();\n",
       "}\n",
       "\n",
       "function changeCamera(event) {\n",
       "    var selindex = event.currentTarget.selectedIndex;\n",
       "    camera = cameras[selindex];\n",
       "    control = controls[selindex];\n",
       "    control.enabled = true; \n",
       "    for (var i=0; i<controls.length; i++) {\n",
       "        if (i!=selindex) {\n",
       "            controls[i].enabled = false;\n",
       "        }\n",
       "    }\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "var camtypenode = document.getElementById('cameraType_7');\n",
       "camtypenode.onchange = changeCamera;\n",
       "camtypenode.dispatchEvent(new Event('change'));\n",
       "\n",
       "onWindowResize();\n",
       "window.addEventListener('resize', onWindowResize);\t\n",
       "\n",
       "\n",
       "var xRotationEnabled = false;\n",
       "var yRotationEnabled = false;\n",
       "var zRotationEnabled = false;\n",
       "var rotationSpeedFactor = 1;\n",
       "var settingsShown = false;\n",
       "var labelsShown = true;\n",
       "var intervals = [];\n",
       "var timeouts = [];\n",
       "var explodingSpeed = 0.05;\n",
       "var explodeScale = 0;\n",
       "var XMLS = new XMLSerializer();\n",
       "var svgElement;\n",
       "var renderId;\n",
       "\n",
       "var render = function () {\n",
       "\n",
       "\trenderId = requestAnimationFrame(render);\n",
       "\n",
       "//\tcomment in for automatic explosion\n",
       "//\texplode(updateFactor());\n",
       "\n",
       "    var phi = 0.02 * rotationSpeedFactor;\n",
       "\n",
       "    if (xRotationEnabled) {\n",
       "        scene.rotation.x += phi;\n",
       "    }\n",
       "    if (yRotationEnabled) {\n",
       "        scene.rotation.y += phi;\n",
       "    }\n",
       "    if (zRotationEnabled) {\n",
       "        scene.rotation.z += phi;\n",
       "    }\n",
       "\n",
       "    control.update();\n",
       "    renderer.render(scene, camera);\n",
       "};\n",
       "\n",
       "if ( THREE.WEBGL.isWebGLAvailable() ) {\n",
       "\trender();\n",
       "} else {\n",
       "\tvar warning = WEBGL.getWebGLErrorMessage();\n",
       "\tthree.appendChild( warning );\n",
       "}\n",
       "    \n",
       "function changeTransparency() {\n",
       "    var opacity = 1-Number(event.currentTarget.value);\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        child = scene.children[i];\n",
       "        if ( child.userData.hasOwnProperty(\"facetmaterial\") ) {\n",
       "            if (Array.isArray(child.userData.facetmaterial)) {\n",
       "                for (var j=0; j<child.userData.facetmaterial.length; j++) {\n",
       "                    child.userData.facetmaterial[j].opacity = opacity;\n",
       "                }\n",
       "            } else {\n",
       "                child.userData.facetmaterial.opacity = opacity;\n",
       "            }    \n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function changeRotationX(event){\n",
       "    xRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationY(event){\n",
       "    yRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationZ(event){\n",
       "    zRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "\n",
       "function changeRotationSpeedFactor(event){\n",
       "    rotationSpeedFactor = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function resetScene(){\n",
       "    scene.rotation.set(0,0,0);\n",
       "    camera.position.set(0,0,5);\n",
       "    camera.up.set(0,1,0);\n",
       "}\n",
       "\n",
       "function showSettings(event){\n",
       "    document.getElementById('settings_7').style.visibility = 'visible';\n",
       "    document.getElementById('showSettingsButton_7').style.visibility = 'hidden';\n",
       "    document.getElementById('hideSettingsButton_7').style.visibility = 'visible';\n",
       "    settingsShown = true;\n",
       "}\n",
       "\n",
       "function hideSettings(event){\n",
       "    document.getElementById('settings_7').style.visibility = 'hidden';\n",
       "    document.getElementById('showSettingsButton_7').style.visibility = 'visible';\n",
       "    document.getElementById('hideSettingsButton_7').style.visibility = 'hidden';\n",
       "    settingsShown = false;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "var pos = 150* Math.PI;\n",
       "\n",
       "function updateFactor() {\n",
       "    pos++;\n",
       "    return Math.sin(.01*pos)+1;\n",
       "}\n",
       "\n",
       "// ------------------------ FOLDING ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "// rotate point p around axis defined by points p1 and p2 by given angle\n",
       "function rotate(p, p1, p2, angle ){   \n",
       "    angle = -angle;\n",
       "    var x = p.x, y = p.y, z = p.z, \n",
       "    a = p1.x, b = p1.y, c = p1.z, \n",
       "    u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z;\n",
       "    var result = [];\n",
       "    var L = u*u + v*v + w*w;\n",
       "    var sqrt = Math.sqrt;\n",
       "    var cos = Math.cos;\n",
       "    var sin = Math.sin;\n",
       "\n",
       "    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;\n",
       "    result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L;\n",
       "    result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L;\n",
       "\n",
       "    return result;\n",
       "}\n",
       "\n",
       "var fold = function(event){\n",
       "    var obj = foldables[Number(event.currentTarget.name)];\n",
       "    var foldvalue = Number(event.currentTarget.value);\n",
       "    var scale = foldvalue - obj.userData.oldscale;\n",
       "\n",
       "    for (var j=0; j<obj.userData.axes.length; j++) {\n",
       "        rotateVertices(obj, j, scale);\n",
       "    }\n",
       "    update(obj);\n",
       "    obj.userData.oldscale += scale;\n",
       "    lookAtBarycenter(obj);\n",
       "}\n",
       "\n",
       "function lookAtBarycenter(obj){\n",
       "    control.target = barycenter(obj);\n",
       "}\n",
       "\n",
       "function barycenter(obj) {\n",
       "    var center = new THREE.Vector3(0,0,0);\n",
       "    var points = obj.userData.points;\n",
       "    for (var i=0; i<points.length; i++){\n",
       "        center.add(points[i].vector);\n",
       "    }\n",
       "    center.divideScalar(points.length);\n",
       "    return center;\n",
       "}\n",
       "\n",
       "function rotateVertices(obj, edge, scale) {\n",
       "    var axes = obj.userData.axes;\n",
       "    var subtrees = obj.userData.subtrees;\n",
       "    var points = obj.userData.points;\n",
       "    var angles = obj.userData.angles;\n",
       "    if (edge < axes.length){\n",
       "        for (var j=0; j<subtrees[edge].length; j++){\n",
       "            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));\n",
       "            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function update(obj) {\n",
       "   updateFacesPosition(obj);\n",
       "   updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "if (foldables.length) {\n",
       "    var settings = document.getElementById('settings_7');\n",
       "    var foldDiv = document.createElement('div');\n",
       "    foldDiv.id = 'fold_7';\n",
       "    var title = document.createElement('strong');\n",
       "    title.innerHTML = 'Fold';\n",
       "    foldDiv.appendChild(title);\n",
       "    foldDiv.className = 'group';\n",
       "    for (var i=0; i<foldables.length; i++) {\n",
       "        var range = document.createElement('input');\n",
       "        range.type = 'range';\n",
       "        range.min = 0;\n",
       "        range.max = 1;\n",
       "        range.value = 0;\n",
       "        range.step = 0.001;\n",
       "        range.name = String(i);\n",
       "        range.oninput = fold;\n",
       "        foldDiv.appendChild(range);\n",
       "    }\n",
       "    lookAtBarycenter(foldables[0]);\n",
       "    settings.insertBefore(foldDiv,settings.childNodes[0]);\n",
       "}\n",
       "\n",
       "    \n",
       "// ---------------------- EXPLOSION ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "if (explodableModel) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        obj = scene.children[i];\n",
       "        if ( obj.userData.explodable ) {\n",
       "            computeCentroid(obj);\n",
       "        }\n",
       "    }\n",
       "    document.getElementById('explodeRange_7').oninput = triggerExplode;\n",
       "    document.getElementById('explodeCheckbox_7').onchange = triggerAutomaticExplode;\n",
       "    document.getElementById('explodingSpeedRange_7').oninput = setExplodingSpeed;\n",
       "}\n",
       "\n",
       "function computeCentroid(obj) {\n",
       "    centroid = new THREE.Vector3();\n",
       "    obj.userData.points.forEach(function(pmpoint) {\n",
       "        centroid.add(pmpoint.vector);\t\t\t\n",
       "    });\n",
       "    centroid.divideScalar(obj.userData.points.length);\n",
       "    obj.userData.centroid = centroid;\n",
       "}\n",
       "\n",
       "function explode(factor) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        var obj = scene.children[i];\n",
       "        if (obj.userData.hasOwnProperty(\"centroid\")) { \n",
       "            var c = obj.userData.centroid;\n",
       "            obj.position.set(c.x*factor, c.y*factor, c.z*factor);\n",
       "        }\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function triggerExplode(event){\n",
       "    explodeScale = Number(event.currentTarget.value);\n",
       "    explode(explodeScale);\n",
       "}\n",
       "\n",
       "function setExplodingSpeed(event){\n",
       "    explodingSpeed = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function triggerAutomaticExplode(event){\n",
       "    if (event.currentTarget.checked){\n",
       "        startExploding();\n",
       "    } else {\n",
       "        clearIntervals();\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function startExploding(){\n",
       "    intervals.push(setInterval(explodingInterval, 25));\n",
       "}\n",
       "\n",
       "\n",
       "function explodingInterval(){\n",
       "    explodeScale += explodingSpeed;\n",
       "    if (explodeScale <= 6){ \n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else{\n",
       "        explode(6);\n",
       "        explodeScale = 6;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startUnexploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_7').value = explodeScale;\n",
       "}\n",
       "\n",
       "\n",
       "function startUnexploding(){\n",
       "    intervals.push(setInterval(unexplodingInterval, 25));\n",
       "}\n",
       "\n",
       "function unexplodingInterval(){\n",
       "    explodeScale -= explodingSpeed;\n",
       "    if (explodeScale >= 0){\t\n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else {\n",
       "        explode(0);\n",
       "        explodeScale = 0;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startExploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_7').value = explodeScale;\n",
       "}\n",
       "\n",
       "function clearIntervals(){\n",
       "    intervals.forEach(function(interval){\n",
       "        clearInterval(interval);\n",
       "    });\n",
       "    intervals = [];\n",
       "    timeouts.forEach(function(timeout){\n",
       "        clearTimeout(timeout);\n",
       "    });\n",
       "    timeouts = [];\n",
       "}\n",
       "\n",
       "// ---------------------- DISPLAY --------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "const objectTypeInnerHTMLs = { points: \"Points\", pointlabels: \"Point labels\", lines: \"Edges\", edgelabels: \"Edge labels\", faces: \"Faces\", arrowheads: \"Arrow heads\" };\n",
       "const objectTypeVisible = {};\n",
       "Object.assign(objectTypeVisible,modelContains);\n",
       "const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();\n",
       "const shownObjectTypesList = document.getElementById('shownObjectTypesList_7');\n",
       "\n",
       "function setVisibility(bool,objname) {\n",
       "    for (var i=0; i<scene.children.length; i++){\n",
       "        var obj = scene.children[i].getObjectByName(objname);\n",
       "        if (obj) {\n",
       "            obj.visible = bool;\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function toggleObjectTypeVisibility(event){\n",
       "    var name = event.currentTarget.name;\n",
       "    var checked = event.currentTarget.checked;\n",
       "    objectTypeVisible[name] = checked;\n",
       "    setVisibility(checked,name);\n",
       "}\n",
       "\n",
       "for (var i=0; i<sortedObjectTypeKeys.length; i++){\n",
       "    var key = sortedObjectTypeKeys[i];\n",
       "    if (modelContains[key]) {\n",
       "        var objTypeNode = document.createElement('span');\n",
       "        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';\n",
       "        var checkbox = document.createElement('input');\n",
       "        checkbox.type = 'checkbox';\n",
       "        checkbox.checked = true;\n",
       "        checkbox.name = key;\n",
       "        checkbox.onchange = toggleObjectTypeVisibility;\n",
       "        shownObjectTypesList.appendChild(checkbox);\n",
       "        shownObjectTypesList.appendChild(objTypeNode);\n",
       "    }\n",
       "}\n",
       "\n",
       "// ------------------------------------------------------\n",
       "\n",
       "function toggleObjectVisibility(event){\n",
       "    var nr = Number(event.currentTarget.name);\n",
       "    scene.children[nr].visible = event.currentTarget.checked;\n",
       "}\n",
       "\n",
       "// append checkboxes for displaying or hiding objects\n",
       "var shownObjectsList = document.getElementById('shownObjectsList_7');\n",
       "for (var i=0; i<scene.children.length; i++){\n",
       "    obj = scene.children[i];\n",
       "    var objNode = document.createElement('span');\n",
       "    objNode.innerHTML = obj.name + '<br>';\n",
       "    var checkbox = document.createElement('input');\n",
       "    checkbox.type = 'checkbox';\n",
       "    checkbox.checked = true;\n",
       "    checkbox.name = String(i);\n",
       "    checkbox.onchange = toggleObjectVisibility;\n",
       "    shownObjectsList.appendChild(checkbox);\n",
       "    shownObjectsList.appendChild(objNode);\n",
       "}\n",
       "\n",
       "// ---------------------- SVG ------------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function takeSvgScreenshot() {\n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(false,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(false,\"edgelabels\");\n",
       "    }\n",
       "    svgRenderer.render(scene,camera);\n",
       "    svgElement = XMLS.serializeToString(svgRenderer.domElement);\n",
       "    \n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(true,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(true,\"edgelabels\");\n",
       "    }\n",
       "\n",
       "    if (document.getElementById('tab_7').checked){\n",
       "        //show in new tab\n",
       "        var myWindow = window.open(\"\",\"\");\n",
       "        myWindow.document.body.innerHTML = svgElement;\n",
       "    } else{\n",
       "        // download svg file \n",
       "        download(\"screenshot.svg\", svgElement);\n",
       "    }\n",
       "}\n",
       "\n",
       "function download(filename, text) {\n",
       "    var element = document.createElement('a');\n",
       "    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));\n",
       "    element.setAttribute('download', filename);\n",
       "\n",
       "    element.style.display = 'none';\n",
       "    document.body.appendChild(element);\n",
       "\n",
       "    element.click();\n",
       "\n",
       "    document.body.removeChild(element);\n",
       "}\n",
       "\n",
       "\n",
       "document.getElementById('transparencyRange_7').oninput = changeTransparency;\n",
       "document.getElementById('changeRotationX_7').onchange = changeRotationX;\n",
       "document.getElementById('changeRotationY_7').onchange = changeRotationY;\n",
       "document.getElementById('changeRotationZ_7').onchange = changeRotationZ;\n",
       "document.getElementById('resetButton_7').onclick = resetScene;\n",
       "document.getElementById('rotationSpeedRange_7').oninput = changeRotationSpeedFactor;\n",
       "document.getElementById('takeScreenshot_7').onclick = takeSvgScreenshot;\n",
       "document.getElementById('showSettingsButton_7').onclick = showSettings;\n",
       "document.getElementById('hideSettingsButton_7').onclick = hideSettings;\n",
       "\n",
       "\n",
       "// ------------------ SHORTCUTS --------------------------------------------\n",
       "// -------------------------------------------------------------------------\n",
       "\n",
       "/**\n",
       " * http://www.openjs.com/scripts/events/keyboard_shortcuts/\n",
       " * Version : 2.01.B\n",
       " * By Binny V A\n",
       " * License : BSD\n",
       " */\n",
       "shortcut = {\n",
       "\t'all_shortcuts':{},//All the shortcuts are stored in this array\n",
       "\t'add': function(shortcut_combination,callback,opt) {\n",
       "\t\t//Provide a set of default options\n",
       "\t\tvar default_options = {\n",
       "\t\t\t'type':'keydown',\n",
       "\t\t\t'propagate':false,\n",
       "\t\t\t'disable_in_input':false,\n",
       "\t\t\t'target':document,\n",
       "\t\t\t'keycode':false\n",
       "\t\t}\n",
       "\t\tif(!opt) opt = default_options;\n",
       "\t\telse {\n",
       "\t\t\tfor(var dfo in default_options) {\n",
       "\t\t\t\tif(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\n",
       "\t\tvar ele = opt.target;\n",
       "\t\tif(typeof opt.target == 'string') ele = document.getElementById(opt.target);\n",
       "\t\tvar ths = this;\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\n",
       "\t\t//The function to be called at keypress\n",
       "\t\tvar func = function(e) {\n",
       "\t\t\te = e || window.event;\n",
       "\t\t\t\n",
       "\t\t\tif(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields\n",
       "\t\t\t\tvar element;\n",
       "\t\t\t\tif(e.target) element=e.target;\n",
       "\t\t\t\telse if(e.srcElement) element=e.srcElement;\n",
       "\t\t\t\tif(element.nodeType==3) element=element.parentNode;\n",
       "\n",
       "\t\t\t\tif(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\t//Find Which key is pressed\n",
       "\t\t\tif (e.keyCode) code = e.keyCode;\n",
       "\t\t\telse if (e.which) code = e.which;\n",
       "\t\t\tvar character = String.fromCharCode(code).toLowerCase();\n",
       "\t\t\t\n",
       "\t\t\tif(code == 188) character=\",\"; //If the user presses , when the type is onkeydown\n",
       "\t\t\tif(code == 190) character=\".\"; //If the user presses , when the type is onkeydown\n",
       "\n",
       "\t\t\tvar keys = shortcut_combination.split(\"+\");\n",
       "\t\t\t//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked\n",
       "\t\t\tvar kp = 0;\n",
       "\t\t\t\n",
       "\t\t\t//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken\n",
       "\t\t\tvar shift_nums = {\n",
       "\t\t\t\t\"`\":\"~\",\n",
       "\t\t\t\t\"1\":\"!\",\n",
       "\t\t\t\t\"2\":\"@\",\n",
       "\t\t\t\t\"3\":\"#\",\n",
       "\t\t\t\t\"4\":\"$\",\n",
       "\t\t\t\t\"5\":\"%\",\n",
       "\t\t\t\t\"6\":\"^\",\n",
       "\t\t\t\t\"7\":\"&\",\n",
       "\t\t\t\t\"8\":\"*\",\n",
       "\t\t\t\t\"9\":\"(\",\n",
       "\t\t\t\t\"0\":\")\",\n",
       "\t\t\t\t\"-\":\"_\",\n",
       "\t\t\t\t\"=\":\"+\",\n",
       "\t\t\t\t\";\":\":\",\n",
       "\t\t\t\t\"'\":\"\\\"\",\n",
       "\t\t\t\t\",\":\"<\",\n",
       "\t\t\t\t\".\":\">\",\n",
       "\t\t\t\t\"/\":\"?\",\n",
       "\t\t\t\t\"\\\\\":\"|\"\n",
       "\t\t\t}\n",
       "\t\t\t//Special Keys - and their codes\n",
       "\t\t\tvar special_keys = {\n",
       "\t\t\t\t'esc':27,\n",
       "\t\t\t\t'escape':27,\n",
       "\t\t\t\t'tab':9,\n",
       "\t\t\t\t'space':32,\n",
       "\t\t\t\t'return':13,\n",
       "\t\t\t\t'enter':13,\n",
       "\t\t\t\t'backspace':8,\n",
       "\t\n",
       "\t\t\t\t'scrolllock':145,\n",
       "\t\t\t\t'scroll_lock':145,\n",
       "\t\t\t\t'scroll':145,\n",
       "\t\t\t\t'capslock':20,\n",
       "\t\t\t\t'caps_lock':20,\n",
       "\t\t\t\t'caps':20,\n",
       "\t\t\t\t'numlock':144,\n",
       "\t\t\t\t'num_lock':144,\n",
       "\t\t\t\t'num':144,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pause':19,\n",
       "\t\t\t\t'break':19,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'insert':45,\n",
       "\t\t\t\t'home':36,\n",
       "\t\t\t\t'delete':46,\n",
       "\t\t\t\t'end':35,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pageup':33,\n",
       "\t\t\t\t'page_up':33,\n",
       "\t\t\t\t'pu':33,\n",
       "\t\n",
       "\t\t\t\t'pagedown':34,\n",
       "\t\t\t\t'page_down':34,\n",
       "\t\t\t\t'pd':34,\n",
       "\t\n",
       "\t\t\t\t'left':37,\n",
       "\t\t\t\t'up':38,\n",
       "\t\t\t\t'right':39,\n",
       "\t\t\t\t'down':40,\n",
       "\t\n",
       "\t\t\t\t'f1':112,\n",
       "\t\t\t\t'f2':113,\n",
       "\t\t\t\t'f3':114,\n",
       "\t\t\t\t'f4':115,\n",
       "\t\t\t\t'f5':116,\n",
       "\t\t\t\t'f6':117,\n",
       "\t\t\t\t'f7':118,\n",
       "\t\t\t\t'f8':119,\n",
       "\t\t\t\t'f9':120,\n",
       "\t\t\t\t'f10':121,\n",
       "\t\t\t\t'f11':122,\n",
       "\t\t\t\t'f12':123\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\tvar modifiers = { \n",
       "\t\t\t\tshift: { wanted:false, pressed:false},\n",
       "\t\t\t\tctrl : { wanted:false, pressed:false},\n",
       "\t\t\t\talt  : { wanted:false, pressed:false},\n",
       "\t\t\t\tmeta : { wanted:false, pressed:false}\t//Meta is Mac specific\n",
       "\t\t\t};\n",
       "                        \n",
       "\t\t\tif(e.ctrlKey)\tmodifiers.ctrl.pressed = true;\n",
       "\t\t\tif(e.shiftKey)\tmodifiers.shift.pressed = true;\n",
       "\t\t\tif(e.altKey)\tmodifiers.alt.pressed = true;\n",
       "\t\t\tif(e.metaKey)   modifiers.meta.pressed = true;\n",
       "                        \n",
       "\t\t\tfor(var i=0; k=keys[i],i<keys.length; i++) {\n",
       "\t\t\t\t//Modifiers\n",
       "\t\t\t\tif(k == 'ctrl' || k == 'control') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.ctrl.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'shift') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.shift.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'alt') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.alt.wanted = true;\n",
       "\t\t\t\t} else if(k == 'meta') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.meta.wanted = true;\n",
       "\t\t\t\t} else if(k.length > 1) { //If it is a special key\n",
       "\t\t\t\t\tif(special_keys[k] == code) kp++;\n",
       "\t\t\t\t\t\n",
       "\t\t\t\t} else if(opt['keycode']) {\n",
       "\t\t\t\t\tif(opt['keycode'] == code) kp++;\n",
       "\n",
       "\t\t\t\t} else { //The special keys did not match\n",
       "\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\telse {\n",
       "\t\t\t\t\t\tif(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase\n",
       "\t\t\t\t\t\t\tcharacter = shift_nums[character]; \n",
       "\t\t\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\t\t}\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t\t\n",
       "\t\t\tif(kp == keys.length && \n",
       "\t\t\t\t\t\tmodifiers.ctrl.pressed == modifiers.ctrl.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.shift.pressed == modifiers.shift.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.alt.pressed == modifiers.alt.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.meta.pressed == modifiers.meta.wanted) {\n",
       "\t\t\t\tcallback(e);\n",
       "\t\n",
       "\t\t\t\tif(!opt['propagate']) { //Stop the event\n",
       "\t\t\t\t\t//e.cancelBubble is supported by IE - this will kill the bubbling process.\n",
       "\t\t\t\t\te.cancelBubble = true;\n",
       "\t\t\t\t\te.returnValue = false;\n",
       "\t\n",
       "\t\t\t\t\t//e.stopPropagation works in Firefox.\n",
       "\t\t\t\t\tif (e.stopPropagation) {\n",
       "\t\t\t\t\t\te.stopPropagation();\n",
       "\t\t\t\t\t\te.preventDefault();\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t\treturn false;\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\t\tthis.all_shortcuts[shortcut_combination] = {\n",
       "\t\t\t'callback':func, \n",
       "\t\t\t'target':ele, \n",
       "\t\t\t'event': opt['type']\n",
       "\t\t};\n",
       "\t\t//Attach the function with the event\n",
       "\t\tif(ele.addEventListener) ele.addEventListener(opt['type'], func, false);\n",
       "\t\telse if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);\n",
       "\t\telse ele['on'+opt['type']] = func;\n",
       "\t},\n",
       "\n",
       "\t//Remove the shortcut - just specify the shortcut and I will remove the binding\n",
       "\t'remove':function(shortcut_combination) {\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\t\tvar binding = this.all_shortcuts[shortcut_combination];\n",
       "\t\tdelete(this.all_shortcuts[shortcut_combination])\n",
       "\t\tif(!binding) return;\n",
       "\t\tvar type = binding['event'];\n",
       "\t\tvar ele = binding['target'];\n",
       "\t\tvar callback = binding['callback'];\n",
       "\n",
       "\t\tif(ele.detachEvent) ele.detachEvent('on'+type, callback);\n",
       "\t\telse if(ele.removeEventListener) ele.removeEventListener(type, callback, false);\n",
       "\t\telse ele['on'+type] = false;\n",
       "\t}\n",
       "}\n",
       "\n",
       "shortcut.add(\"Alt+Left\",function() {\n",
       "\tvar event = new Event('click');\n",
       "\tif (settingsShown){\n",
       "\t\tdocument.getElementById('hideSettingsButton_7').dispatchEvent(event);\n",
       "\t} else {\n",
       "\t\tdocument.getElementById('showSettingsButton_7').dispatchEvent(event);\n",
       "\t}\n",
       "});\n",
       "\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "});});\n",
       "      </script>\n",
       "   </body>\n",
       "</html>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "simplex(3)->VISUAL(VertexThickness=>2);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "** Array of sizes **: As in the case of colors and labels, you may also specify individual sizes using an array:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!--\n",
       "polymake for knusper\n",
       "Thu Aug 27 11:44:14 2020\n",
       "unnamed\n",
       "-->\n",
       "\n",
       "\n",
       "<html>\n",
       "   <head>\n",
       "      <meta charset=utf-8>\n",
       "      <title>unnamed</title>\n",
       "      <style>\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "*/\n",
       "         html {overflow: scroll;}\n",
       "         strong{font-size: 18px;}\n",
       "         canvas { z-index: 8; }\n",
       "         input[type='radio'] {margin-left:0;}\n",
       "         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}\n",
       "         .group{padding-bottom: 15px;}\n",
       "         .settings * {z-index: 11; }\n",
       "         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}\n",
       "         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} \n",
       "         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}\n",
       "         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }\n",
       "         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}\n",
       "         button{margin-left: 0; margin-top: 10px}\n",
       "         img{cursor: pointer;}\n",
       "         .suboption{padding-top: 15px;}\n",
       "         #model73164707281 { width: 100%; height: 100%; }\n",
       "         .threejs_container { width: 100%; height: 75vh;}\n",
       "         .settings{max-height: 74vh} \n",
       "         input[type=range] {\n",
       "           -webkit-appearance: none;\n",
       "           padding:0; \n",
       "           width:90%; \n",
       "           margin-left: auto;\n",
       "           margin-right: auto;\n",
       "           margin-top: 15px;\n",
       "           margin-bottom: 15px;\n",
       "           display: block;\t\n",
       "         }\n",
       "         input[type=range]:focus {\n",
       "           outline: none;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-runnable-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "           -webkit-appearance: none;\n",
       "           margin-top: -5px;\n",
       "         }\n",
       "         input[type=range]:focus::-webkit-slider-runnable-track {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]::-moz-range-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-moz-range-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]::-ms-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           background: transparent;\n",
       "           border-color: transparent;\n",
       "           color: transparent;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_END\n",
       "*/\n",
       "\t\t</style>\n",
       "   </head>\n",
       "<body>\n",
       "   <div class='threejs_container'>\n",
       "\t\t<div id='settings_8' class='settings'>\n",
       "\t\t\t<div class=group id='transparency_8' class='transparency'>\n",
       "\t\t\t\t<strong>Transparency</strong>\n",
       "\t\t\t\t<input id='transparencyRange_8' type='range' min=0 max=1 step=0.01 value=0>\n",
       "\t\t\t</div>\n",
       "\t\t\t\n",
       "\t\t\t<div class=group id='rotation_8'>\n",
       "\t\t\t\t<strong>Rotation</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationX_8'> x-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationY_8'> y-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationZ_8'> z-axis</div>\n",
       "\t\t\t\t\t<button id='resetButton_8'>Reset</button>\n",
       "\t\t\t\t</div>\n",
       "\n",
       "\t\t\t\t<div class=suboption>Rotation speed</div>\n",
       "\t\t\t\t<input id='rotationSpeedRange_8' type='range' min=0 max=5 step=0.01 value=2>\n",
       "\t\t\t</div>\n",
       "\n",
       "\n",
       "\t\t\t<div class=group id='display_8'>\n",
       "\t\t\t\t<strong>Display</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div id='shownObjectTypesList_8' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t\t<div class=suboption>Objects</div>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t   <div id='shownObjectsList_8' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "         \n",
       "         <div class=group id='camera_8'>\n",
       "            <strong>Camera</strong>\n",
       "            <div class=indented>\n",
       "               <form>\n",
       "                  <select id=\"cameraType_8\">\n",
       "                     <option value='perspective' selected> Perspective<br></option>\n",
       "                     <option value='orthographic' > Orthographic<br></option>\n",
       "                  </select>\n",
       "               </form>\n",
       "            </div>\n",
       "         </div>\n",
       "\n",
       "\t\t\t<div class=group id='svg_8'>\n",
       "\t\t\t\t<strong>SVG</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<form>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='download' id='download_8' checked> Download<br>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='tab' id='tab_8' > New tab<br>\n",
       "\t\t\t\t\t</form>\n",
       "\t\t\t\t\t<button id='takeScreenshot_8'>Screenshot</button>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "\n",
       "\t\t</div>\t<!-- end of settings -->\n",
       "\t\t<img id='hideSettingsButton_8' class='hideSettingsButton' src='/kernelspecs/polymake/close.svg' width=20px\">\n",
       "\t\t<img id='showSettingsButton_8' class='showSettingsButton' src='/kernelspecs/polymake/menu.svg' width=20px\">\n",
       "<div id=\"model73164707281\"></div>\n",
       "</div>\n",
       "   <script>\n",
       "    requirejs.config({\n",
       "      paths: {\n",
       "        three: '/kernelspecs/polymake/three',\n",
       "        TrackballControls: '/kernelspecs/polymake/TrackballControls',\n",
       "        OrbitControls: '/kernelspecs/polymake/OrbitControls',\n",
       "        Projector: '/kernelspecs/polymake/Projector',\n",
       "        SVGRenderer: '/kernelspecs/polymake/SVGRenderer',\n",
       "        WEBGL: '/kernelspecs/polymake/WebGL',\n",
       "      },\n",
       "      shim: {\n",
       "        'three': { exports: 'THREE'},\n",
       "        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },\n",
       "        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },\n",
       "        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },\n",
       "        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },\n",
       "        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },\n",
       "      }\n",
       "    });\n",
       "    \n",
       "    require(['three'],function(THREE){\n",
       "        window.THREE = THREE;\n",
       "      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],\n",
       "               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {\n",
       "    THREE.TrackballControls = TrackballControls;\n",
       "    THREE.OrbitControls = OrbitControls;\n",
       "    THREE.Projector = Projector;\n",
       "    THREE.SVGRenderer = SVGRenderer;\n",
       "    THREE.WEBGL = WEBGL;\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "\n",
       "const intervalLength = 25; // for automatic animations\n",
       "const explodableModel = false; \n",
       "const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };\n",
       "const foldables = [];\n",
       "\n",
       "var three = document.getElementById(\"model73164707281\");\n",
       "var scene = new THREE.Scene();\n",
       "var renderer = new THREE.WebGLRenderer( { antialias: true } );\n",
       "var svgRenderer = new THREE.SVGRenderer( { antialias: true } );\n",
       "renderer.setPixelRatio( window.devicePixelRatio );\n",
       "renderer.setClearColor(0xFFFFFF, 1);\n",
       "svgRenderer.setClearColor(0xFFFFFF, 1);\n",
       "three.appendChild(renderer.domElement);\n",
       "\n",
       "var frustumSize = 4;\n",
       "var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];\n",
       "cameras.forEach(function(cam) {\n",
       "    cam.position.set(0, 0, 5);\n",
       "    cam.lookAt(0, 0, 0);  \n",
       "    cam.up.set(0, 1, 0);         \n",
       "});\n",
       "var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];\n",
       "var camera, control;\n",
       "\n",
       "controls[0].zoomSpeed = 0.2;\n",
       "controls[0].rotateSpeed = 4;\n",
       "\n",
       "\n",
       "// class to allow move points together with labels and spheres\n",
       "var PMPoint = function (x,y,z) {\n",
       "   this.vector = new THREE.Vector3(x,y,z);\n",
       "   this.sprite = null;\n",
       "   this.sphere = null;\n",
       "}\n",
       "PMPoint.prototype.addLabel = function(labelsprite) {\n",
       "   this.sprite = labelsprite;\n",
       "   this.sprite.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.addSphere = function(spheremesh) {\n",
       "   this.sphere = spheremesh;\n",
       "   this.sphere.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.set = function(x,y,z) {\n",
       "   this.vector.set(x,y,z);\n",
       "   if (this.sprite) {\n",
       "      this.sprite.position.copy(this.vector);\n",
       "   }\n",
       "   if (this.sphere) {\n",
       "      this.sphere.position.copy(this.vector);\n",
       "   }\n",
       "}\n",
       "PMPoint.prototype.radius = function() {\n",
       "   if (this.sphere) {\n",
       "      return this.sphere.geometry.parameters.radius;\n",
       "   } else {\n",
       "      return 0;\n",
       "   }\n",
       "};\n",
       "// select the target node\n",
       "var target = document.querySelector('#model73164707281');\n",
       "\n",
       "// create an observer instance\n",
       "var observer = new MutationObserver(function(mutations) {\n",
       "   mutations.forEach(function(mutation) {\n",
       "      if (mutation.removedNodes && mutation.removedNodes.length > 0) {\n",
       "         cancelAnimationFrame(renderId);\n",
       "         observer.disconnect();\n",
       "         console.log(\"cancelled frame \"+renderId);\n",
       "      }\n",
       "   });\n",
       "});\n",
       "\n",
       "// configuration of the observer:\n",
       "var config = { childList: true, characterData: true }\n",
       "\n",
       "// pass in the target node, as well as the observer options\n",
       "while (target) {\n",
       "   if (target.className==\"output\") {\n",
       "      observer.observe(target, config);\n",
       "      break;\n",
       "   }\n",
       "   target = target.parentNode;\n",
       "}\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "var obj0 = new THREE.Object3D();\n",
       "obj0.name = \"unnamed__1\";\n",
       "obj0.userData.explodable = 1;\n",
       "obj0.userData.points = [];\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(1, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 1, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 1));\n",
       "\n",
       "obj0.userData.pointradii = [0.02, 0.04, 0.06, 0.08, 0];\n",
       "   <!-- Vertex style -->\n",
       "obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );\n",
       "obj0.userData.pointlabels = [\"0\", \"1\", \"2\", \"3\"];\n",
       "obj0.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];\n",
       "   <!-- Edge style -->\n",
       "obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } );\n",
       "obj0.userData.facets = [[2, 3, 1], [0, 3, 2], [1, 3, 0], [2, 1, 0]];\n",
       "   <!-- Facet style -->\n",
       "obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );\n",
       "init_object(obj0);\n",
       "scene.add(obj0);\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "function textSpriteMaterial(message, parameters) {\n",
       "    if ( parameters === undefined ) parameters = {};\n",
       "    var fontface = \"Helvetica\";\n",
       "    var fontsize = parameters.hasOwnProperty(\"fontsize\") ? parameters[\"fontsize\"] : 15;\n",
       "    fontsize = fontsize*10;\n",
       "    var lines = message.split('\\\\n');\n",
       "    var size = 512;\n",
       "    for(var i = 0; i<lines.length; i++){\n",
       "        var tmp = lines[i].length;\n",
       "        while(tmp*fontsize > size){\n",
       "           fontsize--;\n",
       "        }\n",
       "    }\n",
       "    \n",
       "    var canvas = document.createElement('canvas');\n",
       "    canvas.width = size;\n",
       "    canvas.height = size;\n",
       "    var context = canvas.getContext('2d');\n",
       "    context.fillStyle = \"rgba(255, 255, 255, 0)\";\n",
       "    context.fill();\n",
       "    context.font = fontsize + \"px \" + fontface;\n",
       "    \n",
       "    // text color\n",
       "    context.fillStyle = \"rgba(0, 0, 0, 1.0)\";\n",
       "     for(var i = 0; i<lines.length; i++){\n",
       "        context.fillText(lines[i], size/2, size/2+i*fontsize);\n",
       "     }\n",
       "    \n",
       "    // canvas contents will be used for a texture\n",
       "    var texture = new THREE.Texture(canvas);\n",
       "    texture.needsUpdate = true;\n",
       "    \n",
       "    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });\n",
       "    return spriteMaterial;\n",
       "}\n",
       "\n",
       "\n",
       "// ---------------------- INITIALIZING OBJECTS--------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function init_object(obj) {\n",
       "    if (obj.userData.hasOwnProperty(\"pointmaterial\")) {\n",
       "        init_points(obj);\n",
       "        modelContains.points = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"pointlabels\")) {\n",
       "        init_pointlabels(obj);\n",
       "        modelContains.pointlabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgematerial\")) {\n",
       "        init_lines(obj);\n",
       "        modelContains.lines = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgelabels\")) {\n",
       "        init_edgelabels(obj);\n",
       "        modelContains.edgelabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"arrowstyle\")) {\n",
       "        init_arrowheads(obj);\n",
       "        modelContains.arrowheads = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"facetmaterial\")) {\n",
       "        init_faces(obj);\n",
       "        modelContains.faces = true;\n",
       "    }\n",
       "}\n",
       "\n",
       "function init_points(obj) {\n",
       "    var pointgroup = new THREE.Group();\n",
       "    pointgroup.name = \"points\";\n",
       "    var points = obj.userData.points;\n",
       "    var radii = obj.userData.pointradii;\n",
       "    var materials = obj.userData.pointmaterial;\n",
       "    var geometry,material;\n",
       "    if (!Array.isArray(radii)) {\n",
       "        geometry = new THREE.SphereBufferGeometry(radii);  \n",
       "    }\n",
       "    if (!Array.isArray(materials)) {\n",
       "        material = materials;\n",
       "    }\n",
       "    for (var i=0; i<points.length; i++) {\n",
       "        var point = points[i];\n",
       "        if (Array.isArray(radii)) {\n",
       "            if (radii[i] == 0) {\n",
       "                continue;\n",
       "            }\n",
       "            geometry = new THREE.SphereBufferGeometry(radii[i]);  \n",
       "        } \n",
       "        if (Array.isArray(materials)) {\n",
       "            material = materials[i];     \n",
       "        } \n",
       "        var sphere = new THREE.Mesh(geometry, material);\n",
       "        point.addSphere(sphere);\n",
       "        pointgroup.add(sphere);\n",
       "    }\n",
       "    obj.add(pointgroup);\n",
       "}\n",
       "\n",
       "function init_pointlabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var labels = obj.userData.pointlabels;\n",
       "    var pointlabels = new THREE.Group();\n",
       "    pointlabels.name = \"pointlabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(pointlabels);\n",
       "}\n",
       "\n",
       "function init_lines(obj) {\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var points = obj.userData.points;\n",
       "    var materials = obj.userData.edgematerial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    var bufarr = new Float32Array( obj.userData.edgeindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute( bufarr, 3 );\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position', bufattr);\n",
       "    if (Array.isArray(materials)) {     \n",
       "        for (var i=0; i<materials.length; i++) {\n",
       "            geometry.addGroup(2*i,2,i);\n",
       "        }\n",
       "    }\n",
       "    var lines = new THREE.LineSegments(geometry, materials);\n",
       "    lines.name = \"lines\";\n",
       "    obj.add(lines);\n",
       "    updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "function init_edgelabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var labels = obj.userData.edgelabels;\n",
       "    var edgelabels = new THREE.Group();\n",
       "    edgelabels.name = \"edgelabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            edgelabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(edgelabels);\n",
       "}\n",
       "\n",
       "function init_arrowheads(obj) {\n",
       "    var arrowheads = new THREE.Group();\n",
       "    arrowheads.name = \"arrowheads\";\n",
       "    var arrowstyle = obj.userData.arrowstyle;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var edgematerials = obj.userData.edgematerial;\n",
       "    var points = obj.userData.points;\n",
       "    var material;\n",
       "    if (!Array.isArray(edgematerials)) {\n",
       "        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );\n",
       "    }\n",
       "\n",
       "    for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "        var start = points[edgeindices[i]];\n",
       "        var end = points[edgeindices[i+1]];\n",
       "        var dist = start.vector.distanceTo( end.vector ) - start.radius() - end.radius();\n",
       "        if (dist <= 0) {\n",
       "            continue;\n",
       "        }\n",
       "        var dir = new THREE.Vector3().subVectors(end.vector,start.vector);\n",
       "        dir.normalize();\n",
       "        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);\n",
       "        axis.normalize();\n",
       "        var radians = Math.acos( dir.y );\n",
       "        var radius = dist/25;\n",
       "        var height = dist/5;\n",
       "        var geometry = new THREE.ConeBufferGeometry(radius,height);\n",
       "        var position = new THREE.Vector3().addVectors(start.vector,dir.clone().multiplyScalar(start.radius()+dist-height/2));\n",
       "        if (Array.isArray(edgematerials)) {\n",
       "            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );\n",
       "        }\n",
       "        var cone = new THREE.Mesh( geometry, material );\n",
       "        cone.quaternion.setFromAxisAngle(axis,radians);;\n",
       "        cone.position.copy(position);;\n",
       "        arrowheads.add(cone);\n",
       "    }\n",
       "    obj.add(arrowheads);\n",
       "}\n",
       "\n",
       "function init_faces(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var facets = obj.userData.facets;\n",
       "    obj.userData.triangleindices = [];\n",
       "    for (var i=0; i<facets.length; i++) {\n",
       "        facet = facets[i];\n",
       "        for (var t=0; t<facet.length-2; t++) {\n",
       "            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  \n",
       "        }\n",
       "    }\n",
       "    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);\n",
       "    \n",
       "    var materials = obj.userData.facetmaterial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position',bufattr);\n",
       "    if (Array.isArray(materials)) {\n",
       "        var tricount = 0;\n",
       "        var facet;\n",
       "        for (var i=0; i<facets.length; i++) {\n",
       "            facet = facets[i];\n",
       "            geometry.addGroup(tricount,(facet.length-2)*3,i);\n",
       "            tricount += (facet.length-2)*3;\n",
       "        }\n",
       "    }\n",
       "    var mesh = new THREE.Mesh(geometry, materials);\n",
       "    mesh.name = \"faces\";\n",
       "    obj.add(mesh); \n",
       "    updateFacesPosition(obj);\n",
       "}\n",
       "// //INITIALIZING\n",
       "\n",
       "\n",
       "function updateFacesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.triangleindices;\n",
       "    var faces = obj.getObjectByName(\"faces\");\n",
       "    var ba = faces.geometry.getAttribute(\"position\");\n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    faces.geometry.attributes.position.needsUpdate = true;\n",
       "    \n",
       "}\n",
       "\n",
       "function updateEdgesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.edgeindices;\n",
       "    var lines = obj.getObjectByName(\"lines\");\n",
       "    var ba = lines.geometry.getAttribute(\"position\"); \n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    lines.geometry.attributes.position.needsUpdate = true;\n",
       "}\n",
       "\n",
       "function onWindowResize() {\n",
       "    renderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    svgRenderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "function updateCamera() {\n",
       "    var width = three.clientWidth;\n",
       "    var height = three.clientHeight;\n",
       "    var aspect = width / height;\n",
       "    if (camera.type == \"OrthographicCamera\") {\n",
       "        camera.left = frustumSize * aspect / - 2;\n",
       "        camera.right = frustumSize * aspect / 2;\n",
       "        camera.top = frustumSize / 2;\n",
       "        camera.bottom = - frustumSize / 2;\n",
       "    } else if (camera.type == \"PerspectiveCamera\") {\n",
       "        camera.aspect = aspect;\n",
       "    }\n",
       "    camera.updateProjectionMatrix();\n",
       "}\n",
       "\n",
       "function changeCamera(event) {\n",
       "    var selindex = event.currentTarget.selectedIndex;\n",
       "    camera = cameras[selindex];\n",
       "    control = controls[selindex];\n",
       "    control.enabled = true; \n",
       "    for (var i=0; i<controls.length; i++) {\n",
       "        if (i!=selindex) {\n",
       "            controls[i].enabled = false;\n",
       "        }\n",
       "    }\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "var camtypenode = document.getElementById('cameraType_8');\n",
       "camtypenode.onchange = changeCamera;\n",
       "camtypenode.dispatchEvent(new Event('change'));\n",
       "\n",
       "onWindowResize();\n",
       "window.addEventListener('resize', onWindowResize);\t\n",
       "\n",
       "\n",
       "var xRotationEnabled = false;\n",
       "var yRotationEnabled = false;\n",
       "var zRotationEnabled = false;\n",
       "var rotationSpeedFactor = 1;\n",
       "var settingsShown = false;\n",
       "var labelsShown = true;\n",
       "var intervals = [];\n",
       "var timeouts = [];\n",
       "var explodingSpeed = 0.05;\n",
       "var explodeScale = 0;\n",
       "var XMLS = new XMLSerializer();\n",
       "var svgElement;\n",
       "var renderId;\n",
       "\n",
       "var render = function () {\n",
       "\n",
       "\trenderId = requestAnimationFrame(render);\n",
       "\n",
       "//\tcomment in for automatic explosion\n",
       "//\texplode(updateFactor());\n",
       "\n",
       "    var phi = 0.02 * rotationSpeedFactor;\n",
       "\n",
       "    if (xRotationEnabled) {\n",
       "        scene.rotation.x += phi;\n",
       "    }\n",
       "    if (yRotationEnabled) {\n",
       "        scene.rotation.y += phi;\n",
       "    }\n",
       "    if (zRotationEnabled) {\n",
       "        scene.rotation.z += phi;\n",
       "    }\n",
       "\n",
       "    control.update();\n",
       "    renderer.render(scene, camera);\n",
       "};\n",
       "\n",
       "if ( THREE.WEBGL.isWebGLAvailable() ) {\n",
       "\trender();\n",
       "} else {\n",
       "\tvar warning = WEBGL.getWebGLErrorMessage();\n",
       "\tthree.appendChild( warning );\n",
       "}\n",
       "    \n",
       "function changeTransparency() {\n",
       "    var opacity = 1-Number(event.currentTarget.value);\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        child = scene.children[i];\n",
       "        if ( child.userData.hasOwnProperty(\"facetmaterial\") ) {\n",
       "            if (Array.isArray(child.userData.facetmaterial)) {\n",
       "                for (var j=0; j<child.userData.facetmaterial.length; j++) {\n",
       "                    child.userData.facetmaterial[j].opacity = opacity;\n",
       "                }\n",
       "            } else {\n",
       "                child.userData.facetmaterial.opacity = opacity;\n",
       "            }    \n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function changeRotationX(event){\n",
       "    xRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationY(event){\n",
       "    yRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationZ(event){\n",
       "    zRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "\n",
       "function changeRotationSpeedFactor(event){\n",
       "    rotationSpeedFactor = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function resetScene(){\n",
       "    scene.rotation.set(0,0,0);\n",
       "    camera.position.set(0,0,5);\n",
       "    camera.up.set(0,1,0);\n",
       "}\n",
       "\n",
       "function showSettings(event){\n",
       "    document.getElementById('settings_8').style.visibility = 'visible';\n",
       "    document.getElementById('showSettingsButton_8').style.visibility = 'hidden';\n",
       "    document.getElementById('hideSettingsButton_8').style.visibility = 'visible';\n",
       "    settingsShown = true;\n",
       "}\n",
       "\n",
       "function hideSettings(event){\n",
       "    document.getElementById('settings_8').style.visibility = 'hidden';\n",
       "    document.getElementById('showSettingsButton_8').style.visibility = 'visible';\n",
       "    document.getElementById('hideSettingsButton_8').style.visibility = 'hidden';\n",
       "    settingsShown = false;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "var pos = 150* Math.PI;\n",
       "\n",
       "function updateFactor() {\n",
       "    pos++;\n",
       "    return Math.sin(.01*pos)+1;\n",
       "}\n",
       "\n",
       "// ------------------------ FOLDING ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "// rotate point p around axis defined by points p1 and p2 by given angle\n",
       "function rotate(p, p1, p2, angle ){   \n",
       "    angle = -angle;\n",
       "    var x = p.x, y = p.y, z = p.z, \n",
       "    a = p1.x, b = p1.y, c = p1.z, \n",
       "    u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z;\n",
       "    var result = [];\n",
       "    var L = u*u + v*v + w*w;\n",
       "    var sqrt = Math.sqrt;\n",
       "    var cos = Math.cos;\n",
       "    var sin = Math.sin;\n",
       "\n",
       "    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;\n",
       "    result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L;\n",
       "    result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L;\n",
       "\n",
       "    return result;\n",
       "}\n",
       "\n",
       "var fold = function(event){\n",
       "    var obj = foldables[Number(event.currentTarget.name)];\n",
       "    var foldvalue = Number(event.currentTarget.value);\n",
       "    var scale = foldvalue - obj.userData.oldscale;\n",
       "\n",
       "    for (var j=0; j<obj.userData.axes.length; j++) {\n",
       "        rotateVertices(obj, j, scale);\n",
       "    }\n",
       "    update(obj);\n",
       "    obj.userData.oldscale += scale;\n",
       "    lookAtBarycenter(obj);\n",
       "}\n",
       "\n",
       "function lookAtBarycenter(obj){\n",
       "    control.target = barycenter(obj);\n",
       "}\n",
       "\n",
       "function barycenter(obj) {\n",
       "    var center = new THREE.Vector3(0,0,0);\n",
       "    var points = obj.userData.points;\n",
       "    for (var i=0; i<points.length; i++){\n",
       "        center.add(points[i].vector);\n",
       "    }\n",
       "    center.divideScalar(points.length);\n",
       "    return center;\n",
       "}\n",
       "\n",
       "function rotateVertices(obj, edge, scale) {\n",
       "    var axes = obj.userData.axes;\n",
       "    var subtrees = obj.userData.subtrees;\n",
       "    var points = obj.userData.points;\n",
       "    var angles = obj.userData.angles;\n",
       "    if (edge < axes.length){\n",
       "        for (var j=0; j<subtrees[edge].length; j++){\n",
       "            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));\n",
       "            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function update(obj) {\n",
       "   updateFacesPosition(obj);\n",
       "   updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "if (foldables.length) {\n",
       "    var settings = document.getElementById('settings_8');\n",
       "    var foldDiv = document.createElement('div');\n",
       "    foldDiv.id = 'fold_8';\n",
       "    var title = document.createElement('strong');\n",
       "    title.innerHTML = 'Fold';\n",
       "    foldDiv.appendChild(title);\n",
       "    foldDiv.className = 'group';\n",
       "    for (var i=0; i<foldables.length; i++) {\n",
       "        var range = document.createElement('input');\n",
       "        range.type = 'range';\n",
       "        range.min = 0;\n",
       "        range.max = 1;\n",
       "        range.value = 0;\n",
       "        range.step = 0.001;\n",
       "        range.name = String(i);\n",
       "        range.oninput = fold;\n",
       "        foldDiv.appendChild(range);\n",
       "    }\n",
       "    lookAtBarycenter(foldables[0]);\n",
       "    settings.insertBefore(foldDiv,settings.childNodes[0]);\n",
       "}\n",
       "\n",
       "    \n",
       "// ---------------------- EXPLOSION ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "if (explodableModel) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        obj = scene.children[i];\n",
       "        if ( obj.userData.explodable ) {\n",
       "            computeCentroid(obj);\n",
       "        }\n",
       "    }\n",
       "    document.getElementById('explodeRange_8').oninput = triggerExplode;\n",
       "    document.getElementById('explodeCheckbox_8').onchange = triggerAutomaticExplode;\n",
       "    document.getElementById('explodingSpeedRange_8').oninput = setExplodingSpeed;\n",
       "}\n",
       "\n",
       "function computeCentroid(obj) {\n",
       "    centroid = new THREE.Vector3();\n",
       "    obj.userData.points.forEach(function(pmpoint) {\n",
       "        centroid.add(pmpoint.vector);\t\t\t\n",
       "    });\n",
       "    centroid.divideScalar(obj.userData.points.length);\n",
       "    obj.userData.centroid = centroid;\n",
       "}\n",
       "\n",
       "function explode(factor) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        var obj = scene.children[i];\n",
       "        if (obj.userData.hasOwnProperty(\"centroid\")) { \n",
       "            var c = obj.userData.centroid;\n",
       "            obj.position.set(c.x*factor, c.y*factor, c.z*factor);\n",
       "        }\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function triggerExplode(event){\n",
       "    explodeScale = Number(event.currentTarget.value);\n",
       "    explode(explodeScale);\n",
       "}\n",
       "\n",
       "function setExplodingSpeed(event){\n",
       "    explodingSpeed = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function triggerAutomaticExplode(event){\n",
       "    if (event.currentTarget.checked){\n",
       "        startExploding();\n",
       "    } else {\n",
       "        clearIntervals();\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function startExploding(){\n",
       "    intervals.push(setInterval(explodingInterval, 25));\n",
       "}\n",
       "\n",
       "\n",
       "function explodingInterval(){\n",
       "    explodeScale += explodingSpeed;\n",
       "    if (explodeScale <= 6){ \n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else{\n",
       "        explode(6);\n",
       "        explodeScale = 6;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startUnexploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_8').value = explodeScale;\n",
       "}\n",
       "\n",
       "\n",
       "function startUnexploding(){\n",
       "    intervals.push(setInterval(unexplodingInterval, 25));\n",
       "}\n",
       "\n",
       "function unexplodingInterval(){\n",
       "    explodeScale -= explodingSpeed;\n",
       "    if (explodeScale >= 0){\t\n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else {\n",
       "        explode(0);\n",
       "        explodeScale = 0;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startExploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_8').value = explodeScale;\n",
       "}\n",
       "\n",
       "function clearIntervals(){\n",
       "    intervals.forEach(function(interval){\n",
       "        clearInterval(interval);\n",
       "    });\n",
       "    intervals = [];\n",
       "    timeouts.forEach(function(timeout){\n",
       "        clearTimeout(timeout);\n",
       "    });\n",
       "    timeouts = [];\n",
       "}\n",
       "\n",
       "// ---------------------- DISPLAY --------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "const objectTypeInnerHTMLs = { points: \"Points\", pointlabels: \"Point labels\", lines: \"Edges\", edgelabels: \"Edge labels\", faces: \"Faces\", arrowheads: \"Arrow heads\" };\n",
       "const objectTypeVisible = {};\n",
       "Object.assign(objectTypeVisible,modelContains);\n",
       "const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();\n",
       "const shownObjectTypesList = document.getElementById('shownObjectTypesList_8');\n",
       "\n",
       "function setVisibility(bool,objname) {\n",
       "    for (var i=0; i<scene.children.length; i++){\n",
       "        var obj = scene.children[i].getObjectByName(objname);\n",
       "        if (obj) {\n",
       "            obj.visible = bool;\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function toggleObjectTypeVisibility(event){\n",
       "    var name = event.currentTarget.name;\n",
       "    var checked = event.currentTarget.checked;\n",
       "    objectTypeVisible[name] = checked;\n",
       "    setVisibility(checked,name);\n",
       "}\n",
       "\n",
       "for (var i=0; i<sortedObjectTypeKeys.length; i++){\n",
       "    var key = sortedObjectTypeKeys[i];\n",
       "    if (modelContains[key]) {\n",
       "        var objTypeNode = document.createElement('span');\n",
       "        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';\n",
       "        var checkbox = document.createElement('input');\n",
       "        checkbox.type = 'checkbox';\n",
       "        checkbox.checked = true;\n",
       "        checkbox.name = key;\n",
       "        checkbox.onchange = toggleObjectTypeVisibility;\n",
       "        shownObjectTypesList.appendChild(checkbox);\n",
       "        shownObjectTypesList.appendChild(objTypeNode);\n",
       "    }\n",
       "}\n",
       "\n",
       "// ------------------------------------------------------\n",
       "\n",
       "function toggleObjectVisibility(event){\n",
       "    var nr = Number(event.currentTarget.name);\n",
       "    scene.children[nr].visible = event.currentTarget.checked;\n",
       "}\n",
       "\n",
       "// append checkboxes for displaying or hiding objects\n",
       "var shownObjectsList = document.getElementById('shownObjectsList_8');\n",
       "for (var i=0; i<scene.children.length; i++){\n",
       "    obj = scene.children[i];\n",
       "    var objNode = document.createElement('span');\n",
       "    objNode.innerHTML = obj.name + '<br>';\n",
       "    var checkbox = document.createElement('input');\n",
       "    checkbox.type = 'checkbox';\n",
       "    checkbox.checked = true;\n",
       "    checkbox.name = String(i);\n",
       "    checkbox.onchange = toggleObjectVisibility;\n",
       "    shownObjectsList.appendChild(checkbox);\n",
       "    shownObjectsList.appendChild(objNode);\n",
       "}\n",
       "\n",
       "// ---------------------- SVG ------------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function takeSvgScreenshot() {\n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(false,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(false,\"edgelabels\");\n",
       "    }\n",
       "    svgRenderer.render(scene,camera);\n",
       "    svgElement = XMLS.serializeToString(svgRenderer.domElement);\n",
       "    \n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(true,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(true,\"edgelabels\");\n",
       "    }\n",
       "\n",
       "    if (document.getElementById('tab_8').checked){\n",
       "        //show in new tab\n",
       "        var myWindow = window.open(\"\",\"\");\n",
       "        myWindow.document.body.innerHTML = svgElement;\n",
       "    } else{\n",
       "        // download svg file \n",
       "        download(\"screenshot.svg\", svgElement);\n",
       "    }\n",
       "}\n",
       "\n",
       "function download(filename, text) {\n",
       "    var element = document.createElement('a');\n",
       "    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));\n",
       "    element.setAttribute('download', filename);\n",
       "\n",
       "    element.style.display = 'none';\n",
       "    document.body.appendChild(element);\n",
       "\n",
       "    element.click();\n",
       "\n",
       "    document.body.removeChild(element);\n",
       "}\n",
       "\n",
       "\n",
       "document.getElementById('transparencyRange_8').oninput = changeTransparency;\n",
       "document.getElementById('changeRotationX_8').onchange = changeRotationX;\n",
       "document.getElementById('changeRotationY_8').onchange = changeRotationY;\n",
       "document.getElementById('changeRotationZ_8').onchange = changeRotationZ;\n",
       "document.getElementById('resetButton_8').onclick = resetScene;\n",
       "document.getElementById('rotationSpeedRange_8').oninput = changeRotationSpeedFactor;\n",
       "document.getElementById('takeScreenshot_8').onclick = takeSvgScreenshot;\n",
       "document.getElementById('showSettingsButton_8').onclick = showSettings;\n",
       "document.getElementById('hideSettingsButton_8').onclick = hideSettings;\n",
       "\n",
       "\n",
       "// ------------------ SHORTCUTS --------------------------------------------\n",
       "// -------------------------------------------------------------------------\n",
       "\n",
       "/**\n",
       " * http://www.openjs.com/scripts/events/keyboard_shortcuts/\n",
       " * Version : 2.01.B\n",
       " * By Binny V A\n",
       " * License : BSD\n",
       " */\n",
       "shortcut = {\n",
       "\t'all_shortcuts':{},//All the shortcuts are stored in this array\n",
       "\t'add': function(shortcut_combination,callback,opt) {\n",
       "\t\t//Provide a set of default options\n",
       "\t\tvar default_options = {\n",
       "\t\t\t'type':'keydown',\n",
       "\t\t\t'propagate':false,\n",
       "\t\t\t'disable_in_input':false,\n",
       "\t\t\t'target':document,\n",
       "\t\t\t'keycode':false\n",
       "\t\t}\n",
       "\t\tif(!opt) opt = default_options;\n",
       "\t\telse {\n",
       "\t\t\tfor(var dfo in default_options) {\n",
       "\t\t\t\tif(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\n",
       "\t\tvar ele = opt.target;\n",
       "\t\tif(typeof opt.target == 'string') ele = document.getElementById(opt.target);\n",
       "\t\tvar ths = this;\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\n",
       "\t\t//The function to be called at keypress\n",
       "\t\tvar func = function(e) {\n",
       "\t\t\te = e || window.event;\n",
       "\t\t\t\n",
       "\t\t\tif(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields\n",
       "\t\t\t\tvar element;\n",
       "\t\t\t\tif(e.target) element=e.target;\n",
       "\t\t\t\telse if(e.srcElement) element=e.srcElement;\n",
       "\t\t\t\tif(element.nodeType==3) element=element.parentNode;\n",
       "\n",
       "\t\t\t\tif(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\t//Find Which key is pressed\n",
       "\t\t\tif (e.keyCode) code = e.keyCode;\n",
       "\t\t\telse if (e.which) code = e.which;\n",
       "\t\t\tvar character = String.fromCharCode(code).toLowerCase();\n",
       "\t\t\t\n",
       "\t\t\tif(code == 188) character=\",\"; //If the user presses , when the type is onkeydown\n",
       "\t\t\tif(code == 190) character=\".\"; //If the user presses , when the type is onkeydown\n",
       "\n",
       "\t\t\tvar keys = shortcut_combination.split(\"+\");\n",
       "\t\t\t//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked\n",
       "\t\t\tvar kp = 0;\n",
       "\t\t\t\n",
       "\t\t\t//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken\n",
       "\t\t\tvar shift_nums = {\n",
       "\t\t\t\t\"`\":\"~\",\n",
       "\t\t\t\t\"1\":\"!\",\n",
       "\t\t\t\t\"2\":\"@\",\n",
       "\t\t\t\t\"3\":\"#\",\n",
       "\t\t\t\t\"4\":\"$\",\n",
       "\t\t\t\t\"5\":\"%\",\n",
       "\t\t\t\t\"6\":\"^\",\n",
       "\t\t\t\t\"7\":\"&\",\n",
       "\t\t\t\t\"8\":\"*\",\n",
       "\t\t\t\t\"9\":\"(\",\n",
       "\t\t\t\t\"0\":\")\",\n",
       "\t\t\t\t\"-\":\"_\",\n",
       "\t\t\t\t\"=\":\"+\",\n",
       "\t\t\t\t\";\":\":\",\n",
       "\t\t\t\t\"'\":\"\\\"\",\n",
       "\t\t\t\t\",\":\"<\",\n",
       "\t\t\t\t\".\":\">\",\n",
       "\t\t\t\t\"/\":\"?\",\n",
       "\t\t\t\t\"\\\\\":\"|\"\n",
       "\t\t\t}\n",
       "\t\t\t//Special Keys - and their codes\n",
       "\t\t\tvar special_keys = {\n",
       "\t\t\t\t'esc':27,\n",
       "\t\t\t\t'escape':27,\n",
       "\t\t\t\t'tab':9,\n",
       "\t\t\t\t'space':32,\n",
       "\t\t\t\t'return':13,\n",
       "\t\t\t\t'enter':13,\n",
       "\t\t\t\t'backspace':8,\n",
       "\t\n",
       "\t\t\t\t'scrolllock':145,\n",
       "\t\t\t\t'scroll_lock':145,\n",
       "\t\t\t\t'scroll':145,\n",
       "\t\t\t\t'capslock':20,\n",
       "\t\t\t\t'caps_lock':20,\n",
       "\t\t\t\t'caps':20,\n",
       "\t\t\t\t'numlock':144,\n",
       "\t\t\t\t'num_lock':144,\n",
       "\t\t\t\t'num':144,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pause':19,\n",
       "\t\t\t\t'break':19,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'insert':45,\n",
       "\t\t\t\t'home':36,\n",
       "\t\t\t\t'delete':46,\n",
       "\t\t\t\t'end':35,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pageup':33,\n",
       "\t\t\t\t'page_up':33,\n",
       "\t\t\t\t'pu':33,\n",
       "\t\n",
       "\t\t\t\t'pagedown':34,\n",
       "\t\t\t\t'page_down':34,\n",
       "\t\t\t\t'pd':34,\n",
       "\t\n",
       "\t\t\t\t'left':37,\n",
       "\t\t\t\t'up':38,\n",
       "\t\t\t\t'right':39,\n",
       "\t\t\t\t'down':40,\n",
       "\t\n",
       "\t\t\t\t'f1':112,\n",
       "\t\t\t\t'f2':113,\n",
       "\t\t\t\t'f3':114,\n",
       "\t\t\t\t'f4':115,\n",
       "\t\t\t\t'f5':116,\n",
       "\t\t\t\t'f6':117,\n",
       "\t\t\t\t'f7':118,\n",
       "\t\t\t\t'f8':119,\n",
       "\t\t\t\t'f9':120,\n",
       "\t\t\t\t'f10':121,\n",
       "\t\t\t\t'f11':122,\n",
       "\t\t\t\t'f12':123\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\tvar modifiers = { \n",
       "\t\t\t\tshift: { wanted:false, pressed:false},\n",
       "\t\t\t\tctrl : { wanted:false, pressed:false},\n",
       "\t\t\t\talt  : { wanted:false, pressed:false},\n",
       "\t\t\t\tmeta : { wanted:false, pressed:false}\t//Meta is Mac specific\n",
       "\t\t\t};\n",
       "                        \n",
       "\t\t\tif(e.ctrlKey)\tmodifiers.ctrl.pressed = true;\n",
       "\t\t\tif(e.shiftKey)\tmodifiers.shift.pressed = true;\n",
       "\t\t\tif(e.altKey)\tmodifiers.alt.pressed = true;\n",
       "\t\t\tif(e.metaKey)   modifiers.meta.pressed = true;\n",
       "                        \n",
       "\t\t\tfor(var i=0; k=keys[i],i<keys.length; i++) {\n",
       "\t\t\t\t//Modifiers\n",
       "\t\t\t\tif(k == 'ctrl' || k == 'control') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.ctrl.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'shift') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.shift.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'alt') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.alt.wanted = true;\n",
       "\t\t\t\t} else if(k == 'meta') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.meta.wanted = true;\n",
       "\t\t\t\t} else if(k.length > 1) { //If it is a special key\n",
       "\t\t\t\t\tif(special_keys[k] == code) kp++;\n",
       "\t\t\t\t\t\n",
       "\t\t\t\t} else if(opt['keycode']) {\n",
       "\t\t\t\t\tif(opt['keycode'] == code) kp++;\n",
       "\n",
       "\t\t\t\t} else { //The special keys did not match\n",
       "\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\telse {\n",
       "\t\t\t\t\t\tif(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase\n",
       "\t\t\t\t\t\t\tcharacter = shift_nums[character]; \n",
       "\t\t\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\t\t}\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t\t\n",
       "\t\t\tif(kp == keys.length && \n",
       "\t\t\t\t\t\tmodifiers.ctrl.pressed == modifiers.ctrl.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.shift.pressed == modifiers.shift.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.alt.pressed == modifiers.alt.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.meta.pressed == modifiers.meta.wanted) {\n",
       "\t\t\t\tcallback(e);\n",
       "\t\n",
       "\t\t\t\tif(!opt['propagate']) { //Stop the event\n",
       "\t\t\t\t\t//e.cancelBubble is supported by IE - this will kill the bubbling process.\n",
       "\t\t\t\t\te.cancelBubble = true;\n",
       "\t\t\t\t\te.returnValue = false;\n",
       "\t\n",
       "\t\t\t\t\t//e.stopPropagation works in Firefox.\n",
       "\t\t\t\t\tif (e.stopPropagation) {\n",
       "\t\t\t\t\t\te.stopPropagation();\n",
       "\t\t\t\t\t\te.preventDefault();\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t\treturn false;\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\t\tthis.all_shortcuts[shortcut_combination] = {\n",
       "\t\t\t'callback':func, \n",
       "\t\t\t'target':ele, \n",
       "\t\t\t'event': opt['type']\n",
       "\t\t};\n",
       "\t\t//Attach the function with the event\n",
       "\t\tif(ele.addEventListener) ele.addEventListener(opt['type'], func, false);\n",
       "\t\telse if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);\n",
       "\t\telse ele['on'+opt['type']] = func;\n",
       "\t},\n",
       "\n",
       "\t//Remove the shortcut - just specify the shortcut and I will remove the binding\n",
       "\t'remove':function(shortcut_combination) {\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\t\tvar binding = this.all_shortcuts[shortcut_combination];\n",
       "\t\tdelete(this.all_shortcuts[shortcut_combination])\n",
       "\t\tif(!binding) return;\n",
       "\t\tvar type = binding['event'];\n",
       "\t\tvar ele = binding['target'];\n",
       "\t\tvar callback = binding['callback'];\n",
       "\n",
       "\t\tif(ele.detachEvent) ele.detachEvent('on'+type, callback);\n",
       "\t\telse if(ele.removeEventListener) ele.removeEventListener(type, callback, false);\n",
       "\t\telse ele['on'+type] = false;\n",
       "\t}\n",
       "}\n",
       "\n",
       "shortcut.add(\"Alt+Left\",function() {\n",
       "\tvar event = new Event('click');\n",
       "\tif (settingsShown){\n",
       "\t\tdocument.getElementById('hideSettingsButton_8').dispatchEvent(event);\n",
       "\t} else {\n",
       "\t\tdocument.getElementById('showSettingsButton_8').dispatchEvent(event);\n",
       "\t}\n",
       "});\n",
       "\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "});});\n",
       "      </script>\n",
       "   </body>\n",
       "</html>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "simplex(3)->VISUAL(VertexThickness=>[1,2,3,4]);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "** Function **: You may define a function that returns the size of the vertex depending on the vertex index. The following\n",
    "example sets the size of the odd vertices to 1 and the sizes of the even vertices to 2:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!--\n",
       "polymake for knusper\n",
       "Thu Aug 27 11:44:14 2020\n",
       "unnamed\n",
       "-->\n",
       "\n",
       "\n",
       "<html>\n",
       "   <head>\n",
       "      <meta charset=utf-8>\n",
       "      <title>unnamed</title>\n",
       "      <style>\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "*/\n",
       "         html {overflow: scroll;}\n",
       "         strong{font-size: 18px;}\n",
       "         canvas { z-index: 8; }\n",
       "         input[type='radio'] {margin-left:0;}\n",
       "         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}\n",
       "         .group{padding-bottom: 15px;}\n",
       "         .settings * {z-index: 11; }\n",
       "         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}\n",
       "         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} \n",
       "         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}\n",
       "         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }\n",
       "         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}\n",
       "         button{margin-left: 0; margin-top: 10px}\n",
       "         img{cursor: pointer;}\n",
       "         .suboption{padding-top: 15px;}\n",
       "         #model23140028776 { width: 100%; height: 100%; }\n",
       "         .threejs_container { width: 100%; height: 75vh;}\n",
       "         .settings{max-height: 74vh} \n",
       "         input[type=range] {\n",
       "           -webkit-appearance: none;\n",
       "           padding:0; \n",
       "           width:90%; \n",
       "           margin-left: auto;\n",
       "           margin-right: auto;\n",
       "           margin-top: 15px;\n",
       "           margin-bottom: 15px;\n",
       "           display: block;\t\n",
       "         }\n",
       "         input[type=range]:focus {\n",
       "           outline: none;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-runnable-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "           -webkit-appearance: none;\n",
       "           margin-top: -5px;\n",
       "         }\n",
       "         input[type=range]:focus::-webkit-slider-runnable-track {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]::-moz-range-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-moz-range-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]::-ms-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           background: transparent;\n",
       "           border-color: transparent;\n",
       "           color: transparent;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_END\n",
       "*/\n",
       "\t\t</style>\n",
       "   </head>\n",
       "<body>\n",
       "   <div class='threejs_container'>\n",
       "\t\t<div id='settings_9' class='settings'>\n",
       "\t\t\t<div class=group id='transparency_9' class='transparency'>\n",
       "\t\t\t\t<strong>Transparency</strong>\n",
       "\t\t\t\t<input id='transparencyRange_9' type='range' min=0 max=1 step=0.01 value=0>\n",
       "\t\t\t</div>\n",
       "\t\t\t\n",
       "\t\t\t<div class=group id='rotation_9'>\n",
       "\t\t\t\t<strong>Rotation</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationX_9'> x-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationY_9'> y-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationZ_9'> z-axis</div>\n",
       "\t\t\t\t\t<button id='resetButton_9'>Reset</button>\n",
       "\t\t\t\t</div>\n",
       "\n",
       "\t\t\t\t<div class=suboption>Rotation speed</div>\n",
       "\t\t\t\t<input id='rotationSpeedRange_9' type='range' min=0 max=5 step=0.01 value=2>\n",
       "\t\t\t</div>\n",
       "\n",
       "\n",
       "\t\t\t<div class=group id='display_9'>\n",
       "\t\t\t\t<strong>Display</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div id='shownObjectTypesList_9' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t\t<div class=suboption>Objects</div>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t   <div id='shownObjectsList_9' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "         \n",
       "         <div class=group id='camera_9'>\n",
       "            <strong>Camera</strong>\n",
       "            <div class=indented>\n",
       "               <form>\n",
       "                  <select id=\"cameraType_9\">\n",
       "                     <option value='perspective' selected> Perspective<br></option>\n",
       "                     <option value='orthographic' > Orthographic<br></option>\n",
       "                  </select>\n",
       "               </form>\n",
       "            </div>\n",
       "         </div>\n",
       "\n",
       "\t\t\t<div class=group id='svg_9'>\n",
       "\t\t\t\t<strong>SVG</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<form>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='download' id='download_9' checked> Download<br>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='tab' id='tab_9' > New tab<br>\n",
       "\t\t\t\t\t</form>\n",
       "\t\t\t\t\t<button id='takeScreenshot_9'>Screenshot</button>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "\n",
       "\t\t</div>\t<!-- end of settings -->\n",
       "\t\t<img id='hideSettingsButton_9' class='hideSettingsButton' src='/kernelspecs/polymake/close.svg' width=20px\">\n",
       "\t\t<img id='showSettingsButton_9' class='showSettingsButton' src='/kernelspecs/polymake/menu.svg' width=20px\">\n",
       "<div id=\"model23140028776\"></div>\n",
       "</div>\n",
       "   <script>\n",
       "    requirejs.config({\n",
       "      paths: {\n",
       "        three: '/kernelspecs/polymake/three',\n",
       "        TrackballControls: '/kernelspecs/polymake/TrackballControls',\n",
       "        OrbitControls: '/kernelspecs/polymake/OrbitControls',\n",
       "        Projector: '/kernelspecs/polymake/Projector',\n",
       "        SVGRenderer: '/kernelspecs/polymake/SVGRenderer',\n",
       "        WEBGL: '/kernelspecs/polymake/WebGL',\n",
       "      },\n",
       "      shim: {\n",
       "        'three': { exports: 'THREE'},\n",
       "        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },\n",
       "        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },\n",
       "        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },\n",
       "        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },\n",
       "        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },\n",
       "      }\n",
       "    });\n",
       "    \n",
       "    require(['three'],function(THREE){\n",
       "        window.THREE = THREE;\n",
       "      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],\n",
       "               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {\n",
       "    THREE.TrackballControls = TrackballControls;\n",
       "    THREE.OrbitControls = OrbitControls;\n",
       "    THREE.Projector = Projector;\n",
       "    THREE.SVGRenderer = SVGRenderer;\n",
       "    THREE.WEBGL = WEBGL;\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "\n",
       "const intervalLength = 25; // for automatic animations\n",
       "const explodableModel = false; \n",
       "const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };\n",
       "const foldables = [];\n",
       "\n",
       "var three = document.getElementById(\"model23140028776\");\n",
       "var scene = new THREE.Scene();\n",
       "var renderer = new THREE.WebGLRenderer( { antialias: true } );\n",
       "var svgRenderer = new THREE.SVGRenderer( { antialias: true } );\n",
       "renderer.setPixelRatio( window.devicePixelRatio );\n",
       "renderer.setClearColor(0xFFFFFF, 1);\n",
       "svgRenderer.setClearColor(0xFFFFFF, 1);\n",
       "three.appendChild(renderer.domElement);\n",
       "\n",
       "var frustumSize = 4;\n",
       "var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];\n",
       "cameras.forEach(function(cam) {\n",
       "    cam.position.set(0, 0, 5);\n",
       "    cam.lookAt(0, 0, 0);  \n",
       "    cam.up.set(0, 1, 0);         \n",
       "});\n",
       "var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];\n",
       "var camera, control;\n",
       "\n",
       "controls[0].zoomSpeed = 0.2;\n",
       "controls[0].rotateSpeed = 4;\n",
       "\n",
       "\n",
       "// class to allow move points together with labels and spheres\n",
       "var PMPoint = function (x,y,z) {\n",
       "   this.vector = new THREE.Vector3(x,y,z);\n",
       "   this.sprite = null;\n",
       "   this.sphere = null;\n",
       "}\n",
       "PMPoint.prototype.addLabel = function(labelsprite) {\n",
       "   this.sprite = labelsprite;\n",
       "   this.sprite.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.addSphere = function(spheremesh) {\n",
       "   this.sphere = spheremesh;\n",
       "   this.sphere.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.set = function(x,y,z) {\n",
       "   this.vector.set(x,y,z);\n",
       "   if (this.sprite) {\n",
       "      this.sprite.position.copy(this.vector);\n",
       "   }\n",
       "   if (this.sphere) {\n",
       "      this.sphere.position.copy(this.vector);\n",
       "   }\n",
       "}\n",
       "PMPoint.prototype.radius = function() {\n",
       "   if (this.sphere) {\n",
       "      return this.sphere.geometry.parameters.radius;\n",
       "   } else {\n",
       "      return 0;\n",
       "   }\n",
       "};\n",
       "// select the target node\n",
       "var target = document.querySelector('#model23140028776');\n",
       "\n",
       "// create an observer instance\n",
       "var observer = new MutationObserver(function(mutations) {\n",
       "   mutations.forEach(function(mutation) {\n",
       "      if (mutation.removedNodes && mutation.removedNodes.length > 0) {\n",
       "         cancelAnimationFrame(renderId);\n",
       "         observer.disconnect();\n",
       "         console.log(\"cancelled frame \"+renderId);\n",
       "      }\n",
       "   });\n",
       "});\n",
       "\n",
       "// configuration of the observer:\n",
       "var config = { childList: true, characterData: true }\n",
       "\n",
       "// pass in the target node, as well as the observer options\n",
       "while (target) {\n",
       "   if (target.className==\"output\") {\n",
       "      observer.observe(target, config);\n",
       "      break;\n",
       "   }\n",
       "   target = target.parentNode;\n",
       "}\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "var obj0 = new THREE.Object3D();\n",
       "obj0.name = \"unnamed__1\";\n",
       "obj0.userData.explodable = 1;\n",
       "obj0.userData.points = [];\n",
       "obj0.userData.points.push(new PMPoint(-1, -1, -1));\n",
       "obj0.userData.points.push(new PMPoint(1, -1, -1));\n",
       "obj0.userData.points.push(new PMPoint(-1, 1, -1));\n",
       "obj0.userData.points.push(new PMPoint(1, 1, -1));\n",
       "obj0.userData.points.push(new PMPoint(-1, -1, 1));\n",
       "obj0.userData.points.push(new PMPoint(1, -1, 1));\n",
       "obj0.userData.points.push(new PMPoint(-1, 1, 1));\n",
       "obj0.userData.points.push(new PMPoint(1, 1, 1));\n",
       "\n",
       "obj0.userData.pointradii = [0.04, 0.02, 0.04, 0.02, 0.04, 0.02, 0.04, 0.02, 0.04];\n",
       "   <!-- Vertex style -->\n",
       "obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );\n",
       "obj0.userData.pointlabels = [\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\"];\n",
       "obj0.userData.edgeindices = [0, 1, 0, 2, 1, 3, 2, 3, 0, 4, 1, 5, 4, 5, 2, 6, 4, 6, 3, 7, 5, 7, 6, 7];\n",
       "   <!-- Edge style -->\n",
       "obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } );\n",
       "obj0.userData.facets = [[0, 4, 6, 2], [7, 5, 1, 3], [5, 4, 0, 1], [2, 6, 7, 3], [0, 2, 3, 1], [6, 4, 5, 7]];\n",
       "   <!-- Facet style -->\n",
       "obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );\n",
       "init_object(obj0);\n",
       "scene.add(obj0);\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "function textSpriteMaterial(message, parameters) {\n",
       "    if ( parameters === undefined ) parameters = {};\n",
       "    var fontface = \"Helvetica\";\n",
       "    var fontsize = parameters.hasOwnProperty(\"fontsize\") ? parameters[\"fontsize\"] : 15;\n",
       "    fontsize = fontsize*10;\n",
       "    var lines = message.split('\\\\n');\n",
       "    var size = 512;\n",
       "    for(var i = 0; i<lines.length; i++){\n",
       "        var tmp = lines[i].length;\n",
       "        while(tmp*fontsize > size){\n",
       "           fontsize--;\n",
       "        }\n",
       "    }\n",
       "    \n",
       "    var canvas = document.createElement('canvas');\n",
       "    canvas.width = size;\n",
       "    canvas.height = size;\n",
       "    var context = canvas.getContext('2d');\n",
       "    context.fillStyle = \"rgba(255, 255, 255, 0)\";\n",
       "    context.fill();\n",
       "    context.font = fontsize + \"px \" + fontface;\n",
       "    \n",
       "    // text color\n",
       "    context.fillStyle = \"rgba(0, 0, 0, 1.0)\";\n",
       "     for(var i = 0; i<lines.length; i++){\n",
       "        context.fillText(lines[i], size/2, size/2+i*fontsize);\n",
       "     }\n",
       "    \n",
       "    // canvas contents will be used for a texture\n",
       "    var texture = new THREE.Texture(canvas);\n",
       "    texture.needsUpdate = true;\n",
       "    \n",
       "    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });\n",
       "    return spriteMaterial;\n",
       "}\n",
       "\n",
       "\n",
       "// ---------------------- INITIALIZING OBJECTS--------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function init_object(obj) {\n",
       "    if (obj.userData.hasOwnProperty(\"pointmaterial\")) {\n",
       "        init_points(obj);\n",
       "        modelContains.points = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"pointlabels\")) {\n",
       "        init_pointlabels(obj);\n",
       "        modelContains.pointlabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgematerial\")) {\n",
       "        init_lines(obj);\n",
       "        modelContains.lines = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgelabels\")) {\n",
       "        init_edgelabels(obj);\n",
       "        modelContains.edgelabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"arrowstyle\")) {\n",
       "        init_arrowheads(obj);\n",
       "        modelContains.arrowheads = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"facetmaterial\")) {\n",
       "        init_faces(obj);\n",
       "        modelContains.faces = true;\n",
       "    }\n",
       "}\n",
       "\n",
       "function init_points(obj) {\n",
       "    var pointgroup = new THREE.Group();\n",
       "    pointgroup.name = \"points\";\n",
       "    var points = obj.userData.points;\n",
       "    var radii = obj.userData.pointradii;\n",
       "    var materials = obj.userData.pointmaterial;\n",
       "    var geometry,material;\n",
       "    if (!Array.isArray(radii)) {\n",
       "        geometry = new THREE.SphereBufferGeometry(radii);  \n",
       "    }\n",
       "    if (!Array.isArray(materials)) {\n",
       "        material = materials;\n",
       "    }\n",
       "    for (var i=0; i<points.length; i++) {\n",
       "        var point = points[i];\n",
       "        if (Array.isArray(radii)) {\n",
       "            if (radii[i] == 0) {\n",
       "                continue;\n",
       "            }\n",
       "            geometry = new THREE.SphereBufferGeometry(radii[i]);  \n",
       "        } \n",
       "        if (Array.isArray(materials)) {\n",
       "            material = materials[i];     \n",
       "        } \n",
       "        var sphere = new THREE.Mesh(geometry, material);\n",
       "        point.addSphere(sphere);\n",
       "        pointgroup.add(sphere);\n",
       "    }\n",
       "    obj.add(pointgroup);\n",
       "}\n",
       "\n",
       "function init_pointlabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var labels = obj.userData.pointlabels;\n",
       "    var pointlabels = new THREE.Group();\n",
       "    pointlabels.name = \"pointlabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(pointlabels);\n",
       "}\n",
       "\n",
       "function init_lines(obj) {\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var points = obj.userData.points;\n",
       "    var materials = obj.userData.edgematerial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    var bufarr = new Float32Array( obj.userData.edgeindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute( bufarr, 3 );\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position', bufattr);\n",
       "    if (Array.isArray(materials)) {     \n",
       "        for (var i=0; i<materials.length; i++) {\n",
       "            geometry.addGroup(2*i,2,i);\n",
       "        }\n",
       "    }\n",
       "    var lines = new THREE.LineSegments(geometry, materials);\n",
       "    lines.name = \"lines\";\n",
       "    obj.add(lines);\n",
       "    updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "function init_edgelabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var labels = obj.userData.edgelabels;\n",
       "    var edgelabels = new THREE.Group();\n",
       "    edgelabels.name = \"edgelabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            edgelabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(edgelabels);\n",
       "}\n",
       "\n",
       "function init_arrowheads(obj) {\n",
       "    var arrowheads = new THREE.Group();\n",
       "    arrowheads.name = \"arrowheads\";\n",
       "    var arrowstyle = obj.userData.arrowstyle;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var edgematerials = obj.userData.edgematerial;\n",
       "    var points = obj.userData.points;\n",
       "    var material;\n",
       "    if (!Array.isArray(edgematerials)) {\n",
       "        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );\n",
       "    }\n",
       "\n",
       "    for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "        var start = points[edgeindices[i]];\n",
       "        var end = points[edgeindices[i+1]];\n",
       "        var dist = start.vector.distanceTo( end.vector ) - start.radius() - end.radius();\n",
       "        if (dist <= 0) {\n",
       "            continue;\n",
       "        }\n",
       "        var dir = new THREE.Vector3().subVectors(end.vector,start.vector);\n",
       "        dir.normalize();\n",
       "        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);\n",
       "        axis.normalize();\n",
       "        var radians = Math.acos( dir.y );\n",
       "        var radius = dist/25;\n",
       "        var height = dist/5;\n",
       "        var geometry = new THREE.ConeBufferGeometry(radius,height);\n",
       "        var position = new THREE.Vector3().addVectors(start.vector,dir.clone().multiplyScalar(start.radius()+dist-height/2));\n",
       "        if (Array.isArray(edgematerials)) {\n",
       "            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );\n",
       "        }\n",
       "        var cone = new THREE.Mesh( geometry, material );\n",
       "        cone.quaternion.setFromAxisAngle(axis,radians);;\n",
       "        cone.position.copy(position);;\n",
       "        arrowheads.add(cone);\n",
       "    }\n",
       "    obj.add(arrowheads);\n",
       "}\n",
       "\n",
       "function init_faces(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var facets = obj.userData.facets;\n",
       "    obj.userData.triangleindices = [];\n",
       "    for (var i=0; i<facets.length; i++) {\n",
       "        facet = facets[i];\n",
       "        for (var t=0; t<facet.length-2; t++) {\n",
       "            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  \n",
       "        }\n",
       "    }\n",
       "    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);\n",
       "    \n",
       "    var materials = obj.userData.facetmaterial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position',bufattr);\n",
       "    if (Array.isArray(materials)) {\n",
       "        var tricount = 0;\n",
       "        var facet;\n",
       "        for (var i=0; i<facets.length; i++) {\n",
       "            facet = facets[i];\n",
       "            geometry.addGroup(tricount,(facet.length-2)*3,i);\n",
       "            tricount += (facet.length-2)*3;\n",
       "        }\n",
       "    }\n",
       "    var mesh = new THREE.Mesh(geometry, materials);\n",
       "    mesh.name = \"faces\";\n",
       "    obj.add(mesh); \n",
       "    updateFacesPosition(obj);\n",
       "}\n",
       "// //INITIALIZING\n",
       "\n",
       "\n",
       "function updateFacesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.triangleindices;\n",
       "    var faces = obj.getObjectByName(\"faces\");\n",
       "    var ba = faces.geometry.getAttribute(\"position\");\n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    faces.geometry.attributes.position.needsUpdate = true;\n",
       "    \n",
       "}\n",
       "\n",
       "function updateEdgesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.edgeindices;\n",
       "    var lines = obj.getObjectByName(\"lines\");\n",
       "    var ba = lines.geometry.getAttribute(\"position\"); \n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    lines.geometry.attributes.position.needsUpdate = true;\n",
       "}\n",
       "\n",
       "function onWindowResize() {\n",
       "    renderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    svgRenderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "function updateCamera() {\n",
       "    var width = three.clientWidth;\n",
       "    var height = three.clientHeight;\n",
       "    var aspect = width / height;\n",
       "    if (camera.type == \"OrthographicCamera\") {\n",
       "        camera.left = frustumSize * aspect / - 2;\n",
       "        camera.right = frustumSize * aspect / 2;\n",
       "        camera.top = frustumSize / 2;\n",
       "        camera.bottom = - frustumSize / 2;\n",
       "    } else if (camera.type == \"PerspectiveCamera\") {\n",
       "        camera.aspect = aspect;\n",
       "    }\n",
       "    camera.updateProjectionMatrix();\n",
       "}\n",
       "\n",
       "function changeCamera(event) {\n",
       "    var selindex = event.currentTarget.selectedIndex;\n",
       "    camera = cameras[selindex];\n",
       "    control = controls[selindex];\n",
       "    control.enabled = true; \n",
       "    for (var i=0; i<controls.length; i++) {\n",
       "        if (i!=selindex) {\n",
       "            controls[i].enabled = false;\n",
       "        }\n",
       "    }\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "var camtypenode = document.getElementById('cameraType_9');\n",
       "camtypenode.onchange = changeCamera;\n",
       "camtypenode.dispatchEvent(new Event('change'));\n",
       "\n",
       "onWindowResize();\n",
       "window.addEventListener('resize', onWindowResize);\t\n",
       "\n",
       "\n",
       "var xRotationEnabled = false;\n",
       "var yRotationEnabled = false;\n",
       "var zRotationEnabled = false;\n",
       "var rotationSpeedFactor = 1;\n",
       "var settingsShown = false;\n",
       "var labelsShown = true;\n",
       "var intervals = [];\n",
       "var timeouts = [];\n",
       "var explodingSpeed = 0.05;\n",
       "var explodeScale = 0;\n",
       "var XMLS = new XMLSerializer();\n",
       "var svgElement;\n",
       "var renderId;\n",
       "\n",
       "var render = function () {\n",
       "\n",
       "\trenderId = requestAnimationFrame(render);\n",
       "\n",
       "//\tcomment in for automatic explosion\n",
       "//\texplode(updateFactor());\n",
       "\n",
       "    var phi = 0.02 * rotationSpeedFactor;\n",
       "\n",
       "    if (xRotationEnabled) {\n",
       "        scene.rotation.x += phi;\n",
       "    }\n",
       "    if (yRotationEnabled) {\n",
       "        scene.rotation.y += phi;\n",
       "    }\n",
       "    if (zRotationEnabled) {\n",
       "        scene.rotation.z += phi;\n",
       "    }\n",
       "\n",
       "    control.update();\n",
       "    renderer.render(scene, camera);\n",
       "};\n",
       "\n",
       "if ( THREE.WEBGL.isWebGLAvailable() ) {\n",
       "\trender();\n",
       "} else {\n",
       "\tvar warning = WEBGL.getWebGLErrorMessage();\n",
       "\tthree.appendChild( warning );\n",
       "}\n",
       "    \n",
       "function changeTransparency() {\n",
       "    var opacity = 1-Number(event.currentTarget.value);\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        child = scene.children[i];\n",
       "        if ( child.userData.hasOwnProperty(\"facetmaterial\") ) {\n",
       "            if (Array.isArray(child.userData.facetmaterial)) {\n",
       "                for (var j=0; j<child.userData.facetmaterial.length; j++) {\n",
       "                    child.userData.facetmaterial[j].opacity = opacity;\n",
       "                }\n",
       "            } else {\n",
       "                child.userData.facetmaterial.opacity = opacity;\n",
       "            }    \n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function changeRotationX(event){\n",
       "    xRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationY(event){\n",
       "    yRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationZ(event){\n",
       "    zRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "\n",
       "function changeRotationSpeedFactor(event){\n",
       "    rotationSpeedFactor = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function resetScene(){\n",
       "    scene.rotation.set(0,0,0);\n",
       "    camera.position.set(0,0,5);\n",
       "    camera.up.set(0,1,0);\n",
       "}\n",
       "\n",
       "function showSettings(event){\n",
       "    document.getElementById('settings_9').style.visibility = 'visible';\n",
       "    document.getElementById('showSettingsButton_9').style.visibility = 'hidden';\n",
       "    document.getElementById('hideSettingsButton_9').style.visibility = 'visible';\n",
       "    settingsShown = true;\n",
       "}\n",
       "\n",
       "function hideSettings(event){\n",
       "    document.getElementById('settings_9').style.visibility = 'hidden';\n",
       "    document.getElementById('showSettingsButton_9').style.visibility = 'visible';\n",
       "    document.getElementById('hideSettingsButton_9').style.visibility = 'hidden';\n",
       "    settingsShown = false;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "var pos = 150* Math.PI;\n",
       "\n",
       "function updateFactor() {\n",
       "    pos++;\n",
       "    return Math.sin(.01*pos)+1;\n",
       "}\n",
       "\n",
       "// ------------------------ FOLDING ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "// rotate point p around axis defined by points p1 and p2 by given angle\n",
       "function rotate(p, p1, p2, angle ){   \n",
       "    angle = -angle;\n",
       "    var x = p.x, y = p.y, z = p.z, \n",
       "    a = p1.x, b = p1.y, c = p1.z, \n",
       "    u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z;\n",
       "    var result = [];\n",
       "    var L = u*u + v*v + w*w;\n",
       "    var sqrt = Math.sqrt;\n",
       "    var cos = Math.cos;\n",
       "    var sin = Math.sin;\n",
       "\n",
       "    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;\n",
       "    result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L;\n",
       "    result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L;\n",
       "\n",
       "    return result;\n",
       "}\n",
       "\n",
       "var fold = function(event){\n",
       "    var obj = foldables[Number(event.currentTarget.name)];\n",
       "    var foldvalue = Number(event.currentTarget.value);\n",
       "    var scale = foldvalue - obj.userData.oldscale;\n",
       "\n",
       "    for (var j=0; j<obj.userData.axes.length; j++) {\n",
       "        rotateVertices(obj, j, scale);\n",
       "    }\n",
       "    update(obj);\n",
       "    obj.userData.oldscale += scale;\n",
       "    lookAtBarycenter(obj);\n",
       "}\n",
       "\n",
       "function lookAtBarycenter(obj){\n",
       "    control.target = barycenter(obj);\n",
       "}\n",
       "\n",
       "function barycenter(obj) {\n",
       "    var center = new THREE.Vector3(0,0,0);\n",
       "    var points = obj.userData.points;\n",
       "    for (var i=0; i<points.length; i++){\n",
       "        center.add(points[i].vector);\n",
       "    }\n",
       "    center.divideScalar(points.length);\n",
       "    return center;\n",
       "}\n",
       "\n",
       "function rotateVertices(obj, edge, scale) {\n",
       "    var axes = obj.userData.axes;\n",
       "    var subtrees = obj.userData.subtrees;\n",
       "    var points = obj.userData.points;\n",
       "    var angles = obj.userData.angles;\n",
       "    if (edge < axes.length){\n",
       "        for (var j=0; j<subtrees[edge].length; j++){\n",
       "            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));\n",
       "            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function update(obj) {\n",
       "   updateFacesPosition(obj);\n",
       "   updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "if (foldables.length) {\n",
       "    var settings = document.getElementById('settings_9');\n",
       "    var foldDiv = document.createElement('div');\n",
       "    foldDiv.id = 'fold_9';\n",
       "    var title = document.createElement('strong');\n",
       "    title.innerHTML = 'Fold';\n",
       "    foldDiv.appendChild(title);\n",
       "    foldDiv.className = 'group';\n",
       "    for (var i=0; i<foldables.length; i++) {\n",
       "        var range = document.createElement('input');\n",
       "        range.type = 'range';\n",
       "        range.min = 0;\n",
       "        range.max = 1;\n",
       "        range.value = 0;\n",
       "        range.step = 0.001;\n",
       "        range.name = String(i);\n",
       "        range.oninput = fold;\n",
       "        foldDiv.appendChild(range);\n",
       "    }\n",
       "    lookAtBarycenter(foldables[0]);\n",
       "    settings.insertBefore(foldDiv,settings.childNodes[0]);\n",
       "}\n",
       "\n",
       "    \n",
       "// ---------------------- EXPLOSION ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "if (explodableModel) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        obj = scene.children[i];\n",
       "        if ( obj.userData.explodable ) {\n",
       "            computeCentroid(obj);\n",
       "        }\n",
       "    }\n",
       "    document.getElementById('explodeRange_9').oninput = triggerExplode;\n",
       "    document.getElementById('explodeCheckbox_9').onchange = triggerAutomaticExplode;\n",
       "    document.getElementById('explodingSpeedRange_9').oninput = setExplodingSpeed;\n",
       "}\n",
       "\n",
       "function computeCentroid(obj) {\n",
       "    centroid = new THREE.Vector3();\n",
       "    obj.userData.points.forEach(function(pmpoint) {\n",
       "        centroid.add(pmpoint.vector);\t\t\t\n",
       "    });\n",
       "    centroid.divideScalar(obj.userData.points.length);\n",
       "    obj.userData.centroid = centroid;\n",
       "}\n",
       "\n",
       "function explode(factor) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        var obj = scene.children[i];\n",
       "        if (obj.userData.hasOwnProperty(\"centroid\")) { \n",
       "            var c = obj.userData.centroid;\n",
       "            obj.position.set(c.x*factor, c.y*factor, c.z*factor);\n",
       "        }\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function triggerExplode(event){\n",
       "    explodeScale = Number(event.currentTarget.value);\n",
       "    explode(explodeScale);\n",
       "}\n",
       "\n",
       "function setExplodingSpeed(event){\n",
       "    explodingSpeed = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function triggerAutomaticExplode(event){\n",
       "    if (event.currentTarget.checked){\n",
       "        startExploding();\n",
       "    } else {\n",
       "        clearIntervals();\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function startExploding(){\n",
       "    intervals.push(setInterval(explodingInterval, 25));\n",
       "}\n",
       "\n",
       "\n",
       "function explodingInterval(){\n",
       "    explodeScale += explodingSpeed;\n",
       "    if (explodeScale <= 6){ \n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else{\n",
       "        explode(6);\n",
       "        explodeScale = 6;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startUnexploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_9').value = explodeScale;\n",
       "}\n",
       "\n",
       "\n",
       "function startUnexploding(){\n",
       "    intervals.push(setInterval(unexplodingInterval, 25));\n",
       "}\n",
       "\n",
       "function unexplodingInterval(){\n",
       "    explodeScale -= explodingSpeed;\n",
       "    if (explodeScale >= 0){\t\n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else {\n",
       "        explode(0);\n",
       "        explodeScale = 0;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startExploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_9').value = explodeScale;\n",
       "}\n",
       "\n",
       "function clearIntervals(){\n",
       "    intervals.forEach(function(interval){\n",
       "        clearInterval(interval);\n",
       "    });\n",
       "    intervals = [];\n",
       "    timeouts.forEach(function(timeout){\n",
       "        clearTimeout(timeout);\n",
       "    });\n",
       "    timeouts = [];\n",
       "}\n",
       "\n",
       "// ---------------------- DISPLAY --------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "const objectTypeInnerHTMLs = { points: \"Points\", pointlabels: \"Point labels\", lines: \"Edges\", edgelabels: \"Edge labels\", faces: \"Faces\", arrowheads: \"Arrow heads\" };\n",
       "const objectTypeVisible = {};\n",
       "Object.assign(objectTypeVisible,modelContains);\n",
       "const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();\n",
       "const shownObjectTypesList = document.getElementById('shownObjectTypesList_9');\n",
       "\n",
       "function setVisibility(bool,objname) {\n",
       "    for (var i=0; i<scene.children.length; i++){\n",
       "        var obj = scene.children[i].getObjectByName(objname);\n",
       "        if (obj) {\n",
       "            obj.visible = bool;\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function toggleObjectTypeVisibility(event){\n",
       "    var name = event.currentTarget.name;\n",
       "    var checked = event.currentTarget.checked;\n",
       "    objectTypeVisible[name] = checked;\n",
       "    setVisibility(checked,name);\n",
       "}\n",
       "\n",
       "for (var i=0; i<sortedObjectTypeKeys.length; i++){\n",
       "    var key = sortedObjectTypeKeys[i];\n",
       "    if (modelContains[key]) {\n",
       "        var objTypeNode = document.createElement('span');\n",
       "        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';\n",
       "        var checkbox = document.createElement('input');\n",
       "        checkbox.type = 'checkbox';\n",
       "        checkbox.checked = true;\n",
       "        checkbox.name = key;\n",
       "        checkbox.onchange = toggleObjectTypeVisibility;\n",
       "        shownObjectTypesList.appendChild(checkbox);\n",
       "        shownObjectTypesList.appendChild(objTypeNode);\n",
       "    }\n",
       "}\n",
       "\n",
       "// ------------------------------------------------------\n",
       "\n",
       "function toggleObjectVisibility(event){\n",
       "    var nr = Number(event.currentTarget.name);\n",
       "    scene.children[nr].visible = event.currentTarget.checked;\n",
       "}\n",
       "\n",
       "// append checkboxes for displaying or hiding objects\n",
       "var shownObjectsList = document.getElementById('shownObjectsList_9');\n",
       "for (var i=0; i<scene.children.length; i++){\n",
       "    obj = scene.children[i];\n",
       "    var objNode = document.createElement('span');\n",
       "    objNode.innerHTML = obj.name + '<br>';\n",
       "    var checkbox = document.createElement('input');\n",
       "    checkbox.type = 'checkbox';\n",
       "    checkbox.checked = true;\n",
       "    checkbox.name = String(i);\n",
       "    checkbox.onchange = toggleObjectVisibility;\n",
       "    shownObjectsList.appendChild(checkbox);\n",
       "    shownObjectsList.appendChild(objNode);\n",
       "}\n",
       "\n",
       "// ---------------------- SVG ------------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function takeSvgScreenshot() {\n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(false,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(false,\"edgelabels\");\n",
       "    }\n",
       "    svgRenderer.render(scene,camera);\n",
       "    svgElement = XMLS.serializeToString(svgRenderer.domElement);\n",
       "    \n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(true,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(true,\"edgelabels\");\n",
       "    }\n",
       "\n",
       "    if (document.getElementById('tab_9').checked){\n",
       "        //show in new tab\n",
       "        var myWindow = window.open(\"\",\"\");\n",
       "        myWindow.document.body.innerHTML = svgElement;\n",
       "    } else{\n",
       "        // download svg file \n",
       "        download(\"screenshot.svg\", svgElement);\n",
       "    }\n",
       "}\n",
       "\n",
       "function download(filename, text) {\n",
       "    var element = document.createElement('a');\n",
       "    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));\n",
       "    element.setAttribute('download', filename);\n",
       "\n",
       "    element.style.display = 'none';\n",
       "    document.body.appendChild(element);\n",
       "\n",
       "    element.click();\n",
       "\n",
       "    document.body.removeChild(element);\n",
       "}\n",
       "\n",
       "\n",
       "document.getElementById('transparencyRange_9').oninput = changeTransparency;\n",
       "document.getElementById('changeRotationX_9').onchange = changeRotationX;\n",
       "document.getElementById('changeRotationY_9').onchange = changeRotationY;\n",
       "document.getElementById('changeRotationZ_9').onchange = changeRotationZ;\n",
       "document.getElementById('resetButton_9').onclick = resetScene;\n",
       "document.getElementById('rotationSpeedRange_9').oninput = changeRotationSpeedFactor;\n",
       "document.getElementById('takeScreenshot_9').onclick = takeSvgScreenshot;\n",
       "document.getElementById('showSettingsButton_9').onclick = showSettings;\n",
       "document.getElementById('hideSettingsButton_9').onclick = hideSettings;\n",
       "\n",
       "\n",
       "// ------------------ SHORTCUTS --------------------------------------------\n",
       "// -------------------------------------------------------------------------\n",
       "\n",
       "/**\n",
       " * http://www.openjs.com/scripts/events/keyboard_shortcuts/\n",
       " * Version : 2.01.B\n",
       " * By Binny V A\n",
       " * License : BSD\n",
       " */\n",
       "shortcut = {\n",
       "\t'all_shortcuts':{},//All the shortcuts are stored in this array\n",
       "\t'add': function(shortcut_combination,callback,opt) {\n",
       "\t\t//Provide a set of default options\n",
       "\t\tvar default_options = {\n",
       "\t\t\t'type':'keydown',\n",
       "\t\t\t'propagate':false,\n",
       "\t\t\t'disable_in_input':false,\n",
       "\t\t\t'target':document,\n",
       "\t\t\t'keycode':false\n",
       "\t\t}\n",
       "\t\tif(!opt) opt = default_options;\n",
       "\t\telse {\n",
       "\t\t\tfor(var dfo in default_options) {\n",
       "\t\t\t\tif(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\n",
       "\t\tvar ele = opt.target;\n",
       "\t\tif(typeof opt.target == 'string') ele = document.getElementById(opt.target);\n",
       "\t\tvar ths = this;\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\n",
       "\t\t//The function to be called at keypress\n",
       "\t\tvar func = function(e) {\n",
       "\t\t\te = e || window.event;\n",
       "\t\t\t\n",
       "\t\t\tif(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields\n",
       "\t\t\t\tvar element;\n",
       "\t\t\t\tif(e.target) element=e.target;\n",
       "\t\t\t\telse if(e.srcElement) element=e.srcElement;\n",
       "\t\t\t\tif(element.nodeType==3) element=element.parentNode;\n",
       "\n",
       "\t\t\t\tif(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\t//Find Which key is pressed\n",
       "\t\t\tif (e.keyCode) code = e.keyCode;\n",
       "\t\t\telse if (e.which) code = e.which;\n",
       "\t\t\tvar character = String.fromCharCode(code).toLowerCase();\n",
       "\t\t\t\n",
       "\t\t\tif(code == 188) character=\",\"; //If the user presses , when the type is onkeydown\n",
       "\t\t\tif(code == 190) character=\".\"; //If the user presses , when the type is onkeydown\n",
       "\n",
       "\t\t\tvar keys = shortcut_combination.split(\"+\");\n",
       "\t\t\t//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked\n",
       "\t\t\tvar kp = 0;\n",
       "\t\t\t\n",
       "\t\t\t//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken\n",
       "\t\t\tvar shift_nums = {\n",
       "\t\t\t\t\"`\":\"~\",\n",
       "\t\t\t\t\"1\":\"!\",\n",
       "\t\t\t\t\"2\":\"@\",\n",
       "\t\t\t\t\"3\":\"#\",\n",
       "\t\t\t\t\"4\":\"$\",\n",
       "\t\t\t\t\"5\":\"%\",\n",
       "\t\t\t\t\"6\":\"^\",\n",
       "\t\t\t\t\"7\":\"&\",\n",
       "\t\t\t\t\"8\":\"*\",\n",
       "\t\t\t\t\"9\":\"(\",\n",
       "\t\t\t\t\"0\":\")\",\n",
       "\t\t\t\t\"-\":\"_\",\n",
       "\t\t\t\t\"=\":\"+\",\n",
       "\t\t\t\t\";\":\":\",\n",
       "\t\t\t\t\"'\":\"\\\"\",\n",
       "\t\t\t\t\",\":\"<\",\n",
       "\t\t\t\t\".\":\">\",\n",
       "\t\t\t\t\"/\":\"?\",\n",
       "\t\t\t\t\"\\\\\":\"|\"\n",
       "\t\t\t}\n",
       "\t\t\t//Special Keys - and their codes\n",
       "\t\t\tvar special_keys = {\n",
       "\t\t\t\t'esc':27,\n",
       "\t\t\t\t'escape':27,\n",
       "\t\t\t\t'tab':9,\n",
       "\t\t\t\t'space':32,\n",
       "\t\t\t\t'return':13,\n",
       "\t\t\t\t'enter':13,\n",
       "\t\t\t\t'backspace':8,\n",
       "\t\n",
       "\t\t\t\t'scrolllock':145,\n",
       "\t\t\t\t'scroll_lock':145,\n",
       "\t\t\t\t'scroll':145,\n",
       "\t\t\t\t'capslock':20,\n",
       "\t\t\t\t'caps_lock':20,\n",
       "\t\t\t\t'caps':20,\n",
       "\t\t\t\t'numlock':144,\n",
       "\t\t\t\t'num_lock':144,\n",
       "\t\t\t\t'num':144,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pause':19,\n",
       "\t\t\t\t'break':19,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'insert':45,\n",
       "\t\t\t\t'home':36,\n",
       "\t\t\t\t'delete':46,\n",
       "\t\t\t\t'end':35,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pageup':33,\n",
       "\t\t\t\t'page_up':33,\n",
       "\t\t\t\t'pu':33,\n",
       "\t\n",
       "\t\t\t\t'pagedown':34,\n",
       "\t\t\t\t'page_down':34,\n",
       "\t\t\t\t'pd':34,\n",
       "\t\n",
       "\t\t\t\t'left':37,\n",
       "\t\t\t\t'up':38,\n",
       "\t\t\t\t'right':39,\n",
       "\t\t\t\t'down':40,\n",
       "\t\n",
       "\t\t\t\t'f1':112,\n",
       "\t\t\t\t'f2':113,\n",
       "\t\t\t\t'f3':114,\n",
       "\t\t\t\t'f4':115,\n",
       "\t\t\t\t'f5':116,\n",
       "\t\t\t\t'f6':117,\n",
       "\t\t\t\t'f7':118,\n",
       "\t\t\t\t'f8':119,\n",
       "\t\t\t\t'f9':120,\n",
       "\t\t\t\t'f10':121,\n",
       "\t\t\t\t'f11':122,\n",
       "\t\t\t\t'f12':123\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\tvar modifiers = { \n",
       "\t\t\t\tshift: { wanted:false, pressed:false},\n",
       "\t\t\t\tctrl : { wanted:false, pressed:false},\n",
       "\t\t\t\talt  : { wanted:false, pressed:false},\n",
       "\t\t\t\tmeta : { wanted:false, pressed:false}\t//Meta is Mac specific\n",
       "\t\t\t};\n",
       "                        \n",
       "\t\t\tif(e.ctrlKey)\tmodifiers.ctrl.pressed = true;\n",
       "\t\t\tif(e.shiftKey)\tmodifiers.shift.pressed = true;\n",
       "\t\t\tif(e.altKey)\tmodifiers.alt.pressed = true;\n",
       "\t\t\tif(e.metaKey)   modifiers.meta.pressed = true;\n",
       "                        \n",
       "\t\t\tfor(var i=0; k=keys[i],i<keys.length; i++) {\n",
       "\t\t\t\t//Modifiers\n",
       "\t\t\t\tif(k == 'ctrl' || k == 'control') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.ctrl.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'shift') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.shift.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'alt') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.alt.wanted = true;\n",
       "\t\t\t\t} else if(k == 'meta') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.meta.wanted = true;\n",
       "\t\t\t\t} else if(k.length > 1) { //If it is a special key\n",
       "\t\t\t\t\tif(special_keys[k] == code) kp++;\n",
       "\t\t\t\t\t\n",
       "\t\t\t\t} else if(opt['keycode']) {\n",
       "\t\t\t\t\tif(opt['keycode'] == code) kp++;\n",
       "\n",
       "\t\t\t\t} else { //The special keys did not match\n",
       "\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\telse {\n",
       "\t\t\t\t\t\tif(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase\n",
       "\t\t\t\t\t\t\tcharacter = shift_nums[character]; \n",
       "\t\t\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\t\t}\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t\t\n",
       "\t\t\tif(kp == keys.length && \n",
       "\t\t\t\t\t\tmodifiers.ctrl.pressed == modifiers.ctrl.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.shift.pressed == modifiers.shift.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.alt.pressed == modifiers.alt.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.meta.pressed == modifiers.meta.wanted) {\n",
       "\t\t\t\tcallback(e);\n",
       "\t\n",
       "\t\t\t\tif(!opt['propagate']) { //Stop the event\n",
       "\t\t\t\t\t//e.cancelBubble is supported by IE - this will kill the bubbling process.\n",
       "\t\t\t\t\te.cancelBubble = true;\n",
       "\t\t\t\t\te.returnValue = false;\n",
       "\t\n",
       "\t\t\t\t\t//e.stopPropagation works in Firefox.\n",
       "\t\t\t\t\tif (e.stopPropagation) {\n",
       "\t\t\t\t\t\te.stopPropagation();\n",
       "\t\t\t\t\t\te.preventDefault();\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t\treturn false;\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\t\tthis.all_shortcuts[shortcut_combination] = {\n",
       "\t\t\t'callback':func, \n",
       "\t\t\t'target':ele, \n",
       "\t\t\t'event': opt['type']\n",
       "\t\t};\n",
       "\t\t//Attach the function with the event\n",
       "\t\tif(ele.addEventListener) ele.addEventListener(opt['type'], func, false);\n",
       "\t\telse if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);\n",
       "\t\telse ele['on'+opt['type']] = func;\n",
       "\t},\n",
       "\n",
       "\t//Remove the shortcut - just specify the shortcut and I will remove the binding\n",
       "\t'remove':function(shortcut_combination) {\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\t\tvar binding = this.all_shortcuts[shortcut_combination];\n",
       "\t\tdelete(this.all_shortcuts[shortcut_combination])\n",
       "\t\tif(!binding) return;\n",
       "\t\tvar type = binding['event'];\n",
       "\t\tvar ele = binding['target'];\n",
       "\t\tvar callback = binding['callback'];\n",
       "\n",
       "\t\tif(ele.detachEvent) ele.detachEvent('on'+type, callback);\n",
       "\t\telse if(ele.removeEventListener) ele.removeEventListener(type, callback, false);\n",
       "\t\telse ele['on'+type] = false;\n",
       "\t}\n",
       "}\n",
       "\n",
       "shortcut.add(\"Alt+Left\",function() {\n",
       "\tvar event = new Event('click');\n",
       "\tif (settingsShown){\n",
       "\t\tdocument.getElementById('hideSettingsButton_9').dispatchEvent(event);\n",
       "\t} else {\n",
       "\t\tdocument.getElementById('showSettingsButton_9').dispatchEvent(event);\n",
       "\t}\n",
       "});\n",
       "\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "});});\n",
       "      </script>\n",
       "   </body>\n",
       "</html>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "cube(3)->VISUAL(VertexThickness=> sub { my $i = shift; if($i%2 == 0) { return 2; } else {return 1;} });"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you do not want to display the vertices at all, you can use the *VertexStyle* attribute and set it to `hidden`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!--\n",
       "polymake for knusper\n",
       "Thu Aug 27 11:44:14 2020\n",
       "unnamed\n",
       "-->\n",
       "\n",
       "\n",
       "<html>\n",
       "   <head>\n",
       "      <meta charset=utf-8>\n",
       "      <title>unnamed</title>\n",
       "      <style>\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "*/\n",
       "         html {overflow: scroll;}\n",
       "         strong{font-size: 18px;}\n",
       "         canvas { z-index: 8; }\n",
       "         input[type='radio'] {margin-left:0;}\n",
       "         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}\n",
       "         .group{padding-bottom: 15px;}\n",
       "         .settings * {z-index: 11; }\n",
       "         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}\n",
       "         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} \n",
       "         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}\n",
       "         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }\n",
       "         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}\n",
       "         button{margin-left: 0; margin-top: 10px}\n",
       "         img{cursor: pointer;}\n",
       "         .suboption{padding-top: 15px;}\n",
       "         #model46198950430 { width: 100%; height: 100%; }\n",
       "         .threejs_container { width: 100%; height: 75vh;}\n",
       "         .settings{max-height: 74vh} \n",
       "         input[type=range] {\n",
       "           -webkit-appearance: none;\n",
       "           padding:0; \n",
       "           width:90%; \n",
       "           margin-left: auto;\n",
       "           margin-right: auto;\n",
       "           margin-top: 15px;\n",
       "           margin-bottom: 15px;\n",
       "           display: block;\t\n",
       "         }\n",
       "         input[type=range]:focus {\n",
       "           outline: none;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-runnable-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "           -webkit-appearance: none;\n",
       "           margin-top: -5px;\n",
       "         }\n",
       "         input[type=range]:focus::-webkit-slider-runnable-track {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]::-moz-range-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-moz-range-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]::-ms-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           background: transparent;\n",
       "           border-color: transparent;\n",
       "           color: transparent;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_END\n",
       "*/\n",
       "\t\t</style>\n",
       "   </head>\n",
       "<body>\n",
       "   <div class='threejs_container'>\n",
       "\t\t<div id='settings_10' class='settings'>\n",
       "\t\t\t<div class=group id='transparency_10' class='transparency'>\n",
       "\t\t\t\t<strong>Transparency</strong>\n",
       "\t\t\t\t<input id='transparencyRange_10' type='range' min=0 max=1 step=0.01 value=0>\n",
       "\t\t\t</div>\n",
       "\t\t\t\n",
       "\t\t\t<div class=group id='rotation_10'>\n",
       "\t\t\t\t<strong>Rotation</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationX_10'> x-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationY_10'> y-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationZ_10'> z-axis</div>\n",
       "\t\t\t\t\t<button id='resetButton_10'>Reset</button>\n",
       "\t\t\t\t</div>\n",
       "\n",
       "\t\t\t\t<div class=suboption>Rotation speed</div>\n",
       "\t\t\t\t<input id='rotationSpeedRange_10' type='range' min=0 max=5 step=0.01 value=2>\n",
       "\t\t\t</div>\n",
       "\n",
       "\n",
       "\t\t\t<div class=group id='display_10'>\n",
       "\t\t\t\t<strong>Display</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div id='shownObjectTypesList_10' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t\t<div class=suboption>Objects</div>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t   <div id='shownObjectsList_10' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "         \n",
       "         <div class=group id='camera_10'>\n",
       "            <strong>Camera</strong>\n",
       "            <div class=indented>\n",
       "               <form>\n",
       "                  <select id=\"cameraType_10\">\n",
       "                     <option value='perspective' selected> Perspective<br></option>\n",
       "                     <option value='orthographic' > Orthographic<br></option>\n",
       "                  </select>\n",
       "               </form>\n",
       "            </div>\n",
       "         </div>\n",
       "\n",
       "\t\t\t<div class=group id='svg_10'>\n",
       "\t\t\t\t<strong>SVG</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<form>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='download' id='download_10' checked> Download<br>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='tab' id='tab_10' > New tab<br>\n",
       "\t\t\t\t\t</form>\n",
       "\t\t\t\t\t<button id='takeScreenshot_10'>Screenshot</button>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "\n",
       "\t\t</div>\t<!-- end of settings -->\n",
       "\t\t<img id='hideSettingsButton_10' class='hideSettingsButton' src='/kernelspecs/polymake/close.svg' width=20px\">\n",
       "\t\t<img id='showSettingsButton_10' class='showSettingsButton' src='/kernelspecs/polymake/menu.svg' width=20px\">\n",
       "<div id=\"model46198950430\"></div>\n",
       "</div>\n",
       "   <script>\n",
       "    requirejs.config({\n",
       "      paths: {\n",
       "        three: '/kernelspecs/polymake/three',\n",
       "        TrackballControls: '/kernelspecs/polymake/TrackballControls',\n",
       "        OrbitControls: '/kernelspecs/polymake/OrbitControls',\n",
       "        Projector: '/kernelspecs/polymake/Projector',\n",
       "        SVGRenderer: '/kernelspecs/polymake/SVGRenderer',\n",
       "        WEBGL: '/kernelspecs/polymake/WebGL',\n",
       "      },\n",
       "      shim: {\n",
       "        'three': { exports: 'THREE'},\n",
       "        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },\n",
       "        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },\n",
       "        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },\n",
       "        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },\n",
       "        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },\n",
       "      }\n",
       "    });\n",
       "    \n",
       "    require(['three'],function(THREE){\n",
       "        window.THREE = THREE;\n",
       "      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],\n",
       "               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {\n",
       "    THREE.TrackballControls = TrackballControls;\n",
       "    THREE.OrbitControls = OrbitControls;\n",
       "    THREE.Projector = Projector;\n",
       "    THREE.SVGRenderer = SVGRenderer;\n",
       "    THREE.WEBGL = WEBGL;\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "\n",
       "const intervalLength = 25; // for automatic animations\n",
       "const explodableModel = false; \n",
       "const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };\n",
       "const foldables = [];\n",
       "\n",
       "var three = document.getElementById(\"model46198950430\");\n",
       "var scene = new THREE.Scene();\n",
       "var renderer = new THREE.WebGLRenderer( { antialias: true } );\n",
       "var svgRenderer = new THREE.SVGRenderer( { antialias: true } );\n",
       "renderer.setPixelRatio( window.devicePixelRatio );\n",
       "renderer.setClearColor(0xFFFFFF, 1);\n",
       "svgRenderer.setClearColor(0xFFFFFF, 1);\n",
       "three.appendChild(renderer.domElement);\n",
       "\n",
       "var frustumSize = 4;\n",
       "var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];\n",
       "cameras.forEach(function(cam) {\n",
       "    cam.position.set(0, 0, 5);\n",
       "    cam.lookAt(0, 0, 0);  \n",
       "    cam.up.set(0, 1, 0);         \n",
       "});\n",
       "var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];\n",
       "var camera, control;\n",
       "\n",
       "controls[0].zoomSpeed = 0.2;\n",
       "controls[0].rotateSpeed = 4;\n",
       "\n",
       "\n",
       "// class to allow move points together with labels and spheres\n",
       "var PMPoint = function (x,y,z) {\n",
       "   this.vector = new THREE.Vector3(x,y,z);\n",
       "   this.sprite = null;\n",
       "   this.sphere = null;\n",
       "}\n",
       "PMPoint.prototype.addLabel = function(labelsprite) {\n",
       "   this.sprite = labelsprite;\n",
       "   this.sprite.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.addSphere = function(spheremesh) {\n",
       "   this.sphere = spheremesh;\n",
       "   this.sphere.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.set = function(x,y,z) {\n",
       "   this.vector.set(x,y,z);\n",
       "   if (this.sprite) {\n",
       "      this.sprite.position.copy(this.vector);\n",
       "   }\n",
       "   if (this.sphere) {\n",
       "      this.sphere.position.copy(this.vector);\n",
       "   }\n",
       "}\n",
       "PMPoint.prototype.radius = function() {\n",
       "   if (this.sphere) {\n",
       "      return this.sphere.geometry.parameters.radius;\n",
       "   } else {\n",
       "      return 0;\n",
       "   }\n",
       "};\n",
       "// select the target node\n",
       "var target = document.querySelector('#model46198950430');\n",
       "\n",
       "// create an observer instance\n",
       "var observer = new MutationObserver(function(mutations) {\n",
       "   mutations.forEach(function(mutation) {\n",
       "      if (mutation.removedNodes && mutation.removedNodes.length > 0) {\n",
       "         cancelAnimationFrame(renderId);\n",
       "         observer.disconnect();\n",
       "         console.log(\"cancelled frame \"+renderId);\n",
       "      }\n",
       "   });\n",
       "});\n",
       "\n",
       "// configuration of the observer:\n",
       "var config = { childList: true, characterData: true }\n",
       "\n",
       "// pass in the target node, as well as the observer options\n",
       "while (target) {\n",
       "   if (target.className==\"output\") {\n",
       "      observer.observe(target, config);\n",
       "      break;\n",
       "   }\n",
       "   target = target.parentNode;\n",
       "}\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "var obj0 = new THREE.Object3D();\n",
       "obj0.name = \"unnamed__1\";\n",
       "obj0.userData.explodable = 1;\n",
       "obj0.userData.points = [];\n",
       "obj0.userData.points.push(new PMPoint(-1, -1, -1));\n",
       "obj0.userData.points.push(new PMPoint(1, -1, -1));\n",
       "obj0.userData.points.push(new PMPoint(-1, 1, -1));\n",
       "obj0.userData.points.push(new PMPoint(1, 1, -1));\n",
       "obj0.userData.points.push(new PMPoint(-1, -1, 1));\n",
       "obj0.userData.points.push(new PMPoint(1, -1, 1));\n",
       "obj0.userData.points.push(new PMPoint(-1, 1, 1));\n",
       "obj0.userData.points.push(new PMPoint(1, 1, 1));\n",
       "\n",
       "obj0.userData.edgeindices = [0, 1, 0, 2, 1, 3, 2, 3, 0, 4, 1, 5, 4, 5, 2, 6, 4, 6, 3, 7, 5, 7, 6, 7];\n",
       "   <!-- Edge style -->\n",
       "obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } );\n",
       "obj0.userData.facets = [[0, 4, 6, 2], [7, 5, 1, 3], [5, 4, 0, 1], [2, 6, 7, 3], [0, 2, 3, 1], [6, 4, 5, 7]];\n",
       "   <!-- Facet style -->\n",
       "obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );\n",
       "init_object(obj0);\n",
       "scene.add(obj0);\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "function textSpriteMaterial(message, parameters) {\n",
       "    if ( parameters === undefined ) parameters = {};\n",
       "    var fontface = \"Helvetica\";\n",
       "    var fontsize = parameters.hasOwnProperty(\"fontsize\") ? parameters[\"fontsize\"] : 15;\n",
       "    fontsize = fontsize*10;\n",
       "    var lines = message.split('\\\\n');\n",
       "    var size = 512;\n",
       "    for(var i = 0; i<lines.length; i++){\n",
       "        var tmp = lines[i].length;\n",
       "        while(tmp*fontsize > size){\n",
       "           fontsize--;\n",
       "        }\n",
       "    }\n",
       "    \n",
       "    var canvas = document.createElement('canvas');\n",
       "    canvas.width = size;\n",
       "    canvas.height = size;\n",
       "    var context = canvas.getContext('2d');\n",
       "    context.fillStyle = \"rgba(255, 255, 255, 0)\";\n",
       "    context.fill();\n",
       "    context.font = fontsize + \"px \" + fontface;\n",
       "    \n",
       "    // text color\n",
       "    context.fillStyle = \"rgba(0, 0, 0, 1.0)\";\n",
       "     for(var i = 0; i<lines.length; i++){\n",
       "        context.fillText(lines[i], size/2, size/2+i*fontsize);\n",
       "     }\n",
       "    \n",
       "    // canvas contents will be used for a texture\n",
       "    var texture = new THREE.Texture(canvas);\n",
       "    texture.needsUpdate = true;\n",
       "    \n",
       "    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });\n",
       "    return spriteMaterial;\n",
       "}\n",
       "\n",
       "\n",
       "// ---------------------- INITIALIZING OBJECTS--------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function init_object(obj) {\n",
       "    if (obj.userData.hasOwnProperty(\"pointmaterial\")) {\n",
       "        init_points(obj);\n",
       "        modelContains.points = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"pointlabels\")) {\n",
       "        init_pointlabels(obj);\n",
       "        modelContains.pointlabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgematerial\")) {\n",
       "        init_lines(obj);\n",
       "        modelContains.lines = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgelabels\")) {\n",
       "        init_edgelabels(obj);\n",
       "        modelContains.edgelabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"arrowstyle\")) {\n",
       "        init_arrowheads(obj);\n",
       "        modelContains.arrowheads = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"facetmaterial\")) {\n",
       "        init_faces(obj);\n",
       "        modelContains.faces = true;\n",
       "    }\n",
       "}\n",
       "\n",
       "function init_points(obj) {\n",
       "    var pointgroup = new THREE.Group();\n",
       "    pointgroup.name = \"points\";\n",
       "    var points = obj.userData.points;\n",
       "    var radii = obj.userData.pointradii;\n",
       "    var materials = obj.userData.pointmaterial;\n",
       "    var geometry,material;\n",
       "    if (!Array.isArray(radii)) {\n",
       "        geometry = new THREE.SphereBufferGeometry(radii);  \n",
       "    }\n",
       "    if (!Array.isArray(materials)) {\n",
       "        material = materials;\n",
       "    }\n",
       "    for (var i=0; i<points.length; i++) {\n",
       "        var point = points[i];\n",
       "        if (Array.isArray(radii)) {\n",
       "            if (radii[i] == 0) {\n",
       "                continue;\n",
       "            }\n",
       "            geometry = new THREE.SphereBufferGeometry(radii[i]);  \n",
       "        } \n",
       "        if (Array.isArray(materials)) {\n",
       "            material = materials[i];     \n",
       "        } \n",
       "        var sphere = new THREE.Mesh(geometry, material);\n",
       "        point.addSphere(sphere);\n",
       "        pointgroup.add(sphere);\n",
       "    }\n",
       "    obj.add(pointgroup);\n",
       "}\n",
       "\n",
       "function init_pointlabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var labels = obj.userData.pointlabels;\n",
       "    var pointlabels = new THREE.Group();\n",
       "    pointlabels.name = \"pointlabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(pointlabels);\n",
       "}\n",
       "\n",
       "function init_lines(obj) {\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var points = obj.userData.points;\n",
       "    var materials = obj.userData.edgematerial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    var bufarr = new Float32Array( obj.userData.edgeindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute( bufarr, 3 );\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position', bufattr);\n",
       "    if (Array.isArray(materials)) {     \n",
       "        for (var i=0; i<materials.length; i++) {\n",
       "            geometry.addGroup(2*i,2,i);\n",
       "        }\n",
       "    }\n",
       "    var lines = new THREE.LineSegments(geometry, materials);\n",
       "    lines.name = \"lines\";\n",
       "    obj.add(lines);\n",
       "    updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "function init_edgelabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var labels = obj.userData.edgelabels;\n",
       "    var edgelabels = new THREE.Group();\n",
       "    edgelabels.name = \"edgelabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            edgelabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(edgelabels);\n",
       "}\n",
       "\n",
       "function init_arrowheads(obj) {\n",
       "    var arrowheads = new THREE.Group();\n",
       "    arrowheads.name = \"arrowheads\";\n",
       "    var arrowstyle = obj.userData.arrowstyle;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var edgematerials = obj.userData.edgematerial;\n",
       "    var points = obj.userData.points;\n",
       "    var material;\n",
       "    if (!Array.isArray(edgematerials)) {\n",
       "        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );\n",
       "    }\n",
       "\n",
       "    for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "        var start = points[edgeindices[i]];\n",
       "        var end = points[edgeindices[i+1]];\n",
       "        var dist = start.vector.distanceTo( end.vector ) - start.radius() - end.radius();\n",
       "        if (dist <= 0) {\n",
       "            continue;\n",
       "        }\n",
       "        var dir = new THREE.Vector3().subVectors(end.vector,start.vector);\n",
       "        dir.normalize();\n",
       "        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);\n",
       "        axis.normalize();\n",
       "        var radians = Math.acos( dir.y );\n",
       "        var radius = dist/25;\n",
       "        var height = dist/5;\n",
       "        var geometry = new THREE.ConeBufferGeometry(radius,height);\n",
       "        var position = new THREE.Vector3().addVectors(start.vector,dir.clone().multiplyScalar(start.radius()+dist-height/2));\n",
       "        if (Array.isArray(edgematerials)) {\n",
       "            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );\n",
       "        }\n",
       "        var cone = new THREE.Mesh( geometry, material );\n",
       "        cone.quaternion.setFromAxisAngle(axis,radians);;\n",
       "        cone.position.copy(position);;\n",
       "        arrowheads.add(cone);\n",
       "    }\n",
       "    obj.add(arrowheads);\n",
       "}\n",
       "\n",
       "function init_faces(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var facets = obj.userData.facets;\n",
       "    obj.userData.triangleindices = [];\n",
       "    for (var i=0; i<facets.length; i++) {\n",
       "        facet = facets[i];\n",
       "        for (var t=0; t<facet.length-2; t++) {\n",
       "            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  \n",
       "        }\n",
       "    }\n",
       "    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);\n",
       "    \n",
       "    var materials = obj.userData.facetmaterial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position',bufattr);\n",
       "    if (Array.isArray(materials)) {\n",
       "        var tricount = 0;\n",
       "        var facet;\n",
       "        for (var i=0; i<facets.length; i++) {\n",
       "            facet = facets[i];\n",
       "            geometry.addGroup(tricount,(facet.length-2)*3,i);\n",
       "            tricount += (facet.length-2)*3;\n",
       "        }\n",
       "    }\n",
       "    var mesh = new THREE.Mesh(geometry, materials);\n",
       "    mesh.name = \"faces\";\n",
       "    obj.add(mesh); \n",
       "    updateFacesPosition(obj);\n",
       "}\n",
       "// //INITIALIZING\n",
       "\n",
       "\n",
       "function updateFacesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.triangleindices;\n",
       "    var faces = obj.getObjectByName(\"faces\");\n",
       "    var ba = faces.geometry.getAttribute(\"position\");\n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    faces.geometry.attributes.position.needsUpdate = true;\n",
       "    \n",
       "}\n",
       "\n",
       "function updateEdgesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.edgeindices;\n",
       "    var lines = obj.getObjectByName(\"lines\");\n",
       "    var ba = lines.geometry.getAttribute(\"position\"); \n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    lines.geometry.attributes.position.needsUpdate = true;\n",
       "}\n",
       "\n",
       "function onWindowResize() {\n",
       "    renderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    svgRenderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "function updateCamera() {\n",
       "    var width = three.clientWidth;\n",
       "    var height = three.clientHeight;\n",
       "    var aspect = width / height;\n",
       "    if (camera.type == \"OrthographicCamera\") {\n",
       "        camera.left = frustumSize * aspect / - 2;\n",
       "        camera.right = frustumSize * aspect / 2;\n",
       "        camera.top = frustumSize / 2;\n",
       "        camera.bottom = - frustumSize / 2;\n",
       "    } else if (camera.type == \"PerspectiveCamera\") {\n",
       "        camera.aspect = aspect;\n",
       "    }\n",
       "    camera.updateProjectionMatrix();\n",
       "}\n",
       "\n",
       "function changeCamera(event) {\n",
       "    var selindex = event.currentTarget.selectedIndex;\n",
       "    camera = cameras[selindex];\n",
       "    control = controls[selindex];\n",
       "    control.enabled = true; \n",
       "    for (var i=0; i<controls.length; i++) {\n",
       "        if (i!=selindex) {\n",
       "            controls[i].enabled = false;\n",
       "        }\n",
       "    }\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "var camtypenode = document.getElementById('cameraType_10');\n",
       "camtypenode.onchange = changeCamera;\n",
       "camtypenode.dispatchEvent(new Event('change'));\n",
       "\n",
       "onWindowResize();\n",
       "window.addEventListener('resize', onWindowResize);\t\n",
       "\n",
       "\n",
       "var xRotationEnabled = false;\n",
       "var yRotationEnabled = false;\n",
       "var zRotationEnabled = false;\n",
       "var rotationSpeedFactor = 1;\n",
       "var settingsShown = false;\n",
       "var labelsShown = true;\n",
       "var intervals = [];\n",
       "var timeouts = [];\n",
       "var explodingSpeed = 0.05;\n",
       "var explodeScale = 0;\n",
       "var XMLS = new XMLSerializer();\n",
       "var svgElement;\n",
       "var renderId;\n",
       "\n",
       "var render = function () {\n",
       "\n",
       "\trenderId = requestAnimationFrame(render);\n",
       "\n",
       "//\tcomment in for automatic explosion\n",
       "//\texplode(updateFactor());\n",
       "\n",
       "    var phi = 0.02 * rotationSpeedFactor;\n",
       "\n",
       "    if (xRotationEnabled) {\n",
       "        scene.rotation.x += phi;\n",
       "    }\n",
       "    if (yRotationEnabled) {\n",
       "        scene.rotation.y += phi;\n",
       "    }\n",
       "    if (zRotationEnabled) {\n",
       "        scene.rotation.z += phi;\n",
       "    }\n",
       "\n",
       "    control.update();\n",
       "    renderer.render(scene, camera);\n",
       "};\n",
       "\n",
       "if ( THREE.WEBGL.isWebGLAvailable() ) {\n",
       "\trender();\n",
       "} else {\n",
       "\tvar warning = WEBGL.getWebGLErrorMessage();\n",
       "\tthree.appendChild( warning );\n",
       "}\n",
       "    \n",
       "function changeTransparency() {\n",
       "    var opacity = 1-Number(event.currentTarget.value);\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        child = scene.children[i];\n",
       "        if ( child.userData.hasOwnProperty(\"facetmaterial\") ) {\n",
       "            if (Array.isArray(child.userData.facetmaterial)) {\n",
       "                for (var j=0; j<child.userData.facetmaterial.length; j++) {\n",
       "                    child.userData.facetmaterial[j].opacity = opacity;\n",
       "                }\n",
       "            } else {\n",
       "                child.userData.facetmaterial.opacity = opacity;\n",
       "            }    \n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function changeRotationX(event){\n",
       "    xRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationY(event){\n",
       "    yRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationZ(event){\n",
       "    zRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "\n",
       "function changeRotationSpeedFactor(event){\n",
       "    rotationSpeedFactor = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function resetScene(){\n",
       "    scene.rotation.set(0,0,0);\n",
       "    camera.position.set(0,0,5);\n",
       "    camera.up.set(0,1,0);\n",
       "}\n",
       "\n",
       "function showSettings(event){\n",
       "    document.getElementById('settings_10').style.visibility = 'visible';\n",
       "    document.getElementById('showSettingsButton_10').style.visibility = 'hidden';\n",
       "    document.getElementById('hideSettingsButton_10').style.visibility = 'visible';\n",
       "    settingsShown = true;\n",
       "}\n",
       "\n",
       "function hideSettings(event){\n",
       "    document.getElementById('settings_10').style.visibility = 'hidden';\n",
       "    document.getElementById('showSettingsButton_10').style.visibility = 'visible';\n",
       "    document.getElementById('hideSettingsButton_10').style.visibility = 'hidden';\n",
       "    settingsShown = false;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "var pos = 150* Math.PI;\n",
       "\n",
       "function updateFactor() {\n",
       "    pos++;\n",
       "    return Math.sin(.01*pos)+1;\n",
       "}\n",
       "\n",
       "// ------------------------ FOLDING ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "// rotate point p around axis defined by points p1 and p2 by given angle\n",
       "function rotate(p, p1, p2, angle ){   \n",
       "    angle = -angle;\n",
       "    var x = p.x, y = p.y, z = p.z, \n",
       "    a = p1.x, b = p1.y, c = p1.z, \n",
       "    u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z;\n",
       "    var result = [];\n",
       "    var L = u*u + v*v + w*w;\n",
       "    var sqrt = Math.sqrt;\n",
       "    var cos = Math.cos;\n",
       "    var sin = Math.sin;\n",
       "\n",
       "    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;\n",
       "    result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L;\n",
       "    result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L;\n",
       "\n",
       "    return result;\n",
       "}\n",
       "\n",
       "var fold = function(event){\n",
       "    var obj = foldables[Number(event.currentTarget.name)];\n",
       "    var foldvalue = Number(event.currentTarget.value);\n",
       "    var scale = foldvalue - obj.userData.oldscale;\n",
       "\n",
       "    for (var j=0; j<obj.userData.axes.length; j++) {\n",
       "        rotateVertices(obj, j, scale);\n",
       "    }\n",
       "    update(obj);\n",
       "    obj.userData.oldscale += scale;\n",
       "    lookAtBarycenter(obj);\n",
       "}\n",
       "\n",
       "function lookAtBarycenter(obj){\n",
       "    control.target = barycenter(obj);\n",
       "}\n",
       "\n",
       "function barycenter(obj) {\n",
       "    var center = new THREE.Vector3(0,0,0);\n",
       "    var points = obj.userData.points;\n",
       "    for (var i=0; i<points.length; i++){\n",
       "        center.add(points[i].vector);\n",
       "    }\n",
       "    center.divideScalar(points.length);\n",
       "    return center;\n",
       "}\n",
       "\n",
       "function rotateVertices(obj, edge, scale) {\n",
       "    var axes = obj.userData.axes;\n",
       "    var subtrees = obj.userData.subtrees;\n",
       "    var points = obj.userData.points;\n",
       "    var angles = obj.userData.angles;\n",
       "    if (edge < axes.length){\n",
       "        for (var j=0; j<subtrees[edge].length; j++){\n",
       "            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));\n",
       "            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function update(obj) {\n",
       "   updateFacesPosition(obj);\n",
       "   updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "if (foldables.length) {\n",
       "    var settings = document.getElementById('settings_10');\n",
       "    var foldDiv = document.createElement('div');\n",
       "    foldDiv.id = 'fold_10';\n",
       "    var title = document.createElement('strong');\n",
       "    title.innerHTML = 'Fold';\n",
       "    foldDiv.appendChild(title);\n",
       "    foldDiv.className = 'group';\n",
       "    for (var i=0; i<foldables.length; i++) {\n",
       "        var range = document.createElement('input');\n",
       "        range.type = 'range';\n",
       "        range.min = 0;\n",
       "        range.max = 1;\n",
       "        range.value = 0;\n",
       "        range.step = 0.001;\n",
       "        range.name = String(i);\n",
       "        range.oninput = fold;\n",
       "        foldDiv.appendChild(range);\n",
       "    }\n",
       "    lookAtBarycenter(foldables[0]);\n",
       "    settings.insertBefore(foldDiv,settings.childNodes[0]);\n",
       "}\n",
       "\n",
       "    \n",
       "// ---------------------- EXPLOSION ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "if (explodableModel) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        obj = scene.children[i];\n",
       "        if ( obj.userData.explodable ) {\n",
       "            computeCentroid(obj);\n",
       "        }\n",
       "    }\n",
       "    document.getElementById('explodeRange_10').oninput = triggerExplode;\n",
       "    document.getElementById('explodeCheckbox_10').onchange = triggerAutomaticExplode;\n",
       "    document.getElementById('explodingSpeedRange_10').oninput = setExplodingSpeed;\n",
       "}\n",
       "\n",
       "function computeCentroid(obj) {\n",
       "    centroid = new THREE.Vector3();\n",
       "    obj.userData.points.forEach(function(pmpoint) {\n",
       "        centroid.add(pmpoint.vector);\t\t\t\n",
       "    });\n",
       "    centroid.divideScalar(obj.userData.points.length);\n",
       "    obj.userData.centroid = centroid;\n",
       "}\n",
       "\n",
       "function explode(factor) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        var obj = scene.children[i];\n",
       "        if (obj.userData.hasOwnProperty(\"centroid\")) { \n",
       "            var c = obj.userData.centroid;\n",
       "            obj.position.set(c.x*factor, c.y*factor, c.z*factor);\n",
       "        }\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function triggerExplode(event){\n",
       "    explodeScale = Number(event.currentTarget.value);\n",
       "    explode(explodeScale);\n",
       "}\n",
       "\n",
       "function setExplodingSpeed(event){\n",
       "    explodingSpeed = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function triggerAutomaticExplode(event){\n",
       "    if (event.currentTarget.checked){\n",
       "        startExploding();\n",
       "    } else {\n",
       "        clearIntervals();\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function startExploding(){\n",
       "    intervals.push(setInterval(explodingInterval, 25));\n",
       "}\n",
       "\n",
       "\n",
       "function explodingInterval(){\n",
       "    explodeScale += explodingSpeed;\n",
       "    if (explodeScale <= 6){ \n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else{\n",
       "        explode(6);\n",
       "        explodeScale = 6;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startUnexploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_10').value = explodeScale;\n",
       "}\n",
       "\n",
       "\n",
       "function startUnexploding(){\n",
       "    intervals.push(setInterval(unexplodingInterval, 25));\n",
       "}\n",
       "\n",
       "function unexplodingInterval(){\n",
       "    explodeScale -= explodingSpeed;\n",
       "    if (explodeScale >= 0){\t\n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else {\n",
       "        explode(0);\n",
       "        explodeScale = 0;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startExploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_10').value = explodeScale;\n",
       "}\n",
       "\n",
       "function clearIntervals(){\n",
       "    intervals.forEach(function(interval){\n",
       "        clearInterval(interval);\n",
       "    });\n",
       "    intervals = [];\n",
       "    timeouts.forEach(function(timeout){\n",
       "        clearTimeout(timeout);\n",
       "    });\n",
       "    timeouts = [];\n",
       "}\n",
       "\n",
       "// ---------------------- DISPLAY --------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "const objectTypeInnerHTMLs = { points: \"Points\", pointlabels: \"Point labels\", lines: \"Edges\", edgelabels: \"Edge labels\", faces: \"Faces\", arrowheads: \"Arrow heads\" };\n",
       "const objectTypeVisible = {};\n",
       "Object.assign(objectTypeVisible,modelContains);\n",
       "const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();\n",
       "const shownObjectTypesList = document.getElementById('shownObjectTypesList_10');\n",
       "\n",
       "function setVisibility(bool,objname) {\n",
       "    for (var i=0; i<scene.children.length; i++){\n",
       "        var obj = scene.children[i].getObjectByName(objname);\n",
       "        if (obj) {\n",
       "            obj.visible = bool;\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function toggleObjectTypeVisibility(event){\n",
       "    var name = event.currentTarget.name;\n",
       "    var checked = event.currentTarget.checked;\n",
       "    objectTypeVisible[name] = checked;\n",
       "    setVisibility(checked,name);\n",
       "}\n",
       "\n",
       "for (var i=0; i<sortedObjectTypeKeys.length; i++){\n",
       "    var key = sortedObjectTypeKeys[i];\n",
       "    if (modelContains[key]) {\n",
       "        var objTypeNode = document.createElement('span');\n",
       "        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';\n",
       "        var checkbox = document.createElement('input');\n",
       "        checkbox.type = 'checkbox';\n",
       "        checkbox.checked = true;\n",
       "        checkbox.name = key;\n",
       "        checkbox.onchange = toggleObjectTypeVisibility;\n",
       "        shownObjectTypesList.appendChild(checkbox);\n",
       "        shownObjectTypesList.appendChild(objTypeNode);\n",
       "    }\n",
       "}\n",
       "\n",
       "// ------------------------------------------------------\n",
       "\n",
       "function toggleObjectVisibility(event){\n",
       "    var nr = Number(event.currentTarget.name);\n",
       "    scene.children[nr].visible = event.currentTarget.checked;\n",
       "}\n",
       "\n",
       "// append checkboxes for displaying or hiding objects\n",
       "var shownObjectsList = document.getElementById('shownObjectsList_10');\n",
       "for (var i=0; i<scene.children.length; i++){\n",
       "    obj = scene.children[i];\n",
       "    var objNode = document.createElement('span');\n",
       "    objNode.innerHTML = obj.name + '<br>';\n",
       "    var checkbox = document.createElement('input');\n",
       "    checkbox.type = 'checkbox';\n",
       "    checkbox.checked = true;\n",
       "    checkbox.name = String(i);\n",
       "    checkbox.onchange = toggleObjectVisibility;\n",
       "    shownObjectsList.appendChild(checkbox);\n",
       "    shownObjectsList.appendChild(objNode);\n",
       "}\n",
       "\n",
       "// ---------------------- SVG ------------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function takeSvgScreenshot() {\n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(false,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(false,\"edgelabels\");\n",
       "    }\n",
       "    svgRenderer.render(scene,camera);\n",
       "    svgElement = XMLS.serializeToString(svgRenderer.domElement);\n",
       "    \n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(true,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(true,\"edgelabels\");\n",
       "    }\n",
       "\n",
       "    if (document.getElementById('tab_10').checked){\n",
       "        //show in new tab\n",
       "        var myWindow = window.open(\"\",\"\");\n",
       "        myWindow.document.body.innerHTML = svgElement;\n",
       "    } else{\n",
       "        // download svg file \n",
       "        download(\"screenshot.svg\", svgElement);\n",
       "    }\n",
       "}\n",
       "\n",
       "function download(filename, text) {\n",
       "    var element = document.createElement('a');\n",
       "    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));\n",
       "    element.setAttribute('download', filename);\n",
       "\n",
       "    element.style.display = 'none';\n",
       "    document.body.appendChild(element);\n",
       "\n",
       "    element.click();\n",
       "\n",
       "    document.body.removeChild(element);\n",
       "}\n",
       "\n",
       "\n",
       "document.getElementById('transparencyRange_10').oninput = changeTransparency;\n",
       "document.getElementById('changeRotationX_10').onchange = changeRotationX;\n",
       "document.getElementById('changeRotationY_10').onchange = changeRotationY;\n",
       "document.getElementById('changeRotationZ_10').onchange = changeRotationZ;\n",
       "document.getElementById('resetButton_10').onclick = resetScene;\n",
       "document.getElementById('rotationSpeedRange_10').oninput = changeRotationSpeedFactor;\n",
       "document.getElementById('takeScreenshot_10').onclick = takeSvgScreenshot;\n",
       "document.getElementById('showSettingsButton_10').onclick = showSettings;\n",
       "document.getElementById('hideSettingsButton_10').onclick = hideSettings;\n",
       "\n",
       "\n",
       "// ------------------ SHORTCUTS --------------------------------------------\n",
       "// -------------------------------------------------------------------------\n",
       "\n",
       "/**\n",
       " * http://www.openjs.com/scripts/events/keyboard_shortcuts/\n",
       " * Version : 2.01.B\n",
       " * By Binny V A\n",
       " * License : BSD\n",
       " */\n",
       "shortcut = {\n",
       "\t'all_shortcuts':{},//All the shortcuts are stored in this array\n",
       "\t'add': function(shortcut_combination,callback,opt) {\n",
       "\t\t//Provide a set of default options\n",
       "\t\tvar default_options = {\n",
       "\t\t\t'type':'keydown',\n",
       "\t\t\t'propagate':false,\n",
       "\t\t\t'disable_in_input':false,\n",
       "\t\t\t'target':document,\n",
       "\t\t\t'keycode':false\n",
       "\t\t}\n",
       "\t\tif(!opt) opt = default_options;\n",
       "\t\telse {\n",
       "\t\t\tfor(var dfo in default_options) {\n",
       "\t\t\t\tif(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\n",
       "\t\tvar ele = opt.target;\n",
       "\t\tif(typeof opt.target == 'string') ele = document.getElementById(opt.target);\n",
       "\t\tvar ths = this;\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\n",
       "\t\t//The function to be called at keypress\n",
       "\t\tvar func = function(e) {\n",
       "\t\t\te = e || window.event;\n",
       "\t\t\t\n",
       "\t\t\tif(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields\n",
       "\t\t\t\tvar element;\n",
       "\t\t\t\tif(e.target) element=e.target;\n",
       "\t\t\t\telse if(e.srcElement) element=e.srcElement;\n",
       "\t\t\t\tif(element.nodeType==3) element=element.parentNode;\n",
       "\n",
       "\t\t\t\tif(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\t//Find Which key is pressed\n",
       "\t\t\tif (e.keyCode) code = e.keyCode;\n",
       "\t\t\telse if (e.which) code = e.which;\n",
       "\t\t\tvar character = String.fromCharCode(code).toLowerCase();\n",
       "\t\t\t\n",
       "\t\t\tif(code == 188) character=\",\"; //If the user presses , when the type is onkeydown\n",
       "\t\t\tif(code == 190) character=\".\"; //If the user presses , when the type is onkeydown\n",
       "\n",
       "\t\t\tvar keys = shortcut_combination.split(\"+\");\n",
       "\t\t\t//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked\n",
       "\t\t\tvar kp = 0;\n",
       "\t\t\t\n",
       "\t\t\t//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken\n",
       "\t\t\tvar shift_nums = {\n",
       "\t\t\t\t\"`\":\"~\",\n",
       "\t\t\t\t\"1\":\"!\",\n",
       "\t\t\t\t\"2\":\"@\",\n",
       "\t\t\t\t\"3\":\"#\",\n",
       "\t\t\t\t\"4\":\"$\",\n",
       "\t\t\t\t\"5\":\"%\",\n",
       "\t\t\t\t\"6\":\"^\",\n",
       "\t\t\t\t\"7\":\"&\",\n",
       "\t\t\t\t\"8\":\"*\",\n",
       "\t\t\t\t\"9\":\"(\",\n",
       "\t\t\t\t\"0\":\")\",\n",
       "\t\t\t\t\"-\":\"_\",\n",
       "\t\t\t\t\"=\":\"+\",\n",
       "\t\t\t\t\";\":\":\",\n",
       "\t\t\t\t\"'\":\"\\\"\",\n",
       "\t\t\t\t\",\":\"<\",\n",
       "\t\t\t\t\".\":\">\",\n",
       "\t\t\t\t\"/\":\"?\",\n",
       "\t\t\t\t\"\\\\\":\"|\"\n",
       "\t\t\t}\n",
       "\t\t\t//Special Keys - and their codes\n",
       "\t\t\tvar special_keys = {\n",
       "\t\t\t\t'esc':27,\n",
       "\t\t\t\t'escape':27,\n",
       "\t\t\t\t'tab':9,\n",
       "\t\t\t\t'space':32,\n",
       "\t\t\t\t'return':13,\n",
       "\t\t\t\t'enter':13,\n",
       "\t\t\t\t'backspace':8,\n",
       "\t\n",
       "\t\t\t\t'scrolllock':145,\n",
       "\t\t\t\t'scroll_lock':145,\n",
       "\t\t\t\t'scroll':145,\n",
       "\t\t\t\t'capslock':20,\n",
       "\t\t\t\t'caps_lock':20,\n",
       "\t\t\t\t'caps':20,\n",
       "\t\t\t\t'numlock':144,\n",
       "\t\t\t\t'num_lock':144,\n",
       "\t\t\t\t'num':144,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pause':19,\n",
       "\t\t\t\t'break':19,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'insert':45,\n",
       "\t\t\t\t'home':36,\n",
       "\t\t\t\t'delete':46,\n",
       "\t\t\t\t'end':35,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pageup':33,\n",
       "\t\t\t\t'page_up':33,\n",
       "\t\t\t\t'pu':33,\n",
       "\t\n",
       "\t\t\t\t'pagedown':34,\n",
       "\t\t\t\t'page_down':34,\n",
       "\t\t\t\t'pd':34,\n",
       "\t\n",
       "\t\t\t\t'left':37,\n",
       "\t\t\t\t'up':38,\n",
       "\t\t\t\t'right':39,\n",
       "\t\t\t\t'down':40,\n",
       "\t\n",
       "\t\t\t\t'f1':112,\n",
       "\t\t\t\t'f2':113,\n",
       "\t\t\t\t'f3':114,\n",
       "\t\t\t\t'f4':115,\n",
       "\t\t\t\t'f5':116,\n",
       "\t\t\t\t'f6':117,\n",
       "\t\t\t\t'f7':118,\n",
       "\t\t\t\t'f8':119,\n",
       "\t\t\t\t'f9':120,\n",
       "\t\t\t\t'f10':121,\n",
       "\t\t\t\t'f11':122,\n",
       "\t\t\t\t'f12':123\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\tvar modifiers = { \n",
       "\t\t\t\tshift: { wanted:false, pressed:false},\n",
       "\t\t\t\tctrl : { wanted:false, pressed:false},\n",
       "\t\t\t\talt  : { wanted:false, pressed:false},\n",
       "\t\t\t\tmeta : { wanted:false, pressed:false}\t//Meta is Mac specific\n",
       "\t\t\t};\n",
       "                        \n",
       "\t\t\tif(e.ctrlKey)\tmodifiers.ctrl.pressed = true;\n",
       "\t\t\tif(e.shiftKey)\tmodifiers.shift.pressed = true;\n",
       "\t\t\tif(e.altKey)\tmodifiers.alt.pressed = true;\n",
       "\t\t\tif(e.metaKey)   modifiers.meta.pressed = true;\n",
       "                        \n",
       "\t\t\tfor(var i=0; k=keys[i],i<keys.length; i++) {\n",
       "\t\t\t\t//Modifiers\n",
       "\t\t\t\tif(k == 'ctrl' || k == 'control') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.ctrl.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'shift') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.shift.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'alt') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.alt.wanted = true;\n",
       "\t\t\t\t} else if(k == 'meta') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.meta.wanted = true;\n",
       "\t\t\t\t} else if(k.length > 1) { //If it is a special key\n",
       "\t\t\t\t\tif(special_keys[k] == code) kp++;\n",
       "\t\t\t\t\t\n",
       "\t\t\t\t} else if(opt['keycode']) {\n",
       "\t\t\t\t\tif(opt['keycode'] == code) kp++;\n",
       "\n",
       "\t\t\t\t} else { //The special keys did not match\n",
       "\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\telse {\n",
       "\t\t\t\t\t\tif(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase\n",
       "\t\t\t\t\t\t\tcharacter = shift_nums[character]; \n",
       "\t\t\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\t\t}\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t\t\n",
       "\t\t\tif(kp == keys.length && \n",
       "\t\t\t\t\t\tmodifiers.ctrl.pressed == modifiers.ctrl.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.shift.pressed == modifiers.shift.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.alt.pressed == modifiers.alt.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.meta.pressed == modifiers.meta.wanted) {\n",
       "\t\t\t\tcallback(e);\n",
       "\t\n",
       "\t\t\t\tif(!opt['propagate']) { //Stop the event\n",
       "\t\t\t\t\t//e.cancelBubble is supported by IE - this will kill the bubbling process.\n",
       "\t\t\t\t\te.cancelBubble = true;\n",
       "\t\t\t\t\te.returnValue = false;\n",
       "\t\n",
       "\t\t\t\t\t//e.stopPropagation works in Firefox.\n",
       "\t\t\t\t\tif (e.stopPropagation) {\n",
       "\t\t\t\t\t\te.stopPropagation();\n",
       "\t\t\t\t\t\te.preventDefault();\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t\treturn false;\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\t\tthis.all_shortcuts[shortcut_combination] = {\n",
       "\t\t\t'callback':func, \n",
       "\t\t\t'target':ele, \n",
       "\t\t\t'event': opt['type']\n",
       "\t\t};\n",
       "\t\t//Attach the function with the event\n",
       "\t\tif(ele.addEventListener) ele.addEventListener(opt['type'], func, false);\n",
       "\t\telse if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);\n",
       "\t\telse ele['on'+opt['type']] = func;\n",
       "\t},\n",
       "\n",
       "\t//Remove the shortcut - just specify the shortcut and I will remove the binding\n",
       "\t'remove':function(shortcut_combination) {\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\t\tvar binding = this.all_shortcuts[shortcut_combination];\n",
       "\t\tdelete(this.all_shortcuts[shortcut_combination])\n",
       "\t\tif(!binding) return;\n",
       "\t\tvar type = binding['event'];\n",
       "\t\tvar ele = binding['target'];\n",
       "\t\tvar callback = binding['callback'];\n",
       "\n",
       "\t\tif(ele.detachEvent) ele.detachEvent('on'+type, callback);\n",
       "\t\telse if(ele.removeEventListener) ele.removeEventListener(type, callback, false);\n",
       "\t\telse ele['on'+type] = false;\n",
       "\t}\n",
       "}\n",
       "\n",
       "shortcut.add(\"Alt+Left\",function() {\n",
       "\tvar event = new Event('click');\n",
       "\tif (settingsShown){\n",
       "\t\tdocument.getElementById('hideSettingsButton_10').dispatchEvent(event);\n",
       "\t} else {\n",
       "\t\tdocument.getElementById('showSettingsButton_10').dispatchEvent(event);\n",
       "\t}\n",
       "});\n",
       "\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "});});\n",
       "      </script>\n",
       "   </body>\n",
       "</html>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "cube(3)->VISUAL(VertexStyle=>\"hidden\");"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Visualizing multiple polytopes\n",
    "\n",
    "The following sequence creates a 0/1-cube and a translate.  The final command triggers the joint visualization of both."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!--\n",
       "polymake for knusper\n",
       "Thu Aug 27 11:44:14 2020\n",
       "c1\n",
       "-->\n",
       "\n",
       "\n",
       "<html>\n",
       "   <head>\n",
       "      <meta charset=utf-8>\n",
       "      <title>c1</title>\n",
       "      <style>\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "*/\n",
       "         html {overflow: scroll;}\n",
       "         strong{font-size: 18px;}\n",
       "         canvas { z-index: 8; }\n",
       "         input[type='radio'] {margin-left:0;}\n",
       "         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}\n",
       "         .group{padding-bottom: 15px;}\n",
       "         .settings * {z-index: 11; }\n",
       "         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}\n",
       "         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} \n",
       "         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}\n",
       "         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }\n",
       "         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}\n",
       "         button{margin-left: 0; margin-top: 10px}\n",
       "         img{cursor: pointer;}\n",
       "         .suboption{padding-top: 15px;}\n",
       "         #model62072961310 { width: 100%; height: 100%; }\n",
       "         .threejs_container { width: 100%; height: 75vh;}\n",
       "         .settings{max-height: 74vh} \n",
       "         input[type=range] {\n",
       "           -webkit-appearance: none;\n",
       "           padding:0; \n",
       "           width:90%; \n",
       "           margin-left: auto;\n",
       "           margin-right: auto;\n",
       "           margin-top: 15px;\n",
       "           margin-bottom: 15px;\n",
       "           display: block;\t\n",
       "         }\n",
       "         input[type=range]:focus {\n",
       "           outline: none;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-runnable-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-webkit-slider-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "           -webkit-appearance: none;\n",
       "           margin-top: -5px;\n",
       "         }\n",
       "         input[type=range]:focus::-webkit-slider-runnable-track {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]::-moz-range-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "           background: #E3E3E3;\n",
       "           border-radius: 0px;\n",
       "           border: 0px solid #000000;\n",
       "         }\n",
       "         input[type=range]::-moz-range-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]::-ms-track {\n",
       "           height: 4px;\n",
       "           cursor: pointer;\n",
       "           animate: 0.2s;\n",
       "           background: transparent;\n",
       "           border-color: transparent;\n",
       "           color: transparent;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "           border: 0px solid #000000;\n",
       "           border-radius: 0px;\n",
       "           box-shadow: 0px 0px 0px #000000;\n",
       "         }\n",
       "         input[type=range]::-ms-thumb {\n",
       "           box-shadow: 1px 1px 2px #B8B8B8;\n",
       "           border: 1px solid #ABABAB;\n",
       "           height: 13px;\n",
       "           width: 25px;\n",
       "           border-radius: 20px;\n",
       "           background: #E0E0E0;\n",
       "           cursor: pointer;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-lower {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "         input[type=range]:focus::-ms-fill-upper {\n",
       "           background: #E3E3E3;\n",
       "         }\n",
       "/*\n",
       "// COMMON_CODE_BLOCK_END\n",
       "*/\n",
       "\t\t</style>\n",
       "   </head>\n",
       "<body>\n",
       "   <div class='threejs_container'>\n",
       "\t\t<div id='settings_11' class='settings'>\n",
       "\t\t\t<div class=group id='explode_11'>\n",
       "\t\t\t\t<strong>Explode</strong>\n",
       "\t\t\t\t<input id='explodeRange_11' type='range' min=0 max=6 step=0.01 value=0>\n",
       "\t\t\t\t<div class=indented><input id='explodeCheckbox_11' type='checkbox'>Automatic explosion</div>\n",
       "\t\t\t\t<div class=suboption>Exploding speed</div>\n",
       "\t\t\t\t<input id='explodingSpeedRange_11' type='range' min=0 max=0.5 step=0.001 value=0.05>\n",
       "\t\t\t</div>\n",
       "\t\n",
       "\t\t\t<div class=group id='transparency_11' class='transparency'>\n",
       "\t\t\t\t<strong>Transparency</strong>\n",
       "\t\t\t\t<input id='transparencyRange_11' type='range' min=0 max=1 step=0.01 value=0>\n",
       "\t\t\t</div>\n",
       "\t\t\t\n",
       "\t\t\t<div class=group id='rotation_11'>\n",
       "\t\t\t\t<strong>Rotation</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationX_11'> x-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationY_11'> y-axis</div>\n",
       "\t\t\t\t\t<div><input type='checkbox' id='changeRotationZ_11'> z-axis</div>\n",
       "\t\t\t\t\t<button id='resetButton_11'>Reset</button>\n",
       "\t\t\t\t</div>\n",
       "\n",
       "\t\t\t\t<div class=suboption>Rotation speed</div>\n",
       "\t\t\t\t<input id='rotationSpeedRange_11' type='range' min=0 max=5 step=0.01 value=2>\n",
       "\t\t\t</div>\n",
       "\n",
       "\n",
       "\t\t\t<div class=group id='display_11'>\n",
       "\t\t\t\t<strong>Display</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<div id='shownObjectTypesList_11' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t\t<div class=suboption>Objects</div>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t   <div id='shownObjectsList_11' class='shownObjectsList'></div>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "         \n",
       "         <div class=group id='camera_11'>\n",
       "            <strong>Camera</strong>\n",
       "            <div class=indented>\n",
       "               <form>\n",
       "                  <select id=\"cameraType_11\">\n",
       "                     <option value='perspective' selected> Perspective<br></option>\n",
       "                     <option value='orthographic' > Orthographic<br></option>\n",
       "                  </select>\n",
       "               </form>\n",
       "            </div>\n",
       "         </div>\n",
       "\n",
       "\t\t\t<div class=group id='svg_11'>\n",
       "\t\t\t\t<strong>SVG</strong>\n",
       "\t\t\t\t<div class=indented>\n",
       "\t\t\t\t\t<form>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='download' id='download_11' checked> Download<br>\n",
       "\t\t\t\t\t\t<input type=\"radio\" name='screenshotMode' value='tab' id='tab_11' > New tab<br>\n",
       "\t\t\t\t\t</form>\n",
       "\t\t\t\t\t<button id='takeScreenshot_11'>Screenshot</button>\n",
       "\t\t\t\t</div>\n",
       "\t\t\t</div>\n",
       "\n",
       "\t\t</div>\t<!-- end of settings -->\n",
       "\t\t<img id='hideSettingsButton_11' class='hideSettingsButton' src='/kernelspecs/polymake/close.svg' width=20px\">\n",
       "\t\t<img id='showSettingsButton_11' class='showSettingsButton' src='/kernelspecs/polymake/menu.svg' width=20px\">\n",
       "<div id=\"model62072961310\"></div>\n",
       "</div>\n",
       "   <script>\n",
       "    requirejs.config({\n",
       "      paths: {\n",
       "        three: '/kernelspecs/polymake/three',\n",
       "        TrackballControls: '/kernelspecs/polymake/TrackballControls',\n",
       "        OrbitControls: '/kernelspecs/polymake/OrbitControls',\n",
       "        Projector: '/kernelspecs/polymake/Projector',\n",
       "        SVGRenderer: '/kernelspecs/polymake/SVGRenderer',\n",
       "        WEBGL: '/kernelspecs/polymake/WebGL',\n",
       "      },\n",
       "      shim: {\n",
       "        'three': { exports: 'THREE'},\n",
       "        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },\n",
       "        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },\n",
       "        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },\n",
       "        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },\n",
       "        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },\n",
       "      }\n",
       "    });\n",
       "    \n",
       "    require(['three'],function(THREE){\n",
       "        window.THREE = THREE;\n",
       "      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],\n",
       "               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {\n",
       "    THREE.TrackballControls = TrackballControls;\n",
       "    THREE.OrbitControls = OrbitControls;\n",
       "    THREE.Projector = Projector;\n",
       "    THREE.SVGRenderer = SVGRenderer;\n",
       "    THREE.WEBGL = WEBGL;\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "\n",
       "const intervalLength = 25; // for automatic animations\n",
       "const explodableModel = true; \n",
       "const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };\n",
       "const foldables = [];\n",
       "\n",
       "var three = document.getElementById(\"model62072961310\");\n",
       "var scene = new THREE.Scene();\n",
       "var renderer = new THREE.WebGLRenderer( { antialias: true } );\n",
       "var svgRenderer = new THREE.SVGRenderer( { antialias: true } );\n",
       "renderer.setPixelRatio( window.devicePixelRatio );\n",
       "renderer.setClearColor(0xFFFFFF, 1);\n",
       "svgRenderer.setClearColor(0xFFFFFF, 1);\n",
       "three.appendChild(renderer.domElement);\n",
       "\n",
       "var frustumSize = 4;\n",
       "var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];\n",
       "cameras.forEach(function(cam) {\n",
       "    cam.position.set(0, 0, 5);\n",
       "    cam.lookAt(0, 0, 0);  \n",
       "    cam.up.set(0, 1, 0);         \n",
       "});\n",
       "var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];\n",
       "var camera, control;\n",
       "\n",
       "controls[0].zoomSpeed = 0.2;\n",
       "controls[0].rotateSpeed = 4;\n",
       "\n",
       "\n",
       "// class to allow move points together with labels and spheres\n",
       "var PMPoint = function (x,y,z) {\n",
       "   this.vector = new THREE.Vector3(x,y,z);\n",
       "   this.sprite = null;\n",
       "   this.sphere = null;\n",
       "}\n",
       "PMPoint.prototype.addLabel = function(labelsprite) {\n",
       "   this.sprite = labelsprite;\n",
       "   this.sprite.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.addSphere = function(spheremesh) {\n",
       "   this.sphere = spheremesh;\n",
       "   this.sphere.position.copy(this.vector);\n",
       "}\n",
       "PMPoint.prototype.set = function(x,y,z) {\n",
       "   this.vector.set(x,y,z);\n",
       "   if (this.sprite) {\n",
       "      this.sprite.position.copy(this.vector);\n",
       "   }\n",
       "   if (this.sphere) {\n",
       "      this.sphere.position.copy(this.vector);\n",
       "   }\n",
       "}\n",
       "PMPoint.prototype.radius = function() {\n",
       "   if (this.sphere) {\n",
       "      return this.sphere.geometry.parameters.radius;\n",
       "   } else {\n",
       "      return 0;\n",
       "   }\n",
       "};\n",
       "// select the target node\n",
       "var target = document.querySelector('#model62072961310');\n",
       "\n",
       "// create an observer instance\n",
       "var observer = new MutationObserver(function(mutations) {\n",
       "   mutations.forEach(function(mutation) {\n",
       "      if (mutation.removedNodes && mutation.removedNodes.length > 0) {\n",
       "         cancelAnimationFrame(renderId);\n",
       "         observer.disconnect();\n",
       "         console.log(\"cancelled frame \"+renderId);\n",
       "      }\n",
       "   });\n",
       "});\n",
       "\n",
       "// configuration of the observer:\n",
       "var config = { childList: true, characterData: true }\n",
       "\n",
       "// pass in the target node, as well as the observer options\n",
       "while (target) {\n",
       "   if (target.className==\"output\") {\n",
       "      observer.observe(target, config);\n",
       "      break;\n",
       "   }\n",
       "   target = target.parentNode;\n",
       "}\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "var obj0 = new THREE.Object3D();\n",
       "obj0.name = \"c1\";\n",
       "obj0.userData.explodable = 1;\n",
       "obj0.userData.points = [];\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(1, 0, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 1, 0));\n",
       "obj0.userData.points.push(new PMPoint(1, 1, 0));\n",
       "obj0.userData.points.push(new PMPoint(0, 0, 1));\n",
       "obj0.userData.points.push(new PMPoint(1, 0, 1));\n",
       "obj0.userData.points.push(new PMPoint(0, 1, 1));\n",
       "obj0.userData.points.push(new PMPoint(1, 1, 1));\n",
       "\n",
       "obj0.userData.pointradii = 0.02;\n",
       "   <!-- Vertex style -->\n",
       "obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );\n",
       "obj0.userData.pointlabels = [\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\"];\n",
       "obj0.userData.edgeindices = [0, 1, 0, 2, 1, 3, 2, 3, 0, 4, 1, 5, 4, 5, 2, 6, 4, 6, 3, 7, 5, 7, 6, 7];\n",
       "   <!-- Edge style -->\n",
       "obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } );\n",
       "obj0.userData.facets = [[0, 4, 6, 2], [7, 5, 1, 3], [5, 4, 0, 1], [2, 6, 7, 3], [0, 2, 3, 1], [6, 4, 5, 7]];\n",
       "   <!-- Facet style -->\n",
       "obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );\n",
       "init_object(obj0);\n",
       "scene.add(obj0);\n",
       "\n",
       "var obj1 = new THREE.Object3D();\n",
       "obj1.name = \"c2\";\n",
       "obj1.userData.explodable = 1;\n",
       "obj1.userData.points = [];\n",
       "obj1.userData.points.push(new PMPoint(-1, 0, 0));\n",
       "obj1.userData.points.push(new PMPoint(0, 0, 0));\n",
       "obj1.userData.points.push(new PMPoint(-1, 1, 0));\n",
       "obj1.userData.points.push(new PMPoint(0, 1, 0));\n",
       "obj1.userData.points.push(new PMPoint(-1, 0, 1));\n",
       "obj1.userData.points.push(new PMPoint(0, 0, 1));\n",
       "obj1.userData.points.push(new PMPoint(-1, 1, 1));\n",
       "obj1.userData.points.push(new PMPoint(0, 1, 1));\n",
       "\n",
       "obj1.userData.pointradii = 0.02;\n",
       "   <!-- Vertex style -->\n",
       "obj1.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );\n",
       "obj1.userData.pointlabels = [\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\"];\n",
       "obj1.userData.edgeindices = [0, 1, 0, 2, 1, 3, 2, 3, 0, 4, 1, 5, 4, 5, 2, 6, 4, 6, 3, 7, 5, 7, 6, 7];\n",
       "   <!-- Edge style -->\n",
       "obj1.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } );\n",
       "obj1.userData.facets = [[0, 4, 6, 2], [7, 5, 1, 3], [5, 4, 0, 1], [2, 6, 7, 3], [0, 2, 3, 1], [6, 4, 5, 7]];\n",
       "   <!-- Facet style -->\n",
       "obj1.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );\n",
       "init_object(obj1);\n",
       "scene.add(obj1);\n",
       "\n",
       "// COMMON_CODE_BLOCK_BEGIN\n",
       "function textSpriteMaterial(message, parameters) {\n",
       "    if ( parameters === undefined ) parameters = {};\n",
       "    var fontface = \"Helvetica\";\n",
       "    var fontsize = parameters.hasOwnProperty(\"fontsize\") ? parameters[\"fontsize\"] : 15;\n",
       "    fontsize = fontsize*10;\n",
       "    var lines = message.split('\\\\n');\n",
       "    var size = 512;\n",
       "    for(var i = 0; i<lines.length; i++){\n",
       "        var tmp = lines[i].length;\n",
       "        while(tmp*fontsize > size){\n",
       "           fontsize--;\n",
       "        }\n",
       "    }\n",
       "    \n",
       "    var canvas = document.createElement('canvas');\n",
       "    canvas.width = size;\n",
       "    canvas.height = size;\n",
       "    var context = canvas.getContext('2d');\n",
       "    context.fillStyle = \"rgba(255, 255, 255, 0)\";\n",
       "    context.fill();\n",
       "    context.font = fontsize + \"px \" + fontface;\n",
       "    \n",
       "    // text color\n",
       "    context.fillStyle = \"rgba(0, 0, 0, 1.0)\";\n",
       "     for(var i = 0; i<lines.length; i++){\n",
       "        context.fillText(lines[i], size/2, size/2+i*fontsize);\n",
       "     }\n",
       "    \n",
       "    // canvas contents will be used for a texture\n",
       "    var texture = new THREE.Texture(canvas);\n",
       "    texture.needsUpdate = true;\n",
       "    \n",
       "    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });\n",
       "    return spriteMaterial;\n",
       "}\n",
       "\n",
       "\n",
       "// ---------------------- INITIALIZING OBJECTS--------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function init_object(obj) {\n",
       "    if (obj.userData.hasOwnProperty(\"pointmaterial\")) {\n",
       "        init_points(obj);\n",
       "        modelContains.points = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"pointlabels\")) {\n",
       "        init_pointlabels(obj);\n",
       "        modelContains.pointlabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgematerial\")) {\n",
       "        init_lines(obj);\n",
       "        modelContains.lines = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"edgelabels\")) {\n",
       "        init_edgelabels(obj);\n",
       "        modelContains.edgelabels = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"arrowstyle\")) {\n",
       "        init_arrowheads(obj);\n",
       "        modelContains.arrowheads = true;\n",
       "    }\n",
       "    if (obj.userData.hasOwnProperty(\"facetmaterial\")) {\n",
       "        init_faces(obj);\n",
       "        modelContains.faces = true;\n",
       "    }\n",
       "}\n",
       "\n",
       "function init_points(obj) {\n",
       "    var pointgroup = new THREE.Group();\n",
       "    pointgroup.name = \"points\";\n",
       "    var points = obj.userData.points;\n",
       "    var radii = obj.userData.pointradii;\n",
       "    var materials = obj.userData.pointmaterial;\n",
       "    var geometry,material;\n",
       "    if (!Array.isArray(radii)) {\n",
       "        geometry = new THREE.SphereBufferGeometry(radii);  \n",
       "    }\n",
       "    if (!Array.isArray(materials)) {\n",
       "        material = materials;\n",
       "    }\n",
       "    for (var i=0; i<points.length; i++) {\n",
       "        var point = points[i];\n",
       "        if (Array.isArray(radii)) {\n",
       "            if (radii[i] == 0) {\n",
       "                continue;\n",
       "            }\n",
       "            geometry = new THREE.SphereBufferGeometry(radii[i]);  \n",
       "        } \n",
       "        if (Array.isArray(materials)) {\n",
       "            material = materials[i];     \n",
       "        } \n",
       "        var sphere = new THREE.Mesh(geometry, material);\n",
       "        point.addSphere(sphere);\n",
       "        pointgroup.add(sphere);\n",
       "    }\n",
       "    obj.add(pointgroup);\n",
       "}\n",
       "\n",
       "function init_pointlabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var labels = obj.userData.pointlabels;\n",
       "    var pointlabels = new THREE.Group();\n",
       "    pointlabels.name = \"pointlabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "\t        var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            point.addLabel(sprite);\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(pointlabels);\n",
       "}\n",
       "\n",
       "function init_lines(obj) {\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var points = obj.userData.points;\n",
       "    var materials = obj.userData.edgematerial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    var bufarr = new Float32Array( obj.userData.edgeindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute( bufarr, 3 );\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position', bufattr);\n",
       "    if (Array.isArray(materials)) {     \n",
       "        for (var i=0; i<materials.length; i++) {\n",
       "            geometry.addGroup(2*i,2,i);\n",
       "        }\n",
       "    }\n",
       "    var lines = new THREE.LineSegments(geometry, materials);\n",
       "    lines.name = \"lines\";\n",
       "    obj.add(lines);\n",
       "    updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "function init_edgelabels(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var labels = obj.userData.edgelabels;\n",
       "    var edgelabels = new THREE.Group();\n",
       "    edgelabels.name = \"edgelabels\";\n",
       "    if (Array.isArray(labels)) {\n",
       "        for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "            var point = points[i];\n",
       "            var spriteMaterial = textSpriteMaterial( labels[i] );\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            edgelabels.add(sprite);\n",
       "        }\n",
       "    } else {\n",
       "        var spriteMaterial = textSpriteMaterial( labels );\n",
       "        for (var i=0; i<points.length; i++) {\n",
       "            var point = points[i];\n",
       "            var sprite = new THREE.Sprite(spriteMaterial);\n",
       "            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector,points[edgeindices[i+1]].vector).multiplyScalar(0.5));\n",
       "            pointlabels.add(sprite);\n",
       "        }\n",
       "    }\n",
       "    obj.add(edgelabels);\n",
       "}\n",
       "\n",
       "function init_arrowheads(obj) {\n",
       "    var arrowheads = new THREE.Group();\n",
       "    arrowheads.name = \"arrowheads\";\n",
       "    var arrowstyle = obj.userData.arrowstyle;\n",
       "    var edgeindices = obj.userData.edgeindices;\n",
       "    var edgematerials = obj.userData.edgematerial;\n",
       "    var points = obj.userData.points;\n",
       "    var material;\n",
       "    if (!Array.isArray(edgematerials)) {\n",
       "        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );\n",
       "    }\n",
       "\n",
       "    for (var i=0; i<edgeindices.length; i=i+2) {\n",
       "        var start = points[edgeindices[i]];\n",
       "        var end = points[edgeindices[i+1]];\n",
       "        var dist = start.vector.distanceTo( end.vector ) - start.radius() - end.radius();\n",
       "        if (dist <= 0) {\n",
       "            continue;\n",
       "        }\n",
       "        var dir = new THREE.Vector3().subVectors(end.vector,start.vector);\n",
       "        dir.normalize();\n",
       "        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);\n",
       "        axis.normalize();\n",
       "        var radians = Math.acos( dir.y );\n",
       "        var radius = dist/25;\n",
       "        var height = dist/5;\n",
       "        var geometry = new THREE.ConeBufferGeometry(radius,height);\n",
       "        var position = new THREE.Vector3().addVectors(start.vector,dir.clone().multiplyScalar(start.radius()+dist-height/2));\n",
       "        if (Array.isArray(edgematerials)) {\n",
       "            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );\n",
       "        }\n",
       "        var cone = new THREE.Mesh( geometry, material );\n",
       "        cone.quaternion.setFromAxisAngle(axis,radians);;\n",
       "        cone.position.copy(position);;\n",
       "        arrowheads.add(cone);\n",
       "    }\n",
       "    obj.add(arrowheads);\n",
       "}\n",
       "\n",
       "function init_faces(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var facets = obj.userData.facets;\n",
       "    obj.userData.triangleindices = [];\n",
       "    for (var i=0; i<facets.length; i++) {\n",
       "        facet = facets[i];\n",
       "        for (var t=0; t<facet.length-2; t++) {\n",
       "            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  \n",
       "        }\n",
       "    }\n",
       "    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );\n",
       "    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);\n",
       "    \n",
       "    var materials = obj.userData.facetmaterial;\n",
       "    var geometry = new THREE.BufferGeometry();\n",
       "    geometry.setAttribute('position',bufattr);\n",
       "    if (Array.isArray(materials)) {\n",
       "        var tricount = 0;\n",
       "        var facet;\n",
       "        for (var i=0; i<facets.length; i++) {\n",
       "            facet = facets[i];\n",
       "            geometry.addGroup(tricount,(facet.length-2)*3,i);\n",
       "            tricount += (facet.length-2)*3;\n",
       "        }\n",
       "    }\n",
       "    var mesh = new THREE.Mesh(geometry, materials);\n",
       "    mesh.name = \"faces\";\n",
       "    obj.add(mesh); \n",
       "    updateFacesPosition(obj);\n",
       "}\n",
       "// //INITIALIZING\n",
       "\n",
       "\n",
       "function updateFacesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.triangleindices;\n",
       "    var faces = obj.getObjectByName(\"faces\");\n",
       "    var ba = faces.geometry.getAttribute(\"position\");\n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    faces.geometry.attributes.position.needsUpdate = true;\n",
       "    \n",
       "}\n",
       "\n",
       "function updateEdgesPosition(obj) {\n",
       "    var points = obj.userData.points;\n",
       "    var indices = obj.userData.edgeindices;\n",
       "    var lines = obj.getObjectByName(\"lines\");\n",
       "    var ba = lines.geometry.getAttribute(\"position\"); \n",
       "    for (var i=0; i<indices.length; i++) {\n",
       "        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); \n",
       "    }\n",
       "    lines.geometry.attributes.position.needsUpdate = true;\n",
       "}\n",
       "\n",
       "function onWindowResize() {\n",
       "    renderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    svgRenderer.setSize( three.clientWidth, three.clientHeight );\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "function updateCamera() {\n",
       "    var width = three.clientWidth;\n",
       "    var height = three.clientHeight;\n",
       "    var aspect = width / height;\n",
       "    if (camera.type == \"OrthographicCamera\") {\n",
       "        camera.left = frustumSize * aspect / - 2;\n",
       "        camera.right = frustumSize * aspect / 2;\n",
       "        camera.top = frustumSize / 2;\n",
       "        camera.bottom = - frustumSize / 2;\n",
       "    } else if (camera.type == \"PerspectiveCamera\") {\n",
       "        camera.aspect = aspect;\n",
       "    }\n",
       "    camera.updateProjectionMatrix();\n",
       "}\n",
       "\n",
       "function changeCamera(event) {\n",
       "    var selindex = event.currentTarget.selectedIndex;\n",
       "    camera = cameras[selindex];\n",
       "    control = controls[selindex];\n",
       "    control.enabled = true; \n",
       "    for (var i=0; i<controls.length; i++) {\n",
       "        if (i!=selindex) {\n",
       "            controls[i].enabled = false;\n",
       "        }\n",
       "    }\n",
       "    updateCamera();\n",
       "}\n",
       "\n",
       "var camtypenode = document.getElementById('cameraType_11');\n",
       "camtypenode.onchange = changeCamera;\n",
       "camtypenode.dispatchEvent(new Event('change'));\n",
       "\n",
       "onWindowResize();\n",
       "window.addEventListener('resize', onWindowResize);\t\n",
       "\n",
       "\n",
       "var xRotationEnabled = false;\n",
       "var yRotationEnabled = false;\n",
       "var zRotationEnabled = false;\n",
       "var rotationSpeedFactor = 1;\n",
       "var settingsShown = false;\n",
       "var labelsShown = true;\n",
       "var intervals = [];\n",
       "var timeouts = [];\n",
       "var explodingSpeed = 0.05;\n",
       "var explodeScale = 0;\n",
       "var XMLS = new XMLSerializer();\n",
       "var svgElement;\n",
       "var renderId;\n",
       "\n",
       "var render = function () {\n",
       "\n",
       "\trenderId = requestAnimationFrame(render);\n",
       "\n",
       "//\tcomment in for automatic explosion\n",
       "//\texplode(updateFactor());\n",
       "\n",
       "    var phi = 0.02 * rotationSpeedFactor;\n",
       "\n",
       "    if (xRotationEnabled) {\n",
       "        scene.rotation.x += phi;\n",
       "    }\n",
       "    if (yRotationEnabled) {\n",
       "        scene.rotation.y += phi;\n",
       "    }\n",
       "    if (zRotationEnabled) {\n",
       "        scene.rotation.z += phi;\n",
       "    }\n",
       "\n",
       "    control.update();\n",
       "    renderer.render(scene, camera);\n",
       "};\n",
       "\n",
       "if ( THREE.WEBGL.isWebGLAvailable() ) {\n",
       "\trender();\n",
       "} else {\n",
       "\tvar warning = WEBGL.getWebGLErrorMessage();\n",
       "\tthree.appendChild( warning );\n",
       "}\n",
       "    \n",
       "function changeTransparency() {\n",
       "    var opacity = 1-Number(event.currentTarget.value);\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        child = scene.children[i];\n",
       "        if ( child.userData.hasOwnProperty(\"facetmaterial\") ) {\n",
       "            if (Array.isArray(child.userData.facetmaterial)) {\n",
       "                for (var j=0; j<child.userData.facetmaterial.length; j++) {\n",
       "                    child.userData.facetmaterial[j].opacity = opacity;\n",
       "                }\n",
       "            } else {\n",
       "                child.userData.facetmaterial.opacity = opacity;\n",
       "            }    \n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function changeRotationX(event){\n",
       "    xRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationY(event){\n",
       "    yRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "function changeRotationZ(event){\n",
       "    zRotationEnabled = event.currentTarget.checked;\n",
       "}\t\n",
       "\n",
       "\n",
       "function changeRotationSpeedFactor(event){\n",
       "    rotationSpeedFactor = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function resetScene(){\n",
       "    scene.rotation.set(0,0,0);\n",
       "    camera.position.set(0,0,5);\n",
       "    camera.up.set(0,1,0);\n",
       "}\n",
       "\n",
       "function showSettings(event){\n",
       "    document.getElementById('settings_11').style.visibility = 'visible';\n",
       "    document.getElementById('showSettingsButton_11').style.visibility = 'hidden';\n",
       "    document.getElementById('hideSettingsButton_11').style.visibility = 'visible';\n",
       "    settingsShown = true;\n",
       "}\n",
       "\n",
       "function hideSettings(event){\n",
       "    document.getElementById('settings_11').style.visibility = 'hidden';\n",
       "    document.getElementById('showSettingsButton_11').style.visibility = 'visible';\n",
       "    document.getElementById('hideSettingsButton_11').style.visibility = 'hidden';\n",
       "    settingsShown = false;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "var pos = 150* Math.PI;\n",
       "\n",
       "function updateFactor() {\n",
       "    pos++;\n",
       "    return Math.sin(.01*pos)+1;\n",
       "}\n",
       "\n",
       "// ------------------------ FOLDING ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "// rotate point p around axis defined by points p1 and p2 by given angle\n",
       "function rotate(p, p1, p2, angle ){   \n",
       "    angle = -angle;\n",
       "    var x = p.x, y = p.y, z = p.z, \n",
       "    a = p1.x, b = p1.y, c = p1.z, \n",
       "    u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z;\n",
       "    var result = [];\n",
       "    var L = u*u + v*v + w*w;\n",
       "    var sqrt = Math.sqrt;\n",
       "    var cos = Math.cos;\n",
       "    var sin = Math.sin;\n",
       "\n",
       "    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;\n",
       "    result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L;\n",
       "    result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L;\n",
       "\n",
       "    return result;\n",
       "}\n",
       "\n",
       "var fold = function(event){\n",
       "    var obj = foldables[Number(event.currentTarget.name)];\n",
       "    var foldvalue = Number(event.currentTarget.value);\n",
       "    var scale = foldvalue - obj.userData.oldscale;\n",
       "\n",
       "    for (var j=0; j<obj.userData.axes.length; j++) {\n",
       "        rotateVertices(obj, j, scale);\n",
       "    }\n",
       "    update(obj);\n",
       "    obj.userData.oldscale += scale;\n",
       "    lookAtBarycenter(obj);\n",
       "}\n",
       "\n",
       "function lookAtBarycenter(obj){\n",
       "    control.target = barycenter(obj);\n",
       "}\n",
       "\n",
       "function barycenter(obj) {\n",
       "    var center = new THREE.Vector3(0,0,0);\n",
       "    var points = obj.userData.points;\n",
       "    for (var i=0; i<points.length; i++){\n",
       "        center.add(points[i].vector);\n",
       "    }\n",
       "    center.divideScalar(points.length);\n",
       "    return center;\n",
       "}\n",
       "\n",
       "function rotateVertices(obj, edge, scale) {\n",
       "    var axes = obj.userData.axes;\n",
       "    var subtrees = obj.userData.subtrees;\n",
       "    var points = obj.userData.points;\n",
       "    var angles = obj.userData.angles;\n",
       "    if (edge < axes.length){\n",
       "        for (var j=0; j<subtrees[edge].length; j++){\n",
       "            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));\n",
       "            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function update(obj) {\n",
       "   updateFacesPosition(obj);\n",
       "   updateEdgesPosition(obj);\n",
       "}\n",
       "\n",
       "if (foldables.length) {\n",
       "    var settings = document.getElementById('settings_11');\n",
       "    var foldDiv = document.createElement('div');\n",
       "    foldDiv.id = 'fold_11';\n",
       "    var title = document.createElement('strong');\n",
       "    title.innerHTML = 'Fold';\n",
       "    foldDiv.appendChild(title);\n",
       "    foldDiv.className = 'group';\n",
       "    for (var i=0; i<foldables.length; i++) {\n",
       "        var range = document.createElement('input');\n",
       "        range.type = 'range';\n",
       "        range.min = 0;\n",
       "        range.max = 1;\n",
       "        range.value = 0;\n",
       "        range.step = 0.001;\n",
       "        range.name = String(i);\n",
       "        range.oninput = fold;\n",
       "        foldDiv.appendChild(range);\n",
       "    }\n",
       "    lookAtBarycenter(foldables[0]);\n",
       "    settings.insertBefore(foldDiv,settings.childNodes[0]);\n",
       "}\n",
       "\n",
       "    \n",
       "// ---------------------- EXPLOSION ------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "if (explodableModel) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        obj = scene.children[i];\n",
       "        if ( obj.userData.explodable ) {\n",
       "            computeCentroid(obj);\n",
       "        }\n",
       "    }\n",
       "    document.getElementById('explodeRange_11').oninput = triggerExplode;\n",
       "    document.getElementById('explodeCheckbox_11').onchange = triggerAutomaticExplode;\n",
       "    document.getElementById('explodingSpeedRange_11').oninput = setExplodingSpeed;\n",
       "}\n",
       "\n",
       "function computeCentroid(obj) {\n",
       "    centroid = new THREE.Vector3();\n",
       "    obj.userData.points.forEach(function(pmpoint) {\n",
       "        centroid.add(pmpoint.vector);\t\t\t\n",
       "    });\n",
       "    centroid.divideScalar(obj.userData.points.length);\n",
       "    obj.userData.centroid = centroid;\n",
       "}\n",
       "\n",
       "function explode(factor) {\n",
       "    for (var i=0; i<scene.children.length; i++) {\n",
       "        var obj = scene.children[i];\n",
       "        if (obj.userData.hasOwnProperty(\"centroid\")) { \n",
       "            var c = obj.userData.centroid;\n",
       "            obj.position.set(c.x*factor, c.y*factor, c.z*factor);\n",
       "        }\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function triggerExplode(event){\n",
       "    explodeScale = Number(event.currentTarget.value);\n",
       "    explode(explodeScale);\n",
       "}\n",
       "\n",
       "function setExplodingSpeed(event){\n",
       "    explodingSpeed = Number(event.currentTarget.value);\n",
       "}\n",
       "\n",
       "function triggerAutomaticExplode(event){\n",
       "    if (event.currentTarget.checked){\n",
       "        startExploding();\n",
       "    } else {\n",
       "        clearIntervals();\n",
       "    }\t\n",
       "}\n",
       "\n",
       "function startExploding(){\n",
       "    intervals.push(setInterval(explodingInterval, 25));\n",
       "}\n",
       "\n",
       "\n",
       "function explodingInterval(){\n",
       "    explodeScale += explodingSpeed;\n",
       "    if (explodeScale <= 6){ \n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else{\n",
       "        explode(6);\n",
       "        explodeScale = 6;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startUnexploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_11').value = explodeScale;\n",
       "}\n",
       "\n",
       "\n",
       "function startUnexploding(){\n",
       "    intervals.push(setInterval(unexplodingInterval, 25));\n",
       "}\n",
       "\n",
       "function unexplodingInterval(){\n",
       "    explodeScale -= explodingSpeed;\n",
       "    if (explodeScale >= 0){\t\n",
       "        explode(explodeScale);\n",
       "    }\n",
       "    else {\n",
       "        explode(0);\n",
       "        explodeScale = 0;\n",
       "        clearIntervals();\n",
       "        timeouts.push(setTimeout(startExploding, 3000));\n",
       "    }\n",
       "    document.getElementById('explodeRange_11').value = explodeScale;\n",
       "}\n",
       "\n",
       "function clearIntervals(){\n",
       "    intervals.forEach(function(interval){\n",
       "        clearInterval(interval);\n",
       "    });\n",
       "    intervals = [];\n",
       "    timeouts.forEach(function(timeout){\n",
       "        clearTimeout(timeout);\n",
       "    });\n",
       "    timeouts = [];\n",
       "}\n",
       "\n",
       "// ---------------------- DISPLAY --------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "const objectTypeInnerHTMLs = { points: \"Points\", pointlabels: \"Point labels\", lines: \"Edges\", edgelabels: \"Edge labels\", faces: \"Faces\", arrowheads: \"Arrow heads\" };\n",
       "const objectTypeVisible = {};\n",
       "Object.assign(objectTypeVisible,modelContains);\n",
       "const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();\n",
       "const shownObjectTypesList = document.getElementById('shownObjectTypesList_11');\n",
       "\n",
       "function setVisibility(bool,objname) {\n",
       "    for (var i=0; i<scene.children.length; i++){\n",
       "        var obj = scene.children[i].getObjectByName(objname);\n",
       "        if (obj) {\n",
       "            obj.visible = bool;\n",
       "        }\n",
       "    }\n",
       "}\n",
       "\n",
       "function toggleObjectTypeVisibility(event){\n",
       "    var name = event.currentTarget.name;\n",
       "    var checked = event.currentTarget.checked;\n",
       "    objectTypeVisible[name] = checked;\n",
       "    setVisibility(checked,name);\n",
       "}\n",
       "\n",
       "for (var i=0; i<sortedObjectTypeKeys.length; i++){\n",
       "    var key = sortedObjectTypeKeys[i];\n",
       "    if (modelContains[key]) {\n",
       "        var objTypeNode = document.createElement('span');\n",
       "        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';\n",
       "        var checkbox = document.createElement('input');\n",
       "        checkbox.type = 'checkbox';\n",
       "        checkbox.checked = true;\n",
       "        checkbox.name = key;\n",
       "        checkbox.onchange = toggleObjectTypeVisibility;\n",
       "        shownObjectTypesList.appendChild(checkbox);\n",
       "        shownObjectTypesList.appendChild(objTypeNode);\n",
       "    }\n",
       "}\n",
       "\n",
       "// ------------------------------------------------------\n",
       "\n",
       "function toggleObjectVisibility(event){\n",
       "    var nr = Number(event.currentTarget.name);\n",
       "    scene.children[nr].visible = event.currentTarget.checked;\n",
       "}\n",
       "\n",
       "// append checkboxes for displaying or hiding objects\n",
       "var shownObjectsList = document.getElementById('shownObjectsList_11');\n",
       "for (var i=0; i<scene.children.length; i++){\n",
       "    obj = scene.children[i];\n",
       "    var objNode = document.createElement('span');\n",
       "    objNode.innerHTML = obj.name + '<br>';\n",
       "    var checkbox = document.createElement('input');\n",
       "    checkbox.type = 'checkbox';\n",
       "    checkbox.checked = true;\n",
       "    checkbox.name = String(i);\n",
       "    checkbox.onchange = toggleObjectVisibility;\n",
       "    shownObjectsList.appendChild(checkbox);\n",
       "    shownObjectsList.appendChild(objNode);\n",
       "}\n",
       "\n",
       "// ---------------------- SVG ------------------------------------------------------\n",
       "// ---------------------------------------------------------------------------------\n",
       "\n",
       "function takeSvgScreenshot() {\n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(false,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(false,\"edgelabels\");\n",
       "    }\n",
       "    svgRenderer.render(scene,camera);\n",
       "    svgElement = XMLS.serializeToString(svgRenderer.domElement);\n",
       "    \n",
       "    if (objectTypeVisible[\"pointlabels\"]) {\n",
       "        setVisibility(true,\"pointlabels\");\n",
       "    }\n",
       "    if (objectTypeVisible[\"edgelabels\"]) {\n",
       "        setVisibility(true,\"edgelabels\");\n",
       "    }\n",
       "\n",
       "    if (document.getElementById('tab_11').checked){\n",
       "        //show in new tab\n",
       "        var myWindow = window.open(\"\",\"\");\n",
       "        myWindow.document.body.innerHTML = svgElement;\n",
       "    } else{\n",
       "        // download svg file \n",
       "        download(\"screenshot.svg\", svgElement);\n",
       "    }\n",
       "}\n",
       "\n",
       "function download(filename, text) {\n",
       "    var element = document.createElement('a');\n",
       "    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));\n",
       "    element.setAttribute('download', filename);\n",
       "\n",
       "    element.style.display = 'none';\n",
       "    document.body.appendChild(element);\n",
       "\n",
       "    element.click();\n",
       "\n",
       "    document.body.removeChild(element);\n",
       "}\n",
       "\n",
       "\n",
       "document.getElementById('transparencyRange_11').oninput = changeTransparency;\n",
       "document.getElementById('changeRotationX_11').onchange = changeRotationX;\n",
       "document.getElementById('changeRotationY_11').onchange = changeRotationY;\n",
       "document.getElementById('changeRotationZ_11').onchange = changeRotationZ;\n",
       "document.getElementById('resetButton_11').onclick = resetScene;\n",
       "document.getElementById('rotationSpeedRange_11').oninput = changeRotationSpeedFactor;\n",
       "document.getElementById('takeScreenshot_11').onclick = takeSvgScreenshot;\n",
       "document.getElementById('showSettingsButton_11').onclick = showSettings;\n",
       "document.getElementById('hideSettingsButton_11').onclick = hideSettings;\n",
       "\n",
       "\n",
       "// ------------------ SHORTCUTS --------------------------------------------\n",
       "// -------------------------------------------------------------------------\n",
       "\n",
       "/**\n",
       " * http://www.openjs.com/scripts/events/keyboard_shortcuts/\n",
       " * Version : 2.01.B\n",
       " * By Binny V A\n",
       " * License : BSD\n",
       " */\n",
       "shortcut = {\n",
       "\t'all_shortcuts':{},//All the shortcuts are stored in this array\n",
       "\t'add': function(shortcut_combination,callback,opt) {\n",
       "\t\t//Provide a set of default options\n",
       "\t\tvar default_options = {\n",
       "\t\t\t'type':'keydown',\n",
       "\t\t\t'propagate':false,\n",
       "\t\t\t'disable_in_input':false,\n",
       "\t\t\t'target':document,\n",
       "\t\t\t'keycode':false\n",
       "\t\t}\n",
       "\t\tif(!opt) opt = default_options;\n",
       "\t\telse {\n",
       "\t\t\tfor(var dfo in default_options) {\n",
       "\t\t\t\tif(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\n",
       "\t\tvar ele = opt.target;\n",
       "\t\tif(typeof opt.target == 'string') ele = document.getElementById(opt.target);\n",
       "\t\tvar ths = this;\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\n",
       "\t\t//The function to be called at keypress\n",
       "\t\tvar func = function(e) {\n",
       "\t\t\te = e || window.event;\n",
       "\t\t\t\n",
       "\t\t\tif(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields\n",
       "\t\t\t\tvar element;\n",
       "\t\t\t\tif(e.target) element=e.target;\n",
       "\t\t\t\telse if(e.srcElement) element=e.srcElement;\n",
       "\t\t\t\tif(element.nodeType==3) element=element.parentNode;\n",
       "\n",
       "\t\t\t\tif(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\t//Find Which key is pressed\n",
       "\t\t\tif (e.keyCode) code = e.keyCode;\n",
       "\t\t\telse if (e.which) code = e.which;\n",
       "\t\t\tvar character = String.fromCharCode(code).toLowerCase();\n",
       "\t\t\t\n",
       "\t\t\tif(code == 188) character=\",\"; //If the user presses , when the type is onkeydown\n",
       "\t\t\tif(code == 190) character=\".\"; //If the user presses , when the type is onkeydown\n",
       "\n",
       "\t\t\tvar keys = shortcut_combination.split(\"+\");\n",
       "\t\t\t//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked\n",
       "\t\t\tvar kp = 0;\n",
       "\t\t\t\n",
       "\t\t\t//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken\n",
       "\t\t\tvar shift_nums = {\n",
       "\t\t\t\t\"`\":\"~\",\n",
       "\t\t\t\t\"1\":\"!\",\n",
       "\t\t\t\t\"2\":\"@\",\n",
       "\t\t\t\t\"3\":\"#\",\n",
       "\t\t\t\t\"4\":\"$\",\n",
       "\t\t\t\t\"5\":\"%\",\n",
       "\t\t\t\t\"6\":\"^\",\n",
       "\t\t\t\t\"7\":\"&\",\n",
       "\t\t\t\t\"8\":\"*\",\n",
       "\t\t\t\t\"9\":\"(\",\n",
       "\t\t\t\t\"0\":\")\",\n",
       "\t\t\t\t\"-\":\"_\",\n",
       "\t\t\t\t\"=\":\"+\",\n",
       "\t\t\t\t\";\":\":\",\n",
       "\t\t\t\t\"'\":\"\\\"\",\n",
       "\t\t\t\t\",\":\"<\",\n",
       "\t\t\t\t\".\":\">\",\n",
       "\t\t\t\t\"/\":\"?\",\n",
       "\t\t\t\t\"\\\\\":\"|\"\n",
       "\t\t\t}\n",
       "\t\t\t//Special Keys - and their codes\n",
       "\t\t\tvar special_keys = {\n",
       "\t\t\t\t'esc':27,\n",
       "\t\t\t\t'escape':27,\n",
       "\t\t\t\t'tab':9,\n",
       "\t\t\t\t'space':32,\n",
       "\t\t\t\t'return':13,\n",
       "\t\t\t\t'enter':13,\n",
       "\t\t\t\t'backspace':8,\n",
       "\t\n",
       "\t\t\t\t'scrolllock':145,\n",
       "\t\t\t\t'scroll_lock':145,\n",
       "\t\t\t\t'scroll':145,\n",
       "\t\t\t\t'capslock':20,\n",
       "\t\t\t\t'caps_lock':20,\n",
       "\t\t\t\t'caps':20,\n",
       "\t\t\t\t'numlock':144,\n",
       "\t\t\t\t'num_lock':144,\n",
       "\t\t\t\t'num':144,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pause':19,\n",
       "\t\t\t\t'break':19,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'insert':45,\n",
       "\t\t\t\t'home':36,\n",
       "\t\t\t\t'delete':46,\n",
       "\t\t\t\t'end':35,\n",
       "\t\t\t\t\n",
       "\t\t\t\t'pageup':33,\n",
       "\t\t\t\t'page_up':33,\n",
       "\t\t\t\t'pu':33,\n",
       "\t\n",
       "\t\t\t\t'pagedown':34,\n",
       "\t\t\t\t'page_down':34,\n",
       "\t\t\t\t'pd':34,\n",
       "\t\n",
       "\t\t\t\t'left':37,\n",
       "\t\t\t\t'up':38,\n",
       "\t\t\t\t'right':39,\n",
       "\t\t\t\t'down':40,\n",
       "\t\n",
       "\t\t\t\t'f1':112,\n",
       "\t\t\t\t'f2':113,\n",
       "\t\t\t\t'f3':114,\n",
       "\t\t\t\t'f4':115,\n",
       "\t\t\t\t'f5':116,\n",
       "\t\t\t\t'f6':117,\n",
       "\t\t\t\t'f7':118,\n",
       "\t\t\t\t'f8':119,\n",
       "\t\t\t\t'f9':120,\n",
       "\t\t\t\t'f10':121,\n",
       "\t\t\t\t'f11':122,\n",
       "\t\t\t\t'f12':123\n",
       "\t\t\t}\n",
       "\t\n",
       "\t\t\tvar modifiers = { \n",
       "\t\t\t\tshift: { wanted:false, pressed:false},\n",
       "\t\t\t\tctrl : { wanted:false, pressed:false},\n",
       "\t\t\t\talt  : { wanted:false, pressed:false},\n",
       "\t\t\t\tmeta : { wanted:false, pressed:false}\t//Meta is Mac specific\n",
       "\t\t\t};\n",
       "                        \n",
       "\t\t\tif(e.ctrlKey)\tmodifiers.ctrl.pressed = true;\n",
       "\t\t\tif(e.shiftKey)\tmodifiers.shift.pressed = true;\n",
       "\t\t\tif(e.altKey)\tmodifiers.alt.pressed = true;\n",
       "\t\t\tif(e.metaKey)   modifiers.meta.pressed = true;\n",
       "                        \n",
       "\t\t\tfor(var i=0; k=keys[i],i<keys.length; i++) {\n",
       "\t\t\t\t//Modifiers\n",
       "\t\t\t\tif(k == 'ctrl' || k == 'control') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.ctrl.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'shift') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.shift.wanted = true;\n",
       "\n",
       "\t\t\t\t} else if(k == 'alt') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.alt.wanted = true;\n",
       "\t\t\t\t} else if(k == 'meta') {\n",
       "\t\t\t\t\tkp++;\n",
       "\t\t\t\t\tmodifiers.meta.wanted = true;\n",
       "\t\t\t\t} else if(k.length > 1) { //If it is a special key\n",
       "\t\t\t\t\tif(special_keys[k] == code) kp++;\n",
       "\t\t\t\t\t\n",
       "\t\t\t\t} else if(opt['keycode']) {\n",
       "\t\t\t\t\tif(opt['keycode'] == code) kp++;\n",
       "\n",
       "\t\t\t\t} else { //The special keys did not match\n",
       "\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\telse {\n",
       "\t\t\t\t\t\tif(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase\n",
       "\t\t\t\t\t\t\tcharacter = shift_nums[character]; \n",
       "\t\t\t\t\t\t\tif(character == k) kp++;\n",
       "\t\t\t\t\t\t}\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t\t\n",
       "\t\t\tif(kp == keys.length && \n",
       "\t\t\t\t\t\tmodifiers.ctrl.pressed == modifiers.ctrl.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.shift.pressed == modifiers.shift.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.alt.pressed == modifiers.alt.wanted &&\n",
       "\t\t\t\t\t\tmodifiers.meta.pressed == modifiers.meta.wanted) {\n",
       "\t\t\t\tcallback(e);\n",
       "\t\n",
       "\t\t\t\tif(!opt['propagate']) { //Stop the event\n",
       "\t\t\t\t\t//e.cancelBubble is supported by IE - this will kill the bubbling process.\n",
       "\t\t\t\t\te.cancelBubble = true;\n",
       "\t\t\t\t\te.returnValue = false;\n",
       "\t\n",
       "\t\t\t\t\t//e.stopPropagation works in Firefox.\n",
       "\t\t\t\t\tif (e.stopPropagation) {\n",
       "\t\t\t\t\t\te.stopPropagation();\n",
       "\t\t\t\t\t\te.preventDefault();\n",
       "\t\t\t\t\t}\n",
       "\t\t\t\t\treturn false;\n",
       "\t\t\t\t}\n",
       "\t\t\t}\n",
       "\t\t}\n",
       "\t\tthis.all_shortcuts[shortcut_combination] = {\n",
       "\t\t\t'callback':func, \n",
       "\t\t\t'target':ele, \n",
       "\t\t\t'event': opt['type']\n",
       "\t\t};\n",
       "\t\t//Attach the function with the event\n",
       "\t\tif(ele.addEventListener) ele.addEventListener(opt['type'], func, false);\n",
       "\t\telse if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);\n",
       "\t\telse ele['on'+opt['type']] = func;\n",
       "\t},\n",
       "\n",
       "\t//Remove the shortcut - just specify the shortcut and I will remove the binding\n",
       "\t'remove':function(shortcut_combination) {\n",
       "\t\tshortcut_combination = shortcut_combination.toLowerCase();\n",
       "\t\tvar binding = this.all_shortcuts[shortcut_combination];\n",
       "\t\tdelete(this.all_shortcuts[shortcut_combination])\n",
       "\t\tif(!binding) return;\n",
       "\t\tvar type = binding['event'];\n",
       "\t\tvar ele = binding['target'];\n",
       "\t\tvar callback = binding['callback'];\n",
       "\n",
       "\t\tif(ele.detachEvent) ele.detachEvent('on'+type, callback);\n",
       "\t\telse if(ele.removeEventListener) ele.removeEventListener(type, callback, false);\n",
       "\t\telse ele['on'+type] = false;\n",
       "\t}\n",
       "}\n",
       "\n",
       "shortcut.add(\"Alt+Left\",function() {\n",
       "\tvar event = new Event('click');\n",
       "\tif (settingsShown){\n",
       "\t\tdocument.getElementById('hideSettingsButton_11').dispatchEvent(event);\n",
       "\t} else {\n",
       "\t\tdocument.getElementById('showSettingsButton_11').dispatchEvent(event);\n",
       "\t}\n",
       "});\n",
       "\n",
       "\n",
       "// COMMON_CODE_BLOCK_END\n",
       "\n",
       "});});\n",
       "      </script>\n",
       "   </body>\n",
       "</html>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "$c1=cube(3,0);\n",
    "$c2=transform($c1,new Matrix<Rational>([[1,-1,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]]));\n",
    "compose($c1->VISUAL,$c2->VISUAL);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "\n",
    "If `JavaView` is used for visualization then `Method:Effect:Explode Group of Geometries...` allows to show an explosion.\n",
    "\n",
    "## application topaz\n",
    "\n",
    "For information on how to visualize simlicial complexes and other topology-related objects, see [here](apps_topaz.ipynb#Visualization).\n",
    "\n",
    "## Backends\n",
    "\n",
    "'polymake' provides different visualization backends: threejs, svg, jReality, JavaView, povray, postscript and even TikZ and Sketch are supported.\n",
    "### TikZ and Sketch\n",
    "\n",
    "Sketch is a script language which produces TikZ output. It is quite sophisticated. There is a interface from polymake to Sketch.\n",
    "\n",
    "    :::perl\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<details><summary><pre style=\"display:inline\"><small>Click here for additional output</small></pre></summary>\n",
       "<pre>\n",
       "polymake: used package sketch\n",
       "  Free Graphics Software for the TeX, LaTeX, and PSTricks Community\n",
       "  http://www.frontiernet.net/~eugene.ressler/\n",
       "\n",
       "</pre>\n",
       "</details>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "$my_polytope = cube(3);\n",
    "sketch($my_polytope->VISUAL,File=>\"myfile.sketch\");"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "When you downloaded the Sketch interpreter ([link](http://sketch4latex.sourceforge.net/)) you can use it to create your TikZ file via:\n",
    "\n",
    "    :::perl\n",
    "    sketch myfile.sketch > myfile.tikz\n",
    "\n",
    "\n",
    "The drawback is that the produced TikZ code is quite cryptic and not really readable or editable anymore. If you do want to create TikZ code which is easier to edit afterwards, you might want to use polymake's TikZ interface via:\n",
    "\n",
    "    :::perl\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<details><summary><pre style=\"display:inline\"><small>Click here for additional output</small></pre></summary>\n",
       "<pre>\n",
       "polymake: used package tikz\n",
       "  TikZ, a graphical toolkit for LaTeX.\n",
       "  http://pgf.sourceforge.net.\n",
       "\n",
       "</pre>\n",
       "</details>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "tikz($my_polytope->VISUAL,File=>\"myfile.tikz\");"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "For a different viewing angle you may use jReality. Rotate the polytope into the position you want and click the `'save view`' button on the bottom of the jReality window. Then produce the TikZ or Sketch output.\n",
    "\n",
    "### jReality\n",
    "\n",
    "The jReality viewer offers a versatile perspective for your favourite tools on 4 Panel which may be enabled/disabled on the toolbar or using\n",
    "the keyboard shortcuts Alt+Shift+(Up|Down|Left|Right) or the window menu. The \"Visualization\", \"Split geometries\", \"Content Appearance\",\n",
    "and \"Navigator\" Plugin(usually in the Left- resp. Right-Slot) may be used to change the appearance of the displayed geometry. How to achieve your desired parameters is explained in the following section.\n",
    "\n",
    "\n",
    "#### Appearance\n",
    "\n",
    "There are several objects which control the appearance of a geometry in jreality:\n",
    "\n",
    " 1.  geometry attributes,\n",
    " 2.  appearances at a specific scene graph nodes, and\n",
    " 3.  the content appearance.\n",
    "\n",
    "The most versatile point to set different parameters for the appearance is via geometry attributes. This is needed, for example, if every vertex of the displayed\n",
    "geometry should have its own thickness or color like in VISUAL_GRAPH->VERTEX_COLORS. These may only be edited via jreality's bean-shell, which requires\n",
    "knowledge of the jreality API and in particular the attribute handling.\n",
    "\n",
    "An appearance at a scene graph node (every VISUAL object is put into one of these) may have its own appearance which stores single values for colors/thicknesses\n",
    "of vertices/edges/faces. Hence this does not allow, e.g., to assign a different color to each vertex. But editing is a little easier, since it is possible to use jreality's \n",
    "navigator. The navigator displays the entire scene graph. The polymake part of the scene graph starts with \"root->content->Polymake Root\". The VISUALs are stored\n",
    "in separate geometry nodes with its appearances. In each of the appearance you find the RenderingHints and Shader that either inherit properties of the content \n",
    "appearance or override them with their own values. This is already much less tedious than using the beanshell.\n",
    "\n",
    "The content appearance comes into play if no other appearances exist in the content subtree, i.e. neither specific node appearances nor geometry attributes. The\n",
    "sizes/thicknesses set in the content appearance are multiplied with the values of the specified values deeper in the tree, but colors will only apply if nothing else is\n",
    "set.\n",
    "\n",
    "So to be able to change the colors of the faces/edges/vertices of the geometry using the content appearance you need to get rid settings in the other appearances \n",
    "and geometry attributes. This may be done using the \"clear attributes\" and \"clear appearance\" item of the polymake menu.\n",
    "\n",
    "#### Save View\n",
    "\n",
    "Clicking the \"Save View\" button on the bottom of the jReality window attaches a \"ViewTransformation\" matrix to your object (read [this](reference/clients#attachments) if you don't know how attachments work). It contains the transformaiton necessary to convert the coordinates of your object to the coordinates of the (possibly rotated, translated etc. by you in the interactive visualization) object as you currently see it. This information is then used by jReality and Sketch to display the object in exactly that way if you visualize it the next time.\n",
    "\n",
    "\n",
    "\n",
    "\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "polymake",
   "language": "polymake",
   "name": "polymake"
  },
  "language_info": {
   "codemirror_mode": "perl",
   "file_extension": ".pl",
   "mimetype": "text/x-polymake",
   "name": "polymake"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
