`2145632`

particle effects, physics tweaks

Authored by

espadonne 9 months ago

SHA: 2145632cfdb982019e2de7f8c080b30420adb1d1
Parents: 52438bc
Tree: 6abc092

1 changed file

Status	File	+	-
M	`sprong.js`	231	60

sprong.jsmodified

  // Matter.js module aliases
--const Body = Matter.Body;
++const Body  = Matter.Body;
  const World = Matter.World;
  const Engine = Matter.Engine;
  const Bodies = Matter.Bodies;
  let keys = {};
  let inputBuffer = { left: 0, right: 0 };
++// Particle systems
++let particles = [];
++let impactParticles = [];
++
  // Canvas settings
  const CANVAS_WIDTH  = 800;
  const CANVAS_HEIGHT = 400;
  const PADDLE_HEIGHT = 80;
  // Enhanced movement constants
--const SUPPORT_SPEED     = 4.5;
++const SUPPORT_SPEED     = 6.5;
--const SUPPORT_ACCEL     = 0.8;
++const SUPPORT_ACCEL     = 1.2;
--const INPUT_SMOOTHING   = 0.15;
++const INPUT_SMOOTHING   = 0.25
--const SUPPORT_MAX_SPEED = 6;
++const SUPPORT_MAX_SPEED = 8;
  // Spring physics constants
--const PADDLE_MASS       = 0.8;
++const PADDLE_MASS       = 0.6;
  const SPRING_LENGTH     = 40;
--const SPRING_DAMPING    = 0.8;
++const SPRING_DAMPING    = 0.4;
--const SPRING_STIFFNESS  = 0.02;
++const SPRING_STIFFNESS  = 0.035;
  // Visual enhancement constants
  const TRAIL_SEGMENTS        = 8;
  const PADDLE_GLOW_DISTANCE  = 25;
--const SPRING_GLOW_INTENSITY = 80;
++const SPRING_GLOW_INTENSITY = 120;
++
++// Particle system constants
++const MAX_PARTICLES         = 100;
++const PARTICLE_LIFE         = 60;
++const IMPACT_PARTICLES      = 8;
++const SPRING_PARTICLE_RATE  = 0.3;
  function setup() {
      // Create p5.js canvas
+ }
  function createSpringPaddleSystem(side) {
--    let supportX = side === 'left' ? 60 : width - 60;
++    let startY    = height / 2;
--    let paddleX = side === 'left' ? 60 + SPRING_LENGTH : width - 60 - SPRING_LENGTH;
++    let supportX  = side === 'left' ? 60 : width - 60;
--    let startY = height / 2;
++    let paddleX   = side === 'left' ? 60 + SPRING_LENGTH : width - 60 - SPRING_LENGTH;
      if (side === 'left') {
          // Left support (invisible anchor point controlled by player)
          // Left paddle (the actual hitting surface)
          leftPaddle = Bodies.rectangle(paddleX, startY, PADDLE_WIDTH, PADDLE_HEIGHT, {
              mass: PADDLE_MASS,
--            restitution: 1.2,
++            restitution: 1.3,
              friction: 0,
--            frictionAir: 0.01
++            frictionAir: 0.005 // Less air resistance
          });
          // Spring constraint connecting support to paddle
          // Right paddle (the actual hitting surface)
          rightPaddle = Bodies.rectangle(paddleX, startY, PADDLE_WIDTH, PADDLE_HEIGHT, {
              mass: PADDLE_MASS,
--            restitution: 1.2,
++            restitution: 1.3,
              friction: 0,
--            frictionAir: 0.01
++            frictionAir: 0.005
          });
          // Spring constraint connecting support to paddle
      // Handle enhanced player input
      handleEnhancedInput();
++    // Update particle systems
++    updateParticles();
++    checkCollisions();
++
      // Check for scoring
      checkBallPosition();
      // Clear canvas
      background(10, 10, 10);
++    // Draw particles behind everything
++    drawParticles();
++
      // Draw game objects with enhanced visuals
      drawSpringPaddleSystemsEnhanced();
      drawBallEnhanced();
  function handleEnhancedInput() {
      // Smooth input accumulation with acceleration
--    let leftInput = 0;
++    let leftInput   = 0;
--    let rightInput = 0;
++    let rightInput  = 0;
      // Left paddle input (W/S keys)
      if (keys['w'] || keys['W']) leftInput -= 1;
      if (keys['s'] || keys['S']) leftInput += 1;
      // Right paddle input (Arrow keys)
--    if (keys['ArrowUp']) rightInput -= 1;
++    if (keys['ArrowUp'])    rightInput -= 1;
--    if (keys['ArrowDown']) rightInput += 1;
++    if (keys['ArrowDown'])  rightInput += 1;
      // Apply acceleration and smoothing
      inputBuffer.left = lerp(inputBuffer.left, leftInput, INPUT_SMOOTHING);
      Body.setPosition(support, { x: support.position.x, y: newY });
+ }
++function checkCollisions() {
++    let ballPos = ball.position;
++    let ballVel = ball.velocity;
++
++    // Check paddle collisions for particle effects
++    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);
++
++    // Collision threshold
++    let collisionDist = BALL_RADIUS + PADDLE_WIDTH/2 + 5;
++
++    // Left paddle collision
++    if (leftDist < collisionDist && ballVel.x < 0) {
++        createImpactParticles(ballPos.x, ballPos.y, ballVel.x, ballVel.y);
++    }
++
++    // Right paddle collision
++    if (rightDist < collisionDist && ballVel.x > 0) {
++        createImpactParticles(ballPos.x, ballPos.y, ballVel.x, ballVel.y);
++    }
++}
++
++function createImpactParticles(x, y, velX, velY) {
++    for (let i = 0; i < IMPACT_PARTICLES; i++) {
++        let angle = random(TWO_PI);
++        let speed = random(2, 8);
++        let size = random(2, 6);
++
++        particles.push({
++            x: x + random(-5, 5),
++            y: y + random(-5, 5),
++            vx: cos(angle) * speed - velX * 0.2,
++            vy: sin(angle) * speed - velY * 0.2,
++            size: size,
++            life: PARTICLE_LIFE,
++            maxLife: PARTICLE_LIFE,
++            color: { r: 255, g: random(100, 255), b: random(100, 150) },
++            type: 'impact'
++        });
++    }
++}
++
++function createSpringParticles(springPos, compression) {
++    if (random() < SPRING_PARTICLE_RATE * compression) {
++        let angle = random(TWO_PI);
++        let speed = random(1, 3) * compression;
++
++        particles.push({
++            x: springPos.x + random(-10, 10),
++            y: springPos.y + random(-10, 10),
++            vx: cos(angle) * speed,
++            vy: sin(angle) * speed,
++            size: random(1, 3),
++            life: PARTICLE_LIFE * 0.5,
++            maxLife: PARTICLE_LIFE * 0.5,
++            color: { r: 0, g: 255, b: 136 },
++            type: 'spring'
++        });
++    }
++}
++
++function updateParticles() {
++    // Update and remove dead particles
++    for (let i = particles.length - 1; i >= 0; i--) {
++        let p = particles[i];
++
++        // Update position
++        p.x += p.vx;
++        p.y += p.vy;
++
++        // Apply drag
++        p.vx *= 0.98;
++        p.vy *= 0.98;
++
++        // Update life
++        p.life--;
++
++        // Remove dead particles
++        if (p.life <= 0) {
++            particles.splice(i, 1);
++        }
++    }
++
++    // Limit particle count
++    if (particles.length > MAX_PARTICLES) {
++        particles.splice(0, particles.length - MAX_PARTICLES);
++    }
++}
++
++function drawParticles() {
++    for (let p of particles) {
++        let alpha = map(p.life, 0, p.maxLife, 0, 255);
++
++        push();
++        translate(p.x, p.y);
++
++        if (p.type === 'impact') {
++            // Impact particles: bright sparks
++            fill(p.color.r, p.color.g, p.color.b, alpha);
++            noStroke();
++            ellipse(0, 0, p.size, p.size);
++
++            // Add glow
++            fill(p.color.r, p.color.g, p.color.b, alpha * 0.3);
++            ellipse(0, 0, p.size * 2, p.size * 2);
++
++        } else if (p.type === 'spring') {
++            // Spring particles: green energy
++            fill(p.color.r, p.color.g, p.color.b, alpha);
++            noStroke();
++            ellipse(0, 0, p.size, p.size);
++        }
++
++        pop();
++    }
++}
++
  function drawSpringPaddleSystemsEnhanced() {
--    // Draw springs with enhanced visuals
++    // Draw springs with enhanced visuals and particles
      drawSpringsEnhanced();
      // Draw paddles with glow effects
      // Left spring
      let leftSupportPos = leftSupport.position;
      let leftPaddlePos = leftPaddle.position;
--    drawSpringLineEnhanced(leftSupportPos, leftPaddlePos);
++    let leftCompression = drawSpringLineEnhanced(leftSupportPos, leftPaddlePos);
++    createSpringParticles(leftPaddlePos, leftCompression);
      // Right spring
      let rightSupportPos = rightSupport.position;
      let rightPaddlePos = rightPaddle.position;
--    drawSpringLineEnhanced(rightSupportPos, rightPaddlePos);
++    let rightCompression = drawSpringLineEnhanced(rightSupportPos, rightPaddlePos);
++    createSpringParticles(rightPaddlePos, rightCompression);
+ }
  function drawSpringLineEnhanced(startPos, endPos) {
--    let segments = 10;
++    let segments = 12; // More segments for smoother springs
--    let amplitude = 8;
++    let amplitude = 10; // Bigger amplitude for more dramatic effect
      // Calculate spring compression for visual effects
      let currentLength = dist(startPos.x, startPos.y, endPos.x, endPos.y);
      // Enhanced spring glow based on compression
      let glowIntensity = 150 + compression * SPRING_GLOW_INTENSITY;
      stroke(0, 255, 136, glowIntensity);
--    strokeWeight(2 + compression * 1.5);
++    strokeWeight(3 + compression * 2); // Thicker when compressed
      // Draw spring coil with smooth curves
      beginShape();
          if (i > 0 && i < segments) {
              let perpX = -(endPos.y - startPos.y) / currentLength;
              let perpY = (endPos.x - startPos.x) / currentLength;
--            let offset = sin(i * PI * 1.2) * amplitude;
++            let offset = sin(i * PI * 1.5) * amplitude; // More dramatic oscillation
              x += perpX * offset;
              y += perpY * offset;
+         }
      endShape();
--    // Add spring glow effect
++    // Add spring glow effect with pulsing
--    stroke(0, 255, 136, glowIntensity * 0.3);
++    let pulse = sin(frameCount * 0.1) * 0.2 + 1;
--    strokeWeight(6 + compression * 2);
++    stroke(0, 255, 136, glowIntensity * 0.4 * pulse);
++    strokeWeight(8 + compression * 3);
      beginShape();
      noFill();
+     }
      endShape();
++
++    return compression; // Return compression for particle effects
+ }
  function drawPaddlesWithGlow() {
      let angle = paddle.angle;
      // Calculate glow intensity based on ball proximity
--    let glowIntensity = map(ballDistance, 0, PADDLE_GLOW_DISTANCE, 100, 0);
++    let glowIntensity = map(ballDistance, 0, PADDLE_GLOW_DISTANCE, 150, 0);
--    glowIntensity = constrain(glowIntensity, 0, 100);
++    glowIntensity = constrain(glowIntensity, 0, 150);
      push();
      translate(pos.x, pos.y);
      rotate(angle);
--    // Draw glow effect first
++    // Draw enhanced glow effect first
      if (glowIntensity > 0) {
--        fill(0, 255, 136, glowIntensity * 0.5);
++        fill(0, 255, 136, glowIntensity * 0.6);
          noStroke();
          rectMode(CENTER);
--        rect(0, 0, PADDLE_WIDTH + 8, PADDLE_HEIGHT + 8);
++        rect(0, 0, PADDLE_WIDTH + 12, PADDLE_HEIGHT + 12);
++
++        // Add outer glow
++        fill(0, 255, 136, glowIntensity * 0.3);
++        rect(0, 0, PADDLE_WIDTH + 20, PADDLE_HEIGHT + 20);
+     }
--    // Draw main paddle
++    // Draw main paddle with enhanced visual
      fill(0, 255, 136);
--    stroke(0, 255, 136, 200 + glowIntensity);
++    stroke(0, 255, 136, 220 + glowIntensity * 0.5);
--    strokeWeight(2);
++    strokeWeight(3);
      rectMode(CENTER);
      rect(0, 0, PADDLE_WIDTH, PADDLE_HEIGHT);
++    // Add core highlight
++    fill(150, 255, 200, 100);
++    noStroke();
++    rect(0, 0, PADDLE_WIDTH - 4, PADDLE_HEIGHT - 4);
++
      pop();
+ }
      let leftActivity = Math.abs(inputBuffer.left) * 255;
      let rightActivity = Math.abs(inputBuffer.right) * 255;
--    // Left support
++    // Left support with pulsing effect
--    fill(0, 255, 136, 100 + leftActivity * 0.5);
++    let leftPulse = sin(frameCount * 0.2) * 0.3 + 1;
++    fill(0, 255, 136, 100 + leftActivity * 0.6);
      noStroke();
--    ellipse(leftSupport.position.x, leftSupport.position.y, 8 + leftActivity * 0.1, 8 + leftActivity * 0.1);
++    ellipse(leftSupport.position.x, leftSupport.position.y,
--
++           (8 + leftActivity * 0.15) * leftPulse,
--    // Right support
++           (8 + leftActivity * 0.15) * leftPulse);
--    fill(0, 255, 136, 100 + rightActivity * 0.5);
++
--    ellipse(rightSupport.position.x, rightSupport.position.y, 8 + rightActivity * 0.1, 8 + rightActivity * 0.1);
++    // Right support with pulsing effect
++    let rightPulse = sin(frameCount * 0.2 + PI) * 0.3 + 1;
++    fill(0, 255, 136, 100 + rightActivity * 0.6);
++    ellipse(rightSupport.position.x, rightSupport.position.y,
++           (8 + rightActivity * 0.15) * rightPulse,
++           (8 + rightActivity * 0.15) * rightPulse);
+ }
  function drawBallEnhanced() {
      // Enhanced ball with speed-based effects
      let speedIntensity = map(speed, 0, 15, 50, 255);
--    // Ball trail effect
++    // Multi-layered trail effect
--    fill(255, 100, 100, 30);
++    for (let i = 0; i < 3; i++) {
--    noStroke();
++        let offset = i * 3;
--    ellipse(ballPos.x, ballPos.y, BALL_RADIUS * 4, BALL_RADIUS * 4);
++        fill(255, 100, 100, 40 - i * 10);
++        noStroke();
++        ellipse(ballPos.x - ballVel.x * offset * 0.1,
++               ballPos.y - ballVel.y * offset * 0.1,
++               BALL_RADIUS * (4 - i), BALL_RADIUS * (4 - i));
++    }
--    // Main ball
++    // Main ball with enhanced glow
      fill(255, 100, 100);
--    stroke(255, 150, 150, speedIntensity);
++    stroke(255, 200, 200, speedIntensity);
--    strokeWeight(2 + speed * 0.1);
++    strokeWeight(3 + speed * 0.15);
      ellipse(ballPos.x, ballPos.y, BALL_RADIUS * 2, BALL_RADIUS * 2);
--    // Speed indicator
++    // Speed indicator core
--    if (speed > 10) {
++    if (speed > 8) {
--        fill(255, 255, 255, speedIntensity * 0.5);
++        fill(255, 255, 255, speedIntensity * 0.8);
          noStroke();
--        ellipse(ballPos.x, ballPos.y, BALL_RADIUS, BALL_RADIUS);
++        ellipse(ballPos.x, ballPos.y, BALL_RADIUS * 0.8, BALL_RADIUS * 0.8);
++    }
++
++    // Outer energy ring for high speeds
++    if (speed > 12) {
++        noFill();
++        stroke(255, 255, 255, speedIntensity * 0.5);
++        strokeWeight(2);
++        ellipse(ballPos.x, ballPos.y, BALL_RADIUS * 3, BALL_RADIUS * 3);
+     }
+ }
      textSize(12);
      text(`FPS: ${Math.round(frameRate())}`, 10, 20);
      text(`Ball Speed: ${Math.round(getBallSpeed())}`, 10, 35);
++    text(`Particles: ${particles.length}`, 10, 50);
      // Enhanced spring info
      let leftSpringLength = dist(leftSupport.position.x, leftSupport.position.y,
      let rightSpringLength = dist(rightSupport.position.x, rightSupport.position.y,
                                  rightPaddle.position.x, rightPaddle.position.y);
--    text(`Left Spring: ${Math.round(leftSpringLength)}px`, 10, 50);
++    text(`L Spring: ${Math.round(leftSpringLength)}px (${((SPRING_LENGTH/leftSpringLength - 1) * 100).toFixed(0)}%)`, 10, 65);
--    text(`Right Spring: ${Math.round(rightSpringLength)}px`, 10, 65);
++    text(`R Spring: ${Math.round(rightSpringLength)}px (${((SPRING_LENGTH/rightSpringLength - 1) * 100).toFixed(0)}%)`, 10, 80);
--    text(`Input Buffer: L=${inputBuffer.left.toFixed(2)} R=${inputBuffer.right.toFixed(2)}`, 10, 80);
++    text(`Input: L=${inputBuffer.left.toFixed(2)} R=${inputBuffer.right.toFixed(2)}`, 10, 95);
+ }
  function drawStartMessage() {
      textSize(20);
      text("Press any key to start!", width/2, height/2 + 100);
      textSize(14);
--    text("Enhanced controls with smooth acceleration!", width/2, height/2 + 125);
++    text("Bouncier springs, faster paddles, explosive particles!", width/2, height/2 + 125);
+ }
  function resetBall() {
          inputBuffer.left = 0;
          inputBuffer.right = 0;
++        // Clear particles
++        particles = [];
++
          console.log("🔄 Game reset!");
+     }
+ }