Virtual Piano

{"name":"Improved Piano","description":"More accurate piano with polyphony and long decay, plus octave control.\n\nNext steps: change wave shape with GUI; change envelope w GUI; additive synthesis for better tone; octave shifts with keyboard.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/hyipctht3emkocmyxgub","view_count":12,"fork_count":0,"expires_at":null,"created_at":"2025-10-08T16:34:42.467756Z","updated_at":"2025-10-08T16:34:42.467759Z","user_id":817,"status":"PUBLIC","parent_id":9930,"id":9967,"user":{"photo":null,"email":"","recess_id":null,"created_at":"2025-10-08T03:48:12.389275Z","reset_token":null,"stripe_customer_id":"cus_TCClLqMnGBDKkC","seats":0,"username":"constantinelevin","id":817,"password_hash":"djghfsdfjkghds","updated_at":"2025-10-08T03:48:12.389282Z","reset_token_expiry":null,"subscription_status":"canceled"},"code":{"script.js":"let whiteKeys = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'];\n\nlet blackKeys = ['W', 'E', 'T', 'Y', 'U', 'O', 'P'];\n\nlet synths = [];\n\nlet isPlaying = [];\n\nlet gainNode;\n\nlet whiteKeyWidth, blackKeyWidth, keyHeight;\n\nlet octave = 3;\n\nconst whiteKeyFrequencies = [\n 130.81, // C3\n 146.83, // D3\n 164.81, // E3\n 174.61, // F3\n 196.00, // G3\n 220.00, // A3\n 246.94, // B3\n 261.63, // C4\n 293.66, //D4\n];\n\nconst blackKeyFrequencies = [\n 138.59, // C#3\n 155.56, // D#3\n 185.00, // F#3\n 207.65, // G#3\n 233.08, // A#3\n 277.18, // C#4\n 311.12, // D#4\n];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(100);\n whiteKeyWidth = width / whiteKeyFrequencies.length;\n blackKeyWidth = whiteKeyWidth * 0.6;\n keyHeight = height - 100;\n\n gainNode = new Tone.Gain(0.3).toDestination();\n\n // Modify frequencies based on the octave\n let adjustedWhiteKeyFrequencies = whiteKeyFrequencies.map(freq => freq * (0.5 * Math.pow(2, octave - 1)));\n let adjustedBlackKeyFrequencies = blackKeyFrequencies.map(freq => freq * (0.5 * Math.pow(2, octave - 1)));\n\n // Create synths for each white key\n for (let i = 0; i < whiteKeys.length; i++) {\n let synth = new Tone.Synth({\n oscillator: {\n type: \"sawtooth\",\n },\n envelope: {\n attack: 0.003,\n decay: 10.0,\n sustain: 0.0,\n release: 0.5,\n }\n }).connect(gainNode);\n\n synth.frequency.value = adjustedWhiteKeyFrequencies[i];\n synths.push(synth);\n isPlaying.push(false);\n }\n\n // Create synths for each black key\n for (let i = 0; i < blackKeys.length; i++) {\n let synth = new Tone.Synth({\n oscillator: {\n type: \"sawtooth\",\n },\n envelope: {\n attack: 0.003,\n decay: 10.0,\n sustain: 0.0,\n release: 0.5,\n }\n }).connect(gainNode);\n\n synth.frequency.value = adjustedBlackKeyFrequencies[i];\n synths.push(synth);\n isPlaying.push(false);\n }\n}\n\nfunction draw() {\n drawKeys();\n}\n\nfunction keyReleased() {\n // Check if the key released is a white key\n let whiteKeyIndex = whiteKeys.indexOf(key.toUpperCase());\n if (whiteKeyIndex !== -1) {\n // Release the synth \n synths[whiteKeyIndex].triggerRelease();\n }\n\n // Check if the key released is a black key\n let blackKeyIndex = blackKeys.indexOf(key.toUpperCase());\n if (blackKeyIndex !== -1) {\n // Release the synth \n synths[whiteKeys.length + blackKeyIndex].triggerRelease();\n }\n}\n\nfunction keyPressed() {\n // Adjust frequencies based on the current octave\n let adjustedWhiteKeyFrequencies = whiteKeyFrequencies.map(freq => freq * (0.5 * Math.pow(2, octave - 1)));\n let adjustedBlackKeyFrequencies = blackKeyFrequencies.map(freq => freq * (0.5 * Math.pow(2, octave - 1)));\n\n // Check if the key pressed is a white key\n let whiteKeyIndex = whiteKeys.indexOf(key.toUpperCase());\n if (whiteKeyIndex !== -1) {\n // Play the synth \n synths[whiteKeyIndex].triggerAttack(adjustedWhiteKeyFrequencies[whiteKeyIndex]);\n }\n\n // Check if the key pressed is a black key\n let blackKeyIndex = blackKeys.indexOf(key.toUpperCase());\n if (blackKeyIndex !== -1) {\n // Play the synth \n synths[whiteKeys.length + blackKeyIndex].triggerAttack(adjustedBlackKeyFrequencies[blackKeyIndex]);\n }\n}\n\nfunction drawKeys() {\n // Draw white keys\n for (let i = 0; i < whiteKeys.length; i++) {\n // Check if the key is being played\n if (keyIsDown(whiteKeys[i].charCodeAt(0))) {\n fill(200); // Slightly gray\n } else {\n fill(255); // White\n }\n rect(i * whiteKeyWidth, 0, whiteKeyWidth, keyHeight);\n\n fill(0); // Black text\n textAlign(CENTER, CENTER);\n textSize(32);\n text(whiteKeys[i], i * whiteKeyWidth + whiteKeyWidth / 2, keyHeight / 1.25);\n }\n\n // Draw black keys with proper spacing\n let blackKeyPositions = [1, 2, 4, 5, 6, 8, 9];\n for (let i = 0; i < blackKeys.length; i++) {\n // Check if the key is being played\n if (keyIsDown(blackKeys[i].charCodeAt(0))) {\n fill(50); // Slightly gray\n } else {\n fill(0); // Black\n }\n let position = blackKeyPositions[i];\n rect((position - 0.3) * whiteKeyWidth, 0, blackKeyWidth, keyHeight * 0.6);\n\n fill(255); // White text\n textAlign(CENTER, CENTER);\n textSize(24);\n text(blackKeys[i], (position - 0.3) * whiteKeyWidth + blackKeyWidth / 2, keyHeight * 0.3);\n }\n}\n\n","style.css":"body {\n margin: 0;\n}\n\ncanvas {\n display: block;\n}","index.html":"\n\n\n\n \n \n Virtual Piano\n \n \n \n \n\n\n\n \n\n\n"},"chat_history":[{"message":"Let's get started!\n Errors:\n","project_id":9967,"created_at":"2025-10-16T21:54:11.330449Z","output_tokens":null,"sender":"client_script","code_id":284717,"deleted":0,"input_tokens":null,"id":174770},{"message":"Great! I see you're working on a virtual piano project. Could you tell me a bit more about what specific features or enhancements you would like to add or change in this project? For example, do you want to add more keys, change the sounds, or maybe add some visual effects?","project_id":9967,"created_at":"2025-10-16T21:54:11.940356Z","output_tokens":68,"sender":"ai","code_id":284717,"deleted":0,"input_tokens":4096,"id":174771},{"message":"function","project_id":9967,"created_at":"2025-10-16T21:54:18.808793Z","output_tokens":null,"sender":"human","code_id":284717,"deleted":0,"input_tokens":null,"id":174772},{"message":"It seems like you're interested in working with a function in your virtual piano project. Could you please specify which function you're looking to focus on or what specific task you want to achieve with the function? For example, are you looking to modify how a key press is handled, or are you interested in adding a new feature like visual effects when a key is played? Let me know so I can assist you better!","project_id":9967,"created_at":"2025-10-16T21:54:19.284398Z","output_tokens":103,"sender":"ai","code_id":284717,"deleted":0,"input_tokens":4092,"id":174773},{"message":"Let's get started!\n Errors:\n","project_id":9967,"created_at":"2025-10-21T18:39:57.032986Z","output_tokens":null,"sender":"client_script","code_id":287864,"deleted":0,"input_tokens":null,"id":175498},{"message":"Awesome! Since you already have a functioning virtual piano, let's dive into what you'd like to enhance or add to your project. Would you like to add more keys, change the sounds, implement visual effects, or something else? Let me know what specific feature you want to work on first!","project_id":9967,"created_at":"2025-10-21T18:39:57.688984Z","output_tokens":71,"sender":"ai","code_id":287864,"deleted":0,"input_tokens":4097,"id":175499},{"message":"Let's get started!\n Errors:\n","project_id":9967,"created_at":"2025-10-26T14:54:00.693675Z","output_tokens":null,"sender":"client_script","code_id":288494,"deleted":0,"input_tokens":null,"id":177034},{"message":"Great! Let's dive right in. What specific feature or enhancement would you like to work on first for your virtual piano project? You can think about adding visual effects, changing sounds, or even adding new keys. Let me know your ideas!","project_id":9967,"created_at":"2025-10-26T14:54:02.255402Z","output_tokens":59,"sender":"ai","code_id":288494,"deleted":0,"input_tokens":4097,"id":177035},{"message":"

Load your new image into your code:

\n\n```javascript\nfunction preload() {\n\n\tbat = loadImage(\"@asset('bat')\");\n}\n```","project_id":9967,"created_at":"2025-10-28T18:24:09.860880Z","output_tokens":null,"sender":"server_script","code_id":288494,"deleted":0,"input_tokens":null,"id":177237}],"assets":[{"project_id":9967,"creator":"","cloudinary_id":"tmfukxjstyya9kfwnlug","deleted":false,"id":87705,"created_at":"2025-10-28T18:24:09.495206Z","name":"bat","resource_type":"image","tags":["Pixel art","Animated","Character"]}],"messages_sent":1,"comments":[],"steps":[]}