Interactive Timbre Study

I made a maze game and came out with this design. 

Here’s my sketch. Pressing key a, d, w, s can control the cat to move and pressing space key can start or stop the hint sound. The hint sound would become rapid when the cat is getting closer to a ghost. How to win this game? Reach the shining exit!

I used mask as a flashlight. I created a white flashlight area around the cat and use applymask to detect whether the pixcel is white. If not, cover it in black.
function createFlashlightMask(x, y, radius) {
 let mask = createGraphics(width, height);
 mask.background(0);
 mask.fill(255);
 mask.ellipse(x, y, radius * 2);
 return mask;
}
function applyMask(mask) {
 loadPixels();
 mask.loadPixels();
 for (let i = 0; i < pixels.length; i += 4) {
  if (mask.pixels[i] === 0) {
  pixels[i] = 0;
  pixels[i + 1] = 0;
  pixels[i + 2] = 0;
 }
}
updatePixels();

I calculate the distence between the cat and ghosts. Then I choose the minimum value of them to be mapped can adjust the sound.
let dist1 = calculateDistance(catX, catY, 120, 100);
let dist2 = calculateDistance(catX, catY, 420, 100);
let dist3 = calculateDistance(catX, catY, 720, 100);
let dist4 = calculateDistance(catX, catY, 520, 300);
let dist5 = calculateDistance(catX, catY, 120, 610);
let dist6 = calculateDistance(catX, catY, 520, 710);
minValue = Math.min(dist1, dist2, dist3, dist4, dist5, dist6);
player.playbackRate = map(minValue, 80, 280, 2, 0.7);

function calculateDistance(x1, y1, x2, y2) {
 let deltaX = x2 - x1;
 let deltaY = y2 - y1;
 let distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
 return distance;
}

Here is a video of it.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *