1

I am very new to programming and am trying to code a sketch in p5.js, I want to use sliders to slide images to make an "outfit picker" but I am struggling to get the sliders to slide through images I can only find examples that slide through colours. Is this the only way to use sliders? Is there a better way to create a sketch that does this?

Thank you

James
  • 137
  • 1
  • 10
Lexi Greenwood
  • 11
  • 1

1 Answers1

0

This is a very long-winded question with a lot of answer and a lot of work to go into the answers but I will try to explain how to do it. Sliders work using ranges, so if the slider is all the way to the left it is a 0 and all the way to the right it is the maximum so for this example. So that means that at any point in the path of the slider there is a corresponding percentage or number. So it means if you want to do an outfit selector then as it moves along the slider simply create brackets. So if the slider is at 1 then outfit one and 2 outfits two and so on. To do this you will need to use arrays. Something like this.

Also, check out this link on createSlider() if you forget the syntax of sliders https://p5js.org/reference/#/p5/createSlider

//this will be somewhere in setup or such
outfitSlider = createSlider(0,10,50,0);

//A function to be called by DRAW
function outfitCheck() {
  i = outfitSlider.value();
  outfit = outfits[i];
}

Now you can have outfitCheck() being called by a watcher placed on the slider or simply call it inside the draw function. This works on the idea of having the outfits within an array. Which yo0u can work out how to do elsewhere or by watching an array tutorial. Here is a good StackOverflow on this as I saw you mentioned images Creating an array of image objects

You can also have inside the array different parameters not only src but also the style or a class or id to do some styling to it using CSS or using P5 dom up to you. But due to it being lots of different pictures you are more or less going to have to hard code it all. But using a for loop could help. Hope this answers your question. More or less in turns or making a better one, it all depends on your actual program and its context because of there lots of options out there.

James
  • 137
  • 1
  • 10