Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Sophia Wood (AKA Fractal Kitty)">
  <meta name="description" content="It's an annoying potato from a couple of years ago - you've been warned. I'm sorry. I made it into it's own site for weird web october. ">
  <meta name="keywords" content="p5.js, interactive sketch, potato, sounds, creative coding, weird web october">
  <title>The Annoying Potato</title>

<link rel="icon" href="potato.png" type="image/png">

<link rel="stylesheet" href="style.css">

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js" defer></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/addons/p5.sound.min.js" defer></script>

<script src="mySketch.js" defer></script>
</head>
<header>
  <h3>The Annoying Potato</h3>
</header>

</html>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
/* General body styles */
body {
  background-color: white;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  user-select: none; /* Prevent text selection */
}
* {
  -webkit-tap-highlight-color: transparent; /* For mobile Safari/Chrome */
  outline: none; /* For desktop browsers */
  user-select: none;
}

/* Disable highlight specifically for images, canvas, or buttons */
img,
canvas,
button {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none; /* Prevent text/image selection */
}

/* Center the container for the p5.js sketch */
#sketch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* Style the toggle buttons */
button {
  margin: 5px;
  font-size: 12px; /* Small, reasonable font size */
  padding: 5px 10px; /* Smaller padding */
  background-color: #50371d;
  color: white;
  border: none;
  border-radius: 3px; /* Slightly rounded corners */
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: inline-block; /* Prevents buttons from stretching */
  height: 30px;
}

/* Hover effect for buttons */
button:hover {
  background-color: #b3814c;
}

/* Hide the buttons on mobile devices */
@media (max-width: 600px) {
  button {
    display: none; /* Hide buttons on smaller screens */
  }
}

/* On larger screens, position the buttons below the sketch */
@media (min-width: 601px) {
  button {
    position: relative;
    bottom: -20px; /* Move buttons to the bottom of the canvas */
    font-size: 12px; /* Ensure consistent button font size */
    padding: 5px 10px; /* Keep consistent, smaller padding */
    display: inline-block; /* Ensure buttons are not stretched */
  }
}

p {
  width: 300px;
}
h3 {
  font-family: "Major Mono Display", monospace;
  font-size: 2em; /* Adjust the size of the heading */
  color: #50371d; /* Give it a visible color */
  margin-bottom: 20px; /* Add space below the heading */
}

console.log("Event Fired")
//I took an old sketch from teaching creative coding and made it a website for weird web october (https://annoying.one)
let potato; // the picture of the instrument
let sounds = []; // the array of sounds
let soundSwitch = []; // the sound boolean for on/off
let x = [261, 221, 244, 291, 237, 287, 325, 279]; // x location of eyes
let y = [178.5, 230.5, 248.5, 262.5, 296.5, 312.5, 337.5, 375.5]; // y location of eyes

function preload() {
  potato = loadImage(
    "https://openprocessing-usercontent.s3.amazonaws.com/files/user281109/visual1507080/h48536331cb7815218574d2b8528760d5/potato.png"
  );
  sounds[0] = loadSound(
    "https://openprocessing-usercontent.s3.amazonaws.com/files/user281109/visual1507080/h48536331cb7815218574d2b8528760d5/c.m4a"
  );
  sounds[1] = loadSound(
    "https://openprocessing-usercontent.s3.amazonaws.com/files/user281109/visual1507080/h48536331cb7815218574d2b8528760d5/d.m4a"
  );
  sounds[2] = loadSound(
    "https://openprocessing-usercontent.s3.amazonaws.com/files/user281109/visual1507080/h48536331cb7815218574d2b8528760d5/ege.m4a"
  );
  sounds[3] = loadSound(
    "https://openprocessing-usercontent.s3.amazonaws.com/files/user281109/visual1507080/h48536331cb7815218574d2b8528760d5/f.m4a"
  );
  sounds[4] = loadSound(
    "https://openprocessing-usercontent.s3.amazonaws.com/files/user281109/visual1507080/h48536331cb7815218574d2b8528760d5/g.m4a"
  );
  sounds[5] = loadSound(
    "https://openprocessing-usercontent.s3.amazonaws.com/files/user281109/visual1507080/h48536331cb7815218574d2b8528760d5/a.m4a"
  );
  sounds[6] = loadSound(
    "https://openprocessing-usercontent.s3.amazonaws.com/files/user281109/visual1507080/h48536331cb7815218574d2b8528760d5/b.m4a"
  );
  sounds[7] = loadSound(
    "https://openprocessing-usercontent.s3.amazonaws.com/files/user281109/visual1507080/h48536331cb7815218574d2b8528760d5/c2.m4a"
  );
}

function setup() {
  createCanvas(500, 500); // fixed canvas size - easier if using an image
  for (let i = 0; i < 8; i++) {
    soundSwitch[i] = false; // start with everything off
  }

// Accessibility description for screen readers
  describeElement(
    "canvas",
    "A potato with eyes that, when pressed, make different sounds. These sounds are based on musical notes but actually made by singing variations of potato in a closet during covid lockdown."
  );

// Announce keyboard support
  createElement(
    "p",
    "You can interact with this potato by clicking eyes or by pressing the keys 1 to 8 on your keyboard to toggle sounds."
  );

// Enable keyboard navigation (but hidden on mobile)
  createKeyboardSupport();
}

function draw() {
  background(255);
  translate(width / 2, height / 2); // not necessary, but some stuff would change if this isn't here

// Display potato image
  image(potato, -100, -100, 200, 300);

// Play sounds and highlight eyes if active
  playPotato();
}

// Toggle sounds on mouse click
function mousePressed() {
  if (getAudioContext().state !== "running") {
    getAudioContext().resume();
  }
  for (let i = 0; i < 8; i++) {
    if (
      mouseX > x[i] - 10 &&
      mouseX < x[i] + 10 &&
      mouseY > y[i] - 10 &&
      mouseY < y[i] + 10
    ) {
      soundSwitch[i] = !soundSwitch[i]; // switch on/off if mouse clicked on eye
    }
  }
}

// Handle key press events for accessibility
function keyPressed() {
  // Map keys 1 to 8 to toggle corresponding sounds
  if (key >= "1" && key <= "8") {
    let index = int(key) - 1;
    soundSwitch[index] = !soundSwitch[index]; // toggle sound
  }
}

// Function to play potato sounds and visually highlight "eyes"
function playPotato() {
  for (let i = 0; i < 8; i++) {
    if (soundSwitch[i]) {
      fill(255); // white eyes
      stroke(255);
      circle(x[i] - width / 2, y[i] - height / 2, 4); // draw circle on eye if on
      if (!sounds[i].isPlaying()) {
        sounds[i].play(); // play sound if not already playing
      }
    }
  }
}

// Create keyboard support for toggling sounds with focus and Enter/Space keys
function createKeyboardSupport() {
  for (let i = 0; i < 8; i++) {
    let btn = createButton(`Sound ${i + 1}`);
    btn.attribute("aria-label", `Play sound ${i + 1}`);
    btn.position(10, i * 40 + 20); // Position buttons for keyboard users
    btn.mousePressed(() => {
      soundSwitch[i] = !soundSwitch[i]; // toggle sound with button click
    });

// Add keyboard interaction for 'Enter' and 'Space' keys
    btn.elt.addEventListener("keydown", (event) => {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault(); // Prevent default scrolling behavior
        soundSwitch[i] = !soundSwitch[i]; // Toggle sound on Enter or Space
      }
    });
  }
}

Frontend Forever App