Images_in_loop

quarks

Re: Images_in_loop

1 year ago

The following code will display 3 images in a loop.

PImage[] imgs;
int nbr_of_images, img_no;
void setup() {
size(500, 500);
nbr_of_images = 3;
img_no = 0;
imgs = new PImage[nbr_of_images];
imgs[0] = loadImage("filename of first image");
imgs[1] = loadImage("filename of second image");
imgs[2] = loadImage("filename of third image");
}
void draw() {
background(255);
image(imgs[img_no], 0, 0);
// Next two lines change the image to display
// every 10 seconds (approx)
if (frameCount % 600 == 0)
img_no = (img_no + 1) % nbr_of_images;
}

efkolox

Re: Images_in_loop

1 year ago

many thanks quarks!

I also would love to do fades (transitions) between an image and the next;

maybe this thing is too complex?

efk

benja

Re: Images_in_loop

1 year ago

you can set the transparency of images by using tint() before calling image().
could be somthing like that:

    PImage[] imgs;
    int nbr_of_images, img_no;
    float transitionFrames = 50;      // number of frames for transition
    int displayFrames = 250;      // number of frames each image shall be displayed
    float fadeValue = 0;

    void setup() {
      size(100, 100);
      nbr_of_images = 3;
      img_no = 0;
      imgs = new PImage[nbr_of_images];
      imgs[0] = loadImage("img1.jpg");
      imgs[1] = loadImage("img2.jpg");
      imgs[2] = loadImage("img3.jpg");
    }

    void draw() {
      background(255);

      // full opacity for image in background
      tint(255);
      image(imgs[img_no], 0, 0);

      // fade foreground-image using tint()
      tint(255, lerp(0,255,fadeValue));
      image(imgs[(img_no+1)%nbr_of_images], 0, 0);

      // change image and reset fadeValue
      if (frameCount % (displayFrames) == 0){
        img_no = (img_no + 1) % nbr_of_images;
        fadeValue = 0;
      }

      // increase opacity of second image
      fadeValue = fadeValue+1/transitionFrames;
    }

efkolox

Re: Images_in_loop

1 year ago

…fantastic benja!

thanks you

e

efkolox

Re: Images_in_loop

1 year ago

You can choose the image in a random way?

I have to do to change that code?

efk

tfguy44

The variable img_no is the index of the current background image.
The next image to appear is the next one in order the array, or the first one if we're at the end, which is the (img_no + 1) %nbr_of_image image in the array.
I suggest you define a nextImageIndex variable which will track what the index in the arrayt of the next image to fade in is. When that image becomes the background one, set no_img to that index, and randomly pick a new nextImageIndex between 0 and nbr_of_images.

We'll teach you how, but we won't just do it for you. Try it yourself.

efkolox

Re: Images_in_loop

1 year ago

Hi tfguy44,

I'm still not so clever,

are just the beginning ...

[I'd like to know ... as an example of Processing could be useful for me to do this]

However, we think

benja

Re: Images_in_loop

1 year ago

Here is an example with colors instead of images. But the principle is the same.

float transitionFrames = 150;
float fadeValue = 0;
int col = color(random(255), random(255), random(255));
int nextCol= color(random(255), random(255), random(255));

void setup() {
size(300, 100);
}

void draw() {
fill(col);
rect(0, 0, 100, 100);
fill(lerpColor(col, nextCol, fadeValue));
rect(100, 0, 100, 100);
fill(nextCol);
rect(200, 0, 100, 100);

fadeValue = fadeValue+1/transitionFrames;

if (fadeValue >= 1) {
    fadeValue = 0;
    col = nextCol;
    nextCol = color(random(255), random(255), random(255));
}
}

efkolox

Re: Images_in_loop

1 year ago

Hello,

from this code, how can I make images appear randomly (for example with random), but always in the loop?

PImage[] imgs;
int nbr_of_images, img_no;
float transitionFrames = 30; // number of frames for transition
int displayFrames = 40; // number of frames each image shall be displayed
float fadeValue = 0;
// V O I D S E T U P
void setup(){
size(1440, 900, P3D);
nbr_of_images = 23;
img_no = 0;
imgs = new PImage[nbr_of_images];
imgs[0] = loadImage("01.jpg");
imgs[1] = loadImage("02.jpg");
imgs[2] = loadImage("03.jpg");
imgs[3] = loadImage("04.jpg");
imgs[4] = loadImage("05.jpg");
imgs[5] = loadImage("06.jpg");
imgs[6] = loadImage("07.jpg");
imgs[7] = loadImage("08.jpg");
imgs[8] = loadImage("09.jpg");
imgs[9] = loadImage("10.jpg");
imgs[10] = loadImage("11.jpg");
imgs[11] = loadImage("12.jpg");
imgs[12] = loadImage("13.jpg");
imgs[13] = loadImage("14.jpg");
imgs[14] = loadImage("15.jpg");
imgs[15] = loadImage("16.jpg");
imgs[16] = loadImage("17.jpg");
imgs[17] = loadImage("18.jpg");
imgs[18] = loadImage("19.jpg");
imgs[19] = loadImage("20.jpg");
imgs[20] = loadImage("21.jpg");
imgs[21] = loadImage("22.jpg");
imgs[22] = loadImage("23.jpg");
}
// V O I D D R A W
void draw(){
background(5);
// full opacity for image in background
tint(255);
image(imgs[img_no], 0, 0, width, height);
// fade foreground-image using tint()
tint(255, lerp(0, 255, fadeValue));
image(imgs[(img_no+1) % nbr_of_images], 0, 0, width, height);
// change image and reset fadeValue
if (frameCount % (displayFrames) == 0)
{
img_no = (img_no + 1) % nbr_of_images;
fadeValue = 0;
}
// increase opacity of second image
fadeValue = fadeValue+1/transitionFrames;
}

PhiLho

Re: Images_in_loop

1 year ago

Note: replace all your image assignments by a loop:

for (int i = 0; i < nbr_of_images; i++)
{
imgs[i] = loadImage(nf(i, 2) + ".jpg");
}

See nf().

And instead of computing img_no by incrementing it, just draw a random number:
img_no = int(random(nbr_of_images));

efkolox

Re: Images_in_loop

1 year ago

ok PhiLho,

also try your suggestion.

…

Meanwhile, I wonder if this new code (working) could go.

I have some doubts:

1. as you see the savings cpu?

2. how can I avoid transitions on the same image? Perhaps putting another condition?

grazie benja,

grazie PhiLho,

efk

PImage[] imgs;
int nbr_of_images;
float transitionFrames = 150;
float fadeValue = 0;
float img_Actual = random(0, 23);
float img_Next = random(0, 23);
void setup() {
size(1440, 900);
nbr_of_images = 23;
imgs = new PImage[nbr_of_images];
imgs[0] = loadImage("01.jpg");
imgs[1] = loadImage("02.jpg");
imgs[2] = loadImage("03.jpg");
imgs[3] = loadImage("04.jpg");
imgs[4] = loadImage("05.jpg");
imgs[5] = loadImage("06.jpg");
imgs[6] = loadImage("07.jpg");
imgs[7] = loadImage("08.jpg");
imgs[8] = loadImage("09.jpg");
imgs[9] = loadImage("10.jpg");
imgs[10] = loadImage("11.jpg");
imgs[11] = loadImage("12.jpg");
imgs[12] = loadImage("13.jpg");
imgs[13] = loadImage("14.jpg");
imgs[14] = loadImage("15.jpg");
imgs[15] = loadImage("16.jpg");
imgs[16] = loadImage("17.jpg");
imgs[17] = loadImage("18.jpg");
imgs[18] = loadImage("19.jpg");
imgs[19] = loadImage("20.jpg");
imgs[20] = loadImage("21.jpg");
imgs[21] = loadImage("22.jpg");
imgs[22] = loadImage("23.jpg");
}
void draw() {
background(5);
// full opacity for image in background
tint(255);
image(imgs[int(img_Actual)], 0, 0, width, height);
// fade foreground-image using tint()
tint(255, lerp(0, 255, fadeValue));
image(imgs[int(img_Next)], 0, 0, width, height);
fadeValue = fadeValue+1/transitionFrames;
// println((int(img_Actual)) + " next " + (int(img_Next)));
if (fadeValue >= 1) {
fadeValue = 0;
img_Actual = img_Next;
img_Next = random(0, 23);
}
}

efkolox

Re: Images_in_loop

1 year ago

Hi PhiLho,

…but exactly where in my code I have to write your patch?

for (int i = 0; i < nbr_of_images; i++)
{
imgs[i] = loadImage(nf(i, 2) + ".jpg");
}

…in void setup?

efkolox

Re: Images_in_loop

1 year ago

Ciao,

this is the best code that I was able to put together (after tips);

but now I avoid sometimes (in the randomness) img_Actual == img_Next;

What do you advise me?

Thanks for any suggestions ...

efk

PImage[] imgs;
int nbr_of_images;
float transitionFrames = 30;
int displayFrames = 50;
float fadeValue = 0;
float img_Actual = random(0, 23);
float img_Next = random(0, 23);
void setup() {
size(1440, 900);
nbr_of_images = 23;
imgs = new PImage[nbr_of_images];
for (int i = 0; i < nbr_of_images; i++)
{
imgs[i] = loadImage(nf(i, 2) + ".jpg");
}
}
void draw() {
// println(" Images: " + " actual " + (int(img_Actual)) + " ; " + " next " + (int(img_Next))); // values debugging
background(5);
// full opacity for image in background
tint(255);
image(imgs[int(img_Actual)], 0, 0, width, height);
// fade foreground-image using tint()
tint(255, lerp(0, 255, fadeValue));
image(imgs[int(img_Next)], 0, 0, width, height);
// change image and reset fadeValue
if (frameCount % (displayFrames) == 0)
{
fadeValue = 0;
img_Actual = img_Next;
img_Next = random(0, 23);
}
fadeValue = fadeValue+1/transitionFrames;
}

Replies(13)

Re: Images_in_loop

Re: Images_in_loop

Re: Images_in_loop

Re: Images_in_loop

Re: Images_in_loop

Re: Images_in_loop

Re: Images_in_loop

Re: Images_in_loop

Re: Images_in_loop

Re: Images_in_loop

Re: Images_in_loop

Re: Images_in_loop

Re: Images_in_loop

Statistics

Tags

Actions

Related Posts