From c1d72f4787fb5ac7f995f5edce03fee21c4be94f Mon Sep 17 00:00:00 2001 From: Francesco Luzzana Date: Thu, 5 May 2022 17:04:56 +0200 Subject: [PATCH] init --- distance.js | 37 ++++++++++++++++++ index.html | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++++ pad.js | 25 +++++++++++++ style.css | 48 ++++++++++++++++++++++++ 4 files changed, 215 insertions(+) create mode 100644 distance.js create mode 100644 index.html create mode 100644 pad.js create mode 100644 style.css diff --git a/distance.js b/distance.js new file mode 100644 index 0000000..5d78050 --- /dev/null +++ b/distance.js @@ -0,0 +1,37 @@ +const distanceTarget = document.getElementById("distance-target"); +const distancePad = document.getElementById("distance-pad"); +const distanceRound = document.getElementById("distance-round"); + +let distanceRect = distancePad.getBoundingClientRect(); +let distanceWidth = distancePad.clientWidth; +let distanceHeight = distancePad.clientHeight; + +control = false; + +distancePad.addEventListener("mouseenter", () => { + control = true; +}); + +distancePad.addEventListener("mouseleave", () => { + control = false; +}); + +distancePad.addEventListener("mousemove", (e) => { + if (control) { + var x = e.clientX - distanceRect.left; //x position within the element. + var y = e.clientY - distanceRect.top; //y position within the element. + + distanceTarget.style.borderRadius = `${ + (calculateDistance(distanceRound, x, y) / distanceWidth / 2) * 100 + }%`; + } +}); + +function calculateDistance(elem, mouseX, mouseY) { + return Math.floor( + Math.sqrt( + Math.pow(mouseX - (elem.offsetLeft + elem.clientWidth / 2), 2) + + Math.pow(mouseY - (elem.offsetTop + elem.clientHeight / 2), 2) + ) + ); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..c68bf53 --- /dev/null +++ b/index.html @@ -0,0 +1,105 @@ + + + + + + + XY PAD Example + + + + + +

Trail~hunger~riverbed~dust

+

Using semantic distance as an instrument to modulate sound effects

+

XY PAD

+

A way to control some parameters using spatial information.

+ +
+
+ +

Distance

+

+ The same principle can be used using the distance from an element.
+ Here we are using the distance between the word Corner and the cursor. +

+
+ Corner +
+
+ +

Semantic distance

+

+ The same idea could be applied with the semantic distance between two words.
+ In order to do that we can work with + + Word Embedding + + & + Word2Vec . + With this word embedding thing words can be transformed in numbers (actually in + vectors, + aka numbers with a direction and an intensity) +

+ +

+ Semantic distance? ← A nice game and + explanation.
+ Here you need to guess a secret word with the only hint of how distant your guesses are. + (Cannot find the source code anymore, it was on gitlab 1 month ago) +

+ +

We can build an instrument that uses something like this.

+ + + +

+ With this idea we can draw different maps to use with the same instrument with different + results. Need to elaborate on this a bit! +

+

Audio routing?

+

+ This instrumet (or effect?) ideally should work in real time, affecting a signal and + modulating the effect when a new word is spoken. Apparently Python is not really great + for manipulating digital sounds in real time because it's not fast enough. Ok. So we can + rely on something else like SuperCollider or PureData or whatever and using Python as an + MIDI or OSC controller. +

+ +

The routing could be something like:

+ + + + diff --git a/pad.js b/pad.js new file mode 100644 index 0000000..7336d8a --- /dev/null +++ b/pad.js @@ -0,0 +1,25 @@ +const target = document.getElementById("xy-target"); +const pad = document.getElementById("xy-pad"); + +let rect = pad.getBoundingClientRect(); +let width = pad.clientWidth; +let height = pad.clientHeight; + +let control = false; + +pad.addEventListener("mouseenter", () => { + control = true; +}); + +pad.addEventListener("mouseleave", () => { + control = false; +}); + +pad.addEventListener("mousemove", (e) => { + if (control) { + var x = e.clientX - rect.left; //x position within the element. + var y = e.clientY - rect.top; //y position within the element. + target.style.backgroundColor = `hsl(${(x / width) * 360}deg, 100%, 75% )`; + target.style.transform = `scale(${100 + (y / height) * 100}%)`; + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..ff76458 --- /dev/null +++ b/style.css @@ -0,0 +1,48 @@ + +* { + max-width: 90ch; +} + +html, body { + max-width: 100%; + font-family: Arial, Helvetica, sans-serif; + line-height: 1.6; + +} + +.target { + display: inline-block; + width: 100px; + height: 100px; + border-radius: 50%; + background-color: tomato; + margin: 100px; +} + +.pad, #distance-pad { + display: inline-block; + position: relative; + width: 300px; + height: 300px; + border: 1px solid currentColor; + cursor:crosshair; +} + + +#distance-round, #multi-round { + position: absolute; + left: 30%; + top: 30%; +} + + +#multi-color { + position: absolute; + right: 10%; + bottom: 10%; +} + +img { + margin: 16px 0; + border: 1px solid currentColor; +} \ No newline at end of file