Polish colours and add archive button

voicegardens/static/voicegardens.js

@@ -7,6 +7,7 @@
 var archiveUrl = window.location + "add-to-archive";
 var canvas;
 var microphone;
+var frameRate = 60;
 var mouseInitialDrag = false;
 var newSoundJustRecorded = false;
 var playButton;
@@ -72,6 +73,10 @@ function archive() {
   });
 }
 
+function showArchive() {
+  window.location.href = "/archive";
+}
+
 function setupRecording() {
   /**
    * Setup logic for recording.
@@ -99,6 +104,10 @@ function setupRecording() {
   playButton = createButton("archive");
   playButton.position(10, 110);
   playButton.mousePressed(archive);
+
+  playButton = createButton("view archive");
+  playButton.position(10, 145);
+  playButton.mousePressed(showArchive);
 }
 
 function getSoundInfo() {
@@ -127,14 +136,14 @@ class GeneratedShape {
     /**
      * Initialise the new shape.
      **/
-    this.w = 20;
-    this.h = 20;
+    this.w = 40;
+    this.h = 40;
 
-    this.x = windowWidth / 2;
-    this.y = windowHeight / 2;
+    this.x = random(windowWidth);
+    this.y = random(windowHeight);
 
-    this.xSpeed = 1.8;
-    this.ySpeed = 1.8;
+    this.xSpeed = 1.4;
+    this.ySpeed = 1.6;
 
     this.xDirection = 1;
     this.yDirection = 1;
@@ -214,19 +223,18 @@ function setup() {
    * The p5.js initial setup function.
    **/
   createCanvas(windowWidth, windowHeight);
-
   screenX = toScreenX = 0;
   screenY = toScreenY = 0;
-
   setupRecording();
-  fill("red");
+  frameRate(frameRate);
+  fill("#F38630");
 }
 
 function draw() {
   /**
    * The p5.js draw loop.
    **/
-  background("pink");
+  background("#69D2E7");
 
   screenX = lerp(screenX, toScreenX, 0.1);
   screenY = lerp(screenY, toScreenY, 0.1);