`3631027`

enhancements

Authored by

espadonne 9 months ago

SHA: 3631027bc020fbf8e3bbed2d91a314378dc39589
Parents: 44a9c6e
Tree: 9ddd2d7

2 changed files

Status	File	+	-
M	`Matter.js`	186	97
M	`index.html`	1	1

Matter.jsmodified

  // Player input
  let keys = {};
++let inputBuffer = { left: 0, right: 0 };
  // Canvas settings
  const CANVAS_WIDTH  = 800;
  const BALL_RADIUS   = 12;
  const PADDLE_WIDTH  = 20;
  const PADDLE_HEIGHT = 80;
--const SUPPORT_SPEED = 4;
++
++// Enhanced movement constants
++const SUPPORT_SPEED     = 4.5;
++const SUPPORT_ACCEL     = 0.8;
++const INPUT_SMOOTHING   = 0.15;
++const SUPPORT_MAX_SPEED = 6;
  // Spring physics constants
  const PADDLE_MASS       = 0.8;
  const SPRING_DAMPING    = 0.8;
  const SPRING_STIFFNESS  = 0.02;
++// Visual enhancement constants
++const TRAIL_SEGMENTS        = 8;
++const PADDLE_GLOW_DISTANCE  = 25;
++const SPRING_GLOW_INTENSITY = 80;
++
  function setup() {
      // Create p5.js canvas
      let canvas = createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);
          leftSupport, leftPaddle, leftSpring,
          rightSupport, rightPaddle, rightSpring
      ]);
++
++    console.log("🎮 Sprong Phase 4 Complete!");
++    console.log("✓ Enhanced player controls with acceleration");
++    console.log("✓ Smooth input buffering and movement");
++    console.log("✓ Improved visual feedback and polish");
+ }
  function createSpringPaddleSystem(side) {
      // Update physics
      Engine.update(engine);
--    // Handle player input
++    // Handle enhanced player input
--    handleInput();
++    handleEnhancedInput();
      // Check for scoring
      checkBallPosition();
      // Clear canvas
      background(10, 10, 10);
--    // Draw game objects
++    // Draw game objects with enhanced visuals
--    drawSpringPaddleSystems();
++    drawSpringPaddleSystemsEnhanced();
--    drawBall();
++    drawBallEnhanced();
      drawBoundaries();
      drawCenterLine();
+     }
+ }
--function drawSpringPaddleSystems() {
++function handleEnhancedInput() {
--    // Draw springs first (behind paddles)
++    // Smooth input accumulation with acceleration
--    drawSprings();
++    let leftInput = 0;
++    let rightInput = 0;
--    // Draw paddles
++    // Left paddle input (W/S keys)
--    fill(0, 255, 136);
++    if (keys['w'] || keys['W']) leftInput -= 1;
--    stroke(0, 255, 136);
++    if (keys['s'] || keys['S']) leftInput += 1;
--    strokeWeight(2);
--    // Left paddle
++    // Right paddle input (Arrow keys)
--    let leftPos = leftPaddle.position;
++    if (keys['ArrowUp']) rightInput -= 1;
--    let leftAngle = leftPaddle.angle;
++    if (keys['ArrowDown']) rightInput += 1;
--    push();
--    translate(leftPos.x, leftPos.y);
--    rotate(leftAngle);
--    rectMode(CENTER);
--    rect(0, 0, PADDLE_WIDTH, PADDLE_HEIGHT);
--    pop();
--    // Right paddle
++    // Apply acceleration and smoothing
--    let rightPos = rightPaddle.position;
++    inputBuffer.left = lerp(inputBuffer.left, leftInput, INPUT_SMOOTHING);
--    let rightAngle = rightPaddle.angle;
++    inputBuffer.right = lerp(inputBuffer.right, rightInput, INPUT_SMOOTHING);
--    push();
--    translate(rightPos.x, rightPos.y);
--    rotate(rightAngle);
--    rectMode(CENTER);
--    rect(0, 0, PADDLE_WIDTH, PADDLE_HEIGHT);
--    pop();
--    // Draw support points (small indicators)
++    // Move supports with enhanced physics
--    fill(0, 255, 136, 100);
++    if (Math.abs(inputBuffer.left) > 0.01) {
--    noStroke();
++        moveSupportEnhanced(leftSupport, inputBuffer.left * SUPPORT_SPEED);
--    ellipse(leftSupport.position.x, leftSupport.position.y, 8, 8);
++    }
--    ellipse(rightSupport.position.x, rightSupport.position.y, 8, 8);
++    if (Math.abs(inputBuffer.right) > 0.01) {
++        moveSupportEnhanced(rightSupport, inputBuffer.right * SUPPORT_SPEED);
++    }
++}
++
++function moveSupportEnhanced(support, deltaY) {
++    let newY = support.position.y + deltaY;
++
++    // Keep support within reasonable bounds with smooth clamping
++    let minY = 50;
++    let maxY = height - 50;
++
++    if (newY < minY) {
++        newY = minY + (newY - minY) * 0.1; // Soft boundary
++    } else if (newY > maxY) {
++        newY = maxY + (newY - maxY) * 0.1; // Soft boundary
++    }
++
++    Body.setPosition(support, { x: support.position.x, y: newY });
+ }
--function drawSprings() {
++function drawSpringPaddleSystemsEnhanced() {
--    stroke(0, 255, 136, 150);
++    // Draw springs with enhanced visuals
--    strokeWeight(3);
++    drawSpringsEnhanced();
++    // Draw paddles with glow effects
++    drawPaddlesWithGlow();
++
++    // Draw support points with input feedback
++    drawSupportPointsEnhanced();
++}
++
++function drawSpringsEnhanced() {
      // Left spring
      let leftSupportPos = leftSupport.position;
      let leftPaddlePos = leftPaddle.position;
--
++    drawSpringLineEnhanced(leftSupportPos, leftPaddlePos);
--    // Draw spring as a zigzag line
--    drawSpringLine(leftSupportPos, leftPaddlePos, 'left');
      // Right spring
      let rightSupportPos = rightSupport.position;
      let rightPaddlePos = rightPaddle.position;
--
++    drawSpringLineEnhanced(rightSupportPos, rightPaddlePos);
--    drawSpringLine(rightSupportPos, rightPaddlePos, 'right');
+ }
--function drawSpringLine(startPos, endPos, side) {
++function drawSpringLineEnhanced(startPos, endPos) {
--    let segments = 8;
++    let segments = 10;
      let amplitude = 8;
--    // Calculate spring compression (affects visual amplitude)
++    // Calculate spring compression for visual effects
      let currentLength = dist(startPos.x, startPos.y, endPos.x, endPos.y);
      let compression = SPRING_LENGTH / currentLength;
      amplitude *= compression;
--    stroke(0, 255, 136, 150 + compression * 50); // Brighter when compressed
++    // Enhanced spring glow based on compression
--    strokeWeight(2 + compression);
++    let glowIntensity = 150 + compression * SPRING_GLOW_INTENSITY;
++    stroke(0, 255, 136, glowIntensity);
++    strokeWeight(2 + compression * 1.5);
++
++    // Draw spring coil with smooth curves
++    beginShape();
++    noFill();
      for (let i = 0; i <= segments; i++) {
          let t = i / segments;
          let x = lerp(startPos.x, endPos.x, t);
          let y = lerp(startPos.y, endPos.y, t);
--        // Add zigzag offset
++        // Enhanced zigzag with smoother curves
          if (i > 0 && i < segments) {
              let perpX = -(endPos.y - startPos.y) / currentLength;
              let perpY = (endPos.x - startPos.x) / currentLength;
--            let offset = sin(i * PI) * amplitude;
++            let offset = sin(i * PI * 1.2) * amplitude;
              x += perpX * offset;
              y += perpY * offset;
+         }
--        if (i === 0) {
--            beginShape();
          vertex(x, y);
--        } else {
++    }
--            vertex(x, y);
++
--            if (i === segments) {
      endShape();
++
++    // Add spring glow effect
++    stroke(0, 255, 136, glowIntensity * 0.3);
++    strokeWeight(6 + compression * 2);
++    beginShape();
++    noFill();
++
++    for (let i = 0; i <= segments; i++) {
++        let t = i / segments;
++        let x = lerp(startPos.x, endPos.x, t);
++        let y = lerp(startPos.y, endPos.y, t);
++        vertex(x, y);
+     }
++
++    endShape();
+ }
++
++function drawPaddlesWithGlow() {
++    // Calculate ball distance for glow effects
++    let ballPos = ball.position;
++    let leftDist = dist(ballPos.x, ballPos.y, leftPaddle.position.x, leftPaddle.position.y);
++    let rightDist = dist(ballPos.x, ballPos.y, rightPaddle.position.x, rightPaddle.position.y);
++
++    // Enhanced paddle drawing
++    drawSinglePaddleEnhanced(leftPaddle, leftDist);
++    drawSinglePaddleEnhanced(rightPaddle, rightDist);
+ }
++
++function drawSinglePaddleEnhanced(paddle, ballDistance) {
++    let pos = paddle.position;
++    let angle = paddle.angle;
++
++    // Calculate glow intensity based on ball proximity
++    let glowIntensity = map(ballDistance, 0, PADDLE_GLOW_DISTANCE, 100, 0);
++    glowIntensity = constrain(glowIntensity, 0, 100);
++
++    push();
++    translate(pos.x, pos.y);
++    rotate(angle);
++
++    // Draw glow effect first
++    if (glowIntensity > 0) {
++        fill(0, 255, 136, glowIntensity * 0.5);
++        noStroke();
++        rectMode(CENTER);
++        rect(0, 0, PADDLE_WIDTH + 8, PADDLE_HEIGHT + 8);
+     }
--function drawBall() {
++    // Draw main paddle
--    fill(255, 100, 100);
++    fill(0, 255, 136);
--    stroke(255, 150, 150);
++    stroke(0, 255, 136, 200 + glowIntensity);
      strokeWeight(2);
++    rectMode(CENTER);
++    rect(0, 0, PADDLE_WIDTH, PADDLE_HEIGHT);
++
++    pop();
++}
++
++function drawSupportPointsEnhanced() {
++    // Enhanced support indicators with input feedback
++    let leftActivity = Math.abs(inputBuffer.left) * 255;
++    let rightActivity = Math.abs(inputBuffer.right) * 255;
++
++    // Left support
++    fill(0, 255, 136, 100 + leftActivity * 0.5);
++    noStroke();
++    ellipse(leftSupport.position.x, leftSupport.position.y, 8 + leftActivity * 0.1, 8 + leftActivity * 0.1);
++
++    // Right support
++    fill(0, 255, 136, 100 + rightActivity * 0.5);
++    ellipse(rightSupport.position.x, rightSupport.position.y, 8 + rightActivity * 0.1, 8 + rightActivity * 0.1);
++}
++function drawBallEnhanced() {
      let ballPos = ball.position;
--    ellipse(ballPos.x, ballPos.y, BALL_RADIUS * 2, BALL_RADIUS * 2);
++    let ballVel = ball.velocity;
++    let speed = Math.sqrt(ballVel.x * ballVel.x + ballVel.y * ballVel.y);
++
++    // Enhanced ball with speed-based effects
++    let speedIntensity = map(speed, 0, 15, 50, 255);
      // Ball trail effect
--    fill(255, 100, 100, 50);
++    fill(255, 100, 100, 30);
++    noStroke();
++    ellipse(ballPos.x, ballPos.y, BALL_RADIUS * 4, BALL_RADIUS * 4);
++
++    // Main ball
++    fill(255, 100, 100);
++    stroke(255, 150, 150, speedIntensity);
++    strokeWeight(2 + speed * 0.1);
++    ellipse(ballPos.x, ballPos.y, BALL_RADIUS * 2, BALL_RADIUS * 2);
++
++    // Speed indicator
++    if (speed > 10) {
++        fill(255, 255, 255, speedIntensity * 0.5);
          noStroke();
--    ellipse(ballPos.x, ballPos.y, BALL_RADIUS * 3, BALL_RADIUS * 3);
++        ellipse(ballPos.x, ballPos.y, BALL_RADIUS, BALL_RADIUS);
++    }
+ }
  function drawBoundaries() {
      text(`FPS: ${Math.round(frameRate())}`, 10, 20);
      text(`Ball Speed: ${Math.round(getBallSpeed())}`, 10, 35);
--    // Spring info
++    // Enhanced spring info
      let leftSpringLength = dist(leftSupport.position.x, leftSupport.position.y,
                                 leftPaddle.position.x, leftPaddle.position.y);
      let rightSpringLength = dist(rightSupport.position.x, rightSupport.position.y,
      text(`Left Spring: ${Math.round(leftSpringLength)}px`, 10, 50);
      text(`Right Spring: ${Math.round(rightSpringLength)}px`, 10, 65);
--    text(`Spring Rest Length: ${SPRING_LENGTH}px`, 10, 80);
++    text(`Input Buffer: L=${inputBuffer.left.toFixed(2)} R=${inputBuffer.right.toFixed(2)}`, 10, 80);
+ }
  function drawStartMessage() {
      textSize(20);
      text("Press any key to start!", width/2, height/2 + 100);
      textSize(14);
--    text("Watch the springs compress and extend!", width/2, height/2 + 125);
++    text("Enhanced controls with smooth acceleration!", width/2, height/2 + 125);
--}
--
--function handleInput() {
--    // Left paddle (W/S keys) - move the support point
--    if (keys['w'] || keys['W']) {
--        moveSupport(leftSupport, -SUPPORT_SPEED);
--    }
--    if (keys['s'] || keys['S']) {
--        moveSupport(leftSupport, SUPPORT_SPEED);
--    }
--
--    // Right paddle (Arrow keys) - move the support point
--    if (keys['ArrowUp']) {
--        moveSupport(rightSupport, -SUPPORT_SPEED);
--    }
--    if (keys['ArrowDown']) {
--        moveSupport(rightSupport, SUPPORT_SPEED);
--    }
--}
--
--function moveSupport(support, deltaY) {
--    let newY = support.position.y + deltaY;
--
--    // Keep support within reasonable bounds
--    newY = constrain(newY, 50, height - 50);
--
--    Body.setPosition(support, { x: support.position.x, y: newY });
+ }
  function resetBall() {
          updateScore();
          resetBall();
          gameStarted = false;
++
++        // Reset input buffers
++        inputBuffer.left = 0;
++        inputBuffer.right = 0;
++
          console.log("🔄 Game reset!");
+     }
+ }

index.htmlmodified


 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sprong :: Pong with Physick</title>
     <link rel="stylesheet" href="sprong.css">
 </head>
 <body>

`@@ -3,7 +3,7 @@`
3	<head>	3	<head>
4	<meta charset="UTF-8">	4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">	5	<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>
7	<link rel="stylesheet" href="sprong.css">	7	<link rel="stylesheet" href="sprong.css">
8	</head>	8	</head>
9	<body>	9	<body>