<!-- <!DOCTYPE html> -->
<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>
<!-- Favicon -->
<link rel="icon" href="potato.png" type="image/png">
<!-- External CSS File -->
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="preload" as="fetch" href="https://octothorp.es/?uri=https://annoying.one/">
<link rel="octo:octothorpes" href="weirdweboctober">
<link rel="octo:octothorpes" href="Food"> -->
<!-- Google Font (Comic Neue) -->
<link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap" rel="stylesheet">
<!-- External Libraries -->
<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>
<!-- Custom Sketch File -->
<script src="mySketch.js" defer></script>
</head>
<header>
<h3>The Annoying Potato</h3>
</header>
<body>
<!-- Placeholder for p5.js sketch -->
<div id="sketch-container"></div>
</body>
</html>/* 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 */
}
* {
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 {
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 */
}
//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
}
});
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.