Regenerating shapes from leaf button

This commit is contained in:
Luke Murphy 2020-02-10 11:22:45 +01:00
parent b8ba99ba65
commit ce27f10392
No known key found for this signature in database
GPG Key ID: 5E2EF5A63E3718CC
2 changed files with 51 additions and 11 deletions

View File

@ -60,7 +60,7 @@ def archive():
listing = os.listdir(UPLOAD_DIRECTORY)
filenames = filter(lambda f: f.endswith(".wav"), listing)
return jsonify([
"{}{}".format(request.url_root, filename)
"{}archives/{}".format(request.url_root, filename)
for filename in filenames
])

View File

@ -6,6 +6,7 @@
// URL which exposes the archive saving API end-point
var archiveUrl = window.location + "add-to-archive";
var archiveListingUrl = window.location + "archive";
// The x,y coordinates which gives the center of the canvas
var centerX;
@ -140,7 +141,45 @@ function gardenShapes() {
* shape limit, then replace the first shape instead of adding one more. This
* has to do with performance.
*/
return;
axios
.get(archiveListingUrl)
.then(function(response) {
let randomIndex = floor(random(0, response.data.length - 1));
let url = response.data[randomIndex];
axios
.get(url, { responseType: "blob" })
.then(function(response) {
if (shapes.length >= 9) {
// TODO
console.log(
"TODO: max shapes allowed, implement shape replacement"
);
}
let data = new p5.File(response.data);
let sound = new p5.SoundFile(data, function() {
let amp = sound.getPeaks(1)[0] * 100;
let dur = sound.duration();
let shape = new GeneratedShape(sound, amp, dur);
sound.play();
shapes.push(shape);
});
})
.catch(function(error) {
console.log(
"Retrieving single recording from archive failed!",
"Received the following message:",
error.response.data
);
});
})
.catch(function(error) {
console.log(
"Retrieving archive listing failed!",
"Received the following message:",
error.response.data
);
});
}
function setupRecording() {
@ -178,10 +217,14 @@ function setupRecording() {
}
class GeneratedShape {
constructor(soundRecorded) {
constructor(soundRecorded, soundAmplitude, soundDuration) {
/**
* Initialise the new shape.
**/
// sound and properties passed into shape creation
this.soundRecorded = soundRecorded;
this.soundAmplitude = soundAmplitude;
this.soundDuration = soundDuration;
// mouse hover awareness for sound playing
this.hover = false;
@ -247,12 +290,12 @@ class GeneratedShape {
this.randYs = [];
// Number of edges of the shape
this.edges = amplitude + 3;
this.edges = this.soundAmplitude + 3;
// The distance between the xs and ys influencing the size of the shape.
// The randomXs, randomYs also influence the shape size as they are added
// when drawing the space between xs and ys.
this.radius = ceil(duration * 40);
this.radius = ceil(this.soundDuration * 40);
// ???
this.angle = radians(360 / this.edges);
@ -265,9 +308,6 @@ class GeneratedShape {
this.destX = random(windowWidth);
this.destY = random(windowHeight);
// the sound recording attached to this shape
this.soundRecorded = soundRecorded;
// the shape that was last collided with
this.lastCollidedShape;
@ -288,8 +328,8 @@ class GeneratedShape {
// this directly influences the shape of the size alongside the
// this.radius shape value
this.randXs[i] = ceil(duration * random(-30, 30));
this.randYs[i] = ceil(duration * random(-30, 30));
this.randXs[i] = ceil(this.soundDuration * random(-30, 30));
this.randYs[i] = ceil(this.soundDuration * random(-30, 30));
}
for (let i = 0; i < this.edges; i++) {
@ -480,7 +520,7 @@ function draw() {
// build a new copy of the recording to store on the shape object
let soundBlob = recording.getBlob();
let recordedSound = new p5.SoundFile(new p5.File(soundBlob));
let newShape = new GeneratedShape(recordedSound);
let newShape = new GeneratedShape(recordedSound, amplitude, duration);
shapes.push(newShape);
newSoundJustRecorded = false;
}