const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; if (typeof window.__P5_CLEANUP__ === "function") { window.__P5_CLEANUP__(); } const sketch = (p) => { let elements = new Map(); let recipes = new Map(); let inventory = []; let selectedElement = null; let dragElement = null; let dragOffset = {x: 0, y: 0}; let combinePreview = null; let scaleFactor = 1; let offsetX = 0; let offsetY = 0; let resizeObserver = null; let resizeHandler = null; let teardown = null; const getContainer = () => document.getElementById("renderDiv"); const computeLayout = () => { const container = getContainer(); const width = Math.max(1, container ? container.clientWidth : window.innerWidth); const height = Math.max(1, container ? container.clientHeight : window.innerHeight); const fitScale = Math.max( 0.1, Math.min(width / DESIGN_WIDTH, height / DESIGN_HEIGHT) || 1 ); scaleFactor = fitScale; offsetX = (width - DESIGN_WIDTH * scaleFactor) / 2; offsetY = (height - DESIGN_HEIGHT * scaleFactor) / 2; return { width, height }; }; const resizeCanvasToContainer = () => { const { width, height } = computeLayout(); p.resizeCanvas(width, height); }; const toDesignSpace = (clientX, clientY) => ({ x: (clientX - offsetX) / scaleFactor, y: (clientY - offsetY) / scaleFactor, }); p.setup = () => { const { width, height } = computeLayout(); const renderer = p.createCanvas(width, height); renderer.parent("renderDiv"); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); p.noStroke(); p.textAlign(p.CENTER, p.CENTER); p.textSize(12); // Initialize elements elements.set('earth', { name: 'Earth', emoji: '🌍', x: 50, y: 50 }); elements.set('water', { name: 'Water', emoji: '💧', x: 150, y: 50 }); elements.set('fire', { name: 'Fire', emoji: '🔥', x: 250, y: 50 }); elements.set('air', { name: 'Air', emoji: '💨', x: 350, y: 50 }); elements.set('mud', { name: 'Mud', emoji: '🟤', x: 50, y: 150 }); elements.set('cake', { name: 'Cake', emoji: '🎂', x: 150, y: 150 }); elements.set('human', { name: 'Human', emoji: '👤', x: 250, y: 150 }); inventory.push('earth', 'water', 'fire', 'air', 'mud', 'cake', 'human'); // Initialize recipes recipes.set('earth-water', 'mud'); recipes.set('water-fire', 'steam'); recipes.set('fire-earth', 'lava'); recipes.set('air-earth', 'dust'); recipes.set('mud-water', 'cake'); recipes.set('earth-dust', 'plant'); recipes.set('plant-water', 'life'); recipes.set('life-air', 'human'); // Add more recipes as needed const container = getContainer(); if (typeof ResizeObserver !== "undefined" && container) { resizeObserver = new ResizeObserver(() => { resizeCanvasToContainer(); }); resizeObserver.observe(container); } else { resizeHandler = () => resizeCanvasToContainer(); window.addEventListener("resize", resizeHandler); } teardown = () => { if (resizeObserver) { resizeObserver.disconnect(); resizeObserver = null; } if (resizeHandler) { window.removeEventListener("resize", resizeHandler); resizeHandler = null; } }; }; p.windowResized = () => { resizeCanvasToContainer(); }; p.draw = () => { p.background(15, 23, 42); p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); // Draw inventory elements inventory.forEach(id => { const el = elements.get(id); if (el) { drawElement(el, p); } }); // Draw dragged element if (dragElement) { drawElement(dragElement, p); } // Draw combine preview if (combinePreview) { drawElement(combinePreview, p); } // Draw connecting line if selected and dragging if (selectedElement && dragElement) { p.stroke(255, 255, 0, 150); p.strokeWeight(3); p.line(selectedElement.x, selectedElement.y, dragElement.x, dragElement.y); p.noStroke(); } // Draw selection highlight if (selectedElement) { p.stroke(255, 255, 0); p.strokeWeight(2); p.noFill(); p.rect(selectedElement.x - 25, selectedElement.y - 25, 50, 50); p.noStroke(); } p.pop(); }; function drawElement(el, p) { p.fill(255); p.stroke(200); p.strokeWeight(1); p.rect(el.x - 25, el.y - 25, 50, 50, 5); p.noStroke(); p.fill(0); p.text(el.emoji, el.x, el.y + 5); p.text(el.name, el.x, el.y + 25); } p.mousePressed = () => { const pointer = toDesignSpace(p.mouseX, p.mouseY); if (pointer.x < 0 || pointer.x > DESIGN_WIDTH || pointer.y < 0 || pointer.y > DESIGN_HEIGHT) return; // Check for element selection or drag for (let id of inventory) { const el = elements.get(id); if (el && Math.abs(pointer.x - el.x) < 25 && Math.abs(pointer.y - el.y) < 25) { if (p.mouseButton === p.LEFT) { selectedElement = el; // Draw connecting line from selected element selectedElement.startX = el.x; selectedElement.startY = el.y; } else if (p.mouseButton === p.RIGHT) { dragElement = { ...el, x: pointer.x, y: pointer.y }; dragOffset = { x: pointer.x - el.x, y: pointer.y - el.y }; } return; } } }; p.mouseDragged = () => { if (dragElement && p.mouseButton === p.RIGHT) { const pointer = toDesignSpace(p.mouseX, p.mouseY); dragElement.x = pointer.x - dragOffset.x; dragElement.y = pointer.y - dragOffset.y; } }; p.mouseReleased = () => { const pointer = toDesignSpace(p.mouseX, p.mouseY); if (pointer.x < 0 || pointer.x > DESIGN_WIDTH || pointer.y < 0 || pointer.y > DESIGN_HEIGHT) return; if (dragElement) { // Check if dropped on selected element to combine if (selectedElement && Math.abs(pointer.x - selectedElement.x) < 25 && Math.abs(pointer.y - selectedElement.y) < 25) { const key1 = selectedElement.id || selectedElement.name.toLowerCase(); const key2 = dragElement.id || dragElement.name.toLowerCase(); const recipeKey = key1 < key2 ? key1 + '-' + key2 : key2 + '-' + key1; const resultId = recipes.get(recipeKey); if (resultId) { let result = elements.get(resultId); if (!result) { result = { name: resultId.charAt(0).toUpperCase() + resultId.slice(1), emoji: '🔮', x: DESIGN_WIDTH / 2, y: DESIGN_HEIGHT / 2 }; elements.set(resultId, result); } inventory.push(resultId); combinePreview = { ...result, x: (selectedElement.x + dragElement.x) / 2, y: (selectedElement.y + dragElement.y) / 2 }; setTimeout(() => { combinePreview = null; }, 1000); } } dragElement = null; } // Clear selection if clicked elsewhere if (selectedElement) { let clickedOnElement = false; for (let id of inventory) { const el = elements.get(id); if (el && Math.abs(pointer.x - el.x) < 25 && Math.abs(pointer.y - el.y) < 25) { clickedOnElement = true; break; } } if (!clickedOnElement) { selectedElement = null; } } }; // Add ids to initial elements for consistency if (elements.has('earth')) elements.get('earth').id = 'earth'; if (elements.has('water')) elements.get('water').id = 'water'; if (elements.has('fire')) elements.get('fire').id = 'fire'; if (elements.has('air')) elements.get('air').id = 'air'; if (elements.has('human')) elements.get('human').id = 'human'; const originalRemove = p.remove.bind(p); p.remove = () => { if (typeof teardown === "function") { teardown(); teardown = null; } originalRemove(); }; }; const instance = new window.p5(sketch, "renderDiv"); window.__P5_CLEANUP__ = () => { try { instance.remove(); } catch (error) { console.warn("Failed to remove p5 instance", error); } };

p5.js Sketch

How to play