|
|
@ -5,11 +5,8 @@ |
|
|
//
|
|
|
//
|
|
|
|
|
|
|
|
|
var archiveUrl = window.location + "add-to-archive"; |
|
|
var archiveUrl = window.location + "add-to-archive"; |
|
|
var canvasColour = "white"; |
|
|
var backgroundImage; |
|
|
var canvasHeight = 400; |
|
|
var canvas; |
|
|
var canvasWidth = 800; |
|
|
|
|
|
var frameRate = 30; |
|
|
|
|
|
var mappa = new Mappa("Leaflet"); |
|
|
|
|
|
var microphone; |
|
|
var microphone; |
|
|
var newSoundJustRecorded = false; |
|
|
var newSoundJustRecorded = false; |
|
|
var playButton; |
|
|
var playButton; |
|
|
@ -17,14 +14,17 @@ var recordButton; |
|
|
var recorder; |
|
|
var recorder; |
|
|
var recording; |
|
|
var recording; |
|
|
var recordingTimeout = 30000; // 30 seconds (in milliseconds)
|
|
|
var recordingTimeout = 30000; // 30 seconds (in milliseconds)
|
|
|
|
|
|
var screenH; |
|
|
|
|
|
var screenW; |
|
|
|
|
|
var screenX; |
|
|
|
|
|
var screenY; |
|
|
var shapes = []; |
|
|
var shapes = []; |
|
|
var stopButton; |
|
|
var stopButton; |
|
|
var tileMapOptions = { |
|
|
var toH; |
|
|
lat: 0, |
|
|
var toW; |
|
|
lng: 0, |
|
|
var toX; |
|
|
zoom: 5, |
|
|
var toY; |
|
|
style: "/static/tiles/{z}/{x}/{y}.png" |
|
|
var zoom = 0.01; // zoom step per mouse tick
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
function record() { |
|
|
function record() { |
|
|
/** |
|
|
/** |
|
|
@ -89,19 +89,19 @@ function setupRecording() { |
|
|
recording = new p5.SoundFile(); |
|
|
recording = new p5.SoundFile(); |
|
|
|
|
|
|
|
|
recordButton = createButton("record"); |
|
|
recordButton = createButton("record"); |
|
|
recordButton.position(50, 10); |
|
|
recordButton.position(10, 5); |
|
|
recordButton.mousePressed(record); |
|
|
recordButton.mousePressed(record); |
|
|
|
|
|
|
|
|
stopButton = createButton("stop"); |
|
|
stopButton = createButton("stop"); |
|
|
stopButton.position(50, 40); |
|
|
stopButton.position(10, 40); |
|
|
stopButton.mousePressed(stop); |
|
|
stopButton.mousePressed(stop); |
|
|
|
|
|
|
|
|
playButton = createButton("play"); |
|
|
playButton = createButton("play"); |
|
|
playButton.position(50, 70); |
|
|
playButton.position(10, 70); |
|
|
playButton.mousePressed(play); |
|
|
playButton.mousePressed(play); |
|
|
|
|
|
|
|
|
playButton = createButton("archive"); |
|
|
playButton = createButton("archive"); |
|
|
playButton.position(50, 100); |
|
|
playButton.position(10, 105); |
|
|
playButton.mousePressed(archive); |
|
|
playButton.mousePressed(archive); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -213,20 +213,26 @@ class GeneratedShape { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function preload() { |
|
|
|
|
|
/** |
|
|
|
|
|
* Pre-load images for the background. |
|
|
|
|
|
**/ |
|
|
|
|
|
backgroundImage = loadImage("../static/images/solarpunk.png"); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
function setup() { |
|
|
function setup() { |
|
|
/** |
|
|
/** |
|
|
* The p5.js initial setup function. |
|
|
* The p5.js initial setup function. |
|
|
**/ |
|
|
**/ |
|
|
canvas = createCanvas(canvasWidth, canvasHeight); |
|
|
createCanvas(windowWidth, windowHeight); |
|
|
|
|
|
|
|
|
tileMap = mappa.tileMap(tileMapOptions); |
|
|
|
|
|
tileMap.overlay(canvas); |
|
|
|
|
|
|
|
|
|
|
|
setupRecording(); |
|
|
|
|
|
|
|
|
|
|
|
frameRate(frameRate); |
|
|
screenW = toW = backgroundImage.width; |
|
|
|
|
|
screenH = toH = backgroundImage.height; |
|
|
|
|
|
screenX = toX = screenW / 2; |
|
|
|
|
|
screenY = toY = screenH / 2; |
|
|
|
|
|
|
|
|
fill("red"); |
|
|
// setupRecording();
|
|
|
|
|
|
// fill("red");
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function draw() { |
|
|
function draw() { |
|
|
@ -236,6 +242,19 @@ function draw() { |
|
|
clear(); |
|
|
clear(); |
|
|
noStroke(); |
|
|
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 |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
if (newSoundJustRecorded === true) { |
|
|
if (newSoundJustRecorded === true) { |
|
|
shapes.push(new GeneratedShape()); |
|
|
shapes.push(new GeneratedShape()); |
|
|
newSoundJustRecorded = false; |
|
|
newSoundJustRecorded = false; |
|
|
@ -250,3 +269,40 @@ function draw() { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
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 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(event) { |
|
|
|
|
|
/** |
|
|
|
|
|
* Mouse drag movement handling. |
|
|
|
|
|
**/ |
|
|
|
|
|
toX += mouseX - pmouseX; |
|
|
|
|
|
toY += mouseY - pmouseY; |
|
|
|
|
|
} |
|
|
|
