let magnifyingGlass;

let footprints = [];

let footprintIndex = 0;

​

function preload() {

  bg = loadImage('bg.png'); 

}

​

function setup() {

  createCanvas(500, 500);

  magnifyingGlass = new MagnifyingGlass(100, 100);

​

  // Start with an initial footprint

  footprints.push(new Footprint(width / 2, height / 2));

}

​

class MagnifyingGlass {

  constructor(x, y) {

    this.pos = createVector(x, y);

    this.vel = createVector(0, 0);

    this.acc = createVector(0, 0);

    this.maxSpeed = 1.5; // Slower speed for magnifying glass

    this.maxForce = 0.05; // Slower acceleration

  }

​

  seek(target) {

    let force = p5.Vector.sub(target, this.pos);

    force.setMag(this.maxSpeed);

    force.sub(this.vel);

    force.limit(this.maxForce);

    return force;

  }

​

  applyForce(force) {

    this.acc.add(force);

  }

​

  update() {

    this.vel.add(this.acc);

    this.vel.limit(this.maxSpeed);

    this.pos.add(this.vel);

    this.acc.set(0, 0);

  }

​

  followFootprints() {

    if (footprints.length > 0) {

      let target = footprints[footprintIndex].pos;

      let distance = p5.Vector.dist(this.pos, target);

​

      // If close to current footprint, remove it and generate a new one

      if (distance < 5) {

        footprints.splice(footprintIndex, 1); 

        this.generateNewFootprint(); 

        if (footprints.length > 0) {

          footprintIndex = footprintIndex % footprints.length;

        }

      } else {

        let force = this.seek(target);

        this.applyForce(force);

      }

    }

  }

​

  generateNewFootprint() {

    // Generate new footprint at a random position

    let newX = random(width);

    let newY = random(height);

    footprints.push(new Footprint(newX, newY));

  }

​

  show() {

    // Draw magnifying glass

    fill(150, 75, 0);

    quad(this.pos.x - 25, this.pos.y + 10, this.pos.x - 5, this.pos.y + 30, this.pos.x - 80, this.pos.y + 100, this.pos.x - 80, this.pos.y + 98);

    fill(150, 75, 0);

    circle(this.pos.x, this.pos.y, 90);

    fill(188, 212, 230);

    circle(this.pos.x, this.pos.y, 70);

  }

}

​

class Footprint {

  constructor(x, y) {

    this.pos = createVector(x, y);

    this.speed = createVector(random(-0.2, 0.2), random(-2, 2)); // Random speed for wandering

  }

​

  update() {

    // Update footprint position

    this.pos.add(this.speed);

​

    // Keep footprints within the canvas bounds

    if (this.pos.x < 0 || this.pos.x > width) {

      this.speed.x *= -1; // Reverse direction on x-axis

    }

    if (this.pos.y < 0 || this.pos.y > height) {

      this.speed.y *= -1; // Reverse direction on y-axis

    }

  }

​

  show() {

    // Draw footprint shape

    fill(100, 79, 22, 228);

    ellipse(this.pos.x, this.pos.y, 29, 32); // Heel

    ellipse(this.pos.x - 20, this.pos.y - 10, 10, 10); // Toe 1

    ellipse(this.pos.x - 10, this.pos.y - 20, 8, 8); // Toe 2

    ellipse(this.pos.x + 3, this.pos.y - 25, 8, 8); // Toe 3

    ellipse(this.pos.x + 13, this.pos.y - 20, 6, 6); // Toe 4

  }

}

​

function draw() {

  background(255);

  image(bg, 0, 0, width, height);

​

  // Update and show footprints

  for (let footprint of footprints) {

    footprint.update(); // Update footprint position

    footprint.show();

  }

​

  // Update and show magnifying glass

  magnifyingGlass.followFootprints();

  magnifyingGlass.update();

  magnifyingGlass.show();

}

​