let sliders;

let step = 5;

let start = 0;

let end = 1;

let loopDescription = ['initializer', 'condition', 'final-expression'];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textFont("Fira Code");

  textSize(17);

  sliders = new Array(3).fill(0).map((d, i) => {

            let startValue = [0, 190, 1];

            const slider = createSlider(0, 255, startValue[i]);

            slider.style('width', '80px');

            slider.style('position', 'absolute');

            slider.position((width / 3 * i) + width / 6 - 40, height - 30);

            return slider;

        });

}

​

function draw() {

  background(teal);

  noStroke();

  fill(0);

  for (let i = start; i < end; i += step) {

            circle(50 + i * 50, height / 2, 20);

        }

        text(`for(var i=${start}; i<${end}; i+=${step}) {

    ...

}`, 20, 40);

​

        loopDescription.map((d,i)=>{

            text(`${d}`,(width / 3 * i) + width / 6 - 40, height - 30);

        })

  start = round(map(sliders[0].value(), 0, 255, 0, 10));

  end = round(map(sliders[1].value(), 0, 255, 0, 20));

  step = round(map(sliders[2].value(), 0, 255, 1, 10));

​

}