Creating image slider in p5.js

nielsvanhaaften

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;
}

GoToLoop

http://p5js.org/reference/#/p5/image

nielsvanhaaften

Thanks for your repley!

If I use the image() function I get this notification:

"Uncaught TypeError: Cannot read property 'position' of undefined (sketch: line 20)"

GoToLoop

I can't guess how your current code is right now.
You need to post your most current attempt.

nielsvanhaaften

sorry, still learning

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(){

  var lala = image(img[index]);
  lala.position(50, 50);
  lala.mousePressed(volgende);

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

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

GoToLoop

Function loadImage() returns a p5.Image object:

1. http://p5js.org/reference/#/p5/loadImage
2. http://p5js.org/reference/#/p5.Image

There are no position() nor mousePressed() methods on it as you can see. :-&

However, b/c class p5.Image is actually a HTMLCanvasElement internally:
https://developer.Mozilla.org/en-US/docs/Web/API/HTMLCanvasElement

... there are some extra hidden properties, like canvas & drawingContext for complex stuff. :-bd

By accessing its non-documented property canvas, you can for example, assign a MouseEvent function to onmousedown(), in order to emulate mousePressed():! :ar!

1. https://developer.Mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousedown
2. https://developer.Mozilla.org/en-US/docs/Web/Events/mousedown

kfrajer

Here is my attempt, not using HTML objects.

Kf

var img = [];
var index = 0;

function preload(){

  img[0] = loadImage("java.1.0.jpg");
  img[1] =  loadImage("figSmall.jpg");
}

function setup(){
  createCanvas(400,400); 
}

function draw(){ 
  image(img[index],50,50,width,height);
}

function mouseReleased(){

    //ONLY if click registered inside image
    if(mouseX>50 && mouseY>50){
          index = index + 1;
          if (index == img.length){
              index = index - img.length;
          }
    }          
}

nielsvanhaaften

thanks for the solutions!