let current;

let done;

let alt;

let alt2;

let scale = 1

let inc = 1000;

let scaleSlider;

let incSlider;

​

function setup() {

  noFill();

  createCanvas(626, 424);

  const q = createButton('?')

  q.mousePressed(() => alert("The hop along the number line starts at 1, and increments by 1 each time. The hop will move backwards that amount if it lands on a positive number that hasn't already been hopped to/from, otherwise it will hop forwards that amount. Blue represents hops forwards, orange represents hops backwards."))

  createElement('p','Scale');

  scaleSlider = createSlider(5,500,10);

  createElement('p','Increments');

  incSlider = createSlider(1,10000,10000);

}

​

function getConstants(){

  inc = incSlider.value();

  scale = scaleSlider.value()/10.0;

}

​

function draw() {

  getConstants();

  background(255);

  count = 1;

  current = 0;

  alt = 0

  alt2 = 1;

  done = [0];

  while(current < inc){

    if((current - count > 0) && !done.includes(current - count)){

      current -= count;

      count++;

      stroke('orange');

      arc(scale*(done[done.length-1]+current)/2.0,height/2,scale*(done[done.length-1]-current),scale*(done[done.length-1]-current),alt*Math.PI,alt2*Math.PI);

      done.push(current);

    }

    else {

      current += count;

      count++;

      stroke('blue');

      arc(scale*(current+done[done.length-1])/2.0,height/2,scale*(done[done.length-1]-current),scale*(done[done.length-1]-current),alt*Math.PI,alt2*Math.PI);

      done.push(current);

    }

    alt ^= 1;

    alt2 ^= 1;

  }

}