Approaching some sort of working map controls

voicegardens/static/styles.css

@@ -1,8 +1,15 @@
 /* Custom CSS styles */
 
+html,
 body {
-  margin: 0px;
-  overflow: hidden;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 canvas {

voicegardens/static/voicegardens.js

@@ -5,27 +5,23 @@
 //
 
 var archiveUrl = window.location + "add-to-archive";
-var backgroundImage;
 var canvas;
 var microphone;
+var mouseInitialDrag = false;
 var newSoundJustRecorded = false;
 var playButton;
 var recordButton;
 var recorder;
 var recording;
 var recordingTimeout = 30000; // 30 seconds (in milliseconds)
-var screenH;
-var screenW;
 var screenX;
 var screenY;
 var shapes = [];
 var stopButton;
-var toH;
-var toW;
-var toX;
-var toY;
-var zoom = 0.01; // zoom step per mouse tick
-
+var toScreenX;
+var toScreenY;
+var zoom = 1;
+var zoomSensitivity = 0.005;
 function record() {
   /**
    * Starting recording.
@@ -97,11 +93,11 @@ function setupRecording() {
   stopButton.mousePressed(stop);
 
   playButton = createButton("play");
-  playButton.position(10, 70);
+  playButton.position(10, 75);
   playButton.mousePressed(play);
 
   playButton = createButton("archive");
-  playButton.position(10, 105);
+  playButton.position(10, 110);
   playButton.mousePressed(archive);
 }
 
@@ -134,8 +130,8 @@ class GeneratedShape {
     this.w = 20;
     this.h = 20;
 
-    this.x = random(width);
-    this.y = random(height);
+    this.x = windowWidth / 2;
+    this.y = windowHeight / 2;
 
     this.xSpeed = 1.8;
     this.ySpeed = 1.8;
@@ -213,47 +209,30 @@ class GeneratedShape {
   }
 }
 
-function preload() {
-  /**
-   * Pre-load images for the background.
-   **/
-  backgroundImage = loadImage("../static/images/solarpunk.png");
-}
-
 function setup() {
   /**
    * The p5.js initial setup function.
    **/
   createCanvas(windowWidth, windowHeight);
 
-  screenW = toW = backgroundImage.width;
-  screenH = toH = backgroundImage.height;
-  screenX = toX = screenW / 2;
-  screenY = toY = screenH / 2;
+  screenX = toScreenX = 0;
+  screenY = toScreenY = 0;
 
-  // setupRecording();
-  // fill("red");
+  setupRecording();
+  fill("red");
 }
 
 function draw() {
   /**
    * The p5.js draw loop.
    **/
-  clear();
-  noStroke();
-
-  screenX = lerp(screenX, toX, 0.1);
-  screenY = lerp(screenY, toY, 0.1);
-  screenW = lerp(screenW, toW, 0.1);
-  screenH = lerp(screenH, toH, 0.1);
-
-  image(
-    backgroundImage,
-    screenX - screenW / 2,
-    screenY - screenH / 2,
-    screenW,
-    screenH
-  );
+  background("pink");
+
+  screenX = lerp(screenX, toScreenX, 0.1);
+  screenY = lerp(screenY, toScreenY, 0.1);
+  translate(screenX, screenY);
+
+  scale(zoom);
 
   if (newSoundJustRecorded === true) {
     shapes.push(new GeneratedShape());
@@ -274,35 +253,20 @@ function mouseWheel(event) {
   /**
    * Mouse wheel zoom handling.
    **/
-  var delta = -event.delta;
-
-  // zoom in
-  if (delta > 0) {
-    for (var i = 0; i < delta; i++) {
-      if (toW > 5 * width) return; // max zoom
-      toX -= zoom * (mouseX - toX);
-      toY -= zoom * (mouseY - toY);
-      toW *= zoom + 1;
-      toH *= zoom + 1;
-    }
+  zoom += zoomSensitivity * event.delta;
 }
 
-  // zoom out
-  if (delta < 0) {
-    for (var i = 0; i < -delta; i++) {
-      if (toW < width) return; // min zoom
-      toX += (zoom / (zoom + 1)) * (mouseX - toX);
-      toY += (zoom / (zoom + 1)) * (mouseY - toY);
-      toH /= zoom + 1;
-      toW /= zoom + 1;
-    }
-  }
+function mouseDragged() {
+  /**
+   * Mouse drag movement handling.
+   **/
+  toScreenX += mouseX - pmouseX;
+  toScreenY += mouseY - pmouseY;
 }
 
-function mouseDragged(event) {
+function windowResized() {
   /**
-   * Mouse drag movement handling.
+   * Canvas re-draw handling.
    **/
-  toX += mouseX - pmouseX;
-  toY += mouseY - pmouseY;
+  resizeCanvas(windowWidth, windowHeight);
 }