Pixel particles - image slideshow

Questions
, ,
1

Hi! Newbie here :slight_smile: just started coding with javascript and trying to experiment with three.js

I ran across this https://codepen.io/zadvorsky/pen/VaXqRW and costumized it to create a landing web-page with a slideshow. This is my code https://codepen.io/scarscarin/pen/zYrOojw. Although, it seems that my img-array index doesn’t change and the image stays the same.

this is another test with images hosted in the same folder http://www.leoscarin.com/todaysart/index.html but still not working.

Any tips?

Best,
Leo

2

I can’t see where you are trying to change imageIndex?
If you insert imageIndex = 2 at the top you get the third image.
If you insert imageIndex = 1 however, the image isn’t working.

Seems to me you need a button to change imageIndex and redraw? And check all your source files work.
Looks cool!

1 Like
3

Hey Peter! Thanks for taking time to look into this :slight_smile:

The way I did it was by declaring imageIndex as a variable with value 0 at the beginning of the js and then calling it inside the function createPixelData() , where I equalled image.src = imgArray[imageIndex].src; (this way I should receive the number of image corresponding to my imageIndex value).

Then, in the function update() I set up an if statement: if the amplitude value of the particles is less than the previous one (which only happens when the Math.tan resets, because it turns negative) then the imageIndex value should increase.

This all works out in the console, but what I can’t manage to do is to update the imageIndex value inside the previous createPixelData() function.

PS - the source file should work, I tried replacing image.src = imgArray[imageIndex].src; with image.src = imgArray[1].src; and it works ok.

var imageIndex = 0;

function createPixelData() {
  var image = document.createElement("img");
  var imgArray = new Array();

  imgArray[0] = new Image();
  imgArray[0].src = 'img01.jpg';

  imgArray[1] = new Image();
  imgArray[1].src = 'img02.jpg';

  imgArray[2] = new Image();
  imgArray[2].src = 'img03.jpg';

  image.src = imgArray[imageIndex].src;
}

function update() {

     shaderUniforms.amplitude.value = Math.tan(animationTime);

     animationTime += animationDelta;

     if (shaderUniforms.amplitude.value > Math.tan(animationTime)) {
       imageIndex++;
     }