//image numbers start and finish

var start=3075;

var finish=3094;

​

var gain=1.5;

​

​

// number of images

var nImages;

​

//declaration of an array to put in the images

var imgs = [];

​

// here you can change the size of the sketch a bit, 400 is small

var imheight=400;

var imwidth;

​

//var imageNumber=0;

var ytemp;

​

// you need to preload images in javascript

function preload(){

  for (var i = start; i<=finish; i++) {

    imgs[i-start]=loadImage("IMG_"+str(i)+".jpg");

  }

}

​

​

// this function is obligatory, normally full of stuff to setup the sketch

function setup() {

  nImages=finish-start;

  imwidth=1.5*imheight

  createCanvas(imwidth, imheight);

  noCursor();

}

​

// this is the draw loop, it has only two relevant lines, one that maps the mouse position to a number, and the other showing the image. 

function draw() {

  print(imageNumber())

  image(imgs[imageNumber()],0,0,imwidth, imheight)

  //line(0,ytemp,100,ytemp)

  let s = 'Slide your cursor to the right';

  fill(50);

  text(s, 10, 10, 70, 80); // Text wraps within text box

}

​

function imageNumber(){

  var mfy;

  //mfy = imheight+sqrt(mouseY-imheight);

  //mfy = mouseY

  if(imheight<ytemp){

    mfy=0;

  }else{

    mfy=floor(map(abs(mouseX/gain),0,

    width,0,nImages,true));

  }

  return mfy

}

​

​