@@ -27,13 +27,16 @@ class WebStrand { |
| 27 | 27 | } |
| 28 | 28 | } |
| 29 | 29 | |
| 30 | | - // Apply gravity to path points for realistic sagging |
| 30 | + // Apply gravity to path points for realistic sagging, with wind and smoothing |
| 31 | 31 | if (this.path && this.path.length > 2 && !this.broken) { |
| 32 | + // low-frequency wind using Perlin noise (stable over time) |
| 33 | + let windX = (noise(frameCount * 0.005, 12.3) - 0.5) * 0.6; |
| 34 | + let windY = (noise(frameCount * 0.005, 91.7) - 0.5) * 0.4; |
| 35 | + |
| 32 | 36 | for (let i = 1; i < this.path.length - 1; i++) { |
| 33 | | - // Don't move the anchor points |
| 34 | 37 | let point = this.path[i]; |
| 35 | | - |
| 36 | | - // Check if this point is supported by anything |
| 38 | + |
| 39 | + // Check if supported by an obstacle |
| 37 | 40 | let supported = false; |
| 38 | 41 | for (let obstacle of obstacles) { |
| 39 | 42 | if (dist(point.x, point.y, obstacle.x, obstacle.y) < obstacle.radius + 5) { |
@@ -41,13 +44,23 @@ class WebStrand { |
| 41 | 44 | break; |
| 42 | 45 | } |
| 43 | 46 | } |
| 44 | | - |
| 45 | | - // Apply gravity if not supported |
| 47 | + |
| 46 | 48 | if (!supported) { |
| 47 | | - point.y += 0.3; // Gravity effect |
| 48 | | - |
| 49 | | - // Add slight pendulum motion |
| 50 | | - point.x += sin(frameCount * 0.02 + i) * 0.1; |
| 49 | + // gravity (slightly softer) and wind drift |
| 50 | + point.y += 0.22; |
| 51 | + point.x += windX * (0.6 + i / this.path.length * 0.8); |
| 52 | + point.y += windY * 0.4; |
| 53 | + } |
| 54 | + } |
| 55 | + |
| 56 | + // Laplacian smoothing to create flowing catenary-like curves |
| 57 | + for (let iter = 0; iter < 2; iter++) { |
| 58 | + for (let i = 1; i < this.path.length - 1; i++) { |
| 59 | + let prev = this.path[i - 1]; |
| 60 | + let curr = this.path[i]; |
| 61 | + let next = this.path[i + 1]; |
| 62 | + curr.x = lerp(curr.x, (prev.x + next.x) * 0.5, 0.18); |
| 63 | + curr.y = lerp(curr.y, (prev.y + next.y) * 0.5, 0.18); |
| 51 | 64 | } |
| 52 | 65 | } |
| 53 | 66 | } |
@@ -141,8 +154,8 @@ class WebStrand { |
| 141 | 154 | |
| 142 | 155 | // Add sag based on horizontal distance |
| 143 | 156 | let horizontalDist = abs(this.end.x - this.start.x); |
| 144 | | - let sag = horizontalDist * 0.1; // More sag for longer horizontal spans |
| 145 | | - midY += sag; |
| 157 | + let sag = horizontalDist * 0.12; |
| 158 | + midY += sag * (1 - cos(PI * 0.5)); |
| 146 | 159 | |
| 147 | 160 | beginShape(); |
| 148 | 161 | curveVertex(this.start.x, this.start.y); |
