diff options
| -rw-r--r-- | html/rogue/js/world.js | 183 |
1 files changed, 87 insertions, 96 deletions
diff --git a/html/rogue/js/world.js b/html/rogue/js/world.js index 0e8cbd7..6dbc8ee 100644 --- a/html/rogue/js/world.js +++ b/html/rogue/js/world.js @@ -39,9 +39,19 @@ const MAPLE_TYPES = { trunkHeight: 60, canopyRadius: 35, leafClusters: 5, - canopyColor: '#33aa22', + canopyColor: '#33aa22', // Bright green trunkColor: '#664422' }, + MEDIUM: { + type: 'maple', + width: 130, + height: 160, + trunkHeight: 70, + canopyRadius: 45, + leafClusters: 6, + canopyColor: '#228833', // Deep forest green + trunkColor: '#553311' + }, LARGE: { type: 'maple', width: 160, @@ -49,7 +59,27 @@ const MAPLE_TYPES = { trunkHeight: 85, canopyRadius: 55, leafClusters: 7, - canopyColor: '#22aa22', + canopyColor: '#115522', // Dark green + trunkColor: '#553311' + }, + BRIGHT: { + type: 'maple', + width: 140, + height: 180, + trunkHeight: 75, + canopyRadius: 50, + leafClusters: 6, + canopyColor: '#44bb33', // Vibrant green + trunkColor: '#664422' + }, + SAGE: { + type: 'maple', + width: 150, + height: 190, + trunkHeight: 80, + canopyRadius: 52, + leafClusters: 6, + canopyColor: '#225544', // Sage green trunkColor: '#553311' } }; @@ -145,7 +175,7 @@ const createWorld = () => { { type: WORLD_OBJECTS.MAPLE_BACKGROUND, x: -1200, - config: MAPLE_TYPES.SMALL + config: MAPLE_TYPES.SAGE }, { type: WORLD_OBJECTS.FIR_BACKGROUND, @@ -161,7 +191,7 @@ const createWorld = () => { { type: WORLD_OBJECTS.MAPLE_BACKGROUND, x: -250, - config: MAPLE_TYPES.SMALL + config: MAPLE_TYPES.BRIGHT }, { type: WORLD_OBJECTS.FIR_BACKGROUND, @@ -171,7 +201,7 @@ const createWorld = () => { { type: WORLD_OBJECTS.MAPLE_BACKGROUND, x: 250, - config: MAPLE_TYPES.LARGE + config: MAPLE_TYPES.MEDIUM }, { type: WORLD_OBJECTS.FIR_BACKGROUND, @@ -306,7 +336,7 @@ const createWorld = () => { { type: WORLD_OBJECTS.MAPLE_FOREGROUND, x: -150, - config: MAPLE_TYPES.SMALL + config: MAPLE_TYPES.BRIGHT }, { type: WORLD_OBJECTS.FIR_FOREGROUND, @@ -316,7 +346,7 @@ const createWorld = () => { { type: WORLD_OBJECTS.MAPLE_FOREGROUND, x: 450, - config: MAPLE_TYPES.LARGE + config: MAPLE_TYPES.SAGE }, { type: WORLD_OBJECTS.FIR_FOREGROUND, @@ -662,100 +692,61 @@ const renderMapleTree = (ctx, tree, groundY) => { trunkColor ); - // Draw main leaf clusters as base shape - ctx.fillStyle = canopyColor; - - // Center cluster - ctx.beginPath(); - ctx.arc(x, groundY - trunkHeight - canopyRadius, canopyRadius, 0, Math.PI * 2); - ctx.fill(); - - // Surrounding clusters - for (let i = 0; i < leafClusters; i++) { - const angle = (i / leafClusters) * Math.PI * 2; - const clusterX = x + Math.cos(angle) * (canopyRadius * 0.8); - const clusterY = groundY - trunkHeight - canopyRadius + Math.sin(angle) * (canopyRadius * 0.8); - + // Function to create an irregular polygon + const createIrregularPolygon = (centerX, centerY, radius, sides, seed1, seed2) => { ctx.beginPath(); - ctx.arc(clusterX, clusterY, canopyRadius * 0.9, 0, Math.PI * 2); - ctx.fill(); - } - - // Define leaf texture colors (distinct from base color) - const leafColors = [ - '#22bb55', // Bright leaf green - '#33cc66', // Fresh spring green - '#119955', // Deep forest green - '#22aa77', // Sage green - '#33bb55', // Vibrant green - '#11aa66', // Dark leaf green - '#22cc44', // Light forest green - '#339944', // Muted green - '#11bb77' // Deep emerald - ].filter(color => color !== canopyColor); - - // Add detailed leaf texture using small circles - const circleSize = canopyRadius * 0.15; // Size of texture circles - const spacing = circleSize * 1.2; // Space between circles - - // Function to fill an area with random circles - const fillWithCircles = (centerX, centerY, radius) => { - const bounds = { - minX: centerX - radius, - maxX: centerX + radius, - minY: centerY - radius, - maxY: centerY + radius - }; - - // Generate circles within the bounds - for (let py = bounds.minY; py < bounds.maxY; py += spacing) { - for (let px = bounds.minX; px < bounds.maxX; px += spacing) { - // Check if point is within the cluster radius - const distToCenter = Math.sqrt( - Math.pow(px - centerX, 2) + - Math.pow(py - centerY, 2) - ); - - if (distToCenter <= radius) { - const seed1 = px * 13.37; - const seed2 = py * 7.89; - - // Random variations with minimum size guarantee - const variation = { - x: (seededRandom(seed1, seed2) - 0.5) * spacing * 0.8, - y: (seededRandom(seed2, seed1) - 0.5) * spacing * 0.8, - size: Math.max(circleSize * (0.6 + seededRandom(seed1, seed2) * 0.8), 1) - }; - - // Pick a random color - const colorIndex = Math.floor(seededRandom(seed1 * seed2, seed2 * seed1) * leafColors.length); - ctx.fillStyle = leafColors[colorIndex]; - - // Draw circle with guaranteed positive radius - ctx.beginPath(); - ctx.arc( - px + variation.x, - py + variation.y, - Math.max(variation.size / 2, 0.5), // Ensure minimum radius of 0.5 - 0, - Math.PI * 2 - ); - ctx.fill(); - } - } + + // Create points array first to allow smoothing + const points = []; + for (let i = 0; i < sides; i++) { + const angle = (i / sides) * Math.PI * 2; + + // Even more subtle variation range (0.95-1.05) + const radiusVariation = 0.95 + seededRandom(seed1 * i, seed2 * i) * 0.10; + const pointRadius = radius * radiusVariation; + + points.push({ + x: centerX + Math.cos(angle) * pointRadius, + y: centerY + Math.sin(angle) * pointRadius + }); + } + + // Start the path + ctx.moveTo(points[0].x, points[0].y); + + // Draw smooth curves through all points + for (let i = 0; i < points.length; i++) { + const current = points[i]; + const next = points[(i + 1) % points.length]; + const nextNext = points[(i + 2) % points.length]; + + // Calculate control points for bezier curve with more smoothing + const cp1x = current.x + (next.x - points[(i - 1 + points.length) % points.length].x) / 4; + const cp1y = current.y + (next.y - points[(i - 1 + points.length) % points.length].y) / 4; + const cp2x = next.x - (nextNext.x - current.x) / 4; + const cp2y = next.y - (nextNext.y - current.y) / 4; + + // Draw bezier curve + ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, next.x, next.y); } + + ctx.closePath(); }; - // Fill each cluster with texture circles - fillWithCircles(x, groundY - trunkHeight - canopyRadius, canopyRadius * 0.9); + // Draw single canopy as irregular polygon + const sides = Math.floor(48 + seededRandom(x, groundY) * 16); // 48-64 sides + const mainY = groundY - trunkHeight - canopyRadius; - for (let i = 0; i < leafClusters; i++) { - const angle = (i / leafClusters) * Math.PI * 2; - const clusterX = x + Math.cos(angle) * (canopyRadius * 0.8); - const clusterY = groundY - trunkHeight - canopyRadius + Math.sin(angle) * (canopyRadius * 0.8); - - fillWithCircles(clusterX, clusterY, canopyRadius * 0.8); - } + ctx.fillStyle = canopyColor; + createIrregularPolygon( + x, + mainY, + canopyRadius * 1.4, // Increased size + sides, + x, + groundY + ); + ctx.fill(); }; // Main tree render function that handles both types |