Fix hollusion not rendering by:

public/externalLibs/graphics/webGLcurve.js

@@ -1,6 +1,7 @@
 var viewport_size = 600
 
 function generateCurve(scaleMode, drawMode, numPoints, func, isFullView) {
+  const frame = open_pixmap('frame', viewport_size, viewport_size, true);
   var curvePosArray = []
   var transMat = mat4.create()
   // initialize the min/max to extreme values
@@ -66,7 +67,8 @@ function generateCurve(scaleMode, drawMode, numPoints, func, isFullView) {
   clear_viewport()
   gl.uniformMatrix4fv(u_transformMatrix, false, transMat)
   drawCurve(drawMode, curvePosArray)
-  return new ShapeDrawn()
+  copy_viewport(gl.canvas, frame);
+  return new ShapeDrawn(frame);
 }
 
 /**

public/externalLibs/graphics/webGLgraphics.js

@@ -188,7 +188,7 @@ var normalShaderProgram // the default shader program
 var vertexBuffer
 var vertexPositionAttribute // location of a_position
 var colorAttribute // location of a_color
-var canvas // the <canvas> object that is used to display webGL output
+const canvas = createCanvas(); // the <canvas> object that is used to display webGL output
 
 // rune 2d and 3d
 var instance_ext // ANGLE_instanced_arrays extension
@@ -247,24 +247,19 @@ function open_pixmap(name, horiz, vert, aa_off) {
 }
 
 /**
- * Creates a <canvas> object, or resets it if it exists.
+ * Creates a <canvas> object. Should only be called once.
  *
  * Post-condition: canvas is defined as the selected <canvas>
  *   object in the document.
  */
-function resetCanvas() {
-  canvas = document.querySelector('.rune-canvas')
-  if (!canvas) {
-    canvas = document.createElement('canvas')
-    canvas.setAttribute('width', 512)
-    canvas.setAttribute('height', 512)
-    canvas.className = 'rune-canvas'
-    canvas.hidden = true
-    document.body.appendChild(canvas)
-  } else {
-    canvas.parentNode.removeChild(canvas)
-    resetCanvas()
-  }
+function createCanvas() {
+  const canvas = document.createElement('canvas')
+  canvas.setAttribute('width', 512);
+  canvas.setAttribute('height', 512);
+  canvas.className = 'rune-canvas';
+  canvas.hidden = true;
+  document.body.appendChild(canvas);
+  return canvas;
 }
 
 /*
@@ -279,7 +274,6 @@ function resetCanvas() {
  *   the gl object.
  */
 function getReadyWebGLForCanvas(mode) {
-  resetCanvas()
   // Get the rendering context for WebGL
   gl = initWebGL(canvas)
   if (gl) {
@@ -302,9 +296,9 @@ function getReadyWebGLForCanvas(mode) {
 
     // rune-specific operations
     if (mode === '2d' || mode === '3d') {
-	initRuneCommon()
-	initRuneBuffer(vertices, indices)
-	initRune3d()
+      initRuneCommon()
+      initRuneBuffer(vertices, indices)
+      initRune3d()
     }
 
     if (mode === 'curve') {
@@ -798,4 +792,6 @@ function drawCurve(drawMode, curvePosArray) {
   }
 }
 
-function ShapeDrawn() {}
+function ShapeDrawn(canvas) {
+  this.$canvas = canvas;
+}

public/externalLibs/graphics/webGLrune.js

@@ -418,10 +418,12 @@ function drawWithWebGL(flattened_rune_list, drawFunction) {
  * the REPL displays it graphically, instead of textually.
  */
 function show(rune) {
+  const frame = open_pixmap('frame', viewport_size, viewport_size, true);
   clear_viewport()
   var flattened_rune_list = generateFlattenedRuneList(rune)
-  drawWithWebGL(flattened_rune_list, drawRune)
-  return new ShapeDrawn()
+  drawWithWebGL(flattened_rune_list, drawRune);
+  copy_viewport(gl.canvas, frame);
+  return new ShapeDrawn(frame);
 }
 
 /**
@@ -434,11 +436,13 @@ function show(rune) {
  * to view the Anaglyph.
  */
 function anaglyph(rune) {
+  const frame = open_pixmap('frame', viewport_size, viewport_size, true);
   clear_viewport()
   clearAnaglyphFramebuffer()
   var flattened_rune_list = generateFlattenedRuneList(rune)
   drawWithWebGL(flattened_rune_list, drawAnaglyph)
-  return new ShapeDrawn()
+  copy_viewport(gl.canvas, frame);
+  return new ShapeDrawn(frame);
 }
 
 var hollusionTimeout
@@ -454,7 +458,7 @@ var hollusionTimeout
  */
 function hollusion(rune, num) {
   clear_viewport()
-  var num = num > 3 ? num : 3
+  var num = num > 5 ? num : 5;
   var flattened_rune_list = generateFlattenedRuneList(rune)
   var frame_list = []
   for (var j = 0; j < num; j++) {
@@ -479,15 +483,15 @@ function hollusion(rune, num) {
   for (var i = frame_list.length - 2; i > 0; i--) {
     frame_list.push(frame_list[i])
   }
-
+  const outframe = open_pixmap('frame', viewport_size, viewport_size, true);
   function animate() {
     var frame = frame_list.shift()
-    copy_viewport_webGL(frame)
+    copy_viewport(frame, outframe);
     frame_list.push(frame)
     hollusionTimeout = setTimeout(animate, 500 / num)
   }
-  animate()
-  return new ShapeDrawn()
+  animate();
+  return new ShapeDrawn(outframe);
 }
 
 function clearHollusion() {

src/components/workspace/CanvasOutput.tsx

@@ -1,32 +1,22 @@
 import * as React from 'react';
 
+interface IProps {
+  canvas: HTMLCanvasElement;
+}
 /**
  * Takes the output of the rendered graphics (in a hidden canvas tag under <body>)
  * and makes it into a new <canvas> output for viewing.
  */
-class CanvasOutput extends React.Component<{}, {}> {
-  private $canvas: HTMLCanvasElement | null;
+class CanvasOutput extends React.Component<IProps, {}> {
   private $parent: HTMLElement | null;
 
   public componentDidMount() {
-    const source = document.querySelector('.rune-canvas') as HTMLCanvasElement;
-    const context = (window as any).RUNE_CONTEXT || '2d';
-    if (context === '2d') {
-      const ctx = this.$canvas!.getContext(context);
-      ctx!.drawImage(source, 0, 0);
-    } else {
-      this.$canvas!.hidden = true;
-      this.$parent!.appendChild(source);
-      source.hidden = false;
-    }
+    this.$parent!.appendChild(this.props.canvas);
+    this.props.canvas.hidden = false;
   }
 
   public render() {
-    return (
-      <div ref={r => (this.$parent = r)} className="canvas-container">
-        <canvas width={512} height={512} ref={r => (this.$canvas = r)} />
-      </div>
-    );
+    return <div ref={r => (this.$parent = r)} className="canvas-container" />;
   }
 }
 

src/components/workspace/Repl.tsx

@@ -96,7 +96,7 @@ const renderResult = (value: any) => {
   /** A class which is the output of the show() function */
   const ShapeDrawn = (window as any).ShapeDrawn;
   if (typeof ShapeDrawn !== 'undefined' && value instanceof ShapeDrawn) {
-    return <CanvasOutput />;
+    return <CanvasOutput canvas={value.$canvas} />;
   } else {
     return stringify(value);
   }

src/components/workspace/side-content/AutograderCard.tsx

@@ -24,7 +24,7 @@ class AutograderCard extends React.Component<AutograderCardProps, {}> {
       /** A class which is the output of the show() function */
       const ShapeDrawn = (window as any).ShapeDrawn;
       if (typeof ShapeDrawn !== 'undefined' && value instanceof ShapeDrawn) {
-        return <CanvasOutput />;
+        return <CanvasOutput canvas={value.$canvas} />;
       } else {
         return stringify(value);
       }