constructor(x, y, r) {

    this.x = x;

    this.y = y;

    this.r = r;

  }

​

  render() {

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

  }

​

  invert(inv_circle) {

    let a2 =

      (inv_circle.x - this.x) * (inv_circle.x - this.x) +

      (inv_circle.y - this.y) * (inv_circle.y - this.y);

    let r2 = inv_circle.r * inv_circle.r;

    let dx = inv_circle.x - this.x;

    let dy = inv_circle.y - this.y;

​

    let delta_x = (r2 / a2) * dx;

    let delta_y = (r2 / a2) * dy;

​

    let inverted = new Point(

      inv_circle.x - delta_x,

      inv_circle.y - delta_y,

      this.r

    );

​

    return inverted;

  }

}

​

class Circle {

  constructor(x, y, r) {

    this.x = x;

    this.y = y;

    this.r = r;

  }

​

  render() {

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

  }

​

  invert(inv_circle) {

    let a2 =

      (inv_circle.x - this.x) * (inv_circle.x - this.x) +

      (inv_circle.y - this.y) * (inv_circle.y - this.y);

    let r2 = inv_circle.r * inv_circle.r;

    let dx = inv_circle.x - this.x;

    let dy = inv_circle.y - this.y;

​

    let delta_x = (r2 / a2) * dx;

    let delta_y = (r2 / a2) * dy;

​

    let inverted = new Circle(

      inv_circle.x - delta_x,

      inv_circle.y - delta_y,

      50

    );

​

    // console.log(inv_circle.x + delta_x, inv_circle.y + delta_y, 100);

    return inverted;

  }

}

​

function setup() {

  frameRate(30);

  createCanvas(1000, 1000);

  background(25);

  stroke("#10ac84");

  noFill();

​

  // inv circle

  inv_circle = new Circle(width / 2, height / 2, R);

  inv_circle.render();

​

  fill("#10ac84");

  circle(width / 2, height / 2, 2);

  stroke("#ee5253");

  noFill();

​

  //   // circle1

  //   circle1 = new Circle(width / 2 + 20, height / 2 + 20, 20);

  //   circle1.render();

​

  //   // circle1'

  //   circle1_prim = circle1.invert(inv_circle);

  //   circle1_prim.render();

}

​

const R = 200;

const point_r = 2;

const points = [];

​

function draw() {

  // 1-

  // Empty canvas

  // background(25);

​

  // 2-

  // Initialize Inversion Circle and Origin point

  stroke("#10ac84");

  strokeWeight(4);

  noFill();

​

  // inv circle

  inv_circle = new Circle(width / 2, height / 2, R);

  inv_circle.render();

​

  // Origin Point

  fill("#10ac84");

  circle(width / 2, height / 2, 4);

​

  // 3-

  // Draw old points from 'points'

  noStroke();

​

  // for (let point in points) {

  //   fill("#48dbfb");

  //   let temp_point = points[point];

  //   temp_point.render();

  //   fill("#ee5253");

  //   temp_point.invert(inv_circle).render();

  // }

​

  // 4-

  // Draw new point inicator and its invert

​

  noStroke();

  fill("##c8d6e5");

​

  // indicator

  // indicator = new Point(mouseX, mouseY, point_r);

  // indicator.render();

​

  // indicator'

  // indicator_prim = indicator.invert(inv_circle);

  // indicator_prim.render();

}

​

function mouseDragged() {

  if (true) {

    temp_point = new Point(mouseX, mouseY, point_r);

    points.push(temp_point);

    fill("#48dbfb");

    temp_point.render();

    fill("#ee5253");

    temp_point.invert(inv_circle).render();

  }

  // console.table(points)

}

​