​

let ball;

let world, engine;

let mConstraint;

let slingshot;

​

let ballImg;

​

function preload() {

  ballImg = loadImage('football.png');

}

​

let { Vec2D, Rect } = toxi.geom;

let { VerletPhysics2D, VerletParticle2D, VerletSpring2D } = toxi.physics2d;

let { GravityBehavior } = toxi.physics2d.behaviors;

let cols = 23;

let rows = 7;

​

let particles = make2DArray(cols, rows);

let springs = [];

​

let w = 10;

​

let physics;

​

function setup() {

  const canvas = createCanvas(440, 640); // Create canvas and store the reference

  engine = Engine.create();

  world = engine.world;

  physics = new VerletPhysics2D();

  let gravity = new Vec2D(0, 1);

  let gb = new GravityBehavior(gravity);

  physics.addBehavior(gb);

  // Ball and Slingshot

  ball = new Ball(150, 300, 25);

  slingshot = new SlingShot(150, 300, ball.body);

​

  // Create the mouse constraint after the canvas is created

  const mouse = Mouse.create(canvas.elt);  // Now canvas.elt is valid

  const options = {

    mouse: mouse

  };

​

  // Fix for HiDPI displays

  mouse.pixelRatio = pixelDensity();

  mConstraint = MouseConstraint.create(engine, options);

  World.add(world, mConstraint);

​

  // Initialize particles and springs...

  let startX = width / 2 - (cols * w) / 2;

  let startY = 20;

​

  let x = startX;

  for (let i = 0; i < cols; i++) {

    let y = startY;

    for (let j = 0; j < rows; j++) {

      let p = new Particle(x, y);

      particles[i][j] = p;

      physics.addParticle(p);

      y = y + w;

    }

    x = x + w;

  }

​

  // Add springs between particles...

  for (let i = 0; i < cols; i++) {

    for (let j = 0; j < rows; j++) {

      let a = particles[i][j];

      if (i != cols - 1) {

        let b1 = particles[i + 1][j];

        let s1 = new Spring(a, b1);

        springs.push(s1);

        physics.addSpring(s1);

      }

      if (j != rows - 1) {

        let b2 = particles[i][j + 1];

        let s2 = new Spring(a, b2);

        springs.push(s2);

        physics.addSpring(s2);

      }

    }

  }

​

  // Lock particles along the top edge

  for (let i = 0; i < cols; i += 4) {

    particles[i][0].lock();

  }

}

​

function keyPressed() {

  if (key == ' ') {

    World.remove(world, ball.body);

    ball = new Ball(150, 300, 25);

    slingshot.attach(ball.body);

  }

}

​

function mousePressed() {

  // Check if the mouse is pressed near the ball to start dragging

  if (dist(mouseX, mouseY, ball.body.position.x, ball.body.position.y) < ball.r) {

    dragging = true;

    slingshot.attach(ball.body);  // Attach the ball to the slingshot

  }

}

​

function mouseDragged() {

  // If dragging, move the ball with the mouse

  if (dragging) {

    ball.body.position.x = mouseX;

    ball.body.position.y = mouseY;

  }

}

​

function mouseReleased() {

  // When mouse is released, apply a force to the ball and release the slingshot

  if (dragging) {

    let force = createVector(mouseX - 150, mouseY - 300);  // Calculate force from initial position

    force.mult(-0.01);  // Apply force to ball (you can adjust this multiplier)

    Matter.Body.applyForce(ball.body, ball.body.position, { x: force.x, y: force.y });

    slingshot.fly();  // Detach the ball from the slingshot

    dragging = false;

  }

}

​

function draw() {

  // Set background to green (football field color)

  background(0, 128, 0); // RGB value for green

  Matter.Engine.update(engine);

  slingshot.show();

  ball.show();

  // Draw football field demarcations (white lines)

  stroke(255); // White color for lines

  strokeWeight(2);

  // Draw the field boundaries (rotate to vertical orientation)

  noFill();

  rect(20, 20, width - 40, height - 40); // Outer rectangle (field boundary)

  // Draw midfield line (horizontal)

  line(20, height / 2, width - 20, height / 2);

​

  // Draw penalty boxes (horizontal) with smaller dimensions

  rect(width / 3, 20, width / 3, height / 10); // Left penalty box

  rect(width / 3, height - height / 10 - 20, width / 3, height / 10); // Right penalty box

​

  // Draw goal boxes (horizontal) with wider and taller dimensions

  let goalBoxWidth = width / 2 + 80;

  let goalBoxHeight = height / 5;

  rect(width / 4 - 40, 20, goalBoxWidth, goalBoxHeight); // Left goal box

  rect(width / 4 - 40, height - goalBoxHeight - 20, goalBoxWidth, goalBoxHeight); // Right penalty box

​

  // Draw the center circle (centered vertically and horizontally)

  ellipse(width / 2, height / 2, 80, 80); // Center circle

 // Detect collision with the goal net

  let goalBoxX = width / 4 - 40;

  let goalBoxY = 20;

  let goalBoxW = goalBoxWidth;

  let goalBoxH = goalBoxHeight;

​

  if (ball.body.position.x > goalBoxX && ball.body.position.x < goalBoxX + goalBoxW &&

      ball.body.position.y > goalBoxY && ball.body.position.y < goalBoxY + goalBoxH) {

​

    // Check for collision between ball and net particles

    for (let i = 0; i < cols; i++) {

      for (let j = 0; j < rows; j++) {

        let particle = particles[i][j];

        let distance = dist(ball.body.position.x, ball.body.position.y, particle.x, particle.y);

        // If the ball is near a particle (within a certain radius), apply a force to simulate the impact

        if (distance < ball.r + w / 2) {  // Adjust as needed for particle radius

          // Apply a force to the particle to simulate it moving upon impact

          let forceX = (particle.x - ball.body.position.x) * 2;

          let forceY = (particle.y - ball.body.position.y) * 2;

          particle.addForce(new Vec2D(forceX, forceY));

          // Optionally, slow down or stop the ball's motion to simulate catching

          Matter.Body.setVelocity(ball.body, { x: 0, y: 0 });

        }

      }

    }

  }

​

  // Update and display springs and particles

  physics.update();

  for (let s of springs) {

    s.display();

  }

}

function make2DArray(cols, rows) {

  let arr = new Array(cols);

  for (let i = 0; i < arr.length; i++) {

    arr[i] = new Array(rows);

  }

  return arr;

}

​

// How cute is this simple Particle class?!

class Particle extends VerletParticle2D {

  constructor(x, y, r) {

    super(x, y);

    this.r = r;

  }

​

  show() {

    fill(127);

    stroke(0);

    circle(this.x, this.y, this.r * 2);

  }

}

​

class Spring extends VerletSpring2D {

  constructor(a, b) {

    super(a, b, w, 0.25);

  }

​

  display() {

    stroke(0);

    strokeWeight(2);

    line(this.a.x, this.a.y, this.b.x, this.b.y);

  }

}

​