​

let target = [0,0]

​

function setup() {

  createCanvas(400, 400);

  let start_x = 0.25 * width

  let start_y = 0.25 * height

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

    let x = start_x + i * 6

    let y = start_y + i * 6

    skeleton.push([x, y])

  }

    noCursor()

​

}

​

function calculateDistance(head, tail) {

  let dx = tail[0] - head[0] 

  let dy = tail[1] - head[1] 

  return Math.sqrt( dx*dx + dy*dy )

}

​

function reach(head, tail, target) {

  const bone_length = 24

  let dx = tail[0] - target[0] 

  let dy = tail[1] - target[1] 

  let distance = Math.sqrt( dx*dx + dy*dy )

  const t = bone_length / distance

  return [

    [ target[0], target[1] ],

    [ target[0] + (dx * t), target[1] + (dy * t) ],

  ]

}

​

function updateSkeleton(skeleton) {

  let base = skeleton[skeleton.length - 1]

  let target = [mouseX, mouseY]

  for (let i = 0; i < skeleton.length - 1; i++) {

    const bone_length = calculateDistance(skeleton[i], skeleton[i + 1])

    const [head, tail] = reach(skeleton[i], skeleton[i + 1], target, bone_length)

    skeleton[i] = head

    target      = tail

  }

  skeleton[skeleton.length - 1] = target

  target = base

  for (let i = skeleton.length - 1; i > 0; i--) {

    const [head, tail] = reach(skeleton[i], skeleton[i - 1], target)

    skeleton[i] = head

    target     = tail

  }

  skeleton[0] = target

}

​

function drawTarget(target, size = 3) {

  rectMode(CENTER)

  fill(200, 12, 12)

  {

    let [x, y] = target

    x -= size * 2

    rect(x, y, size*2, size)  

  }

  {

    let [x, y] = target

    x += size * 2

    rect(x, y, size*2, size)  

  }

  {

    let [x, y] = target

    y -= size * 2

    rect(x, y, size, size*2)  

  }

  {

    let [x, y] = target

    y += size * 2

    rect(x, y, size, size*2)  

  }

}

​

function drawSkeleton( skeleton, joint_size = 12 ) {

  let prev_x, prev_y;

  for (let joint of skeleton) {

    let [x, y] = joint

    //draw bones

    {

      if (prev_x) {

        stroke(12)

        line(prev_x, prev_y, x , y)

      }   

    }

    prev_x = x

    prev_y = y

    fill(0)

    noStroke()

    ellipse(x, y, joint_size, joint_size)

  }

}

​

function draw() {

  background(220);

  target = [mouseX, mouseY]

  let bone_length = calculateDistance(skeleton[0], skeleton[1])

  updateSkeleton(skeleton, target)

  drawSkeleton(skeleton, 8)

  drawTarget(target)

}