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

Jump to bottom

Fix: Implement touch events in violent theremin demo #128

Open
wants to merge 1 commit 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
1 commit
Select commit
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
7 changes: 4 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,10 @@
<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 <br />
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
22 changes: 18 additions & 4 deletions violent-theremin/styles/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
}

Expand All @@ -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;
Expand Down
Loading