Satisfying Color Game

{"name":"Satisfying Color Game","description":"fun\n","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/lppntqymapwel2qeacdu","view_count":3,"fork_count":0,"expires_at":null,"created_at":"2024-11-12T14:27:40.665767Z","updated_at":"2024-11-12T14:27:40.665773Z","user_id":97,"status":"PRIVATE","parent_id":4424,"id":4547,"user":{"photo":null,"email":"leobm365@gmail.com","recess_id":"e4690172-2707-46c3-8bcb-1a2b76e418e9","created_at":"2024-05-02T18:14:08.971561Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"super_kamin","id":97,"password_hash":"$2b$12$PMJB58N8WLDuLopyknSp6.czfqNoUg9tTH9bQqK.0xzUbXRKoCWEW","updated_at":"2024-05-02T18:14:08.971564Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let ball;\n\nlet stationarySquares = [];\n\nlet growOnBounce = false;\n\nlet growButton = document.getElementById('growButton');\n\nlet addSquareOnBounce = false;\n\nlet addSquareButton = document.getElementById('addSquareButton');\n\nlet bounceCount = 0;\n\n// To keep track of the number of bounces\nlet bounceThreshold = 3;\n\nlet bounceSlider = document.getElementById('bounceSlider');\n\nlet bounceValue = document.getElementById('bounceValue');\n\nlet speedValue = 5;\n\nlet speedSlider = document.getElementById('speedSlider');\n\nlet speedDisplay = document.getElementById('speedValue');\n\nlet canvasSize = 800;\n\nlet canvasSizeSlider = document.getElementById('canvasSizeSlider');\n\nlet canvasSizeValue = document.getElementById('canvasSizeValue');\n\n// Remove these lines\nlet timeSlider = document.getElementById('timeSlider');\n\nlet timeValue = document.getElementById('timeValue');\n\nlet modeButton = document.getElementById('modeButton');\n\nlet stopButton = document.getElementById('stopButton');\n\nlet currentMode = 'normal';\n\nfunction setup() {\n createCanvas(canvasSize, canvasSize); // Initialize with default canvas size\n background(255);\n ball = {\n x: width / 2,\n y: height / 2,\n vx: random(-speedValue, speedValue), // Use speedValue for initial velocity\n vy: random(-speedValue, speedValue), // Use speedValue for initial velocity\n color: color(random(255), random(255), random(255)),\n width: 50,\n height: 50\n };\n}\n\nfunction draw() {\n background(255, 10);\n ball.x += ball.vx;\n ball.y += ball.vy;\n\n let bounced = false;\n\n // Bounce off the walls\n if (ball.x > width - ball.width || ball.x < 0) {\n ball.vx *= -1;\n bounced = true;\n if (growOnBounce) ball.width += 5;\n }\n if (ball.y > height - ball.height || ball.y < 0) {\n ball.vy *= -1;\n bounced = true;\n if (growOnBounce) ball.height += 5;\n }\n\n // Bounce off stationary squares\n stationarySquares.forEach((square) => {\n if (\n ball.x < square.x + square.width &&\n ball.x + ball.width > square.x &&\n ball.y < square.y + square.height &&\n ball.y + ball.height > square.y\n ) {\n // Determine collision side and reverse the appropriate velocity\n let overlapX1 = ball.x + ball.width - square.x;\n let overlapX2 = square.x + square.width - ball.x;\n let overlapY1 = ball.y + ball.height - square.y;\n let overlapY2 = square.y + square.height - ball.y;\n\n let minOverlapX = min(overlapX1, overlapX2);\n let minOverlapY = min(overlapY1, overlapY2);\n\n if (minOverlapX < minOverlapY) {\n ball.vx *= -1; // Reverse horizontal velocity\n } else {\n ball.vy *= -1; // Reverse vertical velocity\n }\n }\n });\n\n if (bounced) {\n bounceCount++;\n if (bounceCount >= bounceThreshold && addSquareOnBounce) {\n bounceCount = 0;\n\n stationarySquares.push({\n x: ball.x,\n y: ball.y,\n width: ball.width,\n height: ball.height,\n color: ball.color\n });\n\n ball = {\n x: width / 2,\n y: height / 2,\n vx: random(-speedValue, speedValue), // Use speedValue for initial velocity\n vy: random(-speedValue, speedValue), // Use speedValue for initial velocity\n color: color(random(255), random(255), random(255)),\n width: 50,\n height: 50\n };\n }\n }\n\n ball.color = color((frameCount % 255), 100, 200);\n fill(ball.color);\n rect(ball.x, ball.y, ball.width, ball.height);\n\n stationarySquares.forEach((square) => {\n fill(square.color);\n rect(square.x, square.y, square.width, square.height);\n });\n}\n\nfunction keyPressed() {\n // Handle user movement controls\n}\n\nfunction mousePressed() {\n // Handle interactions with colorful elements\n}\n\n//function mouseDragged() {\n// // Update square position to follow the mouse\n// ball.x = mouseX - 25;\n// ball.y = mouseY - 25;\n//\n// // Set velocity to zero while dragging\n// ball.vx = 0;\n// ball.vy = 0;\n//}\n\n//function mouseReleased() {\n// // Calculate new velocity based on drag speed\n// ball.vx = (mouseX - pmouseX) * 0.5;\n// ball.vy = (mouseY - pmouseY) * 0.5;\n//}\n\ngrowButton.addEventListener('click', function () {\n growOnBounce = !growOnBounce;\n growButton.innerText = growOnBounce ? 'Disable Grow on Bounce' : 'Enable Grow on Bounce';\n});\n\naddSquareButton.addEventListener('click', function () {\n addSquareOnBounce = !addSquareOnBounce;\n addSquareButton.innerText = addSquareOnBounce ? 'Disable Add Square on Bounce' : 'Enable Add Square on Bounce';\n});\n\n// Update bounce threshold based on slider input\nbounceSlider.addEventListener('input', function () {\n bounceThreshold = parseInt(bounceSlider.value);\n bounceValue.innerText = bounceThreshold;\n});\n\nspeedSlider.addEventListener('input', function () {\n speedValue = parseInt(speedSlider.value);\n speedDisplay.innerText = speedValue;\n});\n\ncanvasSizeSlider.addEventListener('input', function () {\n canvasSize = parseInt(canvasSizeSlider.value);\n canvasSizeValue.innerText = canvasSize;\n resizeCanvas(canvasSize, canvasSize); // Resize the canvas\n});\n\n// Remove these functions and event listeners\ntimeSlider.addEventListener('input', function () {\n timeValue.innerText = timeSlider.value;\n});\n\nstopButton.addEventListener('click', function () {\n setTimeout(stopAndSpawn, timeSlider.value * 1000);\n});\n\nmodeButton.addEventListener('click', function () {\n if (currentMode === 'normal') {\n currentMode = 'stopAndSpawn';\n modeButton.innerText = 'Switch to Normal Mode';\n } else {\n currentMode = 'normal';\n modeButton.innerText = 'Switch to Stop & Spawn Mode';\n }\n});\n\nstopButton.addEventListener('click', function () {\n if (currentMode === 'stopAndSpawn') {\n setTimeout(stopAndSpawn, timeSlider.value * 1000);\n }\n});\n\nfunction stopAndSpawn() {\n // Add the stopped square to the stationary squares array\n stationarySquares.push({\n x: ball.x,\n y: ball.y,\n width: 50,\n height: 50,\n color: ball.color\n });\n\n // Spawn a new square\n ball = {\n x: width / 2,\n y: height / 2,\n vx: random(-5, 5),\n vy: random(-5, 5),\n color: color(random(255), random(255), random(255))\n };\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n\n \n \n Satisfying Color Game\n \n \n\n\n\n \n \n \n

Bounces to Spawn: 3

\n\n \n \n

Square Speed: 5

\n\n \n \n

Canvas Size: 800px

\n\n \n\n\n"},"chat_history":[{"message":"Let's get started!","project_id":4547,"created_at":"2024-11-12T14:27:44.916809Z","output_tokens":null,"sender":"human","code_id":182441,"deleted":0,"input_tokens":null,"id":89346},{"message":"Could you tell me more about what you want to achieve with this project? Are you building a game, a website, or something else? Let me know your ideas so I can assist you better!","project_id":4547,"created_at":"2024-11-12T14:27:44.925237Z","output_tokens":null,"sender":"ai","code_id":182441,"deleted":0,"input_tokens":null,"id":89347}],"assets":[{"project_id":4547,"creator":null,"cloudinary_id":"lppntqymapwel2qeacdu","deleted":false,"id":47833,"created_at":"2024-11-12T14:27:40.680179Z","name":"hehe","resource_type":"image","tags":null}],"messages_sent":1,"comments":[],"steps":[]}