Conveyor Belt Demo BACKUP

{"name":"Conveyor Belt Robot Demo [BACKUP]","description":"Navigate through a chaotic factory floor as you control a character using WASD keys. Watch out for the conveyor belts - they'll take you for a ride whether you like it or not!","photo":null,"view_count":16,"fork_count":0,"expires_at":null,"created_at":"2024-01-17T06:57:03.499803Z","updated_at":"2024-01-17T18:29:05.921330Z","user_id":28,"status":"PRIVATE","parent_id":369,"id":394,"user":{"photo":null,"email":null,"recess_id":"","created_at":"2023-12-21T15:44:32.712231Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"oldj","id":28,"password_hash":null,"updated_at":"2023-12-21T15:44:32.712233Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let robot;\nlet robot_idle;\nlet robot_run;\nlet floorTile;\nlet belts = [];\nlet beltImages = [];\nlet beltSize = 75;\nlet hoverRotation = 0;\nlet crateImage;\nlet crateSize = 75\nlet crates = [];\nlet crateCount = 0; // Initialize the crate counter\nlet music;\nlet robotFlashEndTime = 0;\nlet flashState = false;\n\n\n\nlet isAssetsLoaded = false;\n\nfunction preload() {\n robot_idle = loadImage('@asset(\"robot_idle\")');\n robot_run = loadImage('@asset(\"robot_run\")');\n floorTile = loadImage('@asset(\"floorTile\")');\n crateImage = loadImage('@asset(\"crate\")');\n whirrSound = loadSound('@asset(\"whirrSound\")');\n music = loadSound('@asset(\"music\")');\n chaChing = loadSound('@asset(\"chaChing\")');\n crunch = loadSound('@asset(\"crunch\")');\n\n\n //idk why this won't work when I try it with a loop\n beltImages[0] = loadImage('@asset(\"belt_right_0\")');\n beltImages[1] = loadImage('@asset(\"belt_right_1\")');\n beltImages[2] = loadImage('@asset(\"belt_right_2\")');\n beltImages[3] = loadImage('@asset(\"belt_right_3\")');\n beltImages[4] = loadImage('@asset(\"belt_right_4\")');\n beltImages[5] = loadImage('@asset(\"belt_right_5\")');\n beltImages[6] = loadImage('@asset(\"belt_right_6\")');\n beltImages[7] = loadImage('@asset(\"belt_right_7\")');\n beltImages[8] = loadImage('@asset(\"belt_right_8\")');\n beltImages[9] = loadImage('@asset(\"belt_right_9\")');\n beltImages[10] = loadImage('@asset(\"belt_right_10\")');\n beltImages[11] = loadImage('@asset(\"belt_right_11\")');\n beltImages[12] = loadImage('@asset(\"belt_right_12\")');\n beltImages[13] = loadImage('@asset(\"belt_right_13\")');\n beltImages[14] = loadImage('@asset(\"belt_right_14\")');\n beltImages[15] = loadImage('@asset(\"belt_right_15\")');\n}\n\n\nfunction setup() {\n createCanvas(1200, 900);\n background(220);\n\n music.setVolume(0.5); // Set the volume to 0.5\n playMusic();\n // Get a reference to the music play button\n // let musicPlayButton = document.getElementById('musicPlayButton');\n // let musicStopButton = document.getElementById('musicPlayButton');\n\n // musicPlayButton.addEventListener('click', playMusic);\n // musicStopButton.addEventListener('click', stopMusic);\n\n\n if (robot_idle && robot_run && floorTile && beltImages.length == 16) {\n isAssetsLoaded = true;\n }\n\n robot = {\n x: 400,\n y: 300,\n img: robot_idle,\n carryingCrate: null // Add this line\n };\n\n robotSize = 75;\n\n for (let i = 0; i < 6; i++) {\n crates.push({\n x: Math.floor(Math.random() * (width - crateSize)),\n y: Math.floor(Math.random() * (height - crateSize))\n });\n }\n // New line added\n window.focus();\n}\n\nlet lastKeyPressed;\n\nlet direction = 1; // 1 for right, -1 for left\n\nlet animationFrame = 0;\n\nfunction draw() {\n\n\n if (!isAssetsLoaded) {\n background(220);\n textAlign(CENTER, CENTER);\n text('Loading...', width / 2, height / 2);\n } else {\n background(220);\n for (let x = 0; x < width; x += 150) {\n for (let y = 0; y < height; y += 150) {\n image(floorTile, x, y, 150, 150);\n }\n }\n // Drawing a black square at a particular grid location\n let blackSquareGridX = 12 * 75; // set the x-coordinate of the grid location\n let blackSquareGridY = 9 * 75; // set the y-coordinate of the grid location\n fill(0); // set fill color to black\n rect(blackSquareGridX, blackSquareGridY, 75, 75); // draw the square\n\n // Drawing a square ring on the black square\n noFill(); // set fill color to transparent\n stroke(155); // set stroke color to white\n strokeWeight(10); // set the width of the stroke\n rect(blackSquareGridX + 7, blackSquareGridY + 7, 63, 63); // draw the ring\n\n\n // Calculate the nearest grid point\n let scaleX = width / canvas.clientWidth;\n let scaleY = height / canvas.clientHeight;\n let gridX = Math.round(mouseX * scaleX / 75) * 75;\n let gridY = Math.round(mouseY * scaleY / 75) * 75;\n // Check if mouse is not over the black square\n if (!(gridX === blackSquareGridX && gridY === blackSquareGridY)) {\n // Draw a transparent belt at the mouse location\n push();\n translate(gridX + beltSize / 2, gridY + beltSize / 2);\n rotate(radians(hoverRotation));\n tint(255, 128); // Apply a semi-transparent tint\n image(beltImages[animationFrame], -beltSize / 2, -beltSize / 2, beltSize, beltSize);\n noTint(); // Remove the tint for other drawings\n pop();\n }\n\n\n // Draw all belts\n for (let belt of belts) {\n\n push();\n // Draw a dark gray rectangle with slight purple around the belt\n fill(70, 50, 70); // Set fill color to dark gray with slight purple\n noStroke(); // No outline\n rect(belt.x, belt.y, beltSize, beltSize);\n\n // Rotate and draw the belt\n translate(belt.x + beltSize / 2, belt.y + beltSize / 2);\n rotate(radians(belt.rotation));\n image(beltImages[animationFrame], -beltSize / 2, -beltSize / 2, beltSize, beltSize);\n\n // Draw a 5x5 pixel red square at the center of the belt\n // fill(255, 0, 0); // Set fill color to red\n // noStroke(); // No outline\n // rect(-2.5, -2.5, 5, 5); // Adjusted coordinates\n\n pop();\n }\n\n for (let crate of crates) {\n let belt = crateOnBelt(crate);\n if (belt) {\n // Gradually move the crate to the center of the belt\n if (belt.rotation === 0 || belt.rotation === 180) {\n // Belt is horizontal, move crate vertically towards belt center\n crate.y += ((belt.y + (beltSize / 2)) - (crate.y + crateSize / 2)) * 0.1;\n } else {\n // Belt is vertical, move crate horizontally towards belt center\n crate.x += ((belt.x + (beltSize / 2)) - (crate.x + crateSize / 2)) * 0.1;\n }\n\n // Push the crate in the direction of the belt\n if (belt.rotation === 0) {\n crate.x += 4;\n } else if (belt.rotation === 90) {\n crate.y += 4;\n } else if (belt.rotation === 180) {\n crate.x -= 4;\n } else if (belt.rotation === 270) {\n crate.y -= 4;\n }\n }\n\n // Draw the crate\n image(crateImage, crate.x, crate.y, crateSize, crateSize);\n // Draw a green rectangle at the center of the crate\n push();\n translate(crate.x + crateSize / 2, crate.y + crateSize / 2);\n // fill(0, 255, 0); // Set fill color to green\n // noStroke(); // No outline\n // rect(0, 0, 5, 5); // Draw a 5x5 pixel rectangle at the center\n pop();\n }\n\n // Remove any crate that touches the black square\n for (let i = crates.length - 1; i >= 0; i--) {\n let crate = crates[i];\n if (crate.x < blackSquareGridX + 75 &&\n crate.x + crateSize > blackSquareGridX &&\n crate.y < blackSquareGridY + 75 &&\n crate.y + crateSize > blackSquareGridY) {\n // This crate is touching the black square, so remove it\n crates.splice(i, 1);\n chaChing.play()\n\n // Increase the crate count\n crateCount++;\n\n // Spawn a new crate at a random location\n crates.push({\n x: Math.floor(Math.random() * (width - crateSize)),\n y: Math.floor(Math.random() * (height - crateSize))\n });\n }\n }\n\n animationFrame = (animationFrame + 1) % 16;\n\n // Move the robot according to last key pressed\n let speed = robot.carryingCrate ? 3 : 5; // Set speed to 3 if carrying a crate, else 5\n if (lastKeyPressed === 'W') { // W key for moving up\n robot.y -= speed;\n }\n else if (lastKeyPressed === 'A') { // A key for moving left\n robot.x -= speed;\n direction = -1;\n }\n else if (lastKeyPressed === 'S') { // S key for moving down\n robot.y += speed;\n }\n else if (lastKeyPressed === 'D') { // D key for moving right\n robot.x += speed;\n direction = 1;\n }\n\n // Update the robot's image based on whether it's moving\n let isMoving = lastKeyPressed !== null;\n robot.img = isMoving ? robot_run : robot_idle;\n\n // If the robot is touching the black square, then respawn it at its original point\n if (robot.x < blackSquareGridX + 75 &&\n robot.x + robotSize > blackSquareGridX &&\n robot.y < blackSquareGridY + 75 &&\n robot.y + robotSize > blackSquareGridY) {\n // Respawn robot at its original point\n crunch.play()\n robot.x = 400;\n robot.y = 300;\n // Start flashing for 3 seconds\n robotFlashEndTime = millis() + 3000;\n flashState = false\n }\n\n // Draw the robot\n push();\n translate(robot.x + robotSize / 2, robot.y + robotSize / 2); // Adjusted translation\n scale(direction, 1);\n // If the robot should flash, draw it with a semi-transparent tint\n if (millis() < robotFlashEndTime) {\n flashState = millis() % 500 < 250; // Update flash state every 250ms\n if (flashState) {\n tint(255, 128); // Apply a semi-transparent tint\n }\n }\n image(robot.img, -robotSize / 2, -robotSize / 2, robotSize, robotSize); // Adjusted image drawing\n noTint(); // Remove the tint for other drawings\n pop();\n\n if (robot.carryingCrate) {\n image(crateImage, robot.x + (0.5 * (direction > 0 ? robotSize : -crateSize)), robot.y, crateSize, crateSize);\n }\n\n textSize(32);\n fill(128,0,128);\n text('Crates Cached: ' + crateCount, width - 300, 50);\n }\n\n // Move the robot if it's on a belt\n\n let belt = robotOnBelt();\n if (belt) {\n // Gradually move the robot to the center of the belt if no key is pressed\n if (belt.rotation === 0 || belt.rotation === 180) {\n // Belt is horizontal, move robot vertically towards belt center\n robot.y += ((belt.y + (beltSize / 2)) - (robot.y + robotSize / 2)) * 0.1;\n } else {\n // Belt is vertical, move robot horizontally towards belt center\n robot.x += ((belt.x + (beltSize / 2)) - (robot.x + robotSize / 2)) * 0.1;\n }\n\n // Push the robot in the direction of the belt\n if (belt.rotation === 0) {\n robot.x += 4;\n } else if (belt.rotation === 90) {\n robot.y += 4;\n } else if (belt.rotation === 180) {\n robot.x -= 4;\n } else if (belt.rotation === 270) {\n robot.y -= 4;\n }\n }\n // ...\n\n // Check if the robot is off-screen and adjust its position\n if (robot.x < 0) {\n robot.x = 0;\n } else if (robot.x + robotSize > width) {\n robot.x = width - robotSize;\n }\n if (robot.y < 0) {\n robot.y = 0;\n } else if (robot.y + robotSize > height) {\n robot.y = height - robotSize;\n }\n\n // Check if any crates are off-screen and adjust their positions\n for (let crate of crates) {\n if (crate.x < 0) {\n crate.x = 0;\n } else if (crate.x + crateSize > width) {\n crate.x = width - crateSize;\n }\n if (crate.y < 0) {\n crate.y = 0;\n } else if (crate.y + crateSize > height) {\n crate.y = height - crateSize;\n }\n }\n\n //play whirr\n playSoundIfOnBelt();\n\n}\n\nfunction keyPressed() {\n if (millis() < robotFlashEndTime) {\n // If the robot is flashing, ignore key presses\n return;\n }\n if (key === 'w' || key === 'W') {\n lastKeyPressed = 'W';\n }\n else if (key === 'a' || key === 'A') {\n lastKeyPressed = 'A';\n }\n else if (key === 's' || key === 'S') {\n lastKeyPressed = 'S';\n }\n else if (key === 'd' || key === 'D') {\n lastKeyPressed = 'D';\n }\n if (key === 'r' || key === 'R') {\n hoverRotation = (hoverRotation + 90) % 360;\n }\n if (key === 'e' || key === 'E') {\n if (robot.carryingCrate) {\n // The robot is carrying a crate, so put it down\n crates.push({\n x: robot.x + (direction > 0 ? robotSize : -crateSize),\n y: robot.y + 15\n });\n robot.carryingCrate = null;\n } else {\n // The robot is not carrying a crate, so pick up a nearby one\n for (let i = 0; i < crates.length; i++) {\n let crate = crates[i];\n let distance = dist(robot.x + robotSize / 2, robot.y + robotSize / 2,\n crate.x + crateSize / 2, crate.y + crateSize / 2);\n if (distance < robotSize / 2 + crateSize / 2) {\n // This crate is close enough to pick up\n robot.carryingCrate = crate;\n crates.splice(i, 1); // Remove the crate from the array\n\n break;\n }\n }\n }\n }\n}\n\n\nfunction keyReleased() {\n if ((key === 'w' || key === 'W') && lastKeyPressed === 'W' ||\n (key === 'a' || key === 'A') && lastKeyPressed === 'A' ||\n (key === 's' || key === 'S') && lastKeyPressed === 'S' ||\n (key === 'd' || key === 'D') && lastKeyPressed === 'D') {\n lastKeyPressed = null;\n }\n}\n\nfunction mouseClicked() {\n // Calculate the nearest grid point\n let gridX = Math.round(mouseX / 75) * 75;\n let gridY = Math.round(mouseY / 75) * 75;\n\n // Black square grid coordinates\n let blackSquareGridX = 12 * 75;\n let blackSquareGridY = 9 * 75;\n\n // Check if mouse click is within the black square\n if (gridX === blackSquareGridX && gridY === blackSquareGridY) {\n // If so, don't place a belt and exit the function\n return;\n }\n\n let clickedBeltIndex = -1;\n for (let i = 0; i < belts.length; i++) {\n let belt = belts[i];\n let distance = dist(gridX, gridY, belt.x, belt.y);\n if (distance < 75 / 2) {\n clickedBeltIndex = i;\n break;\n }\n }\n\n if (clickedBeltIndex >= 0) {\n // Remove the clicked belt\n belts.splice(clickedBeltIndex, 1);\n } else {\n // Add a new belt at the grid location\n belts.push({ x: gridX, y: gridY, rotation: hoverRotation });\n }\n}\n\nfunction robotOnBelt() {\n for (let belt of belts) {\n // Check if bottom quarter of the robot is within the belt's bounding box\n if (robot.x < belt.x + beltSize &&\n robot.x + robotSize > belt.x &&\n robot.y + robotSize * 0.75 < belt.y + beltSize &&\n robot.y + robotSize > belt.y) {\n return belt;\n }\n }\n return null;\n}\n\nfunction crateOnBelt(crate) {\n for (let belt of belts) {\n // Check if the center of the crate is within the belt's bounding box\n let centerX = crate.x + crateSize / 2;\n let centerY = crate.y + crateSize / 2;\n if (centerX > belt.x && centerX < belt.x + beltSize &&\n centerY > belt.y && centerY < belt.y + beltSize) {\n return belt;\n }\n }\n\n return null;\n}\n\nlet lastSoundTriggerTime = 0;\n\nfunction playSoundIfOnBelt() {\n // Check if the robot or any crate is on a belt\n if (robotOnBelt() || crates.some(crateOnBelt)) {\n let currentTime = millis();\n if (currentTime - lastSoundTriggerTime > 550) {\n if (!whirrSound.isPlaying()) {\n whirrSound.play();\n }\n lastSoundTriggerTime = currentTime;\n }\n }\n\n}\n\nfunction playMusic() {\n if (!music.isPlaying()) {\n music.loop();\n }\n}\n\nfunction stopMusic() {\n if (music.isPlaying()) {\n music.stop();\n }\n}\n","style.css":"#instructions p {\n position: absolute;\n top: 10px;\n right: 10px;\n padding: 5px;\n background-color: #ffffff;\n border: 1px solid #000000;\n border-radius: 5px;\n font-size: 30px;\n}","index.html":"\n\n\n\n \n \n Conveyor Belt Demo BACKUP\n \n\n \n\n\n\n \n \n\n

WASD to move. E to grab. R to rotate conveyor belts and click to place and remove.

\n \n

\n\n\n\n"},"chat_history":[],"assets":[{"project_id":394,"creator":null,"cloudinary_id":"nznriw6w38hh2eeong6o","deleted":false,"id":662,"created_at":"2024-01-17T06:57:03.539192Z","name":"robot_idle","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"auu8xdfkuxdvk6wd8ioc","deleted":false,"id":661,"created_at":"2024-01-17T06:57:03.538099Z","name":"robot_run","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"yvwl0cuuz45bzbtjwozm","deleted":false,"id":660,"created_at":"2024-01-17T06:57:03.537035Z","name":"floorTile","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"fqszplgoqo9cojccnush","deleted":false,"id":659,"created_at":"2024-01-17T06:57:03.535861Z","name":"belt_right_0","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"l5hdhf0o6p3zudhwp5kd","deleted":false,"id":658,"created_at":"2024-01-17T06:57:03.534617Z","name":"belt_right_1","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"sq7eogvp863clqwuvuow","deleted":false,"id":657,"created_at":"2024-01-17T06:57:03.533470Z","name":"belt_right_2","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"ajbbitb5wv0onzf4sezd","deleted":false,"id":656,"created_at":"2024-01-17T06:57:03.532213Z","name":"belt_right_3","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"gdmnh6uvtneqtodvbjij","deleted":false,"id":655,"created_at":"2024-01-17T06:57:03.530995Z","name":"belt_right_4","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"f8n1y1itn79d94ikcznl","deleted":false,"id":654,"created_at":"2024-01-17T06:57:03.529766Z","name":"belt_right_5","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"ob7tb9hyh2axmqfwp1nu","deleted":false,"id":653,"created_at":"2024-01-17T06:57:03.528596Z","name":"belt_right_6","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"peom0cbughc1vohlahfu","deleted":false,"id":652,"created_at":"2024-01-17T06:57:03.527239Z","name":"belt_right_7","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"nqqk5tflc4wkl5afle0w","deleted":false,"id":651,"created_at":"2024-01-17T06:57:03.525926Z","name":"belt_right_8","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"panpx9kacxieccrxfurb","deleted":false,"id":650,"created_at":"2024-01-17T06:57:03.524707Z","name":"belt_right_9","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"aqa2nxsemmefe9plxtnn","deleted":false,"id":649,"created_at":"2024-01-17T06:57:03.523448Z","name":"belt_right_10","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"l75pqs9dqy8jho3dert0","deleted":false,"id":648,"created_at":"2024-01-17T06:57:03.522271Z","name":"belt_right_11","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"bck0yazrdhj8g5py0tzj","deleted":false,"id":647,"created_at":"2024-01-17T06:57:03.521138Z","name":"belt_right_12","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"zkbysqefqpmuewsvdmxz","deleted":false,"id":646,"created_at":"2024-01-17T06:57:03.519790Z","name":"belt_right_13","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"smnnopfipkga6nxukv5k","deleted":false,"id":645,"created_at":"2024-01-17T06:57:03.518592Z","name":"belt_right_14","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"bv13fylkuipat03u2bqo","deleted":false,"id":644,"created_at":"2024-01-17T06:57:03.517380Z","name":"belt_right_15","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"ey9arykbxove8vjjk1jp","deleted":false,"id":643,"created_at":"2024-01-17T06:57:03.516103Z","name":"crate","resource_type":"image","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"v1uebwl9ghnerjoywind","deleted":false,"id":642,"created_at":"2024-01-17T06:57:03.514700Z","name":"whirr","resource_type":"audio","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"wepiyka6mcmnaxqk3whz","deleted":false,"id":641,"created_at":"2024-01-17T06:57:03.513329Z","name":"whirrSound","resource_type":"audio","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"ryrf839o0i41loqkvksg","deleted":false,"id":640,"created_at":"2024-01-17T06:57:03.512075Z","name":"music","resource_type":"audio","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"tkfgwcjd0gobenatpv7a","deleted":false,"id":639,"created_at":"2024-01-17T06:57:03.509175Z","name":"chaChing","resource_type":"audio","tags":null},{"project_id":394,"creator":null,"cloudinary_id":"hsdnzzi3fqelfrv45lmj","deleted":false,"id":638,"created_at":"2024-01-17T06:57:03.507727Z","name":"crunch","resource_type":"audio","tags":null}],"messages_sent":0,"comments":[],"steps":[]}