createCanvas(900, 480);

}

​

const lensw = 20;

const lensh = 200;

const fw = 8;

const r = 10;

​

let u = 100;

let uprime = u + 30;

let f = 75;

let v = 0;

let vprime = 0;

​

function mouseWheel(event) {

  f -= event.delta/10;

  // Block page scrolling

  return false;

}

​

function draw() {

  background(25, 255);

  noStroke();

  fill(255);

  // Title

  textAlign(CENTER);

  textSize(16);

  text("2 Object Camera Lens Simulation", width/2, 20);

  fill(255, 127);

  textSize(12);

  text("Gholamreza Dar 2023", width/2, 36);

  fill(255, 50);

  text("MouseX: change u \t Scroll: change f", width/2, height-10);

  push();

  translate(width/2, height/2);

  // Horizontal line

  stroke(255, 127);

  line(-width/2,0, width/2, 0);

  // lens

  // fill(255, 127);

  const points = [

    [0, -lensh/2],

    [0, lensh/2]

    ];

  curve(

    points[0][0]-150,

    points[0][1]-150,

    points[0][0],

    points[0][1],

    points[1][0],

    points[1][1],

    points[1][0]-150,

    points[1][1]+150

  );

  curve(

    points[0][0]+150,

    points[0][1]-150,

    points[0][0],

    points[0][1],

    points[1][0],

    points[1][1],

    points[1][0]+150,

    points[1][1]+150

  );

  // rect(-lensw/2, -lensh/2, lensw, lensh);

  // Focal points

  fill(255, 127);

  textAlign(CENTER);

  circle(f, 0, fw);

  text("f", f, -10);

  circle(-f, 0, fw);

  text("f", -f, -10);

  // U

  u = max(0+lensw+r, -width/2 + mouseX);

  noStroke();

  fill("#F44336");

  circle(u, 0, 2*r);

  text("u", u, -r-5);

  // U'

  uprime = u + 30;

  noStroke();

  fill("#00BCD4");

  circle(uprime, 0, 2*r);

  text("u'", uprime, -r-5);

  // V

  if(u-f == 0){

    v = -width/2-r;

    print("INF");

  }

  else{

    v = -(f*u)/(u-f);

  }

  stroke("#F44336");

  fill("#F443366A");

  circle(v, 0, 2*r);

  noStroke();

  text("v", v, -r-5);

  // V'

  if(uprime-f == 0){

    vprime = -width/2-r;

    print("INF");

  }

  else{

    vprime = -(f*uprime)/(uprime-f);

  }

  stroke("#67DDEC");

  fill("#67DDEC6A");

  circle(vprime, 0, 2*r);

  noStroke();

  text("v'", vprime, -r-5);

  pop();

}