about summary refs log tree commit diff stats
path: root/html
diff options
context:
space:
mode:
authorelioat <elioat@tilde.institute>2024-12-24 16:49:01 -0500
committerelioat <elioat@tilde.institute>2024-12-24 16:49:01 -0500
commit73bbb413076d422135ee927f47f76d4e73fa8d30 (patch)
tree233dd7d119f3c672c274696081e1406d3c91a92f /html
parentf7a5877aa7f1a606d7116319fd71edb438b21011 (diff)
downloadtour-73bbb413076d422135ee927f47f76d4e73fa8d30.tar.gz
*
Diffstat (limited to 'html')
-rw-r--r--html/rogue/js/world.js210
1 files changed, 104 insertions, 106 deletions
diff --git a/html/rogue/js/world.js b/html/rogue/js/world.js
index d0ac529..6213f42 100644
--- a/html/rogue/js/world.js
+++ b/html/rogue/js/world.js
@@ -16,7 +16,7 @@ const FIR_TYPES = {
     SMALL: {
         type: 'fir',
         width: 100,
-        height: 130,
+        height: 230,
         canopyOffset: 45,
         canopyColor: '#22aa44',
         trunkColor: '#553311'
@@ -24,7 +24,7 @@ const FIR_TYPES = {
     LARGE: {
         type: 'fir',
         width: 150,
-        height: 220,
+        height: 320,
         canopyOffset: 65,
         canopyColor: '#11aa44',
         trunkColor: '#442200'
@@ -536,8 +536,8 @@ const renderFirTree = (ctx, tree, groundY) => {
     const { x, config } = tree;
     const { width, height, canopyOffset, trunkColor, canopyColor } = config;
     
-    // Calculate trunk dimensions
-    const trunkWidth = width/3;
+    // Calculate trunk dimensions - make trunk narrower
+    const trunkWidth = width/4; // Changed from /3 to /4
     const trunkHeight = height - (height - canopyOffset)/2;
     
     // Draw trunk base
@@ -572,133 +572,131 @@ const renderFirTree = (ctx, tree, groundY) => {
         '#117744', // Dark emerald
     ].filter(color => color !== canopyColor);
 
-    // Draw main triangular canopy with feathered edges
-    const drawFeatheredTriangle = (baseWidth, baseY, tipY) => {
-        // Draw main shape
-        ctx.fillStyle = canopyColor;
-        ctx.beginPath();
-        ctx.moveTo(x - baseWidth/2, baseY);
-        ctx.lineTo(x + baseWidth/2, baseY);
-        ctx.lineTo(x, tipY);
-        ctx.closePath();
-        ctx.fill();
-
-        // Add internal triangles
-        const spacing = 8; // Smaller spacing for more triangles
-        const triangleSize = 8; // Size of internal triangles
-        const margin = 12; // Margin from edges
+    const drawFeatheredTree = (baseWidth, baseY, tipY) => {
+        // Enhanced feathering parameters
+        const rowCount = 40;
+        const feathersPerRow = 24;
+        const featherLength = baseWidth * 0.3;
+        const featherWidth = 2;
         
-        // Calculate area for internal triangles
-        for (let py = tipY + margin; py < baseY - margin; py += spacing) {
-            // Calculate width at this height
-            const heightRatio = (py - tipY) / (baseY - tipY);
-            const levelWidth = baseWidth * heightRatio;
+        ctx.lineWidth = featherWidth;
+        
+        // Draw rows of feathers from bottom to top
+        for (let row = 0; row < rowCount; row++) {
+            const t = row / (rowCount - 1);
+            const rowY = baseY - (baseY - tipY) * t;
             
-            // Calculate x bounds for this row
-            const rowMinX = x - levelWidth/2 + margin;
-            const rowMaxX = x + levelWidth/2 - margin;
+            // More aggressive width reduction near top
+            const taper = Math.pow(1 - t, 0.8);
+            const rowWidth = baseWidth * taper;
             
-            // Add slight offset to alternate rows
-            const rowOffset = (Math.floor(py / spacing) % 2) * (spacing / 2);
+            // Reduce feather count more aggressively near top
+            const featherCount = Math.max(2, Math.floor(feathersPerRow * taper));
             
-            for (let px = rowMinX; px < rowMaxX; px += spacing) {
-                const seed1 = px * 13.37;
-                const seed2 = py * 7.89;
-                
-                // Random variations
-                const variation = {
-                    x: (seededRandom(seed1, seed2) - 0.5) * 4,
-                    y: (seededRandom(seed2, seed1) - 0.5) * 4,
-                    rotation: seededRandom(seed1 + seed2, seed2 - seed1) * Math.PI * 0.25,
-                    size: triangleSize * (0.7 + seededRandom(seed1, seed2) * 0.6)
-                };
-
-                // Pick a random color
-                const colorIndex = Math.floor(seededRandom(seed1 * seed2, seed2 * seed1) * greenColors.length);
-                ctx.fillStyle = greenColors[colorIndex];
+            // Skip drawing if width is too small (creates sharp point)
+            if (rowWidth < 2) continue;
+            
+            // Draw center column of needles first
+            const centerX = x;
+            // Draw a needle pointing left
+            ctx.strokeStyle = greenColors[Math.floor(seededRandom(centerX - 1, rowY) * greenColors.length)];
+            ctx.beginPath();
+            ctx.moveTo(centerX, rowY);
+            const leftAngle = Math.PI + (Math.PI * 0.05 * seededRandom(centerX, rowY) - Math.PI * 0.025);
+            ctx.lineTo(
+                centerX + Math.cos(leftAngle) * featherLength * taper,
+                rowY + Math.sin(leftAngle) * featherLength * taper
+            );
+            ctx.stroke();
 
-                ctx.save();
-                ctx.translate(
-                    px + rowOffset + variation.x, 
-                    py + variation.y
-                );
-                ctx.rotate(variation.rotation);
+            // Draw a needle pointing right
+            ctx.strokeStyle = greenColors[Math.floor(seededRandom(centerX + 1, rowY) * greenColors.length)];
+            ctx.beginPath();
+            ctx.moveTo(centerX, rowY);
+            const rightAngle = 0 + (Math.PI * 0.05 * seededRandom(centerX, rowY) - Math.PI * 0.025);
+            ctx.lineTo(
+                centerX + Math.cos(rightAngle) * featherLength * taper,
+                rowY + Math.sin(rightAngle) * featherLength * taper
+            );
+            ctx.stroke();
+            
+            // Draw regular feathers for this row
+            for (let i = 0; i < featherCount; i++) {
+                const featherT = i / (featherCount - 1);
+                const startX = x - rowWidth/2 + rowWidth * featherT;
                 
-                // Draw small triangle
-                ctx.beginPath();
-                ctx.moveTo(-variation.size/2, variation.size/2);
-                ctx.lineTo(variation.size/2, variation.size/2);
-                ctx.lineTo(0, -variation.size/2);
-                ctx.closePath();
-                ctx.fill();
+                // Skip the center point as we've already drawn it
+                if (Math.abs(startX - x) < 1) continue;
                 
-                ctx.restore();
-            }
-        }
-
-        // Enhanced feathering
-        const featherCount = 24; // Doubled from 12
-        const featherLength = baseWidth * 0.15; // Increased from 0.1
-        const featherWidth = 1.5; // Slightly thinner lines
-        
-        ctx.strokeStyle = canopyColor;
-        ctx.lineWidth = featherWidth;
-        
-        // Left edge feathering - two layers
-        for (let layer = 0; layer < 2; layer++) {
-            for (let i = 0; i < featherCount; i++) {
-                const t = i / (featherCount - 1);
-                const startX = x - baseWidth/2 + (baseWidth/2) * t;
-                const startY = baseY - (baseY - tipY) * t;
+                // Calculate angle to point directly away from center with slight upward tilt
+                const relativeX = (startX - x) / (rowWidth/2);
+                const baseAngle = relativeX < 0 ? Math.PI : 0;
+                const upwardTilt = Math.PI * 0.1 * t;
+                const angleVariation = Math.PI * 0.05;
+                const angle = baseAngle + (angleVariation * seededRandom(startX, rowY) - angleVariation/2) - upwardTilt;
                 
-                // Vary angle more with layer
-                const baseAngle = Math.PI * 0.7;
-                const angleVariation = Math.PI * (0.15 + layer * 0.1);
-                const angle = baseAngle + (angleVariation * seededRandom(startX + layer, startY));
+                // Reduce length near top but keep needles longer
+                const lengthMultiplier = 0.8 + (1 - t) * 0.3;
+                const finalLength = featherLength * lengthMultiplier * taper * 
+                    (0.9 + seededRandom(startX * rowY, rowY) * 0.2);
                 
-                // Vary length with layer
-                const lengthMultiplier = 1 - t * 0.5;
-                const layerLength = featherLength * (1 - layer * 0.3) * lengthMultiplier;
+                const colorIndex = Math.floor(seededRandom(startX, rowY) * greenColors.length);
+                ctx.strokeStyle = greenColors[colorIndex];
                 
                 ctx.beginPath();
-                ctx.moveTo(startX, startY);
+                ctx.moveTo(startX, rowY);
                 ctx.lineTo(
-                    startX + Math.cos(angle) * layerLength,
-                    startY + Math.sin(angle) * layerLength
+                    startX + Math.cos(angle) * finalLength,
+                    rowY + Math.sin(angle) * finalLength
                 );
                 ctx.stroke();
             }
         }
         
-        // Right edge feathering - two layers
-        for (let layer = 0; layer < 2; layer++) {
-            for (let i = 0; i < featherCount; i++) {
-                const t = i / (featherCount - 1);
-                const startX = x + baseWidth/2 - (baseWidth/2) * t;
-                const startY = baseY - (baseY - tipY) * t;
-                
-                // Vary angle more with layer
-                const baseAngle = Math.PI * 0.3;
-                const angleVariation = Math.PI * (0.15 + layer * 0.1);
-                const angle = baseAngle - (angleVariation * seededRandom(startX + layer, startY));
-                
-                // Vary length with layer
-                const lengthMultiplier = 1 - t * 0.5;
-                const layerLength = featherLength * (1 - layer * 0.3) * lengthMultiplier;
-                
+        // Add extra feathers at the edges with upward tilt
+        const edgeFeatherCount = 40;
+        for (let i = 0; i < edgeFeatherCount; i++) {
+            const t = i / (edgeFeatherCount - 1);
+            const taper = Math.pow(1 - t, 0.8);
+            
+            // Left edge
+            const leftX = x - baseWidth/2 * taper + (baseWidth/2 * taper) * t;
+            const leftY = baseY - (baseY - tipY) * t;
+            const leftUpwardTilt = Math.PI * 0.1 * t;
+            const leftAngle = Math.PI + (Math.PI * 0.05 * seededRandom(leftX, leftY) - Math.PI * 0.025) - leftUpwardTilt;
+            
+            if (taper > 0.1) {
+                ctx.strokeStyle = greenColors[Math.floor(seededRandom(leftX, leftY) * greenColors.length)];
+                ctx.beginPath();
+                ctx.moveTo(leftX, leftY);
+                ctx.lineTo(
+                    leftX + Math.cos(leftAngle) * featherLength * taper * 1.2,
+                    leftY + Math.sin(leftAngle) * featherLength * taper * 1.2
+                );
+                ctx.stroke();
+            }
+            
+            // Right edge
+            const rightX = x + baseWidth/2 * taper - (baseWidth/2 * taper) * t;
+            const rightY = baseY - (baseY - tipY) * t;
+            const rightUpwardTilt = Math.PI * 0.1 * t;
+            const rightAngle = 0 + (Math.PI * 0.05 * seededRandom(rightX, rightY) - Math.PI * 0.025) - rightUpwardTilt;
+            
+            if (taper > 0.1) {
+                ctx.strokeStyle = greenColors[Math.floor(seededRandom(rightX, rightY) * greenColors.length)];
                 ctx.beginPath();
-                ctx.moveTo(startX, startY);
+                ctx.moveTo(rightX, rightY);
                 ctx.lineTo(
-                    startX + Math.cos(angle) * layerLength,
-                    startY + Math.sin(angle) * layerLength
+                    rightX + Math.cos(rightAngle) * featherLength * taper * 1.2,
+                    rightY + Math.sin(rightAngle) * featherLength * taper * 1.2
                 );
                 ctx.stroke();
             }
         }
     };
 
-    // Draw main triangular canopy
-    drawFeatheredTriangle(
+    // Draw feathered tree shape
+    drawFeatheredTree(
         width * 1.2,
         groundY - canopyOffset,
         groundY - height * 1.1