Hi I have a txt file that contains image names. I am trying to take the first image and fade slowly into the second image. I then want to start zooming into the second image to about 500x. I tried to do it but for some reason it starts with the second image being zoomed and then further zooms in. I want the pattern to repeat therefore image 1 fades to image 2 and then zoom in on image 2 and then fade to image 3 and fade to image 4 and zoom and so on. Please can someone help me figure out what I am doing wrong as I am new to processing
if I understand you requirement correct, you could try s.th like this …
Cheers
— mnse
ArrayList<PImage> images;
int lastImageIndex = -1;
int nextImageIndex = 0;
float alphaValue = 0;
void setup() {
size(512,512,P2D); // adjust to your needs (ie. fullScreen(P2D))
images = new ArrayList<PImage>();
String[] lines = loadStrings("images.txt");
for (String line : lines) {
PImage img = loadImage(line);
images.add(img);
}
imageMode(CENTER);
}
void draw() {
background(0);
fade(lastImageIndex,nextImageIndex,alphaValue);
if (alphaValue >= 1.0) {
lastImageIndex = nextImageIndex;
nextImageIndex = (lastImageIndex+1) % images.size();
alphaValue = 0;
}
alphaValue += 0.01;
}
void fade(int l,int n, float a) {
if (l >= 0) {
float invAlpha = 1.0-a;
tint(255, invAlpha * 255);
PImage limg=images.get(l);
// if you want to scale it on fullscreen, change to width and height
// instead of img.width and img.height for the third and fouth parameter
// if the image not already fits in
image(limg, width/2, height/2, limg.width*invAlpha, limg.height*invAlpha);
}
tint(255, a * 255);
PImage nimg=images.get(n);
// if you want to scale it on fullscreen, change to width and height
// instead of img.width and img.height for the third and fouth parameter
// if the image not already fits in
image(nimg, width/2, height/2, nimg.width*a, nimg.height*a);
}
Thank you so much! yes that similar to what I wanted I just wanted every second image to zoom but I think that is an easy fix. I needed the second, fourth and sixth image to zoom but this is. so helpful.
I just had one more question I get a runtime exception with this saying → RuntimeException: Image width and height cannot be larger than 16384 with this graphics card. would you know how to fix that as well as how would you slow down the zoom and fade to maybe take slightly longer?
Code adjusted. Just play a bit around to figure out yourself and adjust to your needs.
How large are your images ?!
I would say scale down size to fix it. In case it would not be possible you need another approach.
You could split the image into parts and display it like a grid which combined shows the whole image, but you would need to implement that by yourself …
ie:
Cheers
— mnse
ArrayList<PImage> images;
int lastImageIndex = -1;
int nextImageIndex = 0;
float alphaValue = 0;
float alphaShift = 0.005; // adjust speed, smaller = slower
void setup() {
fullScreen(P2D); // adjust to your needs (ie fullscreen)
images = new ArrayList<PImage>();
String[] lines = loadStrings("images.txt");
for (String line : lines) {
PImage img = loadImage(line);
images.add(img);
}
imageMode(CENTER);
}
void draw() {
background(0);
// as index is zero based, zoom in image on index 1,3,5,.. means second, fourth sixth,... image else just blend
fade(lastImageIndex,nextImageIndex,alphaValue, nextImageIndex % 2 != 0);
if (alphaValue >= 1.0) {
lastImageIndex = nextImageIndex;
nextImageIndex = (lastImageIndex+1) % images.size();
alphaValue = 0;
}
alphaValue += alphaShift;
}
void fade(int l,int n, float a, boolean zi) {
if (l >= 0) {
float invAlpha = 1.0-a;
tint(255, invAlpha * 255);
PImage limg=images.get(l);
// only fade out no zooming
image(limg, width/2, height/2, width, height);
}
tint(255, a * 255);
PImage nimg=images.get(n);
// if zi zoom in and blend in else only blend in
image(nimg, width/2, height/2, zi ? width*a : width, zi ? height*a : height);
}
Thanks so much for all the help. I cannot make the image fade to the 2nd and 4th images before zooming into that image. I am trying to go in this order Fade image 1 into image 2 and the zoom into image 2. But I cannot seem to get that to work
Yes Fading between all images is what i want to achieve but I want to zoom in on the 2nd, 4th and 6th. after zooming it should fade to the next image. Thanks for the information I will try to incorporate that into the code
I think you should study the examples again and try to adjust to your needs. Maybe split the alpha handling from zoom by adding another parameter to the fade function to be able to be separated.
The rest is only to put in the required img indexes for your requirements.
I’m trying to do something just like this and Chrisir’s solution is just what I’ve been trying to do. I added a datapath to a specific directory
File file = new File(dataPath("imagesA/"));
and then get NullPointerException and
Could not load .DS_Store, make sure it ends with a supported extension (JPG, jpg, tiff, bmp, BMP, gif, GIF, WBMP, png, PNG, JPEG, tif, TIF, TIFF, jpeg, wbmp)
The file "8.png" is missing or inaccessible, make sure the URL is valid or that the file has been added to your sketch and is readable.
The file "9.png" is missing or inaccessible, make sure the URL is valid or that the file has been added to your sketch and is readable.
The file "14.png" is missing or inaccessible, make sure the URL is valid or that the file has been added to your sketch and is readable.
etc
etc
The sketch is clearly finding my images. Does this not then imply that the “URL is valid”, and that the file has been added to the sketch. Does this indicate then that my images are not readable? Why would this be the case? I’m doing something very wrong…Thanks for any advice…
How to rule out DS store file.
When looping over the files you can use if(…) to check if it’s a file (ending must be .jpg or .png, use substring(), see reference for String)
