BeatBox Keyboard Sequencer

{"name":"DrumMachineDemo","description":"Create your own beats with the BeatBox Keyboard Sequencer! Trigger drum sounds, sequence beats, and play live with the keyboard. Let your creativity flow as you build unique rhythms and grooves.","photo":null,"view_count":2,"fork_count":1,"expires_at":null,"created_at":"2024-01-05T21:16:17.387485Z","updated_at":"2024-01-05T21:16:17.387488Z","user_id":5,"status":"PUBLIC","parent_id":196,"id":280,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let kick;\nlet hihat;\nlet snare;\n\nfunction preload() {\n kick = loadSound('@asset(\"kick\")', soundLoaded, soundError);\n hihat = loadSound('@asset(\"hihat\")', soundLoaded, soundError);\n snare = loadSound('@asset(\"snare\")', soundLoaded, soundError);\n alert('SNATE!')\n}\n\nfunction soundLoaded() {\n console.log(\"Sound loaded successfully!\");\n \n}\n\nfunction soundError(err) {\n console.log(\"Sound failed to load. Error: \", err);\n alert('REACTOR MELTDOWN IN 12')\n \n}\n\nlet kickSquares = [];\nlet hihatSquares = [];\nlet snareSquares = [];\nlet currentSquare = 0;\n\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n\n background(152, 251, 152);\nalert('SNATE!')\nalert('NATE!')\nalert('SNATE!')\n let kickSquareWidth = (width - 15 * 40) / 16; // Calculate the width of each square\n for (let i = 0; i < 16; i++) {\n kickSquares[i] = {\n x: i * (kickSquareWidth + 40), // Calculate the x-position of each square\n y: height / 2,\n width: kickSquareWidth,\n height: kickSquareWidth,\n shouldPlay: (i === 0 || i === 8) // Set to true for the first and ninth squares\n };\n }\n\n let hihatSquareWidth = (width - 15 * 40) / 16;\n for (let i = 0; i < 16; i++) {\n hihatSquares[i] = {\n x: i * (hihatSquareWidth + 40.2),\n y: height / 2.001 - 60, // Position the hi-hat squares above the kick squares\n width: hihatSquareWidth,\n height: hihatSquareWidth,\n shouldPlay: true\n };\n }\n\n let snareSquareWidth = (width - 15 * 40) / 16;\n for (let i = 0; i < 16; i++) {\n snareSquares[i] = {\n x: i * (snareSquareWidth + 40),\n y: height / 2 - 120, // Position the snare squares above the hi-hat squares\n width: snareSquareWidth,\n height: snareSquareWidth,\n shouldPlay: (i === 4 || i === 12)\n };\n }\n\n\n\n\n startButton = createButton('Start my absurad fork');\n startButton.position(200, 20);\n startButton.mousePressed(startSequence);\n}\n\nfunction draw() {\n\n\n for (let i = 0; i < kickSquares.length; i++) {\n let square = kickSquares[i];\n if (i === currentSquare && square.shouldPlay) {\n fill(0, 255, 0); // Bright green for the current playing square\n \n } else if (square.shouldPlay) {\n fill(0, 150, 0); // Dark green for other kickSquares that will play\n } else if (i === currentSquare && !square.shouldPlay) {\n fill(0, 0, 255); // Blue for kickSquares that will not play\n } else if (!square.shouldPlay) {\n fill(0, 0, 100)\n \n }\n rect(square.x, square.y, square.width, square.height);\n }\n\n for (let i = 0; i < hihatSquares.length; i++) {\n let square = hihatSquares[i];\n if (i === currentSquare && square.shouldPlay) {\n fill(255, 255, 0); // Bright yellow for the current playing square\n } else if (square.shouldPlay) {\n fill(255, 255, 0); // Yellow for other squares that will play\n } else {\n fill(100, 22, 22); // Brown for squares that will not play\n }\n rect(square.x, square.y, square.width, square.height);\n }\n\n for (let i = 0; i < snareSquares.length; i++) {\n let square = snareSquares[i];\n if (i === currentSquare && square.shouldPlay) {\n fill(255, 192, 203); // Pink for the current playing square\n } else if (square.shouldPlay) {\n fill(255, 192, 203); // Pink for other squares that will play\n } else {\n fill(139, 69, 19); // SaddleBrown for squares that will not play\n }\n rect(square.x, square.y, square.width, square.height);\n }\n}\n\n\n\n\n\nfunction keyPressed() {\n console.log(key);\n if (key.toUpperCase() === 'K') {\n kick.play();\n }\n console.log(key);\n if (key.toUpperCase() === 'H') {\n hihat.play();\n }\n console.log(key);\n if (key.toUpperCase() === 'S') {\n snare.play();\n alert('Snare')\n \n }\n}\n\nfunction mouseClicked() {\n for (let i = 0; i < kickSquares.length; i++) {\n let square = kickSquares[i];\n if (mouseX > square.x && mouseX < square.x + square.width &&\n mouseY > square.y && mouseY < square.y + square.height) {\n square.shouldPlay = !square.shouldPlay;\n // if (square.shouldPlay) {\n // kick.play();\n // }\n }\n }\n for (let i = 0; i < hihatSquares.length; i++) {\n let square = hihatSquares[i];\n if (mouseX > square.x && mouseX < square.x + square.width &&\n mouseY > square.y && mouseY < square.y + square.height) {\n square.shouldPlay = !square.shouldPlay;\n // if (square.shouldPlay) {\n // hihat.play();\n // }\n }\n }\n for (let i = 0; i < snareSquares.length; i++) {\n let square = snareSquares[i];\n if (mouseX > square.x && mouseX < square.x + square.width &&\n mouseY > square.y && mouseY < square.y + square.height) {\n square.shouldPlay = !square.shouldPlay;\n // if (square.shouldPlay) {\n // snare.play();\n // }\n }\n }\n alert('Mouse Clicked')\n}\n\nlet sequenceInterval;\n\nfunction startSequence() {\n if (sequenceInterval) {\n // A sequence is already running, so we ignore the button press\n return;\n }\n\n currentSquare = 0;\n\n // Play the kick sound immediately if the first square should play\n if (kickSquares[currentSquare].shouldPlay) {\n kick.play();\n }\n\n sequenceInterval = setInterval(() => {\n currentSquare++;\n if (currentSquare >= kickSquares.length) {\n currentSquare = 0;\n }\n\n // Play the kick sound at the start of each interval\n if (kickSquares[currentSquare].shouldPlay) {\n kick.play();\n }\n if (hihatSquares[currentSquare].shouldPlay) {\n hihat.play();\n }\n if (snareSquares[currentSquare].shouldPlay) {\n snare.play();\n alert('Snare')\n }\n }, 250);\n\n}\n","style.css":"","index.html":"\n\n\n\n \n \n BeatBox Keyboard Sequencer\n \n \n \n\n\n\n \n\n\n"},"chat_history":[{"project_id":280,"sender":"human","message":"Let's get started!","deleted":0,"created_at":"2024-01-05T21:33:22.709503Z","output_tokens":null,"code_id":16210,"input_tokens":null,"id":10115},{"project_id":280,"sender":"ai","message":"","deleted":0,"created_at":"2024-01-05T21:33:22.715606Z","output_tokens":null,"code_id":16210,"input_tokens":null,"id":10116}],"assets":[{"cloudinary_id":"j3usslgtpeye5agtdx9c","name":"APPAS","deleted":false,"id":417,"created_at":"2024-01-05T21:34:58.558346Z","project_id":280,"resource_type":"image"},{"cloudinary_id":"tciaqi4apreehhjocmem","name":"BigAppleOnoo","deleted":false,"id":415,"created_at":"2024-01-05T21:34:45.848379Z","project_id":280,"resource_type":"image"},{"cloudinary_id":"vvmlddrp6qw0pizgjqbh","name":"BigAppleOn","deleted":false,"id":413,"created_at":"2024-01-05T21:34:31.123719Z","project_id":280,"resource_type":"image"},{"cloudinary_id":"cskewz9l0km71k6lfryh","name":"kick","deleted":false,"id":410,"created_at":"2024-01-05T21:16:17.396620Z","project_id":280,"resource_type":"video"},{"cloudinary_id":"wx7vxm8pp58ka8iodsdf","name":"hihat","deleted":false,"id":409,"created_at":"2024-01-05T21:16:17.395226Z","project_id":280,"resource_type":"video"},{"cloudinary_id":"z0lpycedeimelc0m6dxo","name":"snare","deleted":false,"id":408,"created_at":"2024-01-05T21:16:17.393786Z","project_id":280,"resource_type":"video"}],"messages_sent":1,"comments":[],"steps":[]}