From 31985883d2f832b94f6354667c80340fcfa46315 Mon Sep 17 00:00:00 2001 From: hannahilea Date: Fri, 10 May 2024 16:39:12 -0400 Subject: [PATCH 1/4] fix styling so canvas is correct height and position --- projects/flock-chorus/index.html | 50 +++++++++++++++++++------------- projects/flock-chorus/sketch.js | 11 +++++-- 2 files changed, 38 insertions(+), 23 deletions(-) diff --git a/projects/flock-chorus/index.html b/projects/flock-chorus/index.html index 31ae723..063c33d 100644 --- a/projects/flock-chorus/index.html +++ b/projects/flock-chorus/index.html @@ -11,11 +11,15 @@ @@ -36,22 +40,28 @@ - -
-

@hannahilea > projects > Flock chorus -

+
+ +
+

@hannahilea > projects > Flock chorus +

+
+ +
+ Details +

Built for a web-based musical instrument hackathon while at the Recurse + Center. Built on top of the p5 flocking + demo. +

+

Usage: Click screen to spawn [boids](https://en.wikipedia.org/wiki/Boids). Make sure your computer sound + is on. (May not yet work on mobile.)

+

Warning: If you add a gagillion boids, the page may get laggy or stop playing altogether. I'm pretty + sure this is a Tone.js limitation (well, a "my current usage of Tone.js" limitation, specifically!), and if you + have an idea of how to work around it, please let me know! In the meantime, simply refresh your screen to start + fresh (or un-toggle "wrap world" to let some of your flocks fly away).

+ +
- -
- Details -

Built for a web-based musical instrument hackathon while at the Recurse - Center. Built on top of the p5 flocking demo. -

-

Usage: Click screen to spawn [boids](https://en.wikipedia.org/wiki/Boids). Make sure your computer sound is on. (May not yet work on mobile.)

-

Warning: If you add a gagillion boids, the page may get laggy or stop playing altogether. I'm pretty sure this is a Tone.js limitation (well, a "my current usage of Tone.js" limitation, specifically!), and if you have an idea of how to work around it, please let me know! In the meantime, simply refresh your screen to start fresh (or un-toggle "wrap world" to let some of your flocks fly away).

- -
- diff --git a/projects/flock-chorus/sketch.js b/projects/flock-chorus/sketch.js index f8a1101..bed2ba3 100644 --- a/projects/flock-chorus/sketch.js +++ b/projects/flock-chorus/sketch.js @@ -9,7 +9,7 @@ const params = { radius: 3, targetFreqHz: 440, maxStartOffsetHz: 100, - volume: -40, + volume: -Infinity, //-40, freqIncrement: .9, }; @@ -26,14 +26,19 @@ guiFolder.add(params, 'maxStartOffsetHz', 0, 600, 50).name("Start pitch max offs // guiFolder.add(params, 'radius', .1, 10, .3).name("Size"); // guiFolder.add(params, 'volume', -80, -12, 1).name("Volume"); +function getProjectHeight() { + elem = document.getElementById("project-header"); + return windowHeight - parseInt(elem.offsetHeight) - parseInt(elem.offsetTop) +} + function setup() { - createCanvas(windowWidth, windowHeight) + createCanvas(windowWidth, getProjectHeight()) Tone.start(); flock = new Flock(); // Empty flock! } function windowResized() { - resizeCanvas(windowWidth, windowHeight); + resizeCanvas(windowWidth, getProjectHeight()); } function draw() { From 554323b98488f8f682fc8bfb0aa42bfab5ff0a7a Mon Sep 17 00:00:00 2001 From: hannahilea Date: Fri, 10 May 2024 16:45:08 -0400 Subject: [PATCH 2/4] only click captured when on canvas --- projects/flock-chorus/sketch.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/projects/flock-chorus/sketch.js b/projects/flock-chorus/sketch.js index bed2ba3..a343b45 100644 --- a/projects/flock-chorus/sketch.js +++ b/projects/flock-chorus/sketch.js @@ -32,7 +32,8 @@ function getProjectHeight() { } function setup() { - createCanvas(windowWidth, getProjectHeight()) + let canvas = createCanvas(windowWidth, getProjectHeight()) + canvas.mouseClicked(mouseClickedOnCanvas) Tone.start(); flock = new Flock(); // Empty flock! } @@ -60,7 +61,7 @@ function mouseDragged() { } // Add a new boid into the System -function mouseClicked() { +function mouseClickedOnCanvas() { flock.addBoid(new Boid(mouseX, mouseY)); } From c413a3135968da0b38b596173cf3ad69570e5b3d Mon Sep 17 00:00:00 2001 From: hannahilea Date: Fri, 10 May 2024 17:07:22 -0400 Subject: [PATCH 3/4] only recognize drag over the canvas --- projects/flock-chorus/sketch.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/projects/flock-chorus/sketch.js b/projects/flock-chorus/sketch.js index a343b45..81f2dbd 100644 --- a/projects/flock-chorus/sketch.js +++ b/projects/flock-chorus/sketch.js @@ -31,6 +31,11 @@ function getProjectHeight() { return windowHeight - parseInt(elem.offsetHeight) - parseInt(elem.offsetTop) } +function getCanvasYOffset() { + elem = document.getElementById("project-header"); + return parseInt(elem.offsetHeight) + parseInt(elem.offsetTop) +} + function setup() { let canvas = createCanvas(windowWidth, getProjectHeight()) canvas.mouseClicked(mouseClickedOnCanvas) @@ -56,8 +61,10 @@ function draw() { } // Add new boids into the System -function mouseDragged() { - flock.addBoid(new Boid(mouseX, mouseY)); +function mouseDragged(event) { + if (event.clientY > getCanvasYOffset()) { + flock.addBoid(new Boid(mouseX, mouseY)); + } } // Add a new boid into the System From 29bfc902dfb53ba82fe5600b28c0592d2e9efbb2 Mon Sep 17 00:00:00 2001 From: hannahilea Date: Fri, 10 May 2024 17:42:44 -0400 Subject: [PATCH 4/4] fix dragging too --- projects/flock-chorus/index.html | 9 ++++++++- projects/flock-chorus/sketch.js | 24 +++++++++++++++++------- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/projects/flock-chorus/index.html b/projects/flock-chorus/index.html index 063c33d..4cace55 100644 --- a/projects/flock-chorus/index.html +++ b/projects/flock-chorus/index.html @@ -7,7 +7,7 @@