varia/voicegardens
14
0
Fork 0
Code Issues Releases Activity

WIP towards DIY map controls

Browse Source
This commit is contained in:
Luke Murphy 2020-01-07 15:13:10 +01:00
parent ad6321f6bc
commit 8f5a531109
No known key found for this signature in database
GPG Key ID: 5E2EF5A63E3718CC
4 changed files with 82 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
voicegardens/static/images/solarpunk.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 MiB

5
voicegardens/static/styles.css
View File

@ -2,8 +2,9 @@
body { body {
margin: 0px; margin: 0px;
overflow: hidden;
} }
button { canvas {
z-index: 50; display: block;
} }

102
voicegardens/static/voicegardens.js
View File

@ -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); screenW = toW = backgroundImage.width;
tileMap.overlay(canvas); screenH = toH = backgroundImage.height;
screenX = toX = screenW / 2;
screenY = toY = screenH / 2;
setupRecording(); // setupRecording();
// fill("red");
frameRate(frameRate);
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;
}

2
voicegardens/templates/index.html
View File

@ -12,8 +12,6 @@
/> />
</head> </head>
<body> <body>
<div id="container"></div>
<script src="/static/p5js/p5.min.js" charset="utf-8"></script> <script src="/static/p5js/p5.min.js" charset="utf-8"></script>
<script src="/static/p5js/p5.sound.min.js" charset="utf-8"></script> <script src="/static/p5js/p5.sound.min.js" charset="utf-8"></script>
<script src="/static/p5js/p5.collide2d.min.js" charset="utf-8"></script> <script src="/static/p5js/p5.collide2d.min.js" charset="utf-8"></script>