CindyJS Plugins

Martin von Gagern

joint work with J. Richter-Gebert, M. Strobel, …

Ways to add functionality

  • Adding code to the core program – open source

  • Writing plugins…

    • … to define functions (like in Cinderella)
    • … define new control flow operations
    • … interact with the drawing area
    • … do other things as the need arises

Outline

  1. Cindy3D plugin

  2. KaTeX plugin

  3. Plugin design

Cindy3D

Viewer only

Cindy3D for CindyJS

  • Cindy3D for Cinderella (Java) – student's project

  • Cindy3D for CindyJS – mostly rewritten

  • compatible CindyScript API

  • WebGL supported in most browsers
    (87% according to caniuse.com)

Primitives

  • Spheres (3d points)

    draw3d([0,0,0])

  • Rods (3d segments)

    draw3d([-1,0,0], [1,0,0])

  • Polygons

    fillpoly3d(pts)

  • Meshes (triangulates quad)

    mesh3d(m, n, pts)

Advanced Meshes

Illusions

Open Issues

  • sort triangles by depth

  • hints for camera control

  • touch interface

  • shadows

KaTeX

  • Cinderella supports typesetting

  • JavaScript alternatives:

    • Do-It-Yourself
    • MathML (dead in Chrome)
    • MathJax (widely used, asynchronous, DOM)
    • KaTeX (synchronous, DOM)

  • KaTeX adapted successfully

  • Initially missing features: matrices, macros, …

  • Render internal box model to canvas

Fast

MathJax for comparison

Matrices

Open Issues

  • missing TeX features, symbols

  • support for accented letters

  • auto-detect need on export from Cinderella

Plugin Design and API

What to extend

well-defined hooks

patch anything

easy to maintain

powerful and flexible

wild west

civilized

CindyJS uses …

  • … well-defined hooks
  • and a versioning scheme

Hooks

  • defineFunction
  • evaluate
  • evaluateAndVal
  • nada
  • instance
  • config
  • addShutdownHook
  • extractPoint
  • addAutoCleaningEventListener
  • getVariable
  • getInitialMatrix
  • setTextRenderer
  • getImage
  • getMyfunction

Defining a plugin

// Register a plugin called "hello", using plugin API version 1
CindyJS.registerPlugin(1, "hello", function(api) {

    // Define a CindyScript function called "greet"
    // that takes a single argument
    api.defineFunction("greet", 1, function(args, modifs) {

        // Evaluate the argument expression
        // (as opposed to inspecting the unevaluated formula)
        var arg0 = api.evaluate(args[0]);

        // Return string as a CindyScript value object,
        // we might want to offer some API for this one day
        return {
            ctype: "string",
            value: "Hello, " + api.instance.niceprint(arg0)
        };
    });
});

Using a plugin

<script type="text/javascript" src="Cindy.js"></script>
<script type="text/javascript" src="MyPlugin.js"></script>
<script type="text/javascript">

var cdy = CindyJS({
  ports: [{id: "widget", width: 300, height: 100,
           transform:[{visibleRect:[-1,5,11,-1]}]}],
  scripts: "cs*",
  geometry: [{name:"A", type:"FreePoint", pos:[0,0]}]
});

</script>

<script id="csinit" type="text/x-cindyscript">
  use("hello");
</script>
<script id="csdraw" type="text/x-cindyscript">
  drawtext(A, greet("ICMS"), offset->[5,5]);
</script>

<div id="widget"></div>

Showing this plugin

Other plugins

  • Quickhull3D (from Java via GWT)

  • Application-specific interfaces in MC2 project

  • Application-specific interfaces for iOrnament postprocessing

  • ComplexCurves (Ph.D. by Stefan Kranich)

  • CindyGL (next talk)

  • more to come

  • Flick keyboard?

Thank you!

github.com/CindyJS/CindyJS