feat: Create optimized pixel sand simulation with chunking system
This commit is contained in:
Kacper Kostka (aider)
commit
7c7d9b97fd
32
index.html
Normal file
32
index.html
Normal file
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pixel Sand Simulation</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="controls">
|
||||
<div class="tools">
|
||||
<button id="sand-btn" class="active">Sand</button>
|
||||
<button id="water-btn">Water</button>
|
||||
<button id="eraser-btn">Eraser</button>
|
||||
</div>
|
||||
<div class="navigation">
|
||||
<button id="move-left">←</button>
|
||||
<button id="move-right">→</button>
|
||||
<button id="move-up">↑</button>
|
||||
<button id="move-down">↓</button>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span id="coords">Chunk: 0,0</span>
|
||||
<span id="fps">FPS: 0</span>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="simulation-canvas"></canvas>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
363
script.js
Normal file
363
script.js
Normal file
@ -0,0 +1,363 @@
|
||||
// Constants
|
||||
const CHUNK_SIZE = 200;
|
||||
const PIXEL_SIZE = 4;
|
||||
const GRAVITY = 0.5;
|
||||
const WATER_SPREAD = 3;
|
||||
const SAND_COLOR = '#e6c588';
|
||||
const WATER_COLOR = '#4a80f5';
|
||||
|
||||
// Element types
|
||||
const EMPTY = 0;
|
||||
const SAND = 1;
|
||||
const WATER = 2;
|
||||
|
||||
// Global variables
|
||||
let canvas, ctx;
|
||||
let currentTool = SAND;
|
||||
let isDrawing = false;
|
||||
let lastFrameTime = 0;
|
||||
let fps = 0;
|
||||
let worldOffsetX = 0;
|
||||
let worldOffsetY = 0;
|
||||
let chunks = new Map(); // Map to store chunks with key "x,y"
|
||||
|
||||
// Initialize the simulation
|
||||
window.onload = function() {
|
||||
canvas = document.getElementById('simulation-canvas');
|
||||
ctx = canvas.getContext('2d');
|
||||
|
||||
// Set canvas size to fill the screen
|
||||
resizeCanvas();
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
|
||||
// Tool selection
|
||||
document.getElementById('sand-btn').addEventListener('click', () => setTool(SAND));
|
||||
document.getElementById('water-btn').addEventListener('click', () => setTool(WATER));
|
||||
document.getElementById('eraser-btn').addEventListener('click', () => setTool(EMPTY));
|
||||
|
||||
// Navigation controls
|
||||
document.getElementById('move-left').addEventListener('click', () => moveWorld(-CHUNK_SIZE/2, 0));
|
||||
document.getElementById('move-right').addEventListener('click', () => moveWorld(CHUNK_SIZE/2, 0));
|
||||
document.getElementById('move-up').addEventListener('click', () => moveWorld(0, -CHUNK_SIZE/2));
|
||||
document.getElementById('move-down').addEventListener('click', () => moveWorld(0, CHUNK_SIZE/2));
|
||||
|
||||
// Drawing events
|
||||
canvas.addEventListener('mousedown', startDrawing);
|
||||
canvas.addEventListener('mousemove', draw);
|
||||
canvas.addEventListener('mouseup', stopDrawing);
|
||||
canvas.addEventListener('mouseleave', stopDrawing);
|
||||
|
||||
// Touch events for mobile
|
||||
canvas.addEventListener('touchstart', handleTouchStart);
|
||||
canvas.addEventListener('touchmove', handleTouchMove);
|
||||
canvas.addEventListener('touchend', stopDrawing);
|
||||
|
||||
// Initialize the first chunk
|
||||
getOrCreateChunk(0, 0);
|
||||
|
||||
// Start the simulation loop
|
||||
requestAnimationFrame(simulationLoop);
|
||||
};
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight - document.querySelector('.controls').offsetHeight;
|
||||
}
|
||||
|
||||
function setTool(tool) {
|
||||
currentTool = tool;
|
||||
document.querySelectorAll('.tools button').forEach(btn => btn.classList.remove('active'));
|
||||
|
||||
if (tool === SAND) {
|
||||
document.getElementById('sand-btn').classList.add('active');
|
||||
} else if (tool === WATER) {
|
||||
document.getElementById('water-btn').classList.add('active');
|
||||
} else if (tool === EMPTY) {
|
||||
document.getElementById('eraser-btn').classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
function startDrawing(e) {
|
||||
isDrawing = true;
|
||||
draw(e);
|
||||
}
|
||||
|
||||
function stopDrawing() {
|
||||
isDrawing = false;
|
||||
}
|
||||
|
||||
function draw(e) {
|
||||
if (!isDrawing) return;
|
||||
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
let x, y;
|
||||
|
||||
if (e.type.startsWith('touch')) {
|
||||
x = e.touches[0].clientX - rect.left;
|
||||
y = e.touches[0].clientY - rect.top;
|
||||
} else {
|
||||
x = e.clientX - rect.left;
|
||||
y = e.clientY - rect.top;
|
||||
}
|
||||
|
||||
// Convert to world coordinates
|
||||
const worldX = Math.floor(x / PIXEL_SIZE) + worldOffsetX;
|
||||
const worldY = Math.floor(y / PIXEL_SIZE) + worldOffsetY;
|
||||
|
||||
// Draw a small brush (3x3)
|
||||
for (let dy = -1; dy <= 1; dy++) {
|
||||
for (let dx = -1; dx <= 1; dx++) {
|
||||
setPixel(worldX + dx, worldY + dy, currentTool);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleTouchStart(e) {
|
||||
e.preventDefault();
|
||||
startDrawing(e);
|
||||
}
|
||||
|
||||
function handleTouchMove(e) {
|
||||
e.preventDefault();
|
||||
draw(e);
|
||||
}
|
||||
|
||||
function moveWorld(dx, dy) {
|
||||
worldOffsetX += dx;
|
||||
worldOffsetY += dy;
|
||||
updateCoordinatesDisplay();
|
||||
}
|
||||
|
||||
function updateCoordinatesDisplay() {
|
||||
const chunkX = Math.floor(worldOffsetX / CHUNK_SIZE);
|
||||
const chunkY = Math.floor(worldOffsetY / CHUNK_SIZE);
|
||||
document.getElementById('coords').textContent = `Chunk: ${chunkX},${chunkY}`;
|
||||
}
|
||||
|
||||
function getChunkKey(chunkX, chunkY) {
|
||||
return `${chunkX},${chunkY}`;
|
||||
}
|
||||
|
||||
function getOrCreateChunk(chunkX, chunkY) {
|
||||
const key = getChunkKey(chunkX, chunkY);
|
||||
|
||||
if (!chunks.has(key)) {
|
||||
// Create a new chunk with empty pixels
|
||||
const chunkData = new Array(CHUNK_SIZE * CHUNK_SIZE).fill(EMPTY);
|
||||
chunks.set(key, chunkData);
|
||||
}
|
||||
|
||||
return chunks.get(key);
|
||||
}
|
||||
|
||||
function getChunkCoordinates(worldX, worldY) {
|
||||
const chunkX = Math.floor(worldX / CHUNK_SIZE);
|
||||
const chunkY = Math.floor(worldY / CHUNK_SIZE);
|
||||
const localX = ((worldX % CHUNK_SIZE) + CHUNK_SIZE) % CHUNK_SIZE;
|
||||
const localY = ((worldY % CHUNK_SIZE) + CHUNK_SIZE) % CHUNK_SIZE;
|
||||
|
||||
return { chunkX, chunkY, localX, localY };
|
||||
}
|
||||
|
||||
function setPixel(worldX, worldY, type) {
|
||||
const { chunkX, chunkY, localX, localY } = getChunkCoordinates(worldX, worldY);
|
||||
const chunk = getOrCreateChunk(chunkX, chunkY);
|
||||
const index = localY * CHUNK_SIZE + localX;
|
||||
|
||||
chunk[index] = type;
|
||||
}
|
||||
|
||||
function getPixel(worldX, worldY) {
|
||||
const { chunkX, chunkY, localX, localY } = getChunkCoordinates(worldX, worldY);
|
||||
const key = getChunkKey(chunkX, chunkY);
|
||||
|
||||
if (!chunks.has(key)) {
|
||||
return EMPTY;
|
||||
}
|
||||
|
||||
const chunk = chunks.get(key);
|
||||
const index = localY * CHUNK_SIZE + localX;
|
||||
|
||||
return chunk[index];
|
||||
}
|
||||
|
||||
function simulationLoop(timestamp) {
|
||||
// Calculate FPS
|
||||
const deltaTime = timestamp - lastFrameTime;
|
||||
lastFrameTime = timestamp;
|
||||
fps = Math.round(1000 / deltaTime);
|
||||
document.getElementById('fps').textContent = `FPS: ${fps}`;
|
||||
|
||||
// Update physics
|
||||
updatePhysics();
|
||||
|
||||
// Render
|
||||
render();
|
||||
|
||||
// Continue the loop
|
||||
requestAnimationFrame(simulationLoop);
|
||||
}
|
||||
|
||||
function updatePhysics() {
|
||||
// Get visible chunks
|
||||
const visibleChunks = getVisibleChunks();
|
||||
|
||||
// Process each visible chunk
|
||||
for (const { chunkX, chunkY } of visibleChunks) {
|
||||
const chunk = getOrCreateChunk(chunkX, chunkY);
|
||||
|
||||
// Process from bottom to top, right to left for correct gravity simulation
|
||||
for (let y = CHUNK_SIZE - 1; y >= 0; y--) {
|
||||
// Alternate direction each row for more natural flow
|
||||
const startX = y % 2 === 0 ? 0 : CHUNK_SIZE - 1;
|
||||
const endX = y % 2 === 0 ? CHUNK_SIZE : -1;
|
||||
const step = y % 2 === 0 ? 1 : -1;
|
||||
|
||||
for (let x = startX; x !== endX; x += step) {
|
||||
const index = y * CHUNK_SIZE + x;
|
||||
const type = chunk[index];
|
||||
|
||||
if (type === EMPTY) continue;
|
||||
|
||||
const worldX = chunkX * CHUNK_SIZE + x;
|
||||
const worldY = chunkY * CHUNK_SIZE + y;
|
||||
|
||||
if (type === SAND) {
|
||||
updateSand(worldX, worldY);
|
||||
} else if (type === WATER) {
|
||||
updateWater(worldX, worldY);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateSand(x, y) {
|
||||
// Try to move down
|
||||
if (getPixel(x, y + 1) === EMPTY) {
|
||||
setPixel(x, y, EMPTY);
|
||||
setPixel(x, y + 1, SAND);
|
||||
}
|
||||
// Try to move down-left or down-right
|
||||
else if (getPixel(x - 1, y + 1) === EMPTY) {
|
||||
setPixel(x, y, EMPTY);
|
||||
setPixel(x - 1, y + 1, SAND);
|
||||
}
|
||||
else if (getPixel(x + 1, y + 1) === EMPTY) {
|
||||
setPixel(x, y, EMPTY);
|
||||
setPixel(x + 1, y + 1, SAND);
|
||||
}
|
||||
// Sand can displace water
|
||||
else if (getPixel(x, y + 1) === WATER) {
|
||||
setPixel(x, y, WATER);
|
||||
setPixel(x, y + 1, SAND);
|
||||
}
|
||||
}
|
||||
|
||||
function updateWater(x, y) {
|
||||
// Try to move down
|
||||
if (getPixel(x, y + 1) === EMPTY) {
|
||||
setPixel(x, y, EMPTY);
|
||||
setPixel(x, y + 1, WATER);
|
||||
}
|
||||
// Try to move down-left or down-right
|
||||
else if (getPixel(x - 1, y + 1) === EMPTY) {
|
||||
setPixel(x, y, EMPTY);
|
||||
setPixel(x - 1, y + 1, WATER);
|
||||
}
|
||||
else if (getPixel(x + 1, y + 1) === EMPTY) {
|
||||
setPixel(x, y, EMPTY);
|
||||
setPixel(x + 1, y + 1, WATER);
|
||||
}
|
||||
// Try to spread horizontally
|
||||
else {
|
||||
let moved = false;
|
||||
|
||||
// Randomly choose direction first
|
||||
const goLeft = Math.random() > 0.5;
|
||||
|
||||
if (goLeft && getPixel(x - 1, y) === EMPTY) {
|
||||
setPixel(x, y, EMPTY);
|
||||
setPixel(x - 1, y, WATER);
|
||||
moved = true;
|
||||
} else if (!goLeft && getPixel(x + 1, y) === EMPTY) {
|
||||
setPixel(x, y, EMPTY);
|
||||
setPixel(x + 1, y, WATER);
|
||||
moved = true;
|
||||
}
|
||||
// Try the other direction if first failed
|
||||
else if (!goLeft && getPixel(x - 1, y) === EMPTY) {
|
||||
setPixel(x, y, EMPTY);
|
||||
setPixel(x - 1, y, WATER);
|
||||
moved = true;
|
||||
} else if (goLeft && getPixel(x + 1, y) === EMPTY) {
|
||||
setPixel(x, y, EMPTY);
|
||||
setPixel(x + 1, y, WATER);
|
||||
moved = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getVisibleChunks() {
|
||||
const visibleChunks = [];
|
||||
|
||||
// Calculate visible chunk range
|
||||
const startChunkX = Math.floor(worldOffsetX / CHUNK_SIZE) - 1;
|
||||
const endChunkX = Math.ceil((worldOffsetX + canvas.width / PIXEL_SIZE) / CHUNK_SIZE) + 1;
|
||||
const startChunkY = Math.floor(worldOffsetY / CHUNK_SIZE) - 1;
|
||||
const endChunkY = Math.ceil((worldOffsetY + canvas.height / PIXEL_SIZE) / CHUNK_SIZE) + 1;
|
||||
|
||||
for (let chunkY = startChunkY; chunkY < endChunkY; chunkY++) {
|
||||
for (let chunkX = startChunkX; chunkX < endChunkX; chunkX++) {
|
||||
visibleChunks.push({ chunkX, chunkY });
|
||||
}
|
||||
}
|
||||
|
||||
return visibleChunks;
|
||||
}
|
||||
|
||||
function render() {
|
||||
// Clear the canvas
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Get visible chunks
|
||||
const visibleChunks = getVisibleChunks();
|
||||
|
||||
// Render each visible chunk
|
||||
for (const { chunkX, chunkY } of visibleChunks) {
|
||||
const key = getChunkKey(chunkX, chunkY);
|
||||
|
||||
if (!chunks.has(key)) continue;
|
||||
|
||||
const chunk = chunks.get(key);
|
||||
|
||||
// Calculate screen position of chunk
|
||||
const screenX = (chunkX * CHUNK_SIZE - worldOffsetX) * PIXEL_SIZE;
|
||||
const screenY = (chunkY * CHUNK_SIZE - worldOffsetY) * PIXEL_SIZE;
|
||||
|
||||
// Render each pixel in the chunk
|
||||
for (let y = 0; y < CHUNK_SIZE; y++) {
|
||||
for (let x = 0; x < CHUNK_SIZE; x++) {
|
||||
const index = y * CHUNK_SIZE + x;
|
||||
const type = chunk[index];
|
||||
|
||||
if (type === EMPTY) continue;
|
||||
|
||||
// Set color based on type
|
||||
if (type === SAND) {
|
||||
ctx.fillStyle = SAND_COLOR;
|
||||
} else if (type === WATER) {
|
||||
ctx.fillStyle = WATER_COLOR;
|
||||
}
|
||||
|
||||
// Draw the pixel
|
||||
ctx.fillRect(
|
||||
screenX + x * PIXEL_SIZE,
|
||||
screenY + y * PIXEL_SIZE,
|
||||
PIXEL_SIZE,
|
||||
PIXEL_SIZE
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
61
styles.css
Normal file
61
styles.css
Normal file
@ -0,0 +1,61 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.tools button, .navigation button {
|
||||
background-color: #555;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 12px;
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tools button.active {
|
||||
background-color: #ff9800;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info span {
|
||||
margin: 2px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#simulation-canvas {
|
||||
flex-grow: 1;
|
||||
background-color: #000;
|
||||
cursor: crosshair;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user