var start=3075;

var finish=3094;

​

var gain=0.6;

​

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

var imheight=400;

var imwidth;

​

// here you can change the starting coordinates of the signifier

const signifierX = 250, signifierY = 220;

​

​

// this is the variable it uses to calculate how far the user has dragged the fabric

var dragX=0;

​

var sigShift = 0;

​

// number of images

var nImages;

​

//declaration of an array to put in the images

var imgs = [];

​

var showSignifier = true;

​

​

// 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);

}

​

​

function draw() {

  // if the mouse is pressed it changes the drag variable

  if(mouseIsPressed){

    dragX += mouseX-pmouseX;

    // if stretch is already at minimum or maximum dragging won't stretch it further

    dragX = min(dragX,width*gain);

    dragX = max(dragX,0);

    //only shows image number in console when you're changing it

    print(imageNumber);

    //hide signifier

    showSignifier = false;

  }

  imageNumber = floor(map(abs(dragX/gain),0, width,0,nImages,true));

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

  let s = 'Hold the mouse and drag your cursor to the right';

  fill(50);

  text(s, 10, 10, 150, height); // Text wraps within text box

  noStroke();

  if(showSignifier){

    fill(255,255,255,100);

    sigShift += 1;

    circle(signifierX + sigShift, signifierY,30);

  }

  if(sigShift > 50){

    sigShift = 0;

  }

}

​