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) listing = os.listdir(UPLOAD_DIRECTORY)
filenames = filter(lambda f: f.endswith(".wav"), listing) filenames = filter(lambda f: f.endswith(".wav"), listing)
return jsonify([ return jsonify([
"{}{}".format(request.url_root, filename) "{}archives/{}".format(request.url_root, filename)
for filename in filenames for filename in filenames
]) ])

View File

@ -6,6 +6,7 @@
// URL which exposes the archive saving API end-point // URL which exposes the archive saving API end-point
var archiveUrl = window.location + "add-to-archive"; var archiveUrl = window.location + "add-to-archive";
var archiveListingUrl = window.location + "archive";
// The x,y coordinates which gives the center of the canvas // The x,y coordinates which gives the center of the canvas
var centerX; var centerX;
@ -140,7 +141,45 @@ function gardenShapes() {
* shape limit, then replace the first shape instead of adding one more. This * shape limit, then replace the first shape instead of adding one more. This
* has to do with performance. * 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() { function setupRecording() {
@ -178,10 +217,14 @@ function setupRecording() {
} }
class GeneratedShape { class GeneratedShape {
constructor(soundRecorded) { constructor(soundRecorded, soundAmplitude, soundDuration) {
/** /**
* Initialise the new shape. * 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 // mouse hover awareness for sound playing
this.hover = false; this.hover = false;
@ -247,12 +290,12 @@ class GeneratedShape {
this.randYs = []; this.randYs = [];
// Number of edges of the shape // 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 distance between the xs and ys influencing the size of the shape.
// The randomXs, randomYs also influence the shape size as they are added // The randomXs, randomYs also influence the shape size as they are added
// when drawing the space between xs and ys. // 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); this.angle = radians(360 / this.edges);
@ -265,9 +308,6 @@ class GeneratedShape {
this.destX = random(windowWidth); this.destX = random(windowWidth);
this.destY = random(windowHeight); this.destY = random(windowHeight);
// the sound recording attached to this shape
this.soundRecorded = soundRecorded;
// the shape that was last collided with // the shape that was last collided with
this.lastCollidedShape; this.lastCollidedShape;
@ -288,8 +328,8 @@ class GeneratedShape {
// this directly influences the shape of the size alongside the // this directly influences the shape of the size alongside the
// this.radius shape value // this.radius shape value
this.randXs[i] = ceil(duration * random(-30, 30)); this.randXs[i] = ceil(this.soundDuration * random(-30, 30));
this.randYs[i] = ceil(duration * random(-30, 30)); this.randYs[i] = ceil(this.soundDuration * random(-30, 30));
} }
for (let i = 0; i < this.edges; i++) { 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 // build a new copy of the recording to store on the shape object
let soundBlob = recording.getBlob(); let soundBlob = recording.getBlob();
let recordedSound = new p5.SoundFile(new p5.File(soundBlob)); let recordedSound = new p5.SoundFile(new p5.File(soundBlob));
let newShape = new GeneratedShape(recordedSound); let newShape = new GeneratedShape(recordedSound, amplitude, duration);
shapes.push(newShape); shapes.push(newShape);
newSoundJustRecorded = false; newSoundJustRecorded = false;
} }