@where-stars-drift/core 1.0.0

package/src/controllers/physics-controller.ts

@@ -0,0 +1,173 @@
+
+import { Star } from '../entities/star';
+import { BlackHole, BlackHle, BLACK_HOLE_CONFIG } from '../entities/black-hole';
+import { Supernova } from '../entities/supernova';
+import { Quadtree } from '../lib/quadtree';
+import { DEBUG_CONFIG } from '../config/simulation';
+import { DebugController } from './debug-controller';
+import { BoundedBody } from '../base/bounded-body';
+
+const GRAVITATIONAL_CONSTANT = 0.007;
+
+class SearchArea extends BoundedBody {
+    constructor(x: number, y: number, radius: number) {
+        super(x, y, radius);
+    }
+    update() {}
+    draw() {}
+}
+
+export class PhysicsController {
+    private debugController: DebugController;
+
+    constructor(debugController: DebugController) {
+        this.debugController = debugController;
+    }
+
+    public update(blackHoles: BlackHle[], allStars: Star[], quadtree: Quadtree, width: number, height: number): Supernova[] {
+        const newSupernovas: Supernova[] = [];
+        
+        this.applyGravity(blackHoles, quadtree);
+        this.handleStarConsumption(blackHoles, allStars, quadtree, newSupernovas, width, height);
+        this.handleBlackHoleCollisions(blackHoles, newSupernovas, width, height);
+
+        return newSupernovas;
+    }
+
+    private findSafeRespawnLocation(blackHoles: BlackHole[], width: number, height: number): { x: number, y: number } {
+        const SAFE_DISTANCE = 200;
+        let attempts = 0;
+        const MAX_ATTEMPTS = 10;
+
+        while (attempts < MAX_ATTEMPTS) {
+            const x = Math.random() * width;
+            const y = Math.random() * height;
+            let isSafe = true;
+
+            for (const hole of blackHoles) {
+                const dx = x - hole.x;
+                const dy = y - hole.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                if (distance < SAFE_DISTANCE) {
+                    isSafe = false;
+                    break;
+                }
+            }
+
+            if (isSafe) {
+                return { x, y };
+            }
+            attempts++;
+        }
+        return { x: Math.random() * width, y: Math.random() * height };
+    };
+
+    private applyGravity(blackHoles: BlackHole[], quadtree: Quadtree) {
+      for (const blackHole of blackHoles) {
+        const searchArea = new SearchArea(blackHole.x, blackHole.y, BLACK_HOLE_CONFIG.STAR_ATTRACTION_RADIUS);
+        const nearbyStars = quadtree.query(searchArea).filter(b => b instanceof Star) as Star[];
+
+        for (const star of nearbyStars) {
+          const dx = blackHole.x - star.x;
+          const dy = blackHole.y - star.y;
+          const distSq = dx * dx + dy * dy;
+          
+          if (distSq < BLACK_HOLE_CONFIG.STAR_ATTRACTION_RADIUS * BLACK_HOLE_CONFIG.STAR_ATTRACTION_RADIUS) {
+            const dist = Math.sqrt(distSq);
+            const force = (GRAVITATIONAL_CONSTANT * blackHole.mass * star.mass) / (distSq + 1);
+            const acceleration = force / star.mass;
+            
+            star.vx += (dx / dist) * acceleration;
+            star.vy += (dy / dist) * acceleration;
+          }
+        }
+      }
+    }
+
+    private handleStarConsumption(blackHoles: BlackHole[], allStars: Star[], quadtree: Quadtree, supernovas: Supernova[], width: number, height: number) {
+       for (const blackHole of blackHoles) {
+        const consumptionRadius = blackHole.radius + 5; // A little buffer
+        const searchArea = new SearchArea(blackHole.x, blackHole.y, consumptionRadius);
+        const nearbyStars = quadtree.query(searchArea).filter(b => b instanceof Star) as Star[];
+        
+        for (const star of nearbyStars) {
+           if (star.isEatenBy(blackHole)) {
+            blackHole.absorb(star);
+            const { x: respawnX, y: respawnY } = this.findSafeRespawnLocation(blackHoles, width, height);
+            star.respawn(respawnX, respawnY);
+            supernovas.push(new Supernova(blackHole.x, blackHole.y, blackHole.radius, blackHole));
+            supernovas.push(new Supernova(respawnX, respawnY, 5));
+          }
+        }
+      }
+    }
+
+    private handleBlackHoleCollisions(blackHoles: BlackHle[], supernovas: Supernova[], width: number, height: number) {
+        if (blackHoles.length < 2) return;
+
+        // Reset attraction targets at the start of each frame
+        for (const bh of blackHoles) {
+            bh.attractionTargets = [];
+        }
+
+        for (let i = 0; i < blackHoles.length; i++) {
+            for (let j = i + 1; j < blackHoles.length; j++) {
+                const bh1 = blackHoles[i];
+                const bh2 = blackHoles[j];
+
+                const dx = bh2.x - bh1.x;
+                const dy = bh2.y - bh1.y;
+                const distSq = dx * dx + dy * dy;
+                const dist = Math.sqrt(distSq);
+
+                if (dist < BLACK_HOLE_CONFIG.ENERGY_STREAM_DISTANCE) {
+                    // Register targets for stream rendering
+                    bh1.attractionTargets.push(bh2);
+                    bh2.attractionTargets.push(bh1);
+
+                    // Register line for debug display
+                    if (DEBUG_CONFIG.SHOW_DEBUG_INFO && DEBUG_CONFIG.SHOW_INTER_HOLE_DISTANCE) {
+                        this.debugController.registerLine(bh1, bh2, { drawLine: false, showDistance: true });
+                    }
+                }
+
+                if (dist < BLACK_HOLE_CONFIG.ATTRACTION_RADIUS) {
+                    const force = (GRAVITATIONAL_CONSTANT * bh1.mass * bh2.mass) / (distSq + 1);
+                    const acceleration1 = force / bh1.mass;
+                    const acceleration2 = force / bh2.mass;
+
+                    bh1.vx += (dx / dist) * acceleration1;
+                    bh1.vy += (dy / dist) * acceleration1;
+                    bh2.vx -= (dx / dist) * acceleration2;
+                    bh2.vy -= (dy / dist) * acceleration2;
+                }
+
+                if (dist < bh1.radius + bh2.radius) {
+                    const absorber = bh1.mass > bh2.mass ? bh1 : bh2;
+                    const absorbed = bh1.mass > bh2.mass ? bh2 : bh1;
+
+                    absorber.absorb(absorbed);
+                    supernovas.push(new Supernova(absorber.x, absorber.y, absorber.radius * 1.5, absorber));
+
+                    const side = Math.floor(Math.random() * 4);
+                    let x, y;
+                    const buffer = 50;
+
+                    switch (side) {
+                        case 0: x = Math.random() * width; y = -buffer; break;
+                        case 1: x = width + buffer; y = Math.random() * height; break;
+                        case 2: x = Math.random() * width; y = height + buffer; break;
+                        default: x = -buffer; y = Math.random() * height; break;
+                    }
+                    
+                    const angleToCenter = Math.atan2(height / 2 - y, width / 2 - x);
+                    const speed = 0.1;
+                    const vx = Math.cos(angleToCenter) * speed;
+                    const vy = Math.sin(angleToCenter) * speed;
+
+                    absorbed.reset(x, y, vx, vy);
+                }
+            }
+        }
+    }
+}

package/src/controllers/star-controller.ts

@@ -0,0 +1,51 @@
+
+import { Star } from '../entities/star';
+import { LayerController } from './layer-controller';
+import { StarFactory } from '../entities/star-factory';
+import { BlackHoleFactory } from '../entities/black-hole-factory';
+
+export class StarController {
+    private layerController: LayerController;
+    private allStars: Star[] = [];
+    private starFactory: StarFactory;
+    private blackHoleFactory: BlackHoleFactory;
+
+    constructor(layerController: LayerController, starsCount: number, width: number, height: number) {
+        this.layerController = layerController;
+        this.starFactory = new StarFactory();
+        this.blackHoleFactory = new BlackHoleFactory();
+        this.createStars(starsCount, width, height);
+        this.createBlackHoles(width, height);
+    }
+
+    private createStars(starsCount: number, width: number, height: number) {
+      const staticStarsCount = Math.floor(starsCount * 0.7);
+      const interactiveStarsCount = starsCount - staticStarsCount;
+
+      for (let i = 0; i < staticStarsCount; i++) {
+        const star = this.starFactory.createRandomStar(Math.random() * width, Math.random() * height);
+        this.layerController.addBody('staticStars', star);
+        this.allStars.push(star);
+      }
+      for (let i = 0; i < interactiveStarsCount; i++) {
+        const star = this.starFactory.createRandomStar(Math.random() * width, Math.random() * height);
+        this.layerController.addBody('interactiveStars', star);
+        this.allStars.push(star);
+      }
+    }
+
+    private createBlackHoles(width: number, height: number) {
+        const numBlackHoles = 3; // Hardcoded for now
+        const padding = 100;
+
+        for (let i = 0; i < numBlackHoles; i++) {
+            const x = Math.random() * (width - padding * 2) + padding;
+            const y = Math.random() * (height - padding * 2) + padding;
+            this.layerController.addBody('blackHoles', this.blackHoleFactory.createRandomBlackHole(x, y));
+        }
+    }
+
+    public getAllStars(): Star[] {
+        return this.allStars;
+    }
+}

package/src/controllers/starship-controller.ts

@@ -0,0 +1,76 @@
+
+import { Starship, STARSHIP_CONFIG } from '../entities/starship';
+import { Fleet } from '../entities/fleet';
+import { LayerController } from './layer-controller';
+import { ClanController } from './clan-controller';
+import { Star } from '../entities/star';
+import { DebugController } from './debug-controller';
+import type { Clan } from '../entities/clans';
+
+export class StarshipController {
+    private layerController: LayerController;
+    private clanController: ClanController;
+    private debugController: DebugController;
+    private allStarships: Starship[] = [];
+
+    constructor(layerController: LayerController, width: number, height: number, debugController: DebugController) {
+        this.layerController = layerController;
+        this.clanController = new ClanController();
+        this.debugController = debugController;
+        this.createStarships(width, height);
+    }
+
+    private createStarships(width: number, height: number) {
+        for (let i = 0; i < STARSHIP_CONFIG.COUNT; i++) {
+            const starship = new Starship(Math.random() * width, Math.random() * height, this.debugController);
+            this.layerController.addBody('dynamicObjects', starship);
+            this.allStarships.push(starship);
+        }
+    }
+
+    public manageFleets(width: number, height: number) {
+        const desiredFleetSizes = [7, 3, 5, 4, 3, 3];
+        const fleets = this.layerController.getBodies('dynamicObjects').filter(b => b instanceof Fleet) as Fleet[];
+        const starships = this.allStarships;
+
+        // Disband fleets that have lost too many members
+        fleets.forEach(fleet => {
+            if (fleet.isActive && fleet.members.length < fleet.size * 0.5) {
+                fleet.disband();
+            }
+        });
+
+        desiredFleetSizes.forEach(size => {
+            const fleetExists = fleets.some(f => f.size === size && f.isActive);
+            if (!fleetExists) {
+                const availableShips = starships.filter(s => s.isAvailable());
+                if (availableShips.length >= size) {
+                    const clan = this.clanController.getNextClan();
+                    const fleetMembers = availableShips.slice(0, size);
+                    this.layerController.addBody('dynamicObjects', new Fleet(fleetMembers, clan, width, height));
+                }
+            }
+        });
+    }
+
+    public manageStarshipTargets(allStars: Star[]) {
+        const idleShips = this.allStarships.filter(ship => ship.state === 'IDLE' && ship.stateTimer <= 0);
+
+        if (idleShips.length === 0) return;
+
+        const starsWithDocks = allStars.filter(s => s.dockingPoints.length > 0);
+        if (starsWithDocks.length === 0) return;
+
+        for (const ship of idleShips) {
+            ship.findNewTarget(starsWithDocks);
+        }
+    }
+
+    public getAllStarships(): Starship[] {
+        return this.allStarships;
+    }
+    
+    public getAllClans(): Clan[] {
+        return this.clanController.getClans();
+    }
+}

package/src/draw-debug-line.ts

@@ -0,0 +1,37 @@
+/**
+ * @fileoverview Defines a utility function for drawing a debug line with distance.
+ */
+
+interface Point {
+    x: number;
+    y: number;
+}
+
+export function drawDebugLineWithDistance(ctx: CanvasRenderingContext2D, source: Point, target: Point, drawLine: boolean, showDistance: boolean) {
+    const dx = target.x - source.x;
+    const dy = target.y - source.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+
+    // Draw the dashed line if requested
+    if (drawLine) {
+        ctx.beginPath();
+        ctx.setLineDash([2, 4]);
+        ctx.moveTo(source.x, source.y);
+        ctx.lineTo(target.x, target.y);
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
+        ctx.lineWidth = 0.5;
+        ctx.stroke();
+        ctx.setLineDash([]);
+    }
+
+    // Draw the distance text if requested
+    if (showDistance) {
+        const midX = source.x + dx / 2;
+        const midY = source.y + dy / 2;
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
+        ctx.font = '10px "Roboto Mono", monospace';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'bottom';
+        ctx.fillText(dist.toFixed(0), midX, midY - 2);
+    }
+}

package/src/entities/black-hole-factory.ts

@@ -0,0 +1,28 @@
+
+import { BlackHole, BlackHoleType } from './black-hole';
+
+const BLACK_HOLE_TYPES: BlackHoleType[] = ['ACCRETION_DISK', 'VORTEX', 'LENSING', 'WARPED_DISK', 'STANDARD'];
+
+export class BlackHoleFactory {
+    /**
+     * Creates a black hole of a random type.
+     */
+    createRandomBlackHole(x: number, y: number): BlackHole {
+        const randomType = BLACK_HOLE_TYPES[Math.floor(Math.random() * BLACK_HOLE_TYPES.length)];
+        return new BlackHole(x, y, randomType);
+    }
+
+    /**
+     * Creates a black hole of a specific type.
+     */
+    createBlackHole(x: number, y: number, type: BlackHoleType): BlackHole {
+        return new BlackHole(x, y, type);
+    }
+    
+    /**
+     * Gets an array of all possible black hole types.
+     */
+    getAllBlackHoleTypes(): BlackHoleType[] {
+        return [...BLACK_HOLE_TYPES];
+    }
+}

package/src/entities/black-hole-shapes.ts

@@ -0,0 +1,276 @@
+/**
+ * @fileoverview Defines all black hole shape rendering functions.
+ */
+
+import type { BlackHle } from './black-hole';
+import { BLACK_HOLE_CONFIG } from './black-hole';
+
+export const drawStandardShape = (ctx: CanvasRenderingContext2D, hole: BlackHle) => {
+    // A simple white glow from behind
+    const ringRadius = hole.radius * 1.5;
+    
+    ctx.save();
+    ctx.shadowColor = `rgba(255, 255, 255, 0.7)`;
+    ctx.shadowBlur = 20;
+
+    // Draw the black hole itself, the shadow will create the glow
+    ctx.beginPath();
+    ctx.fillStyle = hole.color;
+    ctx.arc(hole.x, hole.y, hole.radius, 0, Math.PI * 2);
+    ctx.fill();
+    
+    ctx.restore();
+};
+
+export const drawWarpedDiskShape = (ctx: CanvasRenderingContext2D, hole: BlackHle) => {
+    const config = BLACK_HOLE_CONFIG.WARPED_DISK;
+    const diskRadius = hole.radius * 2.5;
+
+    // 1. Draw outer, faint, warped lines
+    ctx.save();
+    ctx.translate(hole.x, hole.y);
+    ctx.globalCompositeOperation = 'lighter';
+
+    for (let i = 0; i < config.WARPED_LINE_COUNT; i++) {
+        const progress = i / config.WARPED_LINE_COUNT;
+        const startRadius = diskRadius * (1.5 + progress * 2);
+        const endRadius = diskRadius * (1.1 - progress * 0.2);
+        const startAngle = hole.warpAngle + progress * Math.PI * 0.4;
+        const endAngle = hole.warpAngle + Math.PI * 0.2 + progress * Math.PI * 0.8;
+        
+        const startX = Math.cos(startAngle) * startRadius;
+        const startY = Math.sin(startAngle) * startRadius;
+        const endX = Math.cos(endAngle) * endRadius;
+        const endY = Math.sin(endAngle) * endRadius;
+
+        const cp1x = Math.cos(startAngle + 0.5) * startRadius * 0.8;
+        const cp1y = Math.sin(startAngle + 0.5) * startRadius * 0.8;
+        const cp2x = Math.cos(endAngle - 0.5) * endRadius * 1.2;
+        const cp2y = Math.sin(endAngle - 0.5) * endRadius * 1.2;
+
+        ctx.beginPath();
+        ctx.moveTo(startX, startY);
+        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, endX, endY);
+        ctx.strokeStyle = `rgba(255, 200, 150, ${0.05 + progress * 0.1})`;
+        ctx.lineWidth = 0.5 + progress * 1.0;
+        ctx.stroke();
+    }
+    ctx.restore();
+
+    // 2. Draw main accretion disk
+    ctx.save();
+    ctx.translate(hole.x, hole.y);
+
+    const gradient = ctx.createRadialGradient(0, 0, hole.radius, 0, 0, diskRadius);
+    gradient.addColorStop(0.3, config.DISK_COLOR_INNER);
+    gradient.addColorStop(0.6, config.DISK_COLOR_OUTER);
+    gradient.addColorStop(1, 'rgba(255, 150, 0, 0)');
+
+    ctx.strokeStyle = gradient;
+    ctx.lineWidth = hole.radius * 1.5;
+    ctx.shadowColor = config.DISK_COLOR_INNER;
+    ctx.shadowBlur = 30;
+
+    ctx.beginPath();
+    ctx.arc(0, 0, diskRadius, 0, Math.PI * 2);
+    ctx.stroke();
+    
+    ctx.restore();
+
+    // 3. Draw the black hole itself
+    ctx.beginPath();
+    ctx.fillStyle = hole.color;
+    ctx.arc(hole.x, hole.y, hole.radius, 0, Math.PI * 2);
+    ctx.fill();
+
+    // 4. Draw the diagonal "cut" which creates the 3D effect
+    ctx.save();
+    ctx.translate(hole.x, hole.y);
+    ctx.fillStyle = 'rgba(0,0,0,1)';
+    ctx.shadowColor = 'black';
+    ctx.shadowBlur = 5;
+    ctx.fillRect(-diskRadius * 1.5, -hole.radius * 0.1, diskRadius * 3, hole.radius * 0.2);
+    ctx.restore();
+
+    ctx.shadowBlur = 0;
+};
+
+export const drawLensingShape = (ctx: CanvasRenderingContext2D, hole: BlackHle) => {
+    // Gravitational Lensing Effect
+    const ringRadius = hole.radius * 1.5;
+    
+    ctx.save();
+    ctx.shadowColor = `rgba(255, 255, 255, 0.5)`;
+    ctx.shadowBlur = 50;
+
+    ctx.beginPath();
+    ctx.strokeStyle = `rgba(255, 255, 255, 0.9)`;
+    ctx.lineWidth = hole.radius * 0.4;
+    ctx.arc(hole.x, hole.y, ringRadius, 0, Math.PI * 2);
+    ctx.stroke();
+    
+    ctx.restore();
+
+    // Draw the black hole itself
+    ctx.beginPath();
+    ctx.fillStyle = hole.color;
+    ctx.arc(hole.x, hole.y, hole.radius, 0, Math.PI * 2);
+    ctx.fill();
+};
+
+export const drawAccretionDiskShape = (ctx: CanvasRenderingContext2D, hole: BlackHle) => {
+    const diskRadius = hole.radius * 2.5;
+    const glowRadius = diskRadius * 0.6;
+    const config = BLACK_HOLE_CONFIG.ACCRETION_DISK;
+
+    // --- Draw Relativistic Jets ---
+    ctx.save();
+    ctx.translate(hole.x, hole.y);
+    ctx.rotate(hole.accretionDiskAngle);
+    ctx.globalCompositeOperation = 'lighter';
+    
+    // Animate the nozzle length only every 5 frames for performance
+    if (hole.frameCount % 5 === 0) { 
+        const maxNozzleLength = diskRadius * 1.1;
+        // nozzleLengthMultiplier will be between 0.5 (50%) and 1.0 (100%)
+        const nozzleLengthMultiplier = Math.random() * 0.5 + 0.5; 
+        hole.nozzleLength = maxNozzleLength * nozzleLengthMultiplier;
+    }
+
+    // Always draw the jets using the cached nozzleLength
+    if (hole.nozzleLength > 0) {
+        ctx.shadowColor = 'white';
+        ctx.shadowBlur = 15;
+        const nozzleBaseWidth = hole.radius * 2; // Base is 2x the hole's radius
+        const jetColor = `rgba(200, 220, 255, ${0.1 + (hole.nozzleLength / (diskRadius * 1.1)) * 0.3})`;
+        ctx.fillStyle = jetColor;
+
+        // Jet 1 (positive x direction)
+        ctx.beginPath();
+        ctx.moveTo(hole.nozzleLength, 0); // Tip of the jet
+        ctx.lineTo(0, nozzleBaseWidth / 2); // Base centered at the hole
+        ctx.lineTo(0, -nozzleBaseWidth / 2); // Base centered at the hole
+        ctx.closePath();
+        ctx.fill();
+
+        // Jet 2 (negative x direction)
+        ctx.beginPath();
+        ctx.moveTo(-hole.nozzleLength, 0); // Tip of the jet
+        ctx.lineTo(0, nozzleBaseWidth / 2); // Base centered at the hole
+        ctx.lineTo(0, -nozzleBaseWidth / 2); // Base centered at the hole
+        ctx.closePath();
+        ctx.fill();
+    }
+    
+    ctx.restore();
+
+
+    // 1. Draw the outer glow
+    ctx.save();
+    ctx.translate(hole.x, hole.y);
+    const glowGradient = ctx.createRadialGradient(0, 0, hole.radius, 0, 0, glowRadius);
+    glowGradient.addColorStop(0.2, config.GLOW_COLOR);
+    glowGradient.addColorStop(1, 'rgba(180, 210, 255, 0)');
+    ctx.fillStyle = glowGradient;
+    ctx.shadowColor = config.GLOW_COLOR;
+    ctx.shadowBlur = 30;
+    ctx.beginPath();
+    ctx.arc(0, 0, glowRadius, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+
+    // 2. Draw the black hole event horizon
+    ctx.beginPath();
+    ctx.fillStyle = hole.color;
+    ctx.arc(hole.x, hole.y, hole.radius, 0, Math.PI * 2);
+    ctx.fill();
+
+    // 3. Draw the flat white line crossing the front
+    ctx.save();
+    ctx.translate(hole.x, hole.y);
+    ctx.rotate(hole.accretionDiskAngle);
+
+    const lineGradient = ctx.createLinearGradient(-diskRadius * 1.1, 0, diskRadius * 1.1, 0);
+    lineGradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
+    lineGradient.addColorStop(0.25, 'rgba(255, 255, 255, 0.95)');
+    lineGradient.addColorStop(0.75, 'rgba(255, 255, 255, 0.95)');
+    lineGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+    
+    ctx.fillStyle = lineGradient;
+    ctx.shadowColor = 'white';
+    ctx.shadowBlur = 15;
+    const lineHeight = hole.radius * 0.35;
+    ctx.fillRect(-diskRadius * 1.1, -lineHeight / 2, diskRadius * 2.2, lineHeight);
+    
+    ctx.restore();
+    
+    ctx.shadowBlur = 0;
+};
+
+
+export const drawVortexShape = (ctx: CanvasRenderingContext2D, hole: BlackHle) => {
+    const config = BLACK_HOLE_CONFIG.VORTEX;
+    const outerRadius = hole.radius * 5;
+
+    // 1. Draw the vast, faint outer glow
+    ctx.save();
+    ctx.translate(hole.x, hole.y);
+    const outerGradient = ctx.createRadialGradient(0, 0, hole.radius, 0, 0, outerRadius);
+    outerGradient.addColorStop(0.3, config.VORTEX_COLOR_MID);
+    outerGradient.addColorStop(1, config.VORTEX_COLOR_OUTER);
+    ctx.fillStyle = outerGradient;
+    ctx.beginPath();
+    ctx.arc(0, 0, outerRadius, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+    
+    // 2. Draw the swirling, fiery arms
+    ctx.save();
+    ctx.translate(hole.x, hole.y);
+    ctx.globalCompositeOperation = 'lighter';
+
+    for (let i = 0; i < config.PARTICLE_COUNT; i++) {
+        const progress = i / config.PARTICLE_COUNT;
+        const angle = hole.vortexAngle + progress * Math.PI * 2;
+        
+        const startRadius = hole.radius * (1.2 + progress * 1.5);
+        const endRadius = hole.radius * (1.0 + progress * 1.0);
+        
+        const flameColor = i % 2 === 0 ? `rgba(255, 220, 150, 0.15)` : `rgba(255, 180, 50, 0.1)`;
+
+        ctx.beginPath();
+        ctx.arc(0, 0, startRadius, angle, angle + Math.PI * 0.8);
+        ctx.arc(0, 0, endRadius, angle + Math.PI * 0.8, angle, true);
+        ctx.closePath();
+
+        ctx.fillStyle = flameColor;
+        ctx.shadowColor = 'rgba(255, 150, 0, 0.5)';
+        ctx.shadowBlur = 45;
+        ctx.fill();
+    }
+    ctx.restore();
+    
+    // 3. Draw the bright inner ring
+    ctx.save();
+    ctx.translate(hole.x, hole.y);
+    const innerRingRadius = hole.radius * 1.2;
+    const innerGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, innerRingRadius);
+    innerGradient.addColorStop(0, 'rgba(255, 255, 255, 0.9)');
+    innerGradient.addColorStop(0.7, config.VORTEX_COLOR_INNER);
+    innerGradient.addColorStop(1, 'rgba(255, 200, 0, 0)');
+    
+    ctx.fillStyle = innerGradient;
+    ctx.shadowColor = 'rgba(255, 255, 255, 0.7)';
+    ctx.shadowBlur = 20;
+    ctx.beginPath();
+    ctx.arc(0, 0, innerRingRadius, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+
+    // 4. Draw the central black hole
+    ctx.beginPath();
+    ctx.fillStyle = hole.color;
+    ctx.arc(hole.x, hole.y, hole.radius, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.shadowBlur = 0;
+};