Clumping Sand Simulation

{"name":"Clumping Sand Simulation","description":"Experience the mesmerizing effect of falling sand particles that clump into piles in this interactive simulation. Control the direction of the sand and watch as it piles up in different formations.","photo":null,"view_count":7,"fork_count":0,"expires_at":null,"created_at":"2024-04-01T22:16:59.821280Z","updated_at":"2024-04-01T22:16:59.821281Z","user_id":2,"status":"PRIVATE","parent_id":null,"id":1005,"user":{"username":"gamerc0der","id":2,"password_hash":null,"updated_at":"2023-12-11T22:13:50.357943Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"a75a82d5-5ae6-41b7-d20f-788415be036d","created_at":"2023-12-11T22:13:50.357940Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"let grid;\nlet cellSize = 20; // Size of each cell in the grid\nlet currentMaterial = 1; // Default to sand. Use 2 for water.\nlet brushType = 'dot';\nlet brushSize = 1; // Default size\n\nfunction setupToolbar() {\n document.getElementById('sandButton').addEventListener('click', () => currentMaterial = 1);\n document.getElementById('waterButton').addEventListener('click', () => currentMaterial = 2);\n document.getElementById('dotButton').addEventListener('click', () => brushType = 'dot');\n document.getElementById('squareButton').addEventListener('click', () => brushType = 'square');\n document.getElementById('triangleButton').addEventListener('click', () => brushType = 'triangle');\n document.getElementById('rectangleButton').addEventListener('click', () => brushType = 'rectangle');\n document.getElementById('brushSizeInput').addEventListener('input', () => brushSize = parseInt(document.getElementById('brushSizeInput').value));\n document.getElementById('seedlingButton').addEventListener('click', () => currentMaterial = 3);\n}\nfunction applyBrush(x, y) {\n switch (brushType) {\n case 'dot':\n for (let j = 0; j < brushSize; j++) {\n drawParticle(x + j, y + j, currentMaterial);\n }\n break;\n case 'square':\n for (let i = 0; i < brushSize; i++) {\n for (let j = 0; j < brushSize; j++) {\n drawParticle(x + i, y + j, currentMaterial);\n }\n }\n break;\n case 'triangle':\n for (let i = 0; i < brushSize; i++) {\n for (let j = 0; j <= i; j++) {\n drawParticle(x + j, y + i, currentMaterial);\n }\n }\n break;\n case 'rectangle':\n for (let i = 0; i < brushSize; i++) {\n for (let j = 0; j < brushSize / 2; j++) { // Example for rectangle, adjust as needed\n drawParticle(x + i, y + j, currentMaterial);\n }\n }\n break;\n }\n}\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(220);\n initializeGrid();\n drawGrid();\n setupToolbar(); // Initialize the toolbar\n}\nfunction initializeGrid() {\n let cols = floor(width / cellSize);\n let rows = floor(height / cellSize);\n grid = new Array(cols).fill(null).map(() => new Array(rows).fill(0));\n\n}\nfunction drawGrid() {\n for (let x = 0; x < width; x += 20) {\n for (let y = 0; y < height; y += 20) {\n stroke(200); // Lighter grid color\n strokeWeight(0.5); // Thinner grid lines\n line(x, 0, x, height);\n line(0, y, width, y);\n }\n }\n}\nfunction updateSeedling(x, y) {\n // Directly below\n if (y + 1 < grid[x].length && grid[x][y + 1] === 0) {\n grid[x][y] = 0;\n grid[x][y + 1] = 3;\n }\n}\nfunction growTreeAt(x, y) {\n // Assuming y is the top of the tree, place a new layer of leaves\n for (let lx = -1; lx <= 1; lx++) {\n // Check grid bounds\n if (x + lx >= 0 && x + lx < grid.length && y - 1 >= 0) {\n grid[x + lx][y - 1] = 6; // Leaves\n }\n }\n}\nfunction checkWaterAroundSeedling(x, y) {\n const adjacentOffsets = [\n { dx: -1, dy: 0 }, // Left\n { dx: 1, dy: 0 }, // Right\n { dx: 0, dy: -1 }, // Top\n { dx: 0, dy: 1 }, // Bottom\n { dx: -1, dy: -1 }, // Top-Left\n { dx: 1, dy: -1 }, // Top-Right\n { dx: -1, dy: 1 }, // Bottom-Left\n { dx: 1, dy: 1 } // Bottom-Right\n ];\n\n for (let offset of adjacentOffsets) {\n let nx = x + offset.dx;\n let ny = y + offset.dy;\n\n if (nx >= 0 && nx < grid.length && ny >= 0 && ny < grid[0].length) {\n if (grid[nx][ny] === 2) { // If water is found adjacent to the seedling\n // Convert the seedling into a tree\n // Trunk - 4 blocks of oak wood\n for (let i = 1; i <= 4; i++) {\n if (y - i >= 0) {\n grid[x][y - i] = 5; // Oak wood\n }\n }\n // Leaves - a 3x3 grid with the center being the top of the trunk\n for (let lx = -1; lx <= 1; lx++) {\n for (let ly = -4; ly <= -2; ly++) {\n if (x + lx >= 0 && x + lx < grid.length && y + ly >= 0 && y + ly < grid[0].length) {\n grid[x + lx][y + ly] = 6; // Leaves\n }\n }\n }\n return true;\n }\n }\n }\n return false;\n}\nfunction drawParticles() {\n for (let x = 0; x < grid.length; x++) {\n for (let y = 0; y < grid[x].length; y++) {\n if (grid[x][y] === 1) { // Sand\n // Sand color with border\n fill(210, 180, 140); // A bit darker for depth\n stroke(189, 164, 128); // Border color\n strokeWeight(1);\n rect(x * cellSize, y * cellSize, cellSize, cellSize);\n noStroke();\n fill(244, 164, 96); // Sand color\n rect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); // Inner part slightly smaller\n } else if (grid[x][y] === 2) { // Water\n // Water color with a \"light reflection\" effect\n fill(0, 76, 153);\n stroke(0, 102, 204); // Slightly lighter top border to simulate light reflection\n strokeWeight(1);\n rect(x * cellSize, y * cellSize, cellSize, cellSize);\n noStroke();\n fill(51, 153, 255); // Lighter water color\n rect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); // Inner part slightly smaller\n }\n else if (grid[x][y] === 3) { fill(139, 69, 19); // Dark brown color for the seed\n strokeWeight(1);\n rect(x * cellSize, y * cellSize, cellSize, cellSize);\n\n // Sprout of the seedling\n fill(34, 139, 34); // Green color for the sprout\n triangle(\n x * cellSize + cellSize / 2, y * cellSize, \n x * cellSize + cellSize / 4, y * cellSize + cellSize / 2, \n x * cellSize + (3 * cellSize) / 4, y * cellSize + cellSize / 2\n );\n }\nelse if (grid[x][y] === 5) { // Oak wood block\n fill(102, 51, 0); // A brown color for oak wood\n stroke(84, 42, 0); // Darker border for depth\n strokeWeight(1);\n rect(x * cellSize, y * cellSize, cellSize, cellSize);\n noStroke();\n fill(139, 69, 19); // Slightly lighter brown for inner wood\n rect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); // Inner part slightly smaller for a 3D effect\n}\nelse if (grid[x][y] === 6) { // Leaf block\n fill(0, 128, 0); // A green color for leaves\n stroke(0, 100, 0); // Darker border for depth\n strokeWeight(1);\n rect(x * cellSize, y * cellSize, cellSize, cellSize);\n noStroke();\n fill(34, 139, 34); // Slightly lighter green for inner leaves\n rect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); // Inner part slightly smaller for a 3D effect\n}\n\n }\n }\n}\nfunction updateParticles() {\n for (let x = 0; x < grid.length; x++) {\n for (let y = grid[x].length - 1; y >= 0; y--) { // Start from the bottom to the top\n switch(grid[x][y]) {\n case 1: // Sand behavior\n updateSand(x, y);\n break;\n case 2: // Water behavior\n updateWater(x, y);\n break;\n case 3: // Seedling behavior\n updateSeedling(x, y);\n checkWaterAroundSeedling(x, y); // Check if water is around the seedling\n break;\n case 3: // Oak wood block\n // Check for water directly above the tree part\n if (y - 1 >= 0 && grid[x][y - 1] === 2) {\n grid[x][y - 1] = 0; // Remove the water block\n growTreeAt(x, y); // Grow the tree\n }\n break;\n }\n }\n }\n}\nfunction updateSand(x, y) {\n let moved = false;\n // Directly below\n if (y + 1 < grid[x].length && grid[x][y + 1] === 0) {\n grid[x][y] = 0;\n grid[x][y + 1] = 1;\n moved = true;\n }\n // Diagonally down-left\n else if (x - 1 >= 0 && y + 1 < grid[x].length && grid[x - 1][y + 1] === 0 && !moved) {\n grid[x][y] = 0;\n grid[x - 1][y + 1] = 1;\n moved = true;\n }\n // Diagonally down-right\n else if (x + 1 < grid.length && y + 1 < grid[x].length && grid[x + 1][y + 1] === 0 && !moved) {\n grid[x][y] = 0;\n grid[x + 1][y + 1] = 1;\n moved = true;\n }\n}\nfunction updateWater(x, y) {\n let moved = false;\n // Directly below\n if (y + 1 < grid[x].length && grid[x][y + 1] === 0) {\n grid[x][y] = 0;\n grid[x][y + 1] = 2;\n moved = true;\n }\n // Look horizontally for the nearest empty spot if the space below is not empty\n else if (y + 1 < grid[x].length && grid[x][y + 1] !== 0 && !moved) {\n let direction = 0; // 0 means no direction, -1 for left, 1 for right\n let distanceToLeft = 0;\n let distanceToRight = 0;\n\n // Check left\n for (let i = x - 1; i >= 0 && grid[i][y] !== 2; i--) { // Also check if not water to prevent disappearing\n if (grid[i][y] === 0) { // Empty space found\n distanceToLeft = x - i;\n direction = -1;\n break;\n } else if (grid[i][y + 1] === 0) { // Check if space below is empty to allow flow\n break;\n }\n }\n\n // Check right\n for (let i = x + 1; i < grid.length && grid[i][y] !== 2; i++) { // Also check if not water to prevent disappearing\n if (grid[i][y] === 0) { // Empty space found\n distanceToRight = i - x;\n if (distanceToLeft === 0 || distanceToRight < distanceToLeft) {\n direction = 1;\n }\n break;\n } else if (grid[i][y + 1] === 0) { // Check if space below is empty to allow flow\n break;\n }\n }\n\n // If both left and right are equally viable, pick randomly\n if (distanceToLeft > 0 && distanceToLeft === distanceToRight) {\n direction = (Math.random() < 0.5) ? -1 : 1;\n }\n\n // Move water based on direction\n if (direction !== 0) {\n grid[x][y] = 0;\n grid[x + direction][y] = 2;\n moved = true;\n }\n }\n}\n\nfunction drawParticle(col, row, material) {\n if (col >= 0 && col < grid.length && row >= 0 && row < grid[0].length) {\n grid[col][row] = material;\n }\n}\nfunction mousePressed() {\n let col = floor(mouseX / cellSize);\n let row = floor(mouseY / cellSize);\n applyBrush(col, row);\n}\n\nfunction mouseDragged() {\n mousePressed();\n}\nfunction draw() {\n background(220);\n drawGrid();\n drawParticles()\n updateParticles();\n}","style.css":"","index.html":"\n\n\n\n \n \n Clumping Sand Simulation\n \n\n\n

\n \n \n \n \n

\n \n

\n\n\n \n \n\n\n\n"},"chat_history":[{"deleted":0,"code_id":59053,"input_tokens":null,"id":32572,"project_id":1005,"sender":"human","message":"use pixel art like else if (grid[x][y] === 3) { fill(139, 69, 19); // Dark brown color for the seed\n noStroke();\n rect(x * cellSize, y * cellSize, cellSize, cellSize);\n \n // Sprout of the seedling\n fill(34, 139, 34); // Green color for the sprout\n triangle(\n x * cellSize + cellSize / 2, y * cellSize, \n x * cellSize + cellSize / 4, y * cellSize + cellSize / 2, \n x * cellSize + (3 * cellSize) / 4, y * cellSize + cellSize / 2\n );\n }","created_at":"2024-04-01T22:54:20.859194Z","output_tokens":null},{"deleted":0,"code_id":59053,"input_tokens":null,"id":32573,"project_id":1005,"sender":"ai","message":"```javascript\nfunction drawParticles() {\n for (let x = 0; x < grid.length; x++) {\n for (let y = 0; y < grid[x].length; y++) {\n switch (grid[x][y]) {\n case 1: // Sand\n fill(210, 180, 140); // Sand color\n noStroke();\n rect(x * cellSize, y * cellSize, cellSize, cellSize);\n break;\n case 2: // Water\n fill(0, 76, 153); // Water color\n noStroke();\n rect(x * cellSize, y * cellSize, cellSize, cellSize);\n break;\n case 3: // Seedling\n fill(139, 69, 19); // Seed color\n noStroke();\n rect(x * cellSize, y * cellSize, cellSize, cellSize);\n fill(34, 139, 34); // Sprout color\n triangle(\n x * cellSize + cellSize / 2, y * cellSize, \n x * cellSize + cellSize / 4, y * cellSize + cellSize / 2, \n x * cellSize + (3 * cellSize) / 4, y * cellSize + cellSize / 2\n );\n break;\n // Add cases for other materials as needed\n }\n }\n }\n}\n```\n\n- This function iterates over the entire grid array and checks the value of each cell.\n- For each cell containing a specific material (e.g., sand, water, seedling), it draws a corresponding shape or pixel art representation at the cell's location on the canvas.\n- The `fill` function sets the color for the shape, and `noStroke` ensures no border is drawn around the shape. The `rect` function draws rectangles, and `triangle` is used for the seedling's sprout to create a simple pixel art effect.","created_at":"2024-04-01T22:54:20.865710Z","output_tokens":null},{"deleted":0,"code_id":59056,"input_tokens":null,"id":32574,"project_id":1005,"sender":"human","message":"make these look more like the sand/water else if (grid[x][y] === 5) { // Oak wood block\n fill(102, 51, 0); // A brown color for oak wood\n noStroke();\n rect(x * cellSize, y * cellSize, cellSize, cellSize);\n}\nelse if (grid[x][y] === 6) { // Leaf block\n fill(0, 128, 0); // A green color for leaves\n noStroke();\n rect(x * cellSize, y * cellSize, cellSize, cellSize);\n}","created_at":"2024-04-01T22:55:21.988253Z","output_tokens":null},{"deleted":0,"code_id":59056,"input_tokens":null,"id":32575,"project_id":1005,"sender":"ai","message":"```javascript\nelse if (grid[x][y] === 5) { // Oak wood block\n fill(102, 51, 0); // A brown color for oak wood\n stroke(84, 42, 0); // Darker border for depth\n strokeWeight(1);\n rect(x * cellSize, y * cellSize, cellSize, cellSize);\n noStroke();\n fill(139, 69, 19); // Slightly lighter brown for inner wood\n rect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); // Inner part slightly smaller for a 3D effect\n}\nelse if (grid[x][y] === 6) { // Leaf block\n fill(0, 128, 0); // A green color for leaves\n stroke(0, 100, 0); // Darker border for depth\n strokeWeight(1);\n rect(x * cellSize, y * cellSize, cellSize, cellSize);\n noStroke();\n fill(34, 139, 34); // Slightly lighter green for inner leaves\n rect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); // Inner part slightly smaller for a 3D effect\n}\n```\n\n- This code adds a border to the oak wood and leaf blocks to create a sense of depth, similar to how sand and water particles are rendered.\n- The `stroke` function before drawing the rectangle adds a border with a darker shade than the fill color, giving the blocks a more defined and three-dimensional appearance.\n- By drawing a slightly smaller rectangle (`rect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4)`) inside the original rectangle with a lighter shade, it enhances the pixel art effect, making the blocks look more detailed and visually appealing.","created_at":"2024-04-01T22:55:21.995905Z","output_tokens":null}],"assets":[],"messages_sent":28,"comments":[],"steps":[{"title":"Visual Sand Particles","step_number":0,"complete":false,"updated_at":"2024-04-01T22:16:59.828918","id":5121,"instruction":"Implement visible sand particles falling from the top of the screen.","created_at":"2024-04-01T22:16:59.828915","project_id":1005},{"title":"Interactive Controls","step_number":1,"complete":false,"updated_at":"2024-04-01T22:16:59.828983","id":5122,"instruction":"Add interactive controls to allow users to change the direction of the falling sand.","created_at":"2024-04-01T22:16:59.828982","project_id":1005},{"title":"Particle Clumping","step_number":2,"complete":false,"updated_at":"2024-04-01T22:16:59.829028","id":5123,"instruction":"Simulate the behavior of sand particles clumping together to form piles based on their properties.","created_at":"2024-04-01T22:16:59.829027","project_id":1005},{"title":"Property Adjustment","step_number":3,"complete":false,"updated_at":"2024-04-01T22:16:59.829071","id":5124,"instruction":"Enable users to adjust the properties of the sand particles, such as size, density, and color.","created_at":"2024-04-01T22:16:59.829071","project_id":1005},{"title":"Pile Formation","step_number":4,"complete":false,"updated_at":"2024-04-01T22:16:59.829115","id":5125,"instruction":"Display visually appealing formations as the sand particles clump together to form piles.","created_at":"2024-04-01T22:16:59.829114","project_id":1005},{"title":"Reset Option","step_number":5,"complete":false,"updated_at":"2024-04-01T22:16:59.829241","id":5126,"instruction":"Incorporate a reset option to clear the screen and start a new simulation.","created_at":"2024-04-01T22:16:59.829239","project_id":1005},{"title":"User Guidance","step_number":6,"complete":false,"updated_at":"2024-04-01T22:16:59.829335","id":5127,"instruction":"Provide on-screen instructions or guidance for users to interact with the simulation effectively.","created_at":"2024-04-01T22:16:59.829333","project_id":1005}]}