`80c0bbb`

mangled. actual fix collision spawn, better webs

Authored by

espadonne 9 months ago

SHA: 80c0bbba514378ee230ffe71a911559b662e3ed7
Parents: 22714f1
Tree: 5c385ae

2 changed files

Status	File	+	-
M	`js/entities.js`	116	38
M	`js/game.js`	12	16

js/entities.jsmodified

              let branchStart = Math.min(branch.startX, branch.endX);
              let branchEnd = Math.max(branch.startX, branch.endX);
--            if (this.pos.x >= branchStart && this.pos.x <= branchEnd) {
++            // Since the branch angle is very small (0.05 radians ≈ 3 degrees),
++            // we can use a simpler approximation
++            if (this.pos.x >= branchStart - 10 && this.pos.x <= branchEnd + 10) {
                  // Calculate position along branch (0 to 1)
                  let t = (this.pos.x - branchStart) / (branchEnd - branchStart);
                  t = constrain(t, 0, 1);
--                // Base thickness tapers from full at start to 35% at end
++                // Branch visual thickness tapers from full at start to 35% at end
--                let branchTopThickness = lerp(branch.thickness, branch.thickness * 0.35, t);
++                // This matches exactly how it's drawn in the bezier curves
++                let branchTopThickness = lerp(branch.thickness * 0.9, branch.thickness * 0.35, t);
--                // Account for branch angle
++                // The branch is drawn centered at branch.y
--                let angleOffset = (this.pos.x - branchStart) * Math.tan(branch.angle);
++                // With small angle approximation: the top of the branch is at
++                let branchSurfaceY = branch.y - branchTopThickness;
--                // The visual top of the branch (where spider should land)
++                // Add slight angle correction (for small angles, tan ≈ sin ≈ angle in radians)
--                let branchTopY = branch.y - branchTopThickness + angleOffset;
++                let angleCorrection = (this.pos.x - branchStart) * branch.angle;
++                branchSurfaceY += angleCorrection;
--                // Only trigger collision if spider is actually above and close to the branch
++                // Check if spider is crossing the branch from above
--                // Previous position check to ensure we're coming from above
                  let prevY = this.pos.y - this.vel.y;
--                if (prevY <= branchTopY && // Was above the branch
++                if (prevY <= branchSurfaceY && // Was above
--                    this.pos.y + this.radius >= branchTopY && // Now at or below surface
++                    this.pos.y + this.radius >= branchSurfaceY && // Now at or below
--                    this.pos.y - this.radius <= branchTopY + branch.thickness) { // But not too far below
++                    this.pos.y < branch.y + branch.thickness) { // Not too far below
--                    this.pos.y = branchTopY - this.radius;
++                    // Place spider on the branch surface
++                    this.pos.y = branchSurfaceY - this.radius;
                      this.land();
+                 }
+             }
          this.wingPhase = random(TWO_PI);
          this.wanderAngle = random(TWO_PI);
          this.glowIntensity = random(150, 255);
--        this.webTouchCount = 0;
--        this.requiredStrands = 3;
          this.touchedStrands = new Set();
++        this.slowedBy = new Set(); // Track which strands are slowing us
++        this.baseSpeed = 3;
++        this.currentSpeed = this.baseSpeed;
+     }
      update() {
          wanderForce.mult(0.1);
          this.acc.add(wanderForce);
++        // Apply current speed (which may be slowed)
          this.vel.add(this.acc);
--        this.vel.limit(3);
++        this.vel.limit(this.currentSpeed);
          this.pos.add(this.vel);
          this.acc.mult(0);
          if (this.pos.y < -30) this.pos.y = height + 30;
          if (this.pos.y > height + 30) this.pos.y = -30;
--        this.touchedStrands.clear();
++        // Check web collisions
--        for (let strand of webStrands) {
++        this.checkWebCollisions();
--            let d = this.pointToLineDistance(this.pos, strand.start, strand.end);
++    }
--            if (d < this.radius + 3) {
++
--                this.touchedStrands.add(strand);
++    checkWebCollisions() {
--            }
++        let currentlyTouching = new Set();
--        }
--        if (this.touchedStrands.size >= this.requiredStrands) {
++        for (let strand of webStrands) {
--            this.caught = true;
++            let touching = false;
--            for (let strand of this.touchedStrands) {
++
--                strand.vibrate(5);
++            // Check collision with strand path
++            if (strand.path && strand.path.length > 1) {
++                for (let i = 0; i < strand.path.length - 1; i++) {
++                    let p1 = strand.path[i];
++                    let p2 = strand.path[i + 1];
++                    let d = this.pointToLineDistance(this.pos, p1, p2);
++                    if (d < this.radius + 3) {
++                        touching = true;
++                        break;
++                    }
++                }
++            } else if (strand.start && strand.end) {
++                // Fallback for strands without path
++                let d = this.pointToLineDistance(this.pos, strand.start, strand.end);
++                if (d < this.radius + 3) {
++                    touching = true;
++                }
+             }
--            for (let strand of webStrands) {
++
++            if (touching) {
++                currentlyTouching.add(strand);
++
++                // If this is a new strand we're touching
                  if (!this.touchedStrands.has(strand)) {
--                    for (let touched of this.touchedStrands) {
++                    this.touchedStrands.add(strand);
--                        let d1 = dist(strand.start.x, strand.start.y, touched.start.x, touched.start.y);
++
--                        let d2 = dist(strand.start.x, strand.start.y, touched.end.x, touched.end.y);
++                    // Vibrate the web when first touching
--                        let d3 = dist(strand.end.x, strand.end.y, touched.start.x, touched.start.y);
++                    strand.vibrate(3);
--                        let d4 = dist(strand.end.x, strand.end.y, touched.end.x, touched.end.y);
++
--                        if (min(d1, d2, d3, d4) < 50) {
++                    // First strand slows us down
--                            strand.vibrate(2);
++                    if (this.touchedStrands.size === 1) {
--                            break;
++                        this.currentSpeed = this.baseSpeed * 0.4; // Slow to 40% speed
++                        this.slowedBy.add(strand);
++
++                        // Visual feedback - yellow particles for slowing
++                        for (let j = 0; j < 3; j++) {
++                            let p = new Particle(this.pos.x, this.pos.y);
++                            p.color = color(255, 255, 0, 150);
++                            p.vel = createVector(random(-1, 1), random(-1, 1));
++                            p.size = 3;
++                            particles.push(p);
++                        }
++                    }
++                    // Second strand catches us
++                    else if (this.touchedStrands.size >= 2 && !this.caught) {
++                        this.caught = true;
++                        this.currentSpeed = 0;
++
++                        // Stronger vibration when caught
++                        strand.vibrate(8);
++
++                        // Also vibrate nearby strands
++                        for (let otherStrand of webStrands) {
++                            if (otherStrand !== strand) {
++                                for (let touchedStrand of this.touchedStrands) {
++                                    let d1 = dist(otherStrand.start.x, otherStrand.start.y, touchedStrand.start.x, touchedStrand.start.y);
++                                    let d2 = dist(otherStrand.start.x, otherStrand.start.y, touchedStrand.end.x, touchedStrand.end.y);
++                                    let d3 = dist(otherStrand.end.x, otherStrand.end.y, touchedStrand.start.x, touchedStrand.start.y);
++                                    let d4 = dist(otherStrand.end.x, otherStrand.end.y, touchedStrand.end.x, touchedStrand.end.y);
++                                    if (min(d1, d2, d3, d4) < 50) {
++                                        otherStrand.vibrate(2);
++                                        break;
++                                    }
++                                }
++                            }
++                        }
++
++                        // Create caught particles
++                        for (let j = 0; j < 6; j++) {
++                            let p = new Particle(this.pos.x, this.pos.y);
++                            p.color = color(255, 200, 0, 200);
++                            p.vel = createVector(random(-2, 2), random(-2, 2));
++                            particles.push(p);
+                         }
+                     }
+                 }
+             }
+         }
++
++        // If we're no longer touching strands we were slowed by, speed back up
++        if (this.slowedBy.size > 0 && currentlyTouching.size === 0) {
++            this.currentSpeed = this.baseSpeed;
++            this.slowedBy.clear();
++        }
+     }
      pointToLineDistance(point, lineStart, lineEnd) {
          push();
          translate(this.pos.x, this.pos.y);
--        if (this.touchedStrands.size > 0 && !this.caught) {
++        // Show slowdown effect
++        if (this.slowedBy.size > 0 && !this.caught) {
              stroke(255, 255, 0, 100);
              strokeWeight(1);
              noFill();
          if (!this.stuck) {
              this.wingPhase += 0.5;
++            // Wing animation slows down when slowed
++            let wingSpeed = this.slowedBy.size > 0 ? 0.25 : 0.5;
++            this.wingPhase += wingSpeed;
              let wingSpread = sin(this.wingPhase) * 5;
              fill(255, 255, 255, 150);
          this.vel = createVector(random(-3, 3), random(-5, -2));
          this.lifetime = 255;
          this.color = color(255, random(200, 255), random(100, 200));
++        this.size = 6;  // Default size
+     }
      update() {
          push();
          noStroke();
          fill(red(this.color), green(this.color), blue(this.color), this.lifetime);
--        ellipse(this.pos.x, this.pos.y, 6);
++        ellipse(this.pos.x, this.pos.y, this.size);
          pop();
+     }

js/game.jsmodified

          barkTextures: barkTextures
      };
--    // Place spider on the home branch
++    // Place spider at the tip of the branch
--    let spiderStartX = homeBranchSide === 'left' ?
++    let spiderStartX = branchEndX; // Place at the end/tip
--        homeBranchLength * 0.8 :
--        width - homeBranchLength * 0.8;
--    // Calculate the visual top of the branch at spider's position
++    // At the tip (t=1), thickness is 35% of original
--    let branchStart = Math.min(branchStartX, branchEndX);
++    let branchTopThickness = homeBranchThickness * 0.35;
--    let branchEnd = Math.max(branchStartX, branchEndX);
--    let t = (spiderStartX - branchStart) / (branchEnd - branchStart);
--    t = constrain(t, 0, 1);
--    // Branch thickness tapers from full to 35%
++    // The branch is drawn centered at branch.y, so the top is at:
--    let branchTopThickness = lerp(homeBranchThickness, homeBranchThickness * 0.35, t);
++    let branchSurfaceY = homeBranchY - branchTopThickness;
--    // Account for branch angle
++    // Add slight angle correction
--    let angleOffset = (spiderStartX - branchStart) * Math.tan(homeBranchSide === 'left' ? 0.05 : -0.05);
++    let angleCorrection = (spiderStartX - branchStartX) * window.homeBranch.angle;
--
++    branchSurfaceY += angleCorrection;
--    // Place spider on top of the visual branch
--    spider = new Spider(spiderStartX, homeBranchY - branchTopThickness + angleOffset);
++    // Place spider on top of the visual branch at the tip (8 is spider radius)
++    spider = new Spider(spiderStartX, branchSurfaceY - 8);
++
      // Add invisible obstacles along the branch for web anchor points
      let numBranchAnchors = 3;
      for (let i = 0; i < numBranchAnchors; i++) {