zeroed-some/sprong / 3631027

Browse files

enhancements

Authored by espadonne
SHA
3631027bc020fbf8e3bbed2d91a314378dc39589
Parents
44a9c6e
Tree
9ddd2d7

2 changed files

StatusFile+-
M Matter.js 186 97
M index.html 1 1
Matter.jsmodified
@@ -23,6 +23,7 @@ let gameStarted = false;
2323
2424
 // Player input
2525
 let keys = {};
26
+let inputBuffer = { left: 0, right: 0 };
2627
2728
 // Canvas settings
2829
 const CANVAS_WIDTH  = 800;
@@ -33,7 +34,12 @@ const BALL_SPEED = 8;
3334
 const BALL_RADIUS   = 12;
3435
 const PADDLE_WIDTH  = 20;
3536
 const PADDLE_HEIGHT = 80;
36
-const SUPPORT_SPEED = 4;
37
+
38
+// Enhanced movement constants
39
+const SUPPORT_SPEED     = 4.5;
40
+const SUPPORT_ACCEL     = 0.8;
41
+const INPUT_SMOOTHING   = 0.15;
42
+const SUPPORT_MAX_SPEED = 6;
3743
3844
 // Spring physics constants
3945
 const PADDLE_MASS       = 0.8;
@@ -41,6 +47,11 @@ const SPRING_LENGTH = 40;
4147
 const SPRING_DAMPING    = 0.8;
4248
 const SPRING_STIFFNESS  = 0.02;
4349
50
+// Visual enhancement constants
51
+const TRAIL_SEGMENTS        = 8;
52
+const PADDLE_GLOW_DISTANCE  = 25;
53
+const SPRING_GLOW_INTENSITY = 80;
54
+
4455
 function setup() {
4556
     // Create p5.js canvas
4657
     let canvas = createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);
@@ -73,6 +84,11 @@ function setup() {
7384
         leftSupport, leftPaddle, leftSpring,
7485
         rightSupport, rightPaddle, rightSpring
7586
     ]);
87
+
88
+    console.log("🎮 Sprong Phase 4 Complete!");
89
+    console.log("✓ Enhanced player controls with acceleration");
90
+    console.log("✓ Smooth input buffering and movement");
91
+    console.log("✓ Improved visual feedback and polish");
7692
 }
7793
7894
 function createSpringPaddleSystem(side) {
@@ -133,8 +149,8 @@ function draw() {
133149
     // Update physics
134150
     Engine.update(engine);
135151
136
-    // Handle player input
137
-    handleInput();
152
+    // Handle enhanced player input
153
+    handleEnhancedInput();
138154
139155
     // Check for scoring
140156
     checkBallPosition();
@@ -142,9 +158,9 @@ function draw() {
142158
     // Clear canvas
143159
     background(10, 10, 10);
144160
145
-    // Draw game objects
146
-    drawSpringPaddleSystems();
147
-    drawBall();
161
+    // Draw game objects with enhanced visuals
162
+    drawSpringPaddleSystemsEnhanced();
163
+    drawBallEnhanced();
148164
     drawBoundaries();
149165
     drawCenterLine();
150166
@@ -157,110 +173,205 @@ function draw() {
157173
     }
158174
 }
159175
160
-function drawSpringPaddleSystems() {
161
-    // Draw springs first (behind paddles)
162
-    drawSprings();
176
+function handleEnhancedInput() {
177
+    // Smooth input accumulation with acceleration
178
+    let leftInput = 0;
179
+    let rightInput = 0;
180
+
181
+    // Left paddle input (W/S keys)
182
+    if (keys['w'] || keys['W']) leftInput -= 1;
183
+    if (keys['s'] || keys['S']) leftInput += 1;
184
+
185
+    // Right paddle input (Arrow keys)
186
+    if (keys['ArrowUp']) rightInput -= 1;
187
+    if (keys['ArrowDown']) rightInput += 1;
188
+
189
+    // Apply acceleration and smoothing
190
+    inputBuffer.left = lerp(inputBuffer.left, leftInput, INPUT_SMOOTHING);
191
+    inputBuffer.right = lerp(inputBuffer.right, rightInput, INPUT_SMOOTHING);
192
+
193
+    // Move supports with enhanced physics
194
+    if (Math.abs(inputBuffer.left) > 0.01) {
195
+        moveSupportEnhanced(leftSupport, inputBuffer.left * SUPPORT_SPEED);
196
+    }
197
+    if (Math.abs(inputBuffer.right) > 0.01) {
198
+        moveSupportEnhanced(rightSupport, inputBuffer.right * SUPPORT_SPEED);
199
+    }
200
+}
201
+
202
+function moveSupportEnhanced(support, deltaY) {
203
+    let newY = support.position.y + deltaY;
163204
164
-    // Draw paddles
165
-    fill(0, 255, 136);
166
-    stroke(0, 255, 136);
167
-    strokeWeight(2);
205
+    // Keep support within reasonable bounds with smooth clamping
206
+    let minY = 50;
207
+    let maxY = height - 50;
168208
169
-    // Left paddle
170
-    let leftPos = leftPaddle.position;
171
-    let leftAngle = leftPaddle.angle;
172
-    push();
173
-    translate(leftPos.x, leftPos.y);
174
-    rotate(leftAngle);
175
-    rectMode(CENTER);
176
-    rect(0, 0, PADDLE_WIDTH, PADDLE_HEIGHT);
177
-    pop();
178
-
179
-    // Right paddle
180
-    let rightPos = rightPaddle.position;
181
-    let rightAngle = rightPaddle.angle;
182
-    push();
183
-    translate(rightPos.x, rightPos.y);
184
-    rotate(rightAngle);
185
-    rectMode(CENTER);
186
-    rect(0, 0, PADDLE_WIDTH, PADDLE_HEIGHT);
187
-    pop();
209
+    if (newY < minY) {
210
+        newY = minY + (newY - minY) * 0.1; // Soft boundary
211
+    } else if (newY > maxY) {
212
+        newY = maxY + (newY - maxY) * 0.1; // Soft boundary
213
+    }
188214
189
-    // Draw support points (small indicators)
190
-    fill(0, 255, 136, 100);
191
-    noStroke();
192
-    ellipse(leftSupport.position.x, leftSupport.position.y, 8, 8);
193
-    ellipse(rightSupport.position.x, rightSupport.position.y, 8, 8);
215
+    Body.setPosition(support, { x: support.position.x, y: newY });
194216
 }
195217
196
-function drawSprings() {
197
-    stroke(0, 255, 136, 150);
198
-    strokeWeight(3);
218
+function drawSpringPaddleSystemsEnhanced() {
219
+    // Draw springs with enhanced visuals
220
+    drawSpringsEnhanced();
221
+
222
+    // Draw paddles with glow effects
223
+    drawPaddlesWithGlow();
199224
225
+    // Draw support points with input feedback
226
+    drawSupportPointsEnhanced();
227
+}
228
+
229
+function drawSpringsEnhanced() {
200230
     // Left spring
201231
     let leftSupportPos = leftSupport.position;
202232
     let leftPaddlePos = leftPaddle.position;
203
-
204
-    // Draw spring as a zigzag line
205
-    drawSpringLine(leftSupportPos, leftPaddlePos, 'left');
233
+    drawSpringLineEnhanced(leftSupportPos, leftPaddlePos);
206234
207235
     // Right spring
208236
     let rightSupportPos = rightSupport.position;
209237
     let rightPaddlePos = rightPaddle.position;
210
-
211
-    drawSpringLine(rightSupportPos, rightPaddlePos, 'right');
238
+    drawSpringLineEnhanced(rightSupportPos, rightPaddlePos);
212239
 }
213240
214
-function drawSpringLine(startPos, endPos, side) {
215
-    let segments = 8;
241
+function drawSpringLineEnhanced(startPos, endPos) {
242
+    let segments = 10;
216243
     let amplitude = 8;
217244
218
-    // Calculate spring compression (affects visual amplitude)
245
+    // Calculate spring compression for visual effects
219246
     let currentLength = dist(startPos.x, startPos.y, endPos.x, endPos.y);
220247
     let compression = SPRING_LENGTH / currentLength;
221248
     amplitude *= compression;
222249
223
-    stroke(0, 255, 136, 150 + compression * 50); // Brighter when compressed
224
-    strokeWeight(2 + compression);
250
+    // Enhanced spring glow based on compression
251
+    let glowIntensity = 150 + compression * SPRING_GLOW_INTENSITY;
252
+    stroke(0, 255, 136, glowIntensity);
253
+    strokeWeight(2 + compression * 1.5);
254
+
255
+    // Draw spring coil with smooth curves
256
+    beginShape();
257
+    noFill();
225258
226259
     for (let i = 0; i <= segments; i++) {
227260
         let t = i / segments;
228261
         let x = lerp(startPos.x, endPos.x, t);
229262
         let y = lerp(startPos.y, endPos.y, t);
230263
231
-        // Add zigzag offset
264
+        // Enhanced zigzag with smoother curves
232265
         if (i > 0 && i < segments) {
233266
             let perpX = -(endPos.y - startPos.y) / currentLength;
234267
             let perpY = (endPos.x - startPos.x) / currentLength;
235
-            let offset = sin(i * PI) * amplitude;
268
+            let offset = sin(i * PI * 1.2) * amplitude;
236269
             x += perpX * offset;
237270
             y += perpY * offset;
238271
         }
239272
240
-        if (i === 0) {
241
-            beginShape();
242
-            vertex(x, y);
243
-        } else {
244
-            vertex(x, y);
245
-            if (i === segments) {
246
-                endShape();
247
-            }
248
-        }
273
+        vertex(x, y);
249274
     }
275
+
276
+    endShape();
277
+
278
+    // Add spring glow effect
279
+    stroke(0, 255, 136, glowIntensity * 0.3);
280
+    strokeWeight(6 + compression * 2);
281
+    beginShape();
282
+    noFill();
283
+
284
+    for (let i = 0; i <= segments; i++) {
285
+        let t = i / segments;
286
+        let x = lerp(startPos.x, endPos.x, t);
287
+        let y = lerp(startPos.y, endPos.y, t);
288
+        vertex(x, y);
289
+    }
290
+
291
+    endShape();
250292
 }
251293
252
-function drawBall() {
253
-    fill(255, 100, 100);
254
-    stroke(255, 150, 150);
294
+function drawPaddlesWithGlow() {
295
+    // Calculate ball distance for glow effects
296
+    let ballPos = ball.position;
297
+    let leftDist = dist(ballPos.x, ballPos.y, leftPaddle.position.x, leftPaddle.position.y);
298
+    let rightDist = dist(ballPos.x, ballPos.y, rightPaddle.position.x, rightPaddle.position.y);
299
+
300
+    // Enhanced paddle drawing
301
+    drawSinglePaddleEnhanced(leftPaddle, leftDist);
302
+    drawSinglePaddleEnhanced(rightPaddle, rightDist);
303
+}
304
+
305
+function drawSinglePaddleEnhanced(paddle, ballDistance) {
306
+    let pos = paddle.position;
307
+    let angle = paddle.angle;
308
+
309
+    // Calculate glow intensity based on ball proximity
310
+    let glowIntensity = map(ballDistance, 0, PADDLE_GLOW_DISTANCE, 100, 0);
311
+    glowIntensity = constrain(glowIntensity, 0, 100);
312
+
313
+    push();
314
+    translate(pos.x, pos.y);
315
+    rotate(angle);
316
+
317
+    // Draw glow effect first
318
+    if (glowIntensity > 0) {
319
+        fill(0, 255, 136, glowIntensity * 0.5);
320
+        noStroke();
321
+        rectMode(CENTER);
322
+        rect(0, 0, PADDLE_WIDTH + 8, PADDLE_HEIGHT + 8);
323
+    }
324
+
325
+    // Draw main paddle
326
+    fill(0, 255, 136);
327
+    stroke(0, 255, 136, 200 + glowIntensity);
255328
     strokeWeight(2);
329
+    rectMode(CENTER);
330
+    rect(0, 0, PADDLE_WIDTH, PADDLE_HEIGHT);
256331
332
+    pop();
333
+}
334
+
335
+function drawSupportPointsEnhanced() {
336
+    // Enhanced support indicators with input feedback
337
+    let leftActivity = Math.abs(inputBuffer.left) * 255;
338
+    let rightActivity = Math.abs(inputBuffer.right) * 255;
339
+
340
+    // Left support
341
+    fill(0, 255, 136, 100 + leftActivity * 0.5);
342
+    noStroke();
343
+    ellipse(leftSupport.position.x, leftSupport.position.y, 8 + leftActivity * 0.1, 8 + leftActivity * 0.1);
344
+
345
+    // Right support
346
+    fill(0, 255, 136, 100 + rightActivity * 0.5);
347
+    ellipse(rightSupport.position.x, rightSupport.position.y, 8 + rightActivity * 0.1, 8 + rightActivity * 0.1);
348
+}
349
+
350
+function drawBallEnhanced() {
257351
     let ballPos = ball.position;
258
-    ellipse(ballPos.x, ballPos.y, BALL_RADIUS * 2, BALL_RADIUS * 2);
352
+    let ballVel = ball.velocity;
353
+    let speed = Math.sqrt(ballVel.x * ballVel.x + ballVel.y * ballVel.y);
354
+
355
+    // Enhanced ball with speed-based effects
356
+    let speedIntensity = map(speed, 0, 15, 50, 255);
259357
260358
     // Ball trail effect
261
-    fill(255, 100, 100, 50);
359
+    fill(255, 100, 100, 30);
262360
     noStroke();
263
-    ellipse(ballPos.x, ballPos.y, BALL_RADIUS * 3, BALL_RADIUS * 3);
361
+    ellipse(ballPos.x, ballPos.y, BALL_RADIUS * 4, BALL_RADIUS * 4);
362
+
363
+    // Main ball
364
+    fill(255, 100, 100);
365
+    stroke(255, 150, 150, speedIntensity);
366
+    strokeWeight(2 + speed * 0.1);
367
+    ellipse(ballPos.x, ballPos.y, BALL_RADIUS * 2, BALL_RADIUS * 2);
368
+
369
+    // Speed indicator
370
+    if (speed > 10) {
371
+        fill(255, 255, 255, speedIntensity * 0.5);
372
+        noStroke();
373
+        ellipse(ballPos.x, ballPos.y, BALL_RADIUS, BALL_RADIUS);
374
+    }
264375
 }
265376
266377
 function drawBoundaries() {
@@ -287,7 +398,7 @@ function drawDebugInfo() {
287398
     text(`FPS: ${Math.round(frameRate())}`, 10, 20);
288399
     text(`Ball Speed: ${Math.round(getBallSpeed())}`, 10, 35);
289400
290
-    // Spring info
401
+    // Enhanced spring info
291402
     let leftSpringLength = dist(leftSupport.position.x, leftSupport.position.y,
292403
                                leftPaddle.position.x, leftPaddle.position.y);
293404
     let rightSpringLength = dist(rightSupport.position.x, rightSupport.position.y,
@@ -295,7 +406,7 @@ function drawDebugInfo() {
295406
296407
     text(`Left Spring: ${Math.round(leftSpringLength)}px`, 10, 50);
297408
     text(`Right Spring: ${Math.round(rightSpringLength)}px`, 10, 65);
298
-    text(`Spring Rest Length: ${SPRING_LENGTH}px`, 10, 80);
409
+    text(`Input Buffer: L=${inputBuffer.left.toFixed(2)} R=${inputBuffer.right.toFixed(2)}`, 10, 80);
299410
 }
300411
301412
 function drawStartMessage() {
@@ -304,34 +415,7 @@ function drawStartMessage() {
304415
     textSize(20);
305416
     text("Press any key to start!", width/2, height/2 + 100);
306417
     textSize(14);
307
-    text("Watch the springs compress and extend!", width/2, height/2 + 125);
308
-}
309
-
310
-function handleInput() {
311
-    // Left paddle (W/S keys) - move the support point
312
-    if (keys['w'] || keys['W']) {
313
-        moveSupport(leftSupport, -SUPPORT_SPEED);
314
-    }
315
-    if (keys['s'] || keys['S']) {
316
-        moveSupport(leftSupport, SUPPORT_SPEED);
317
-    }
318
-
319
-    // Right paddle (Arrow keys) - move the support point
320
-    if (keys['ArrowUp']) {
321
-        moveSupport(rightSupport, -SUPPORT_SPEED);
322
-    }
323
-    if (keys['ArrowDown']) {
324
-        moveSupport(rightSupport, SUPPORT_SPEED);
325
-    }
326
-}
327
-
328
-function moveSupport(support, deltaY) {
329
-    let newY = support.position.y + deltaY;
330
-
331
-    // Keep support within reasonable bounds
332
-    newY = constrain(newY, 50, height - 50);
333
-
334
-    Body.setPosition(support, { x: support.position.x, y: newY });
418
+    text("Enhanced controls with smooth acceleration!", width/2, height/2 + 125);
335419
 }
336420
337421
 function resetBall() {
@@ -408,6 +492,11 @@ function keyPressed() {
408492
         updateScore();
409493
         resetBall();
410494
         gameStarted = false;
495
+
496
+        // Reset input buffers
497
+        inputBuffer.left = 0;
498
+        inputBuffer.right = 0;
499
+
411500
         console.log("🔄 Game reset!");
412501
     }
413502
 }
index.htmlmodified
@@ -3,7 +3,7 @@
33
 <head>
44
     <meta charset="UTF-8">
55
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
-    <title>Sprong :: Pong with Physics</title>
6
+    <title>Sprong :: Pong with Physick</title>
77
     <link rel="stylesheet" href="sprong.css">
88
 </head>
99
 <body>