constructor(x, y, r, prev_point) {

    this.x = x;

    this.y = y;

    this.r = r;

    this.prev_point = prev_point;

  }

​

  render() {

    if(this.prev_point != null){

      line(this.x, this.y, this.prev_point.x, this.prev_point.y);

    }

  }

​

  invert(inv_circle, prev_inv) {

    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,

      prev_inv

    );

​

    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(144);

  createCanvas(1000, 1000);

  background(25);

  stroke("#10ac84");

  noFill();

​

  // inv circle

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

  inv_circle.render();

  prev_point = null;

  prev_inv = null;

​

  fill("#10ac84");

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

  stroke("#ee5253");

  noFill();

}

​

const R = 200;

const point_r = 2;

const points = [];

let prev_point = null;

let prev_inv = null;

​

function draw() {

  // 1-

  // 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);

​

  noStroke();

  fill("##c8d6e5");

}

​

​

function mouseDragged() {

  if (true) {

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

    temp_inv = temp_point.invert(inv_circle, prev_inv)

    points.push(temp_point);

    // render actual point

    fill("#48dbfb");

    stroke("#48dbfb");

    temp_point.render();

    // render inv

    fill("#ee5253");

    stroke("#ee5253");

    temp_inv.render();

    // update previous points

    prev_point = Object.assign({}, temp_point)

    prev_inv = Object.assign({}, temp_inv)

  }

}

​

function mouseReleased(){

  console.log("up")

  prev_point = null;

  prev_inv = null;

}

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​