Update public/sketch.js

public/sketch.js

@@ -30,7 +30,7 @@ function preload(){
     hf_tkn = arg[1];
     console.log(space_uri)
     
-    
+    grAPI = new GRAPI(space_uri, hf_tkn);
     //setTimeout(function(){
     //  for (let i = 0; i < AS.initial_frame_nb; i++) {
     //    AS.create_new_frame();
@@ -44,31 +44,34 @@ function preload(){
 function setup() {
   
   canvas = createCanvas(512, 512);
-    canvas.id('canvas');
-    canvas.parent('canvas-ctn');
-    noLoop();
-    pixelDensity(1);
-    background('white');
-grAPI = new GRAPI(space_uri, hf_tkn);
+  canvas.id('canvas');
+  canvas.parent('canvas-ctn');
+  noLoop();
+  pixelDensity(1);
+  background('white');
+
   Draws = new DrawHandler();
-    AS = new AnimSys(12, 12, 30, 8);
-    
+  AS = new AnimSys(12, 12, 30, 8);
     
+   //  for (let i = 0; i < AS.initial_frame_nb; i++) {
+    //    AS.create_new_frame();
+    //    AS.display_frame(0);
+    //  }  
     
-    canvas.mousePressed(function(){
-      Draws.startPath();
-    });
-    canvas.mouseReleased(function(){
-      Draws.endPath(Draws.drawGraphic, AS.frameGraphics);
-      Draws.drawings = [];
-      AS.update_frame();
-    });
+  canvas.mousePressed(function(){
+    Draws.startPath();
+  });
+  canvas.mouseReleased(function(){
+    Draws.endPath(Draws.drawGraphic, AS.frameGraphics);
+    Draws.drawings = [];
+    AS.update_frame();
+  });
   
   
   Cursor = new OrientedCursor('canvas');
-    Cursor.catchCursor();
+  Cursor.catchCursor();
   Pencil = new BrushPoint('pencil', 0, 0); 
-    brushesPoints.push(Pencil);
+  brushesPoints.push(Pencil);
   
   
   
@@ -143,19 +146,22 @@ function draw() {
   
   image(AS.frameGraphics, 0, 0)
   image(Draws.drawGraphic, 0, 0)
-  
-  push();
-    grAPI.hiddenScribbleGraphics.clear();
-    grAPI.hiddenScribbleGraphics.background('white');
-    grAPI.hiddenScribbleGraphics.image(AS.frameGraphics, 0, 0);
-    grAPI.hiddenScribbleGraphics.filter(INVERT)
-  pop();
-  
-  if(grAPI.show_diffused == true){
+
+  if(grAPI !== undefined){
+    push();
+      grAPI.hiddenScribbleGraphics.clear();
+      grAPI.hiddenScribbleGraphics.background('white');
+      grAPI.hiddenScribbleGraphics.image(AS.frameGraphics, 0, 0);
+      grAPI.hiddenScribbleGraphics.filter(INVERT)
+    pop();
     
-    image(grAPI.diffusedGraphics, 0, 0);
+    if(grAPI.show_diffused == true){
+      
+      image(grAPI.diffusedGraphics, 0, 0);
+    }
   }
   
+  
   if(Draws.isDrawing){
   
     //Cursor.showCursor(mouseX, mouseY);