'2007-01-01.jpg',

       '2008-01-01.jpg',

       '2009-01-01.jpg']

​

for (let i=10;i<23;i++) {

  imgs.push('20'+i.toString()+'-01-01.jpg')

}

​

let imgs_objs = []

let yearSlider;

​

​

function preload() {

  for (let i of imgs) {

    imgs_objs.push(loadImage('imgs/'+i))

  }

}

​

function setup() {

  createCanvas(400, 400);

  yearSlider = createSlider(0, imgs.length-1, 0, 1)

  yearSlider.position(width/2, 13)

  yearSlider.style('-webkit-appearance', 'none') 

  yearSlider.style('width', '100px')

  yearSlider.style('background', '#E4FFF5')

}

​

​

function draw() {

  background(220);

  image(imgs_objs[yearSlider.value()], 10, 0)

  translate(0, 12)

  textAlign(CENTER)

  textFont('Roboto')

  textSize(14)

  text('2006', width/2-30, 17)

  text('2022', width/2+130, 17)

  text('Year: '+ (2006+yearSlider.value()).toString(), width/2+52, 40)

​

​

}