{"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":4,"fork_count":1,"expires_at":null,"created_at":"2024-07-25T19:49:48.191173Z","updated_at":"2024-07-25T19:49:48.191175Z","user_id":60,"status":"PRIVATE","parent_id":2427,"id":2428,"user":{"photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active"},"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":[],"assets":[],"messages_sent":4,"comments":[],"steps":[]}