Virtual Marimba in A Major

{"name":"Virtual Marimba in A Major","description":"Dive into the rhythm with a virtual marimba tuned to the A major key. This project invites you to create a singular octave experience, allowing you to explore the resonant sounds of a marimba right from your browser. Whether you're a music enthusiast or a curious programmer, this project offers a harmonious blend of creativity and coding.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/lbyi95exy8uqjlvdfx3v","view_count":4,"fork_count":0,"expires_at":null,"created_at":"2025-08-25T23:44:01.538286Z","updated_at":"2025-08-25T23:44:01.538288Z","user_id":413,"status":"PUBLIC","parent_id":null,"id":9734,"user":{"photo":null,"email":null,"recess_id":"083b1e15-88e8-4fe7-963d-5fcc296701bf","created_at":"2025-03-11T16:09:42.743745Z","reset_token":null,"stripe_customer_id":null,"seats":0,"username":"Iver","id":413,"password_hash":null,"updated_at":"2025-03-11T16:09:42.743750Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let keys = [];\n\nlet stickLength = 80;\n\nlet ballDiameter = 20;\n\nlet notes = [\"A4\", \"B4\", \"C#5\", \"D5\", \"E5\", \"F#5\", \"G#5\", \"A5\", \"B5\", \"C#6\", \"D6\", \"E6\"];\n\nlet activeNotes = [];\n\nlet synths = {};\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235);\n createMarimbaKeys();\n}\n\nfunction draw() {\n background(135, 206, 235);\n drawMarimbaKeys();\n drawStick();\n\n // Check if mouse is pressed\n for (let key of keys) {\n // Check if the ball is touching the key\n if (mouseX > key.x && mouseX < key.x + key.width &&\n mouseY - stickLength > key.y && mouseY - stickLength < key.y + key.height) {\n if (mouseIsPressed) {\n playNoteOnHold(key.note, key); // Hold the note while mouse is pressed\n } else {\n stopNote(key.note); // Stop the note if mouse is not pressed\n }\n break; // Stop checking after playing one note\n }\n }\n}\n\nfunction playNote(note, key) {\n // Check if the note is already active\n if (!activeNotes.includes(note)) {\n // If we have less than 3 active notes, add this note\n if (activeNotes.length < 3) {\n activeNotes.push(note);\n } else {\n // If there are already 3 active notes, mute the oldest one\n activeNotes.shift(); // Remove the oldest note\n activeNotes.push(note); // Add the new note\n }\n }\n\n // Create a synth with marimba-like settings\n const synth = new Tone.Synth({\n oscillator: {\n type: \"sine\" // Change to a sine wave for a smoother sound\n },\n envelope: {\n attack: 0.05, // Shorter attack for a sharper sound\n decay: 0.1, // Quick decay for a percussive feel\n sustain: 0, // No sustain for a more immediate stop\n release: 0.2 // Release time\n },\n volume: -8 // Set the volume to -8 dB for a bit more presence\n }).toDestination();\n\n synth.triggerAttackRelease(note, \"8n\"); // Play note for an eighth note duration\n\n // Set the key as pressed\n key.isPressed = true;\n\n // Revert the key color back after 0.5 seconds\n setTimeout(() => {\n key.isPressed = false;\n\n // Remove the note from activeNotes when released\n const index = activeNotes.indexOf(note);\n if (index > -1) {\n activeNotes.splice(index, 1); // Remove the note from the active notes\n }\n }, 500);\n}\n\nfunction drawStick() {\n stroke(139, 69, 19); // Wooden stick color\n strokeWeight(4);\n line(mouseX, mouseY, mouseX, mouseY - stickLength);\n\n fill(0, 128, 128); // Teal ball color\n noStroke();\n ellipse(mouseX, mouseY - stickLength, ballDiameter, ballDiameter);\n}\n\nfunction stopAllNotes() {\n // Stop all active notes\n for (let note of activeNotes) {\n stopNote(note);\n }\n}\n\nfunction createMarimbaKeys() {\n let keyWidth = width / notes.length;\n for (let i = 0; i < notes.length; i++) {\n keys.push({\n x: i * keyWidth,\n y: height / 2,\n width: keyWidth,\n height: 100,\n note: notes[i],\n isPressed: false // Track if the key is pressed\n });\n }\n}\n\nfunction drawMarimbaKeys() {\n for (let key of keys) {\n // Change color if the key is pressed\n fill(key.isPressed ? color(255, 150, 150) : color(255, 182, 193)); // Darker red if pressed\n stroke(220, 20, 60); // Dark red color for the outline\n strokeWeight(2); // Set the thickness of the outline\n rect(key.x, key.y, key.width, key.height);\n }\n noStroke(); // Reset stroke to prevent affecting other drawings\n}\n\nfunction playNoteOnHold(note, key) {\n // If the synth for this note doesn't already exist, create it\n if (!synths[note]) {\n const synth = new Tone.Synth({\n oscillator: {\n type: \"sine\"\n },\n envelope: {\n attack: 0.05,\n decay: 0.1,\n sustain: 1, // Hold the note while mouse is pressed\n release: 0.2\n },\n volume: -8\n }).toDestination();\n\n synth.triggerAttack(note); // Start playing the note\n synths[note] = synth; // Store the synth in the object\n activeNotes.push(note); // Add the note to active notes\n }\n\n // Set the key as pressed\n key.isPressed = true;\n}\n\nfunction stopNote(note) {\n // Stop the note if it was active\n const index = activeNotes.indexOf(note);\n if (index > -1) {\n activeNotes.splice(index, 1); // Remove the note from active notes\n }\n\n // If there is a synth for this note, release it\n if (synths[note]) {\n synths[note].triggerRelease(); // Stop the note\n delete synths[note]; // Remove the synth from the object\n }\n\n // Reset the key pressed state\n keys.find(k => k.note === note).isPressed = false; // Reset the key color\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Virtual Marimba in A Major\n \n \n \n \n\n\n \n\n"},"chat_history":[{"code_id":278692,"sender":"server_script","deleted":0,"input_tokens":null,"id":168311,"message":"

Load your new image into your code:

\n\n```javascript\nfunction preload() {\n\n\tbubble-pixelArt = loadImage(\"@asset('bubble-pixelArt')\");\n}\n```","project_id":9734,"created_at":"2025-08-25T23:43:52.597023Z","output_tokens":null}],"assets":[{"project_id":9734,"creator":"","cloudinary_id":"lbyi95exy8uqjlvdfx3v","deleted":false,"id":85119,"name":"bubble-pixelArt","created_at":"2025-08-25T23:43:52.145894Z","resource_type":"image","tags":null}],"messages_sent":18,"comments":[{"content":"👍","id":1275,"user_id":413,"user":{"photo":null,"email":null,"recess_id":"083b1e15-88e8-4fe7-963d-5fcc296701bf","created_at":"2025-03-11T16:09:42.743745Z","reset_token":null,"stripe_customer_id":null,"seats":0,"username":"Iver","id":413,"password_hash":null,"updated_at":"2025-03-11T16:09:42.743750Z","reset_token_expiry":null,"subscription_status":null},"project_id":9734,"created_at":"2025-08-25T23:46:17.400139Z","updated_at":"2025-08-25T23:46:17.400140Z"}],"steps":[]}