zeroed-some/cob / c0b541e

Browse files

more branchlike

Authored by espadonne
SHA
c0b541e0bfbd0c244ea900e8d923c5f510d219d0
Parents
21df39e
Tree
41be349

1 changed file

StatusFile+-
M js/game.js 156 58
js/game.jsmodified
@@ -47,14 +47,20 @@ function setup() {
4747
     let homeBranchY = random(height * 0.7, height * 0.85);
4848
     let homeBranchThickness = 25;
4949
50
-    // Generate twigs and leaves once during setup
50
+    // Calculate start and end positions ONCE
51
+    let branchStartX = homeBranchSide === 'left' ? -20 : width + 20;
52
+    let branchEndX = homeBranchSide === 'left' ? homeBranchLength : width - homeBranchLength;
53
+
54
+    // Generate twigs with FIXED positions
5155
     let twigs = [];
5256
     let numTwigs = 5;
5357
     for (let i = 0; i < numTwigs; i++) {
58
+        let t = 0.2 + (0.6 * i / (numTwigs - 1)); // Evenly distributed
59
+        let x = lerp(branchStartX, branchEndX, t); // Calculate actual X position
5460
         twigs.push({
55
-            t: random(0.2, 0.8),
56
-            length: random(20, 40),
57
-            angle: random(-PI/3, -PI/6) * (homeBranchSide === 'right' ? -1 : 1),
61
+            x: x, // Store actual position, not percentage
62
+            length: 20 + (i * 4), // Vary length slightly
63
+            angle: (-PI/4 + (i * PI/20)) * (homeBranchSide === 'right' ? -1 : 1),
5864
             subTwigs: [
5965
                 { pos: 0.7, length: 5, angle: -5 },
6066
                 { pos: 0.5, length: 4, angle: 4 }
@@ -62,36 +68,38 @@ function setup() {
6268
         });
6369
     }
6470
71
+    // Generate leaves with FIXED positions
6572
     let leaves = [];
6673
     for (let i = 0; i < 3; i++) {
74
+        let t = 0.3 + (0.4 * i / 2); // Distribute between 0.3 and 0.7
75
+        let x = lerp(branchStartX, branchEndX, t);
6776
         leaves.push({
68
-            t: random(0.3, 0.7),
69
-            yOffset: random(-homeBranchThickness, -homeBranchThickness * 2),
70
-            rotation: random(-PI/4, PI/4),
77
+            x: x, // Store actual position
78
+            yOffset: -homeBranchThickness - (i * 10),
79
+            rotation: -PI/6 + (i * PI/6),
7180
             width: 15,
7281
             height: 8
7382
         });
7483
     }
7584
85
+    // Generate bark textures with FIXED positions
7686
     let barkTextures = [];
77
-    let startX = homeBranchSide === 'left' ? -20 : width + 20;
78
-    let endX = homeBranchSide === 'left' ? homeBranchLength : width - homeBranchLength;
79
-    for (let x = Math.min(startX, endX); x < Math.max(startX, endX); x += 20) {
87
+    for (let x = Math.min(branchStartX, branchEndX); x < Math.max(branchStartX, branchEndX); x += 20) {
8088
         barkTextures.push({
8189
             x: x,
82
-            yOff: random(-homeBranchThickness/3, homeBranchThickness/3),
83
-            endYOff: random(-5, 5)
90
+            yOff: -5 + (x % 10), // Deterministic offset based on position
91
+            endYOff: -2 + (x % 5)
8492
         });
8593
     }
8694
8795
     // Store home branch info for rendering
8896
     window.homeBranch = {
8997
         side: homeBranchSide,
90
-        startX: startX,
91
-        endX: endX,
98
+        startX: branchStartX,
99
+        endX: branchEndX,
92100
         y: homeBranchY,
93101
         thickness: homeBranchThickness,
94
-        angle: random(-0.1, 0.1), // Slight angle for natural look
102
+        angle: homeBranchSide === 'left' ? 0.05 : -0.05, // Fixed slight angle
95103
         twigs: twigs,
96104
         leaves: leaves,
97105
         barkTextures: barkTextures
@@ -329,77 +337,167 @@ function drawSkyGradient() {
329337
         push();
330338
         let branch = window.homeBranch;
331339
332
-        // Main branch
333
-        strokeWeight(branch.thickness);
334
-        if (gamePhase === 'NIGHT') {
335
-            stroke(30, 15, 0);
336
-        } else {
337
-            stroke(101, 67, 33);
338
-        }
339
-
340
-        // Draw main branch with slight curve
340
+        // Branch shadow
341341
         push();
342
-        translate(0, branch.y);
342
+        translate(0, branch.y + 5);
343343
         rotate(branch.angle);
344
+        noStroke();
345
+        fill(0, 0, 0, 30);
344346
345
-        let startX = branch.startX;
346
-        let endX = branch.endX;
347
-        let midX = (startX + endX) / 2;
348
-        let midY = sin(PI * 0.5) * 15; // Slight sag in middle
349
-
350
-        noFill();
347
+        // Shadow with taper
351348
         beginShape();
352
-        curveVertex(startX, 0);
353
-        curveVertex(startX, 0);
354
-        curveVertex(midX, midY);
355
-        curveVertex(endX, 0);
356
-        curveVertex(endX, 0);
357
-        endShape();
349
+        vertex(branch.startX, 10);
350
+        bezierVertex(
351
+            branch.startX + (branch.endX - branch.startX) * 0.3, 8,
352
+            branch.startX + (branch.endX - branch.startX) * 0.7, 5,
353
+            branch.endX, 3
354
+        );
355
+        vertex(branch.endX, -3);
356
+        bezierVertex(
357
+            branch.startX + (branch.endX - branch.startX) * 0.7, -5,
358
+            branch.startX + (branch.endX - branch.startX) * 0.3, -8,
359
+            branch.startX, -10
360
+        );
361
+        endShape(CLOSE);
358362
         pop();
359363
360
-        // Add texture and smaller branches
364
+        // Main branch with organic shape and taper
361365
         push();
362366
         translate(0, branch.y);
363367
         rotate(branch.angle);
364368
365
-        // Bark texture (using pre-generated positions)
366
-        stroke(80, 50, 20, 100);
367
-        strokeWeight(2);
368
-        for (let texture of branch.barkTextures) {
369
-            line(texture.x, texture.yOff, texture.x + 10, texture.yOff + texture.endYOff);
369
+        // Dark brown base
370
+        noStroke();
371
+        if (gamePhase === 'NIGHT') {
372
+            fill(30, 15, 5);
373
+        } else {
374
+            fill(92, 51, 23);
375
+        }
376
+
377
+        // Create tapered, organic branch shape
378
+        beginShape();
379
+        // Top edge with bumps and curves
380
+        vertex(branch.startX, -branch.thickness);
381
+        bezierVertex(
382
+            branch.startX + (branch.endX - branch.startX) * 0.2, -branch.thickness + 3,
383
+            branch.startX + (branch.endX - branch.startX) * 0.4, -branch.thickness * 0.8 + 2,
384
+            branch.startX + (branch.endX - branch.startX) * 0.6, -branch.thickness * 0.6
385
+        );
386
+        bezierVertex(
387
+            branch.startX + (branch.endX - branch.startX) * 0.8, -branch.thickness * 0.4,
388
+            branch.endX - 20, -branch.thickness * 0.3,
389
+            branch.endX, -branch.thickness * 0.2
390
+        );
391
+
392
+        // Bottom edge with natural irregularities
393
+        vertex(branch.endX, branch.thickness * 0.2);
394
+        bezierVertex(
395
+            branch.endX - 20, branch.thickness * 0.3,
396
+            branch.startX + (branch.endX - branch.startX) * 0.8, branch.thickness * 0.4 + 2,
397
+            branch.startX + (branch.endX - branch.startX) * 0.6, branch.thickness * 0.6
398
+        );
399
+        bezierVertex(
400
+            branch.startX + (branch.endX - branch.startX) * 0.4, branch.thickness * 0.8,
401
+            branch.startX + (branch.endX - branch.startX) * 0.2, branch.thickness - 3,
402
+            branch.startX, branch.thickness
403
+        );
404
+        endShape(CLOSE);
405
+
406
+        // Add lighter brown highlights
407
+        if (gamePhase === 'NIGHT') {
408
+            fill(50, 25, 10, 150);
409
+        } else {
410
+            fill(139, 90, 43, 150);
411
+        }
412
+
413
+        // Top highlight
414
+        beginShape();
415
+        vertex(branch.startX + 10, -branch.thickness + 5);
416
+        bezierVertex(
417
+            branch.startX + (branch.endX - branch.startX) * 0.3, -branch.thickness * 0.7,
418
+            branch.startX + (branch.endX - branch.startX) * 0.6, -branch.thickness * 0.5,
419
+            branch.endX - 30, -branch.thickness * 0.2 + 2
420
+        );
421
+        vertex(branch.endX - 30, 0);
422
+        bezierVertex(
423
+            branch.startX + (branch.endX - branch.startX) * 0.6, -2,
424
+            branch.startX + (branch.endX - branch.startX) * 0.3, -5,
425
+            branch.startX + 10, -8
426
+        );
427
+        endShape(CLOSE);
428
+
429
+        // Bark texture with grooves
430
+        stroke(60, 30, 10, 100);
431
+        strokeWeight(1);
432
+        for (let i = 0; i < branch.barkTextures.length; i += 2) {
433
+            let texture = branch.barkTextures[i];
434
+            // Vertical grooves
435
+            line(texture.x, texture.yOff - 5, texture.x + 3, texture.yOff + 8);
436
+            // Horizontal texture
437
+            if (i % 4 === 0) {
438
+                line(texture.x - 5, texture.yOff, texture.x + 15, texture.yOff + 2);
439
+            }
370440
         }
371441
372
-        // Small twigs (using pre-generated positions)
442
+        // Add knots and bumps
443
+        noStroke();
444
+        if (gamePhase === 'NIGHT') {
445
+            fill(40, 20, 5);
446
+        } else {
447
+            fill(80, 40, 15);
448
+        }
449
+
450
+        // A couple of knots
451
+        ellipse(branch.startX + (branch.endX - branch.startX) * 0.3, -3, 15, 12);
452
+        ellipse(branch.startX + (branch.endX - branch.startX) * 0.7, 2, 10, 8);
453
+
454
+        // Small twigs with organic angles
373455
         stroke(gamePhase === 'NIGHT' ? color(40, 20, 0) : color(101, 67, 33));
374
-        strokeWeight(3);
375456
         for (let twig of branch.twigs) {
376
-            let twigX = lerp(startX, endX, twig.t);
377
-
378457
             push();
379
-            translate(twigX, 0);
380
-            rotate(twig.angle);
381
-            line(0, 0, twig.length, 0);
458
+            translate(twig.x, 0);
459
+
460
+            // Make twigs thicker at base
461
+            strokeWeight(4);
462
+            line(0, 0, twig.length * 0.3, twig.length * 0.1);
463
+            strokeWeight(3);
464
+            line(twig.length * 0.3, twig.length * 0.1, twig.length * 0.6, twig.length * 0.15);
465
+            strokeWeight(2);
466
+            line(twig.length * 0.6, twig.length * 0.15, twig.length, twig.length * 0.2);
382467
383468
             // Tiny sub-twigs
384469
             strokeWeight(1);
385470
             for (let subTwig of twig.subTwigs) {
386
-                line(twig.length * subTwig.pos, 0,
471
+                line(twig.length * subTwig.pos, twig.length * 0.15,
387472
                      twig.length * subTwig.pos + subTwig.length,
388
-                     subTwig.angle);
473
+                     twig.length * 0.15 + subTwig.angle);
389474
             }
390475
             pop();
391476
         }
392477
393
-        // Add leaves (using pre-generated positions)
394
-        fill(gamePhase === 'NIGHT' ? color(20, 40, 20) : color(34, 139, 34));
395
-        noStroke();
478
+        // Add leaves with more natural placement
396479
         for (let leaf of branch.leaves) {
397
-            let leafX = lerp(startX, endX, leaf.t);
398
-
399480
             push();
400
-            translate(leafX, leaf.yOffset);
481
+            translate(leaf.x, leaf.yOffset);
401482
             rotate(leaf.rotation);
483
+
484
+            // Leaf shadow
485
+            noStroke();
486
+            fill(0, 0, 0, 20);
487
+            ellipse(2, 2, leaf.width, leaf.height);
488
+
489
+            // Leaf body
490
+            if (gamePhase === 'NIGHT') {
491
+                fill(20, 40, 20);
492
+            } else {
493
+                fill(34, 139, 34);
494
+            }
402495
             ellipse(0, 0, leaf.width, leaf.height);
496
+
497
+            // Leaf vein
498
+            stroke(25, 100, 25, 100);
499
+            strokeWeight(0.5);
500
+            line(-leaf.width/2 + 2, 0, leaf.width/2 - 2, 0);
403501
             pop();
404502
         }
405503