Creating image slider in p5.js

Hey

I am very new to p5.js and programming in general. I am trying to create an image slider in p5.js, but i am running into a problem. I want the image slider to function as an HTML object so when you click on the image it will shift to the next image. In order to make it into an HTML object I have to use the createImg(), right? But this function does not work with the variables I need for the image slider, I think because HTML objects are only drawn once.

Your assistance would be very much appreciated!

This is the code I have so far (hope I did that display as code thing right, it doesn't show yet)

var img = [];
var index = 0;
var lala;

function preload(){

  img[0] = loadImage('afbeelding0.jpg');
  img[1] = loadImage('afbeelding1.jpg');
}

function setup(){
  createCanvas(displayWidth,displayHeight*2);
}

function draw(){

  lala = createImg(img[index]);

  lala.position(50,50);
  lala.mousePressed(next);

  if (index == img.length){
    index = index - img.length;
  }
  print(index)
}

function next(){
  index = index + 1;
}

Answers

Sign In or Register to comment.