Falling Bricks Chaos

{"name":"Falling Bricks Chaos","description":"Unleash a cascade of bricks with a click and watch them interact in a dynamic, gravity-driven spectacle. Each left-click spawns a brick, sending it tumbling down, colliding with others in its path. Witness the unpredictable patterns and pile-ups in this engaging, physics-inspired project using p5.js. Perfect for learning the basics of collision detection and interactive programming!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/wx7da2d4z6rgaayixfzb","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-08-22T20:05:19.872058Z","updated_at":"2025-08-22T20:05:19.872061Z","user_id":679,"status":"PRIVATE","parent_id":9482,"id":9724,"user":{"photo":null,"email":null,"recess_id":"777303be-403b-49f2-ad81-2fa5996b14da","created_at":"2025-06-09T22:10:39.084441Z","reset_token":null,"stripe_customer_id":null,"seats":0,"username":"spy_agent","id":679,"password_hash":null,"updated_at":"2025-06-09T22:10:39.084444Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let doors = [];\nlet windows = [];\nlet bricks = [];\nlet draggingBrick = null;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n background(135, 206, 235); // Clear the screen each frame\n\n for (let brick of bricks) {\n brick.update(bricks); // Update brick position and check for collisions\n brick.display(); // Display the brick\n }\n\n for (let door of doors) {\n door.update(doors, bricks); // Update door position and check for collisions\n door.display(); // Display the door\n }\n\n for (let window of windows) {\n window.update(windows, bricks); // Update window position and check for collisions\n window.display(); // Display the window\n }\n}\n\nclass Window {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.width = 60; // Width of the window\n this.height = 60; // Height of the window (square)\n this.speed = 5; // Speed at which the window falls\n }\n\n // Method to update the window's position\n update(windows, bricks) {\n this.y += this.speed; // Move the window down\n\n // Check for collision with other windows\n for (let otherWindow of windows) {\n if (otherWindow !== this && this.isColliding(otherWindow)) {\n this.y = otherWindow.y - this.height; // Stack on top of the other window\n break; // End the loop since we found a collision\n }\n }\n\n // Check for collision with bricks\n for (let brick of bricks) {\n if (this.isColliding(brick)) {\n this.y = brick.y - this.height; // Stack on top of the brick\n break; // End the loop since we found a collision\n }\n }\n\n // Check if the window has reached the bottom of the canvas\n if (this.y + this.height > height) {\n this.y = height - this.height; // Position it at the bottom\n }\n }\n\n // Method to check if this window is colliding with another object\n isColliding(other) {\n return this.x < other.x + other.width &&\n this.x + this.width > other.x &&\n this.y < other.y + other.height &&\n this.y + this.height > other.y;\n }\n\n // Method to display the window\n display() {\n fill(0, 0, 255); // Blue color for the window\n rect(this.x, this.y, this.width, this.height); // Draw the square\n }\n}\n\nclass Door {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.width = 60; // Width of the door\n this.height = 90; // Height of the door (taller than the brick)\n this.speed = 5; // Speed at which the door falls\n }\n\n // Method to update the door's position\n update(doors, bricks) {\n this.y += this.speed; // Move the door down\n\n // Check for collision with other doors\n for (let otherDoor of doors) {\n if (otherDoor !== this && this.isColliding(otherDoor)) {\n this.y = otherDoor.y - this.height; // Stack on top of the other door\n break; // End the loop since we found a collision\n }\n }\n\n // Check for collision with bricks\n for (let brick of bricks) {\n if (this.isColliding(brick)) {\n this.y = brick.y - this.height; // Stack on top of the brick\n break; // End the loop since we found a collision\n }\n }\n\n // Check if the door has reached the bottom of the canvas\n if (this.y + this.height > height) {\n this.y = height - this.height; // Position it at the bottom\n }\n }\n\n // Method to check if this door is colliding with another object\n isColliding(other) {\n return this.x < other.x + other.width &&\n this.x + this.width > other.x &&\n this.y < other.y + other.height &&\n this.y + this.height > other.y;\n }\n\n // Method to display the door\n display() {\n fill(100, 100, 255); // Blue color for the door\n rect(this.x, this.y, this.width, this.height); // Draw the rectangle\n }\n}\n\nclass Brick {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.width = 60; // Width of the brick\n this.height = 30; // Height of the brick\n this.speed = 5; // Increased speed of the brick\n }\n\n // Method to update the brick's position\n update(bricks) {\n if (!draggingBrick) { // Only fall if not being dragged\n this.y += this.speed; // Move the brick down\n\n // Check for collision with other bricks\n for (let otherBrick of bricks) {\n if (otherBrick !== this && this.isColliding(otherBrick)) {\n this.y = otherBrick.y - this.height; // Stack on top of the other brick\n break; // End the loop since we found a collision\n }\n }\n\n // Check if the brick has reached the bottom of the canvas\n if (this.y + this.height > height) {\n this.y = height - this.height; // Position it at the bottom\n }\n }\n }\n\n // Method to check if the mouse is over the brick\n isMouseOver(mx, my) {\n return mx > this.x && mx < this.x + this.width && my > this.y && my < this.y + this.height;\n }\n\n // Method to check if this brick is colliding with another brick\n isColliding(otherBrick) {\n return this.x < otherBrick.x + otherBrick.width &&\n this.x + this.width > otherBrick.x &&\n this.y < otherBrick.y + otherBrick.height &&\n this.y + this.height > otherBrick.y;\n }\n\n // Method to display the brick\n display() {\n fill(150, 75, 0); // Brown color\n rect(this.x, this.y, this.width, this.height); // Draw the rectangle\n }\n}\n\nfunction mouseReleased() {\n draggingBrick = null; // Stop dragging when the mouse is released\n}\n\nfunction mousePressed() {\n // Check if the left mouse button is clicked to spawn a new brick\n if (mouseButton === LEFT) {\n // Check if the mouse is over any existing brick for dragging\n for (let brick of bricks) {\n if (brick.isMouseOver(mouseX, mouseY)) {\n draggingBrick = brick; // Start dragging this brick\n return; // Exit the function if we start dragging\n }\n }\n\n // If no brick is being dragged, create a new brick at mouse position\n let newBrick = new Brick(mouseX, mouseY); // Create a new brick at mouse position\n bricks.push(newBrick); // Add the new brick to the array\n }\n}\n\nfunction mouseDragged() {\n if (draggingBrick) {\n draggingBrick.x = mouseX - draggingBrick.width / 2; // Update the brick's x position based on mouse\n draggingBrick.y = mouseY - draggingBrick.height / 2; // Update the brick's y position based on mouse\n }\n}\n\nfunction keyPressed() {\n if (key === '1') {\n let newDoor = new Door(mouseX, mouseY); // Create a new door at mouse position\n doors.push(newDoor); // Add the new door to the array\n } else if (key === '2') {\n let newWindow = new Window(mouseX, mouseY); // Create a new window at mouse position\n windows.push(newWindow); // Add the new window to the array\n }\n}","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Falling Bricks Chaos\n \n \n \n\n\n \n\n"},"chat_history":[{"code_id":278472,"sender":"client_script","deleted":0,"input_tokens":null,"id":168041,"message":"Let's get started!\n Errors:\n","project_id":9724,"created_at":"2025-08-22T20:05:40.966031Z","output_tokens":null},{"code_id":278472,"sender":"ai","deleted":0,"input_tokens":4444,"id":168042,"message":"Great! I see you have a project with falling bricks, doors, and windows. Could you tell me a bit more about your idea for this project? Are you building a game, a simulation, or something else? Let me know what you'd like to add or modify!","project_id":9724,"created_at":"2025-08-22T20:05:41.063141Z","output_tokens":59},{"code_id":278472,"sender":"human","deleted":0,"input_tokens":null,"id":168043,"message":"how do you win?","project_id":9724,"created_at":"2025-08-22T20:05:49.873813Z","output_tokens":null},{"code_id":278472,"sender":"ai","deleted":0,"input_tokens":4444,"id":168044,"message":"To determine how a player can win in your project, you could define specific conditions or goals that need to be achieved. For example, you might win by stacking a certain number of bricks, doors, or windows without any falling over. \n\nHere are a couple of questions to help us figure out the winning condition for your project:\n\n1. Do you want the player to win by stacking a certain number of bricks, doors, or windows?\n2. Is there a specific structure or pattern the player needs to create to win?\n\nLet me know what you have in mind!","project_id":9724,"created_at":"2025-08-22T20:05:50.753072Z","output_tokens":134}],"assets":[{"project_id":9724,"creator":null,"cloudinary_id":"wx7da2d4z6rgaayixfzb","deleted":false,"id":85103,"name":"ant","created_at":"2025-08-22T20:05:20.383443Z","resource_type":"image","tags":[]}],"messages_sent":1,"comments":[],"steps":[]}