TestJavascriptRender.ipynb

TestJavascriptRender.ipynb

{
  "cells": [
    {
      "metadata": {
        "trusted": true
      },
      "cell_type": "code",
      "source": "%%javascript\n\nrequire.config({paths: {Algebra: 'https://unpkg.com/ganja.js@1.0.99/ganja'}});\nrequire(['Algebra'],function(Algebra){add_graph_to_notebook(Algebra)});\n\nfunction add_graph_to_notebook(Algebra){\n    var output = Algebra(2,0,1,()=>{\n\n            // We work in dual space so we define our points to be bivectors. Ganja.js overloads scientific notation to specify basis blades.\n            // For readability we create a function that converts 2D euclidean coordinates to their 3D bivector representation.\n            var point = (x,y)=>1e12-x*1e02+y*1e01;    \n\n            // Similarly, we can define lines directly. The euclidean line ax + by + c can be specified so :\n            var line = (a,b,c)=>a*1e1+b*1e2+c*1e0;\n\n            // Define 3 points.\n            var A=point(-1,1), B=point(-1,-1), C=point(1,-1); \n\n            // Define the line y=x-0.5\n            var L=line(-1,1,0.5)\n\n            // Or by joining two points. We define M as a function so it will update when C or A are dragged.\n            var M=()=>C&A;\n\n            // Points can also be found by intersecting two lines. We similarly define D as a function for interactive updates. \n            var D=()=>L^M;\n            \n            // We now use the graph function to create an SVG object that visualises our algebraic elements. The graph function accepts\n            // an array of items that it will render in order. It can render points, lines, labels, colors, line segments and polygons.\n            return this.graph([\n                A, 'A',         // Render point A and label it.\n                B, 'B',         // Render point B and label it.\n                C, 'C',         // Render point C and label them.\n                L, 'L', M, 'M', // Render and label lines.\n                D, 'D',         // Intersection point of L and M\n                0xff0000,       // Set the color to red.\n                [B,C],          // Render line segment from B to C. \n                0xffcccc,       // Set the color to light red.\n                [A,B,C]         // render polygon ABC.\n            ],{grid:true});\n            \n        });\n    \n    console.log(output);\n    element.append(output)\n}\n    \n",
      "execution_count": 1,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "application/javascript": "\nrequire.config({paths: {Algebra: 'https://unpkg.com/ganja.js@1.0.99/ganja'}});\nrequire(['Algebra'],function(Algebra){add_graph_to_notebook(Algebra)});\n\nfunction add_graph_to_notebook(Algebra){\n    var output = Algebra(2,0,1,()=>{\n\n            // We work in dual space so we define our points to be bivectors. Ganja.js overloads scientific notation to specify basis blades.\n            // For readability we create a function that converts 2D euclidean coordinates to their 3D bivector representation.\n            var point = (x,y)=>1e12-x*1e02+y*1e01;    \n\n            // Similarly, we can define lines directly. The euclidean line ax + by + c can be specified so :\n            var line = (a,b,c)=>a*1e1+b*1e2+c*1e0;\n\n            // Define 3 points.\n            var A=point(-1,1), B=point(-1,-1), C=point(1,-1); \n\n            // Define the line y=x-0.5\n            var L=line(-1,1,0.5)\n\n            // Or by joining two points. We define M as a function so it will update when C or A are dragged.\n            var M=()=>C&A;\n\n            // Points can also be found by intersecting two lines. We similarly define D as a function for interactive updates. \n            var D=()=>L^M;\n            \n            // We now use the graph function to create an SVG object that visualises our algebraic elements. The graph function accepts\n            // an array of items that it will render in order. It can render points, lines, labels, colors, line segments and polygons.\n            return this.graph([\n                A, 'A',         // Render point A and label it.\n                B, 'B',         // Render point B and label it.\n                C, 'C',         // Render point C and label them.\n                L, 'L', M, 'M', // Render and label lines.\n                D, 'D',         // Intersection point of L and M\n                0xff0000,       // Set the color to red.\n                [B,C],          // Render line segment from B to C. \n                0xffcccc,       // Set the color to light red.\n                [A,B,C]         // render polygon ABC.\n            ],{grid:true});\n            \n        });\n    \n    console.log(output);\n    element.append(output)\n}\n    \n",
            "text/plain": "<IPython.core.display.Javascript object>"
          },
          "metadata": {}
        }
      ]
    },
    {
      "metadata": {
        "trusted": true
      },
      "cell_type": "code",
      "source": "",
      "execution_count": null,
      "outputs": []
    },
    {
      "metadata": {
        "trusted": true
      },
      "cell_type": "code",
      "source": "",
      "execution_count": null,
      "outputs": []
    }
  ],
  "metadata": {
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3",
      "language": "python"
    },
    "gist": {
      "id": "7c42d6944b154ba8d73f07059964c730",
      "data": {
        "description": "TestJavascriptRender.ipynb",
        "public": true
      }
    },
    "language_info": {
      "nbconvert_exporter": "python",
      "file_extension": ".py",
      "codemirror_mode": {
        "version": 3,
        "name": "ipython"
      },
      "mimetype": "text/x-python",
      "version": "3.5.2",
      "pygments_lexer": "ipython3",
      "name": "python"
    },
    "_draft": {
      "nbviewer_url": "https://gist.github.com/7c42d6944b154ba8d73f07059964c730"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 2
}