save current progress

public/scripts/input-output.js

@@ -1,32 +0,0 @@
-function setup() {
-  let canvas = createCanvas(710, 400, WEBGL);
-  canvas.parent('input-output');
-  angleMode(DEGREES);
-  strokeWeight(5);
-  noFill();
-  stroke(32, 8, 64);
-}
-
-function draw() {
-  background(250, 180, 200);
-
-  // Call every frame to adjust camera based on mouse/touch
-  orbitControl();
-
-  // Rotate rings in a half circle to create a sphere of cubes
-  for (let zAngle = 0; zAngle < 180; zAngle += 30) {
-    // Rotate cubes in a full circle to create a ring of cubes
-    for (let xAngle = 0; xAngle < 360; xAngle += 30) {
-      push();
-
-      // Rotate from center of sphere
-      rotateZ(zAngle);
-      rotateX(xAngle);
-
-      // Then translate down 400 units
-      translate(0, 400, 0);
-      box();
-      pop();
-    }
-  }
-}

public/scripts/multi-sketch.js

@@ -0,0 +1,55 @@
+let canvas1 = function ( p ) {
+  p.setup = function() {
+    p.createCanvas(710, 400, p.WEBGL);
+    p.angleMode(p.DEGREES);
+    p.strokeWeight(5);
+    p.noFill();
+    p.stroke(32, 8, 64);
+  }
+
+  p.draw = function() {
+    p.background(250, 180, 200);
+
+    // Call every frame to adjust camera based on mouse/touch
+    p.orbitControl();
+
+    // Rotate rings in a half circle to create a sphere of cubes
+    for (let zAngle = 0; zAngle < 180; zAngle += 30) {
+      // Rotate cubes in a full circle to create a ring of cubes
+      for (let xAngle = 0; xAngle < 360; xAngle += 30) {
+        p.push();
+
+        // Rotate from center of sphere
+        p.rotateZ(zAngle);
+        p.rotateX(xAngle);
+
+        // Then translate down 400 units
+        p.translate(0, 400, 0);
+        p.box();
+        p.pop();
+      }
+    }
+  }
+};
+
+let canvas2 = function ( p ) {
+
+
+  p.setup = function() {
+    p.createCanvas(710, 400);
+    p.background(250, 180, 200);
+  }
+
+  p.draw = function() {
+    // draw a circle at the mouse position
+    p.fill(255, 0, 0);
+    p.stroke(0);
+    p.strokeWeight(0);
+    p.ellipse(p.mouseX, p.mouseY, 80, 80);
+
+  }
+}
+
+
+var mycanvas1 = new p5(canvas1, 'canvas1');
+var myp5 = new p5(canvas2, 'canvas2');