Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Implement touch events in violent theremin demo #128

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Fix: Implement touch events in violent theremin demo #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9cd1400
Implement touch events in violent theremin demo
mattfsourcecode Oct 16, 2024
4e3ef65
Prevent element selection globally with user-select
mattfsourcecode Oct 21, 2024
30df5db
Prevent overscroll behavior
mattfsourcecode Oct 21, 2024
989db38
Remove second start-message class selector
mattfsourcecode Oct 22, 2024
8ab3dc3
Remove line break in start-message
mattfsourcecode Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions violent-theremin/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
<link href="styles/app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="start-message">
Click on the browser window or press the tab key to start the app.
</p>
<button class="start-message">
Click anywhere in the browser window to start the app.
</button>

<div class="app-contents">
<h1>Violent Theremin</h1>
Expand Down
39 changes: 30 additions & 9 deletions violent-theremin/scripts/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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;
Expand Down
27 changes: 21 additions & 6 deletions violent-theremin/styles/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
/* general styling */
* {
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
}

html {
font-size: 10px;
height: 100%;
overscroll-behavior: none;
}

body {
Expand All @@ -28,7 +35,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;
Expand All @@ -48,13 +55,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);
}

Expand All @@ -74,9 +81,17 @@ button:active {
}

.start-message {
position: absolute;
all: unset;
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
cursor: pointer;
font-size: 1.4rem;
left: 5px;
text-align: center;
overflow: hidden;
}

.control-message {
Expand Down
Loading