sketch.js

let system

let frame_text
let reset_button
let tick_button
let autotick
let timestep
let timestep_text
let substep
let substep_text


function update() {
  const v_substep = Math.floor(substep.value())
  const v_timestep = timestep.value()
  const real_timestep = v_timestep / v_substep

  for (let index = 0; index < v_substep; index++) {
    system.update(real_timestep)    
  }

  system.increment_frame()
  frame_text.html(`Frame #${system.frame.toFixed(0)}<br>Update #${system.updates.toFixed()}<br>T ${system.time.toFixed(2)}`)
}

function setup() {

  const a = new Vector2(1, -1)
  const b = new Vector2(0, 1)

  const c = a.reflect(b)
  console.log(a, b, c)

  createCanvas(400, 400);
  system = new System({ w: width, h: height, padding: 10 })

  frame_text = createP('Frame #0')

  reset_button = createButton('Reset')
  reset_button.mouseClicked(() => {
    system.reset()
  })

  tick_button = createButton("Simulate 1 tick")
  tick_button.mouseClicked(() => {
    if (!autotick.checked()) {
      update()
    }
  })

  autotick = createCheckbox('Update automatically', false)

  createP('Timestep')
  timestep_text = createP('Timestep')
  timestep = createSlider(0.0001, 2, 0.6, 0.0001)

  createP('Substeps')
  substep_text = createP('Substeps')
  substep = createSlider(1, 16, 1, 1)
}

function draw() {
  timestep_text.html(timestep.value().toFixed(4))
  substep_text.html(substep.value().toFixed(0))
  
  background(220);

  if (autotick.checked()) {
    update()
  }

  const state = system.get_state()

  if (state.circles) {
    strokeWeight(1)
    for (const s_circle of state.circles) {
      circle(s_circle.pos.x, s_circle.pos.y, s_circle.diameter)
    }
    
    strokeWeight(1)
    for (const s_edge of state.edges) {
      line(s_edge.a.x, s_edge.a.y, s_edge.b.x, s_edge.b.y)
    }
  }
}