{"name":"Online Piano Experience","description":"Experience the joy of playing the piano online with our interactive virtual keyboard! Feel the rhythm and let your creativity flow as you compose beautiful melodies right from your browser.","photo":null,"view_count":3,"fork_count":0,"expires_at":null,"created_at":"2024-07-25T20:01:17.824330Z","updated_at":"2024-07-25T20:01:17.824332Z","user_id":157,"status":"PRIVATE","parent_id":2428,"id":2429,"user":{"photo":null,"email":null,"recess_id":"0b51eead-cc74-4842-b3a3-91078b729d55","created_at":"2024-07-25T19:10:06.977415Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"gustav_m","id":157,"password_hash":null,"updated_at":"2024-07-25T19:10:06.977418Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"var space = 90;\nvar rSide = [];\nvar black = [];\nvar mid = [];\nvar lSide = [];\nvar osc = [];\nvar envo = [];\n\nvar rKee = ['A', null, null, 'F', null, null, null, 'K', null, null];\nvar blKee = ['W', 'E', null, 'T', 'Y', 'U', null, 'O', 'P', null, null];\nvar midKee = [null, 'S', null, null, 'G', 'H', null, null, 'L', null];\nvar lKee = [null, null, 'D', null, null, null, \"J\", null, null, ';'];\n\nfunction setup() {\n createCanvas(space * 10, 500);\n\n for (var j = 0; j < 17; j++) {\n envo.push(new p5.Env());\n envo[j].setADSR(0.01, 0.05, 1, 0.1);\n envo[j].setRange(1, 0);\n osc.push(new p5.Oscillator());\n osc[j].amp(envo[j]);\n }\n\n for (var i = 0; i < 10; i++) {\n rSide.push(new rSideKey(i, space, rKee[i]));\n black.push(new BlackKey(i + 0.667, space, blKee[i]));\n mid.push(new MidKey(i, space, midKee[i]));\n lSide.push(new lSideKey(i, space, lKee[i]));\n }\n}\n\n\nfunction draw() {\n background(255);\n for (var i = 0; i < rSide.length; i++) {\n if (i === 0 || i === 3 || i === 7) {\n rSide[i].display();\n }\n if ((i !== 2) && (i !== 6) && (i !== 9) && (i !== 10)) {\n black[i].display();\n }\n if (i === 1 || i === 4 || i === 5 || i === 8) {\n mid[i].display();\n }\n if (i === 2 || i === 6 || i === 9) {\n lSide[i].display();\n }\n }\n}\n\nfunction keyPressed() {\n var root = 60;\n if (keyCode === 65) {\n rSide[0].red();\n osc[0].start();\n osc[0].freq(midiToFreq(root));\n envo[0].play();\n } else if (keyCode === 87) {\n black[0].red();\n osc[1].start();\n osc[1].freq(midiToFreq(root + 1));\n envo[1].play();\n } else if (keyCode === 83) {\n mid[1].red();\n osc[2].start();\n osc[2].freq(midiToFreq(root + 2));\n envo[2].play();\n } else if (keyCode === 69) {\n black[1].red();\n osc[3].start();\n osc[3].freq(midiToFreq(root + 3));\n envo[3].play();\n } else if (keyCode === 68) {\n lSide[2].red();\n osc[4].start();\n osc[4].freq(midiToFreq(root + 4));\n envo[4].play();\n } else if (keyCode === 70) {\n rSide[3].red();\n osc[5].start();\n osc[5].freq(midiToFreq(root + 5));\n envo[5].play();\n } else if (keyCode === 84) {\n black[3].red();\n osc[6].start();\n osc[6].freq(midiToFreq(root + 6));\n envo[6].play();\n } else if (keyCode === 71) {\n mid[4].red();\n osc[7].start();\n osc[7].freq(midiToFreq(root + 7));\n envo[7].play();\n } else if (keyCode === 89) {\n black[4].red();\n osc[8].start();\n osc[8].freq(midiToFreq(root + 8));\n envo[8].play();\n } else if (keyCode === 72) {\n mid[5].red();\n osc[9].start();\n osc[9].freq(midiToFreq(root + 9));\n envo[9].play();\n } else if (keyCode === 85) {\n black[5].red();\n osc[10].start();\n osc[10].freq(midiToFreq(root + 10));\n envo[10].play();\n } else if (keyCode === 74) {\n lSide[6].red();\n osc[11].start();\n osc[11].freq(midiToFreq(root + 11));\n envo[11].play();\n } else if (keyCode === 75) {\n rSide[7].red();\n osc[12].start();\n osc[12].freq(midiToFreq(root + 12));\n envo[12].play();\n } else if (keyCode === 79) {\n black[7].red();\n osc[13].start();\n osc[13].freq(midiToFreq(root + 13));\n envo[13].play();\n } else if (keyCode === 76) {\n mid[8].red();\n osc[14].start();\n osc[14].freq(midiToFreq(root + 14));\n envo[14].play();\n } else if (keyCode === 80) {\n black[8].red();\n osc[15].start();\n osc[15].freq(midiToFreq(root + 15));\n envo[15].play();\n } else if (keyCode === 186) {\n lSide[9].red();\n osc[16].start();\n osc[16].freq(midiToFreq(root + 16));\n envo[16].play();\n }\n}\n\nfunction keyReleased() {\n for (var i = 0; i < 10; i++) {\n rSide[i].white();\n black[i].white();\n mid[i].white();\n lSide[i].white();\n }\n}\n\nfunction rSideKey(start, space, kee) {\n this.x = start * space;\n this.keyWidth = space;\n this.col = color(255);\n this.kee = kee;\n this.size = space / 3;\n\n this.display = function () {\n fill(this.col);\n beginShape();\n vertex(this.x, 0);\n vertex(this.x, height);\n vertex(this.x + this.keyWidth, height);\n vertex(this.x + this.keyWidth, height * 0.6)\n vertex(this.x + (this.keyWidth * 0.667), height * 0.6)\n vertex(this.x + (this.keyWidth * 0.667), 0);\n endShape();\n\n fill(0, 0, 230);\n textSize(this.size);\n text(this.kee, this.x + (this.keyWidth * 0.4), height - this.size);\n }\n\n this.red = function () {\n this.col = color(255, 0, 0);\n }\n\n this.white = function () {\n this.col = color(255);\n }\n}\n\nfunction BlackKey(start, space, kee) {\n this.x = start * space;\n this.keyWidth = space;\n this.col = color(0);\n this.kee = kee;\n this.size = space / 3;\n\n this.display = function () {\n fill(this.col);\n rect(this.x, 0, (this.keyWidth * 0.667), height * 0.6);\n\n fill(255, 0, 230);\n textSize(this.size);\n text(this.kee, this.x + (this.keyWidth * 0.2), (height * 0.6) - this.size);\n }\n\n this.red = function () {\n this.col = color(255, 0, 0);\n }\n\n this.white = function () {\n this.col = color(0);\n }\n}\n\nfunction MidKey(start, space, kee) {\n this.x = start * space;\n this.keyWidth = space;\n this.col = color(255);\n this.kee = kee;\n this.size = space / 3;\n\n this.display = function () {\n fill(this.col);\n beginShape();\n vertex(this.x + (this.keyWidth * 0.333), 0);\n vertex(this.x + (this.keyWidth * 0.333), height * 0.6);\n vertex(this.x, height * 0.6);\n vertex(this.x, height);\n vertex(this.x + this.keyWidth, height);\n vertex(this.x + this.keyWidth, height * 0.6);\n vertex(this.x + (this.keyWidth * 0.667), height * 0.6);\n vertex(this.x + (this.keyWidth * 0.667), 0);\n endShape();\n\n fill(0, 0, 230);\n textSize(this.size);\n text(this.kee, this.x + (this.keyWidth * 0.4), height - this.size);\n }\n\n this.red = function () {\n this.col = color(255, 0, 0);\n }\n\n this.white = function () {\n this.col = color(255);\n }\n}\n\nfunction lSideKey(start, space, kee) {\n this.x = start * space;\n this.keyWidth = space;\n this.col = color(255);\n this.kee = kee;\n this.size = space / 3;\n\n this.display = function () {\n fill(this.col);\n beginShape();\n vertex(this.x + (this.keyWidth * 0.333), 0);\n vertex(this.x + (this.keyWidth * 0.333), height * 0.6);\n vertex(this.x, height * 0.6);\n vertex(this.x, height);\n vertex(this.x + this.keyWidth, height);\n vertex(this.x + this.keyWidth, 0);\n endShape();\n\n fill(0, 0, 230);\n textSize(this.size);\n text(this.kee, this.x + (this.keyWidth * 0.4), height - this.size);\n }\n\n this.red = function () {\n this.col = color(255, 0, 0);\n }\n\n this.white = function () {\n this.col = color(255);\n }\n}","style.css":"body { margin: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .piano { display: flex; justify-content: center; align-items: flex-end; } .key { width: 40px; height: 150px; margin: 0 2px; background: white; border: 1px solid #ccc; position: relative; cursor: pointer; } .key.black { width: 30px; height: 100px; background: black; position: absolute; left: 30px; z-index: 1; }","index.html":"\n\n\n\n \n \n \n \n\n\n\n \n\n\n"},"chat_history":[{"message":"Let's get started!\n Errors:\n","project_id":2429,"created_at":"2025-08-22T18:54:02.699213Z","output_tokens":null,"sender":"client_script","code_id":124299,"deleted":0,"input_tokens":null,"id":167947},{"message":"Great! It looks like you have a piano project using p5.js. Could you tell me more about what you'd like to add or improve in your project? Are there any specific features or changes you have in mind?","project_id":2429,"created_at":"2025-08-22T18:54:02.935825Z","output_tokens":49,"sender":"ai","code_id":124299,"deleted":0,"input_tokens":4968,"id":167948}],"assets":[],"messages_sent":0,"comments":[],"steps":[]}