const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; if (typeof window.__P5_CLEANUP__ === "function") { window.__P5_CLEANUP__(); } const sketch = (p) => { let angle = 0; 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(); let points = 0; let clickPower = 1; let clickCooldown = 0; let level = 1; let xp = 0; let xpToNextLevel = 100; let rivalPoints = 0; let brainrotTexts = []; let clickParticles = []; let levelUpText = null; let upgradeButtonPressed = false; let upgradeCooldown = 0; let upgradeCost = 10; // Initialize brainrot floating texts const brainrotPhrases = [ "SKIBIDI", "OHIO", "FANUM TAX", "MEWING", "SIGMA", "RIZZ", "GYATT", "SUSSY" ]; for (let i = 0; i < 8; i++) { brainrotTexts.push({ text: brainrotPhrases[Math.floor(Math.random() * brainrotPhrases.length)], x: Math.random() * DESIGN_WIDTH, y: Math.random() * DESIGN_HEIGHT, angle: Math.random() * Math.PI * 2, speed: 0.02 + Math.random() * 0.03, size: 16 + Math.random() * 12, hue: Math.random() * 360 }); } 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 = () => { // Update cooldowns if (clickCooldown > 0) clickCooldown--; if (upgradeCooldown > 0) upgradeCooldown--; // Level up text animation if (levelUpText) { levelUpText.life--; if (levelUpText.life <= 0) { levelUpText = null; } } // Rival point growth if (p.frameCount % 60 === 0) { rivalPoints += level * 0.1; } // Brainrot background gradient for (let i = 0; i <= 255; i += 10) { p.stroke(255, 200 + Math.sin(angle + i * 0.1) * 55, 0, 50); p.line(0, i, DESIGN_WIDTH, i); } p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); // Title p.textAlign(p.CENTER); p.textSize(32); p.fill(255, 255, 0); p.text("RIVALS BRAINROT CLICKER", DESIGN_WIDTH / 2, 50); p.textSize(16); p.fill(255, 100, 255); p.text("Grind Sussy Points Sigma!", DESIGN_WIDTH / 2, 75); // Points display p.textSize(24); p.fill(255, 0, 255); p.text(`Sussy Points: ${Math.floor(points)}`, 50, DESIGN_HEIGHT - 50); p.text(`Click Power: ${clickPower}`, 50, DESIGN_HEIGHT - 30); p.text(`Level: ${level} (XP: ${Math.floor(xp)}/${xpToNextLevel})`, 50, DESIGN_HEIGHT - 10); // Rival points p.textSize(20); p.fill(0, 255, 0); p.text(`Rival Rizz: ${Math.floor(rivalPoints)}`, DESIGN_WIDTH - 150, DESIGN_HEIGHT - 50); // Central click area (sigma wolf head) p.fill(128, 0, 128); p.circle(DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2, 150); p.fill(255); p.ellipse(DESIGN_WIDTH / 2 - 30, DESIGN_HEIGHT / 2 - 20, 20, 30); p.ellipse(DESIGN_WIDTH / 2 + 30, DESIGN_HEIGHT / 2 - 20, 20, 30); p.fill(0); p.circle(DESIGN_WIDTH / 2 - 30, DESIGN_HEIGHT / 2 - 15, 8); p.circle(DESIGN_WIDTH / 2 + 30, DESIGN_HEIGHT / 2 - 15, 8); // Highlight if mouse over const pointer = toDesignSpace(p.mouseX, p.mouseY); const distToCenter = p.dist(pointer.x, pointer.y, DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); if (distToCenter < 75) { p.fill(255, 255, 0, 100); p.circle(DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2, 160); } // Rival character (rizzler) p.fill(0, 255, 0); p.rect(DESIGN_WIDTH - 100, DESIGN_HEIGHT / 2 - 50, 80, 100); p.fill(0); p.ellipse(DESIGN_WIDTH - 70, DESIGN_HEIGHT / 2 - 30, 20); // Floating brainrot texts brainrotTexts.forEach((textObj, index) => { p.push(); p.translate(textObj.x, textObj.y); p.rotate(textObj.angle); p.textAlign(p.CENTER); p.textSize(textObj.size); p.fill( (textObj.hue + angle * 50) % 360, 100, 100, 200 + Math.sin(angle * 2 + index) * 55 ); p.text(textObj.text, 0, 0); p.pop(); // Circular movement textObj.angle += textObj.speed; textObj.x = DESIGN_WIDTH / 2 + Math.cos(textObj.angle) * 200; textObj.y = DESIGN_HEIGHT / 2 + Math.sin(textObj.angle) * 150; textObj.hue = (textObj.hue + 2) % 360; }); // Click particles clickParticles = clickParticles.filter(particle => particle.life > 0); clickParticles.forEach(particle => { p.fill(255, 0, 0, particle.life * 255 / 30); p.noStroke(); p.circle(particle.x, particle.y, particle.size); particle.x += particle.vx; particle.y += particle.vy; particle.life--; }); // Mouse cursor highlight const pointer = toDesignSpace(p.mouseX, p.mouseY); if ( pointer.x >= 0 && pointer.x <= DESIGN_WIDTH && pointer.y >= 0 && pointer.y <= DESIGN_HEIGHT ) { p.fill(255, 255, 0, 150); p.circle(pointer.x, pointer.y, 20); } // Level up text if (levelUpText) { p.push(); p.textAlign(p.CENTER); p.textSize(24); p.fill(0, 255, 0, levelUpText.life * 255 / 120); p.text(levelUpText.text, DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 - 100); p.pop(); } // Upgrade button p.push(); const buttonX = DESIGN_WIDTH - 180; const buttonY = DESIGN_HEIGHT - 80; p.fill(0, 255, 0); if (upgradeButtonPressed) { p.fill(255, 0, 0); upgradeButtonPressed = false; } else if (upgradeCooldown > 0) { p.fill(100, 100, 100); } p.rect(buttonX, buttonY, 160, 60); p.fill(255); p.textAlign(p.CENTER, p.CENTER); p.textSize(16); p.text(`RIZZ UPGRADE\nCost: ${upgradeCost}`, buttonX + 80, buttonY + 30); if (points < upgradeCost) { p.fill(255, 0, 0); p.text('Not enough!', buttonX + 80, buttonY + 50); } p.pop(); p.pop(); angle += 0.02; }; // Mouse click handler for clicking p.mousePressed = () => { const pointer = toDesignSpace(p.mouseX, p.mouseY); const distToCenter = p.dist(pointer.x, pointer.y, DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); if (distToCenter < 75 && clickCooldown <= 0) { points += clickPower; xp += clickPower; rivalPoints += 0.5; // Rival gains slowly clickCooldown = 5; // Add click particles for (let i = 0; i < 8; i++) { clickParticles.push({ x: pointer.x, y: pointer.y, vx: (Math.random() - 0.5) * 15, vy: (Math.random() - 0.5) * 15, size: 3 + Math.random() * 8, life: 40 }); } // Check level up if (xp >= xpToNextLevel) { level++; xp = 0; xpToNextLevel = Math.floor(xpToNextLevel * 1.5); clickPower += 1; levelUpText = { text: 'LEVEL UP! +1 POWER', life: 120 }; } } // Upgrade button click if (pointer.x > DESIGN_WIDTH - 200 && pointer.y > DESIGN_HEIGHT - 100 && pointer.x < DESIGN_WIDTH - 20 && pointer.y < DESIGN_HEIGHT - 20 && points >= upgradeCost && upgradeCooldown <= 0) { points -= upgradeCost; clickPower += 2; upgradeCost = Math.floor(upgradeCost * 1.5); upgradeCooldown = 30; upgradeButtonPressed = true; } }; 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