{"name":"Piano Keyboard HALLOWEEN SPECIAL!","description":"Play any song you like, find hidden features in trills and buttons, play with confetti, and watch your notes come alive! A fun visual, musical program where notes meet effects.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/a021hgqubxklfutsr8oz","view_count":2,"fork_count":0,"expires_at":null,"created_at":"2025-07-30T01:06:27.748705Z","updated_at":"2025-07-30T01:06:27.748709Z","user_id":70,"status":"PRIVATE","parent_id":4023,"id":9490,"user":{"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active","photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":200},"code":{"script.js":"let whiteKeys = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U'];\nlet blackKeys = ['S', 'D', 'G', 'H', 'J', '2', '3', '5', '6', '7'];\nlet baseFrequencies = {\n 'C': 261.63,\n 'C#': 277.18,\n 'D': 293.66,\n 'D#': 311.13,\n 'E': 329.63,\n 'F': 349.23,\n 'F#': 369.99,\n 'G': 392.00,\n 'G#': 415.30,\n 'A': 440.00,\n 'A#': 466.16,\n 'B': 493.88\n};\nlet keyFrequencies = {};\nlet synths = {};\nlet lowerOctave = 4;\nlet upperOctave = 5;\nlet playingNotes = [];\nlet noteSpeed = 4; // Speed at which notes move from right to left\nlet activeNotes = {}; // Object to track active notes and their lengths\nlet hueValue = 0; // Add this global variable to keep track of the hue\nlet volumeSlider;\nlet particles = []; // Global array to store particles\nlet dots = []; // Array to store dots\nlet comboCount = 0; // To track the number of consecutive notes\nlet lastNoteTime = 0; // To track the time of the last note played\nlet confettiParticles = []; // Array to store confetti particles\nlet waveAmplitude = 0; // Initial amplitude of the wave\nlet waveFrequency = 1; // Initial frequency of the wave\nlet waveformEmojis = []; // Array to store emoji data for the waveform\nlet scarySynth; // Variable to store the scary synth\nlet nextScarySoundTime = 0; // Track the next time to play the sound\nlet bats = []; // Array to store bat positions\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n colorMode(HSB);\n initializeSynths();\n initializeFrequencies();\n drawKeyboard();\n\n // Generate the waveform emojis\n generateWaveformEmojis();\n\n // Create the volume slider\n volumeSlider = createSlider(-60, 0, -30, 1);\n volumeSlider.position(10, 10);\n volumeSlider.style('width', '200px');\n\n // Initialize dots with random positions and sizes\n for (let i = 0; i < 50; i++) {\n dots.push({\n x: random(width),\n y: random(height),\n speed: random(1, 3), // Random speed for each dot\n size: random(3, 10) // Random size for each dot\n });\n }\n\n // Set initial time for the next scary sound\n nextScarySoundTime = millis() + random(1000, 10000); // Between 5 and 15 seconds\n\n // Initialize the scary synth with adjusted volume\n scarySynth = new Tone.MonoSynth({\n oscillator: {\n type: \"fmsquare\",\n modulationType: \"sawtooth\",\n modulationIndex: 3,\n harmonicity: 3.4\n },\n envelope: {\n attack: 0.1,\n decay: 0.4,\n sustain: 0.7,\n release: 1\n },\n volume: -20 // Adjust the volume here (e.g., -20 dB is a softer volume)\n }).toDestination();\n\n // Add reverb for a spooky effect\n const reverb = new Tone.Reverb({\n decay: 3,\n wet: 0.5\n }).toDestination();\n\n scarySynth.connect(reverb);\n\n // Initialize bats with random positions\n for (let i = 0; i < 5; i++) {\n bats.push({\n x: random(width),\n y: random(height / 2),\n speed: random(1, 3)\n });\n }\n}\n\nfunction generateWaveformEmojis() {\n waveformEmojis = []; // Clear any existing data\n\n for (let x = 0; x < width; x += 10) { // Increment x by 10 to space out emojis\n // Calculate the angle for the current x position\n let angle = map(x, 0, width, -PI * waveFrequency, PI * waveFrequency);\n let y = waveAmplitude * sin(angle + frameCount * 0.1) + 50;\n\n // Randomly choose between pumpkin and candy corn\n let emoji = random() < 0.8 ? '🎃' : '🍬'; // 80% chance for pumpkin, 20% for candy corn\n\n // Store the position and type of emoji\n waveformEmojis.push({ x, y, emoji });\n }\n}\n\nfunction drawWaveform() {\n noStroke(); // No outline for emojis\n fill(255); // White color for text\n\n // Update and render emojis from the stored data\n for (let emojiData of waveformEmojis) {\n // Calculate the updated y position based on frameCount\n let angle = map(emojiData.x, 0, width, -PI * waveFrequency, PI * waveFrequency);\n let y = waveAmplitude * sin(angle + frameCount * 0.1) + 50;\n\n textSize(16); // Set text size for the emoji\n textAlign(CENTER, CENTER); // Center-align the text\n text(emojiData.emoji, emojiData.x, y); // Draw the emoji at its updated position\n }\n\n // Gradually reduce the wave amplitude and frequency\n waveAmplitude = lerp(waveAmplitude, 0, 0.05);\n waveFrequency = lerp(waveFrequency, 1, 0.05); // Return frequency to base value (1)\n}\n\nfunction initializeSynths() {\n [...whiteKeys, ...blackKeys].forEach((key) => {\n const organSynth = new Tone.PolySynth(Tone.Synth, {\n oscillator: {\n type: \"sawtooth\" // Use sawtooth wave for an organ-like sound\n },\n envelope: {\n attack: 0.5, // Longer attack for smoother onset\n decay: 0.5, // Longer decay\n sustain: 0.7, // Higher sustain level for continuous sound\n release: 1.5, // Longer release for lingering notes\n },\n volume: -12 // Set initial volume here\n }).toDestination();\n\n synths[key] = organSynth;\n });\n}\n\nfunction initializeFrequencies() {\n keyFrequencies = {\n 'Z': baseFrequencies['C'] * Math.pow(2, lowerOctave - 4),\n 'S': baseFrequencies['C#'] * Math.pow(2, lowerOctave - 4),\n 'X': baseFrequencies['D'] * Math.pow(2, lowerOctave - 4),\n 'D': baseFrequencies['D#'] * Math.pow(2, lowerOctave - 4),\n 'C': baseFrequencies['E'] * Math.pow(2, lowerOctave - 4),\n 'V': baseFrequencies['F'] * Math.pow(2, lowerOctave - 4),\n 'G': baseFrequencies['F#'] * Math.pow(2, lowerOctave - 4),\n 'B': baseFrequencies['G'] * Math.pow(2, lowerOctave - 4),\n 'H': baseFrequencies['G#'] * Math.pow(2, lowerOctave - 4),\n 'N': baseFrequencies['A'] * Math.pow(2, lowerOctave - 4),\n 'J': baseFrequencies['A#'] * Math.pow(2, lowerOctave - 4),\n 'M': baseFrequencies['B'] * Math.pow(2, lowerOctave - 4),\n 'Q': baseFrequencies['C'] * Math.pow(2, upperOctave - 4),\n '2': baseFrequencies['C#'] * Math.pow(2, upperOctave - 4),\n 'W': baseFrequencies['D'] * Math.pow(2, upperOctave - 4),\n '3': baseFrequencies['D#'] * Math.pow(2, upperOctave - 4),\n 'E': baseFrequencies['E'] * Math.pow(2, upperOctave - 4),\n 'R': baseFrequencies['F'] * Math.pow(2, upperOctave - 4),\n '5': baseFrequencies['F#'] * Math.pow(2, upperOctave - 4),\n 'T': baseFrequencies['G'] * Math.pow(2, upperOctave - 4),\n '6': baseFrequencies['G#'] * Math.pow(2, upperOctave - 4),\n 'Y': baseFrequencies['A'] * Math.pow(2, upperOctave - 4),\n '7': baseFrequencies['A#'] * Math.pow(2, upperOctave - 4),\n 'U': baseFrequencies['B'] * Math.pow(2, upperOctave - 4)\n };\n}\n\nfunction drawBackgroundAnimation() {\n hueValue = (hueValue + 0.5) % 360;\n\n // Draw gradient background with black and orange\n for (let y = 0; y < height; y++) {\n let inter = map(y, 0, height, 0, 1);\n let startColor = color(0, 0, 0); // Black\n let endColor = color(30, 100, 100); // Orange (Hue 30 in HSB)\n\n let c = lerpColor(startColor, endColor, inter);\n stroke(c);\n line(0, y, width, y);\n }\n\n // Draw and update dots\n fill(50, 100, 100); // Yellow color for dots\n noStroke();\n for (let dot of dots) {\n ellipse(dot.x, dot.y, dot.size); // Use the size attribute to draw each dot\n dot.y += dot.speed; // Move dot down\n if (dot.y > height) {\n dot.y = 0; // Loop back to top\n dot.x = random(width); // Randomize x position\n }\n }\n}\n\nclass Particle {\n constructor(x, y, hue) {\n this.x = x;\n this.y = y;\n this.vx = random(-1, 1);\n this.vy = random(-2, -5);\n this.alpha = 1;\n this.hue = hue + random(-20, 20);\n this.size = 5;\n this.maxSpeed = 5;\n }\n\n update() {\n this.vy += 0.1;\n this.x += this.vx;\n this.y += this.vy;\n\n // Cap the velocity to prevent extreme speeds\n this.vx = constrain(this.vx, -this.maxSpeed, this.maxSpeed);\n this.vy = constrain(this.vy, -this.maxSpeed, this.maxSpeed);\n\n this.size = lerp(this.size, 5, 0.05);\n this.hue = lerp(this.hue, this.hue, 0.01);\n }\n\n show() {\n noStroke();\n fill(this.hue, 100, 100, this.alpha);\n textSize(this.size * 2); // Adjust text size based on particle size\n text('🎃', this.x, this.y); // Draw pumpkin emoji\n }\n\n isFinished() {\n return this.alpha <= 0;\n }\n\n applyForce(fx, fy) {\n this.vx += fx;\n this.vy += fy;\n }\n\n bounce() {\n if (this.y >= height - height / 5 - 5) {\n this.y = height - height / 5 - 5;\n this.vy = -(this.vy - 1.5);\n }\n if (this.x >= width || this.x <= 0) {\n this.x -= this.vx;\n this.vx = -(this.vx - 1.5);\n }\n }\n\n checkCollision(other) {\n let distance = dist(this.x, this.y, other.x, other.y);\n if (distance < this.size) {\n // Swap velocities for simple elastic collision\n let tempVx = this.vx;\n let tempVy = this.vy;\n\n this.vx = other.vx;\n this.vy = other.vy;\n\n other.vx = tempVx;\n other.vy = tempVy;\n\n // Separate particles slightly more\n let overlap = (this.size - distance) / 1.8; // Increase separation factor\n let angle = atan2(other.y - this.y, other.x - this.x);\n let sepX = overlap * cos(angle);\n let sepY = overlap * sin(angle);\n\n this.x -= sepX;\n this.y -= sepY;\n other.x += sepX;\n other.y += sepY;\n }\n }\n}\n\nfunction draw() {\n drawBackgroundAnimation();\n\n const volumeValue = volumeSlider.value();\n for (let key in synths) {\n synths[key].volume.value = volumeValue;\n }\n\n drawWaveform(); // Call the function to draw the waveform\n\n for (let i = particles.length - 1; i >= 0; i--) {\n particles[i].update();\n particles[i].show();\n particles[i].alpha -= 0.01; // Decrease transparency gradually\n\n if (particles[i].isFinished()) {\n particles.splice(i, 1);\n }\n }\n\n // Update and show confetti particles\n for (let i = confettiParticles.length - 1; i >= 0; i--) {\n confettiParticles[i].update();\n confettiParticles[i].show();\n confettiParticles[i].bounce()\n if (confettiParticles[i].vx > 0.1) {\n confettiParticles[i].vx -= 0.01\n } else if (confettiParticles[i].vx < -0.1) {\n confettiParticles[i].vx += 0.01\n } else {\n confettiParticles[i].vx = 0\n }\n\n // Check for collisions with other confetti particles\n for (let j = i - 1; j >= 0; j--) {\n confettiParticles[i].checkCollision(confettiParticles[j]);\n }\n }\n\n drawPlayingNotes();\n drawKeyboard();\n drawBats(); // Draw flying bats\n\n // Check if it's time to play the scary sound\n if (millis() > nextScarySoundTime) {\n playScarySound(); // Play the scary sound effect\n // Set the next time to play the sound\n nextScarySoundTime = millis() + random(5000, 15000); // Between 5 and 15 seconds\n }\n}\n\nfunction drawBats() {\n fill(255); // White color for bats\n textSize(32); // Set text size for bat emojis\n\n for (let bat of bats) {\n text('🦇', bat.x, bat.y); // Draw bat emoji\n bat.x += bat.speed; // Move bat to the right\n\n // Loop bat to the left side if it goes off-screen\n if (bat.x > width) {\n bat.x = -50;\n bat.y = random(height / 2); // Randomize y position\n }\n }\n}\n\nfunction playScarySound() {\n const notes = [\"C2\", \"D2\", \"Eb2\", \"F2\", \"G2\"]; // Spooky low notes\n const randomNote = notes[Math.floor(Math.random() * notes.length)];\n scarySynth.triggerAttackRelease(randomNote, \"2n\"); // Play note for half a measure\n}\n\nfunction drawPlayingNotes() {\n noStroke();\n\n // Draw trails for all playing notes\n for (let i = playingNotes.length - 1; i >= 0; i--) {\n let note = playingNotes[i];\n let hue = 0; // Map y-coordinate to hue\n\n for (let j = 0; j < note.history.length; j++) {\n let pos = note.history[j];\n let alpha = map(j, 0, note.history.length, 0, 0.1); // Reduce the maximum alpha to 0.3 for less opacity\n fill(hue, 0, 0, alpha); // HSB color with variable alpha for visibility\n rect(pos.x, pos.y, note.length, 10);\n }\n }\n\n // Draw all playing notes\n for (let i = playingNotes.length - 1; i >= 0; i--) {\n let note = playingNotes[i];\n let hue = 0; // Map y-coordinate to hue\n fill(hue, 0, 0);\n rect(note.x, note.y + note.yOffset, note.length, 10); // Draw the note with yOffset applied\n\n note.x -= noteSpeed;\n note.yOffset += note.fallSpeed; // Increase the yOffset by fallSpeed\n note.fallSpeed += 0.1; // Gradually increase fallSpeed\n\n // Add current position to history\n note.history.push({ x: note.x, y: note.y + note.yOffset });\n if (note.history.length > 50) {\n note.history.shift(); // Limit the length of the history to 50\n }\n\n if (note.x + note.length < 0) {\n playingNotes.splice(i, 1); // Remove the note if it goes off-screen\n }\n\n if (note.y + note.yOffset >= height - height / 5 - 10) {\n note.yOffset -= note.fallSpeed;\n note.fallSpeed = -(note.fallSpeed - 1.5);\n }\n }\n\n // Draw all active notes\n for (let key in activeNotes) {\n let note = activeNotes[key];\n let hue = 0; // Map y-coordinate to hue\n fill(hue, 0, 0);\n rect(note.x, note.y, note.length, 10); // Draw the active note without applying yOffset\n\n note.length += noteSpeed; // Increase the length of the active note\n note.x -= noteSpeed;\n }\n}\n\nfunction drawKeyboard() {\n stroke(0, 0, 0);\n let whiteKeyWidth = width / whiteKeys.length;\n let blackKeyWidth = whiteKeyWidth / 2;\n let whiteKeyHeight = height / 5;\n let blackKeyHeight = height / 10;\n\n for (let i = 0; i < whiteKeys.length; i++) {\n fill(keyIsDown(whiteKeys[i].charCodeAt(0)) ? 70 : 255);\n rect(i * whiteKeyWidth, height - whiteKeyHeight, whiteKeyWidth, whiteKeyHeight);\n fill(0);\n textAlign(CENTER, CENTER);\n textSize(10)\n text(whiteKeys[i], i * whiteKeyWidth + whiteKeyWidth / 2, height - whiteKeyHeight / 2);\n\n // Draw pumpkin emoji on each white key\n textSize(24); // Set text size for emoji\n text('🎃', i * whiteKeyWidth + whiteKeyWidth / 2, height - whiteKeyHeight / 4);\n }\n\n let blackKeyPositions = [0, 1, 3, 4, 5, 7, 8, 10, 11, 12];\n for (let i = 0; i < blackKeys.length; i++) {\n let whiteKeyIndex = blackKeyPositions[i];\n let xOffset = whiteKeyIndex * whiteKeyWidth + 3 * whiteKeyWidth / 4;\n fill(keyIsDown(blackKeys[i].charCodeAt(0)) ? 50 : [280, 100, 70]);\n rect(xOffset, height - whiteKeyHeight, blackKeyWidth, blackKeyHeight);\n fill(255);\n textAlign(CENTER, CENTER);\n textSize(10)\n text(blackKeys[i], xOffset + blackKeyWidth / 2, height - blackKeyHeight / 2 - whiteKeyHeight / 2);\n\n // Draw pumpkin emoji higher up on each black key\n textSize(15); // Smaller text size for smaller keys\n text('🎃', xOffset + blackKeyWidth / 2, height - blackKeyHeight - blackKeyHeight / 4);\n }\n}\n\nfunction keyPressed() {\n let pressedKey = key.toUpperCase();\n if (keyFrequencies[pressedKey] && synths[pressedKey]) {\n synths[pressedKey].triggerAttack(keyFrequencies[pressedKey]);\n let yCoordinate = getYCoordinateForKey(pressedKey);\n activeNotes[pressedKey] = { key: pressedKey, x: width, y: yCoordinate, length: 0, yOffset: 0, fallSpeed: -3, history: [] };\n\n let whiteKeyWidth = width / whiteKeys.length;\n let whiteKeyHeight = height / 5;\n let xPos;\n let yPos = height - whiteKeyHeight;\n\n if (whiteKeys.includes(pressedKey)) {\n let index = whiteKeys.indexOf(pressedKey);\n xPos = index * whiteKeyWidth + whiteKeyWidth / 2;\n } else if (blackKeys.includes(pressedKey)) {\n let blackKeyWidth = whiteKeyWidth / 2;\n let blackKeyPositions = [0, 1, 3, 4, 5, 7, 8, 10, 11, 12];\n let index = blackKeys.indexOf(pressedKey);\n xPos = blackKeyPositions[index] * whiteKeyWidth + 3 * whiteKeyWidth / 4;\n yPos = height - (height / 5) - (height / 10);\n }\n\n let hue = map(yCoordinate % height, 0, height, 0, 360);\n\n for (let i = 0; i < 20; i++) {\n particles.push(new Particle(xPos, yPos, hue));\n }\n\n // Increase wave amplitude and frequency when a note is played\n waveAmplitude = 50;\n waveFrequency = 5; // Set frequency higher temporarily\n\n // Combo tracking\n if (millis() - lastNoteTime < 300) { // 500ms time window for combo\n comboCount++;\n } else {\n comboCount = 1; // Reset combo if time window exceeded\n }\n\n lastNoteTime = millis();\n\n // Trigger confetti on combo\n if (comboCount >= 5) { // Combo threshold\n triggerConfetti();\n comboCount = 0; // Reset combo after triggering confetti\n }\n\n } else if (keyCode === UP_ARROW) {\n upperOctave++;\n initializeFrequencies();\n } else if (keyCode === DOWN_ARROW) {\n upperOctave--;\n initializeFrequencies();\n } else if (keyCode === LEFT_ARROW) {\n lowerOctave--;\n initializeFrequencies();\n } else if (keyCode === RIGHT_ARROW) {\n lowerOctave++;\n initializeFrequencies();\n }\n}\n\nfunction getYCoordinateForFrequency(frequency) {\n // Map the frequency to a logarithmic scale\n const minFrequency = baseFrequencies['C'] * Math.pow(2, lowerOctave - 4);\n const maxFrequency = baseFrequencies['B'] * Math.pow(2, upperOctave - 4 + 1); // One octave above upperOctave B\n return map(Math.log(frequency), Math.log(minFrequency), Math.log(maxFrequency), height - height / 3, 0);\n}\n\nfunction getYCoordinateForKey(key) {\n if (keyFrequencies[key]) {\n return getYCoordinateForFrequency(keyFrequencies[key]);\n }\n height -= 100;\n return height;\n}\n\nfunction keyReleased() {\n let releasedKey = key.toUpperCase();\n if (keyFrequencies[releasedKey] && synths[releasedKey]) {\n synths[releasedKey].releaseAll();\n if (activeNotes[releasedKey]) {\n playingNotes.push(activeNotes[releasedKey]); // Add the note to playingNotes\n delete activeNotes[releasedKey]; // Remove the note from activeNotes\n }\n }\n}\n\nfunction triggerConfetti() {\n for (let i = 0; i < 150; i++) { // Number of confetti particles\n let x = random(width);\n let y = random(height / 2); // Start confetti from the top-half of the screen\n let hue = random(0, 360); // Random colors for the confetti\n confettiParticles.push(new Particle(x, y, hue));\n }\n}\n\nfunction mousePressed() {\n for (let i = 0; i < confettiParticles.length; i++) {\n let particle = confettiParticles[i];\n let distance = dist(mouseX, mouseY, particle.x, particle.y);\n\n if (distance < 50) { // Check if the click is within 50 pixels of a particle\n let angle = atan2(particle.y - mouseY, particle.x - mouseX);\n let force = 5; // Increase the force magnitude for a more noticeable effect\n let fx = force * cos(angle); // Calculate force components\n let fy = force * sin(angle);\n particle.applyForce(fx, fy); // Apply force to the particle\n\n // Change color temporarily\n particle.hue = (particle.hue + 180) % 360; // Shift hue for contrast\n particle.size = 7; // Increase the size temporarily\n }\n }\n}","style.css":"/* style.css */\nbody {\n margin: 0;\n background-color: #222; /* Dark background */\n font-family: 'Arial', sans-serif;\n color: #972bf0; /* Orange text color for a Halloween feel */\n}\n\ncanvas {\n display: block;\n}\n\nh1 {\n text-align: center;\n color: #ff7518; /* Orange color for the header */\n}","index.html":"\n\n\n\n \n \n Piano Keyboard HALLOWEEN SPECIAL\n \n \n \n \n \n\n\n\n

Piano Keyboard

Warning: May lag due to MANY objects

Updates are in the comments

\n\n\n"},"chat_history":[],"assets":[{"name":"Musical Thumbnail","created_at":"2025-07-30T01:06:29.854926Z","resource_type":"image","tags":[],"project_id":9490,"creator":null,"cloudinary_id":"lhvqbfc1slinnmcs6rjf","deleted":false,"id":82112},{"name":"SPOOKY thumb","created_at":"2025-07-30T01:06:29.768684Z","resource_type":"image","tags":[],"project_id":9490,"creator":null,"cloudinary_id":"a021hgqubxklfutsr8oz","deleted":false,"id":82111}],"messages_sent":0,"comments":[],"steps":[]}