Web-Based Version

Web-Based Version/app.js

@@ -0,0 +1,175 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+const width = canvas.width;
+const height = canvas.height;
+const particles = [];
+const grid = Array.from({ length: height }, () => Array(width).fill(null));
+
+
+const particleTypes = {
+    sand: { color: 'yellow', density: 2 },
+    water: { color: 'blue', density: 1 },
+    fire: { color: 'red', density: 0 },
+    oil: { color: 'brown', density: 1 },
+    wall: { color: 'gray', density: Infinity },
+    acid: { color: 'green', density: 1 },
+    gas: { color: 'lightgray', density: 0 }
+};
+
+class Particle {
+    constructor(x, y, type) {
+        this.x = x;
+        this.y = y;
+        this.type = type;
+        this.color = particleTypes[type].color;
+        this.density = particleTypes[type].density;
+    }
+
+    update() {
+        if (this.type === 'sand' || this.type === 'water' || this.type === 'oil' || this.type === 'acid') {
+            this.fall();
+        } else if (this.type === 'fire') {
+            this.spread();
+            this.burn();
+        } else if (this.type === 'gas') {
+            this.rise();
+        }
+    }
+
+    fall() {
+        if (this.y < height - 1 && (!grid[this.y + 1][this.x] || grid[this.y + 1][this.x].density < this.density)) {
+            grid[this.y][this.x] = null;
+            this.y += 1;
+            grid[this.y][this.x] = this;
+        }
+    }
+
+    rise() {
+        if (this.y > 0 && (!grid[this.y - 1][this.x] || grid[this.y - 1][this.x].density > this.density)) {
+            grid[this.y][this.x] = null;
+            this.y -= 1;
+            grid[this.y][this.x] = this;
+        }
+    }
+
+    spread() {
+        const spreadDirections = [
+            { dx: 0, dy: -1 }, // up
+            { dx: 1, dy: 0 },  // right
+            { dx: 0, dy: 1 },  // down
+            { dx: -1, dy: 0 }  // left
+        ];
+
+        for (let dir of spreadDirections) {
+            const newX = this.x + dir.dx;
+            const newY = this.y + dir.dy;
+            if (newX >= 0 && newX < width && newY >= 0 && newY < height) {
+                const neighbor = grid[newY][newX];
+                if (neighbor && neighbor.type === 'oil') {
+                    grid[newY][newX] = new Particle(newX, newY, 'fire');
+                    particles.push(grid[newY][newX]);
+                }
+            }
+        }
+    }
+
+    burn() {
+        if (this.y < height - 1 && grid[this.y + 1][this.x] && grid[this.y + 1][this.x].type === 'oil') {
+            grid[this.y + 1][this.x] = new Particle(this.x, this.y + 1, 'fire');
+            particles.push(grid[this.y + 1][this.x]);
+        }
+    }
+
+    draw() {
+        ctx.fillStyle = this.color;
+        ctx.fillRect(this.x, this.y, 1, 1);
+    }
+}
+
+function addParticle(x, y, type) {
+    if (x >= 0 && x < width && y >= 0 && y < height && !grid[y][x]) {
+        const particle = new Particle(x, y, type);
+        particles.push(particle);
+        grid[y][x] = particle;
+    }
+}
+
+function addParticleCluster(x, y, type, size = 5) {
+    for (let dx = -size; dx <= size; dx++) {
+        for (let dy = -size; dy <= size; dy++) {
+            if (Math.sqrt(dx * dx + dy * dy) <= size) {
+                addParticle(x + dx, y + dy, type);
+            }
+        }
+    }
+}
+
+let isMouseDown = false;
+
+canvas.addEventListener('mousedown', (e) => {
+    isMouseDown = true;
+    const rect = canvas.getBoundingClientRect();
+    const x = Math.floor(e.clientX - rect.left);
+    const y = Math.floor(e.clientY - rect.top);
+    addParticleCluster(x, y, selectedType);
+});
+
+canvas.addEventListener('mouseup', () => {
+    isMouseDown = false;
+});
+
+canvas.addEventListener('mousemove', (e) => {
+    if (isMouseDown) {
+        const rect = canvas.getBoundingClientRect();
+        const x = Math.floor(e.clientX - rect.left);
+        const y = Math.floor(e.clientY - rect.top);
+        addParticleCluster(x, y, selectedType);
+    }
+});
+
+let selectedType = 'sand';
+
+function selectType(type) {
+    selectedType = type;
+    document.getElementById('colorIndicator').style.backgroundColor = particleTypes[type].color;
+}
+
+
+document.getElementById('colorIndicator').style.backgroundColor = particleTypes[selectedType].color;
+
+let simulationRunning = true;
+
+function startSimulation() {
+    simulationRunning = true;
+}
+
+function pauseSimulation() {
+    simulationRunning = false;
+}
+
+function resetSimulation() {
+    particles.length = 0;
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            grid[y][x] = null;
+        }
+    }
+}
+
+function clearSimulation() {
+    resetSimulation();
+    ctx.clearRect(0, 0, width, height);
+}
+
+function gameLoop() {
+    if (simulationRunning) {
+        ctx.clearRect(0, 0, width, height);
+        particles.forEach(particle => {
+            particle.update();
+            particle.draw();
+        });
+    }
+    requestAnimationFrame(gameLoop);
+}
+
+gameLoop();

Web-Based Version/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ParticleSimulator by Taha</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="toolbar">
+        <button onclick="selectType('sand')">Sand</button>
+        <button onclick="selectType('water')">Water</button>
+        <button onclick="selectType('fire')">Fire</button>
+        <button onclick="selectType('oil')">Oil</button>
+        <button onclick="selectType('wall')">Wall</button>
+        <button onclick="selectType('acid')">Acid</button>
+        <button onclick="selectType('gas')">Gas</button>
+        <button onclick="startSimulation()">Start</button>
+        <button onclick="pauseSimulation()">Pause</button>
+        <button onclick="resetSimulation()">Reset</button>
+        <button onclick="clearSimulation()">Clear</button>
+        <div id="colorIndicator"></div>
+    </div>
+    <canvas id="gameCanvas" width="800" height="600"></canvas>
+    <script src="app.js"></script>
+</body>
+</html>

Web-Based Version/style.css

@@ -0,0 +1,23 @@
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #575757;
+}
+
+#toolbar {
+    margin-bottom: 10px;
+}
+
+canvas {
+    border: 1px solid black;
+}
+#colorIndicator {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    margin-left: 10px;
+    border: 1px solid #000;
+}

src/ui.py

@@ -6,7 +6,7 @@
 pygame.init()
 
 WIDTH, HEIGHT = 800, 600
-CELL_SIZE = 2  # Smaller cell size for smaller particles
+CELL_SIZE = 2  
 GRID_WIDTH = WIDTH // CELL_SIZE
 GRID_HEIGHT = HEIGHT // CELL_SIZE
 screen = pygame.display.set_mode((WIDTH, HEIGHT))