Violent Theremin
diff --git a/violent-theremin/scripts/app.js b/violent-theremin/scripts/app.js
index 7a95b42..575ddfb 100644
--- a/violent-theremin/scripts/app.js
+++ b/violent-theremin/scripts/app.js
@@ -3,20 +3,29 @@ const startMessage = document.querySelector(".start-message");
let isAppInit = false;
appContents.style.display = "none";
-window.addEventListener("keydown", init);
-window.addEventListener("click", init);
+startMessage.addEventListener("click", transitionScreen);
-function init() {
- if (isAppInit) {
- return;
- }
+function transitionScreen() {
+ // create web audio api context
+ const AudioContext = window.AudioContext || window.webkitAudioContext;
+ const audioCtx = new AudioContext();
+ // remove start message button element and show app contents
appContents.style.display = "block";
document.body.removeChild(startMessage);
- // create web audio api context
- const AudioContext = window.AudioContext || window.webkitAudioContext;
- const audioCtx = new AudioContext();
+ init(audioCtx);
+}
+
+/**
+ * Initializes the audio context and sets up the theremin functionality
+ *
+ * @param {AudioContext} audioCtx - The Web Audio API AudioContext used to generate and manipulate audio signals
+ */
+function init(audioCtx) {
+ if (isAppInit) {
+ return;
+ }
// create Oscillator and gain node
const oscillator = audioCtx.createOscillator();
@@ -50,6 +59,18 @@ function init() {
let CurX;
let CurY;
+ document.addEventListener("mousemove", updatePage);
+ document.addEventListener(
+ "touchmove",
+ (e) => {
+ // prevent scrolling
+ e.preventDefault();
+ // use first touch point for mouse coordinates
+ updatePage(e.touches[0]);
+ },
+ { passive: false }
+ );
+
// Get new mouse pointer coordinates when mouse is moved
// then set new gain and pitch values
document.onmousemove = updatePage;
diff --git a/violent-theremin/styles/app.css b/violent-theremin/styles/app.css
index 8e669ae..1d1c4d8 100644
--- a/violent-theremin/styles/app.css
+++ b/violent-theremin/styles/app.css
@@ -28,7 +28,7 @@ h1 {
/* button styling */
-button {
+button:not(.start-message) {
background-color: #0088cc;
background-image: linear-gradient(to bottom, #0088cc 0%, #0055cc 100%);
text-shadow: 1px 1px 1px black;
@@ -48,13 +48,13 @@ button {
position: absolute;
}
-button:hover,
-button:focus {
+button:not(.start-message):hover,
+button:not(.start-message):focus {
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.7);
opacity: 1;
}
-button:active {
+button:not(.start-message):active {
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.7);
}
@@ -73,6 +73,20 @@ button:active {
left: 5px;
}
+.start-message {
+ all: unset;
+ position: fixed;
+ inset: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: transparent;
+ cursor: pointer;
+ font-size: 50px;
+ text-align: center;
+ overflow: hidden;
+}
+
.start-message {
position: absolute;
font-size: 1.4rem;
From 4e3ef6532fd319198a2509498a7124ebe4c24fb4 Mon Sep 17 00:00:00 2001
From: mattfsourcecode <24415914+mattfsourcecode@users.noreply.github.com>
Date: Mon, 21 Oct 2024 04:07:36 -0400
Subject: [PATCH 2/5] Prevent element selection globally with user-select
---
violent-theremin/styles/app.css | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/violent-theremin/styles/app.css b/violent-theremin/styles/app.css
index 1d1c4d8..e30f55f 100644
--- a/violent-theremin/styles/app.css
+++ b/violent-theremin/styles/app.css
@@ -1,4 +1,10 @@
/* general styling */
+* {
+ user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ -moz-user-select: none;
+}
html {
font-size: 10px;
From 30df5db576c24314c4f2ebe55dbab01a4500ca91 Mon Sep 17 00:00:00 2001
From: mattfsourcecode <24415914+mattfsourcecode@users.noreply.github.com>
Date: Mon, 21 Oct 2024 04:13:03 -0400
Subject: [PATCH 3/5] Prevent overscroll behavior
---
violent-theremin/styles/app.css | 1 +
1 file changed, 1 insertion(+)
diff --git a/violent-theremin/styles/app.css b/violent-theremin/styles/app.css
index e30f55f..1e54b3e 100644
--- a/violent-theremin/styles/app.css
+++ b/violent-theremin/styles/app.css
@@ -9,6 +9,7 @@
html {
font-size: 10px;
height: 100%;
+ overscroll-behavior: none;
}
body {
From 989db38f271c70805897a11665a44fcd3f5d5ea4 Mon Sep 17 00:00:00 2001
From: mattfsourcecode <24415914+mattfsourcecode@users.noreply.github.com>
Date: Tue, 22 Oct 2024 11:11:04 -0400
Subject: [PATCH 4/5] Remove second start-message class selector
---
violent-theremin/styles/app.css | 8 +-------
1 file changed, 1 insertion(+), 7 deletions(-)
diff --git a/violent-theremin/styles/app.css b/violent-theremin/styles/app.css
index 1e54b3e..e2a23ee 100644
--- a/violent-theremin/styles/app.css
+++ b/violent-theremin/styles/app.css
@@ -89,17 +89,11 @@ button:not(.start-message):active {
align-items: center;
background-color: transparent;
cursor: pointer;
- font-size: 50px;
+ font-size: 1.4rem;
text-align: center;
overflow: hidden;
}
-.start-message {
- position: absolute;
- font-size: 1.4rem;
- left: 5px;
-}
-
.control-message {
position: absolute;
font-size: 1.4rem;
From 8ab3dc3a8e683d111ac0ef926de382344b62732b Mon Sep 17 00:00:00 2001
From: mattfsourcecode <24415914+mattfsourcecode@users.noreply.github.com>
Date: Tue, 22 Oct 2024 11:11:43 -0400
Subject: [PATCH 5/5] Remove line break in start-message
---
violent-theremin/index.html | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/violent-theremin/index.html b/violent-theremin/index.html
index a442cdd..1a5cc0f 100644
--- a/violent-theremin/index.html
+++ b/violent-theremin/index.html
@@ -9,8 +9,7 @@