Triggering infinite animated objects - arrays

Question

I would like to display, in Processing, one photo fading up and fading down over 15 seconds, with a second photo doing the same one second later, and another, etc, ad infinitum.
This example displays 15 objects, but they all start together:
PImage[] imgs = new PImage[42];
int Timer;
Pic[] pics = new Pic[15];
void setup() {
size(1000, 880);
for (int i = 0; i < pics.length; i++) {
pics[i] = new Pic(int(random(0, 29)), random(0, 800), random(0, height));
}
for (int i = 0; i < imgs.length; i++) {
imgs[i] = loadImage(i+".png");
}
}
void draw() {
background(255);
for (int i = 0; i < pics.length; i++) {
pics[i].display();
}
}
class Pic {
float x;
float y;
int num;
int f = 0;
boolean change = true;
Pic(int tempNum, float tempX, float tempY) {
num = tempNum;
x = tempX;
y = tempY;
}
void display() {
imageMode(CENTER);
if (change)f++;
else f--;
if (f==0||f==555)change=!change;
tint(0, 153, 204, f);
image(imgs[num], x, y);
}
}
Thanks!!!

Answer 1

The main issue is you're updating/rendering all images all Pic instances at once. Perhaps you meant to display one at a time (one after the other).
There other sections that raise questions as well:
Timer is never used: it's a good idea to simplify/cleanup code as much as possible
f is used for both the tint alpha (0-255 range) and to fake a delay across multple frames (==555 check)
num is asigned to a random value which means potentially the same pic may be repeated (potentially even consecutively ?) making it hard to notice the effect
I recommend slowing down and breaking the problem down:
fade a single image in and out
determine when a fade in/out cycle is complete
increment a single index (so the next image can fade in and out)
Ideally you want to take the timing (15 seconds into account).
You can work out across how many frames you'd need to fade over 15 seconds. Processing's frameRate property can help with that:
numAlphaSteps = 15 * frameRate;
(e.g. at 60 fps that would be 15 * 60 = 900 frames)
That being said, it takes a few frames for frameRate to "warm up" and become stable. The safer option would be to call frameRate() passing the resired frames per second and reusing that number for the animation
The next step is to map each increment to an alpha value, as it needs to ramp up and back down. You could use a bit of arithmetic.
If you subtract half the number of total fade frames (e.g. 900 / 2 = 450) from each frame number you'd get a value that goes from -half the number of frames to half the number of frames. Here's a minimal sketch you can try out:
int numFrames = 10;
int numFramesHalf = numFrames / 2;
for(int i = 0 ; i < numFrames; i++){
println("frame index", i, "ramp value", i - numFramesHalf);
}
Here's the same, visualised:
background(0);
int numFrames = 10;
int numFramesHalf = numFrames / 2;
for(int i = 0 ; i < numFrames; i++){
int ramp = i - numFramesHalf;
println("frame index", i, "ramp value", ramp);
// visualise numbers
fill(0, 128, 0);
rect(i * 10, 50, 10, map(ramp, 0, 5, 0, 39));
fill(255);
text(i + "\n" + ramp, i * 10, height / 2);
}
(Feel free to change numFrames to 900, 10 is easier to see in console).
If you pass the subtraction result to abs() you'll get positive values:
int numFrames = 10;
int numFramesHalf = numFrames / 2;
for(int i = 0 ; i < numFrames; i++){
println("frame index", i, "ramp value", abs(i - numFramesHalf));
}
and the visualisation:
background(0);
int numFrames = 10;
int numFramesHalf = numFrames / 2;
for(int i = 0 ; i < numFrames; i++){
int ramp = abs(i - numFramesHalf);
println("frame index", i, "ramp value", ramp);
// visualise numbers
fill(0, 128, 0);
rect(i * 10, 0, 10, map(ramp, 0, 5, 0, 39));
fill(255);
text(i + "\n" + ramp, i * 10, height / 2);
}
If you look in Processing Console you should see values that resemble a linear ramp (e.g. large to 0 then back to large).
This is a range that can be easily remapped to a the 0 to 255 range, required for the alpha value, using map(yourValue, inputMinValue, inputMaxValue, outputMinValue, outputMaxValue).
Here's a sketch visualising the tint value going from 0 to 255 and back to 255:
size(255, 255);
int numFrames = 10;
int numFramesHalf = numFrames / 2;
for(int i = 0 ; i <= numFrames; i++){
int frameIndexToTint = abs(i - numFramesHalf);
float tint = map(frameIndexToTint, 0, numFramesHalf, 255, 0);
println("frame index", i, "ramp value", frameIndexToTint, "tint", tint);
rect((width / numFrames) * i, height, 1, -tint);
}
Now with these "ingredients" it should be possible to switch from a for loop draw():
int numFrames = 180;
int numFramesHalf = numFrames / 2;
int frameIndex = 0;
void setup(){
size(255, 255);
}
void draw(){
// increment frame
frameIndex++;
// reset frame
if(frameIndex > numFrames){
frameIndex = 0;
println("fade transition complete");
}
// compute tint
int frameIndexToTint = abs(frameIndex - numFramesHalf);
float tint = map(frameIndexToTint, 0, numFramesHalf, 255, 0);
// visualise tint as background gray
background(tint);
fill(255 - tint);
text(String.format("frameIndex: %d\ntint: %.2f", frameIndex, tint), 10, 15);
}
Notice that using custom index for the transition frame index makes it easy to know when a transition is complete (so it can be reset): this is useful to also increment to the next image:
int numFrames = 180;
int numFramesHalf = numFrames / 2;
int frameIndex = 0;
int imageIndex = 0;
int maxImages = 15;
void setup(){
size(255, 255);
}
void draw(){
// increment frame
frameIndex++;
// reset frame (if larger than transition frames total)
if(frameIndex >= numFrames){
frameIndex = 0;
// increment image index
imageIndex++;
// reset image index (if larger than total images to display)
if(imageIndex >= maxImages){
imageIndex = 0;
}
println("fade transition complete, next image: ", imageIndex);
}
// compute tint
int frameIndexToTint = abs(frameIndex - numFramesHalf);
float tint = map(frameIndexToTint, 0, numFramesHalf, 255, 0);
// visualise tint as background gray
background(tint);
fill(255 - tint);
text(String.format("frameIndex: %d\ntint: %.2f\nimageIndex: %d", frameIndex, tint, imageIndex), 10, 15);
}
These are the main ingredients for your program. You can easily swap the placeholder background drawing with your images:
int numFrames = 180;
int numFramesHalf = numFrames / 2;
int frameIndex = 0;
int imageIndex = 0;
int maxImages = 15;
PImage[] imgs = new PImage[42];
int[] randomImageIndices = new int[maxImages];
void setup(){
size(255, 255);
// load images
for (int i = 0; i < imgs.length; i++) {
imgs[i] = loadImage(i+".png");
}
// pick random images
for (int i = 0; i < maxImages; i++) {
randomImageIndices[i] = int(random(0, 29));
}
}
void draw(){
// increment frame
frameIndex++;
// reset frame (if larger than transition frames total)
if(frameIndex >= numFrames){
frameIndex = 0;
// increment image index
imageIndex++;
// reset image index (if larger than total images to display)
if(imageIndex >= maxImages){
imageIndex = 0;
}
println("fade transition complete, next image: ", imageIndex);
}
// compute tint
int frameIndexToTint = abs(frameIndex - numFramesHalf);
float tint = map(frameIndexToTint, 0, numFramesHalf, 255, 0);
// visualise tint as background gray
background(0);
PImage randomImage =imgs[randomImageIndices[imageIndex]];
tint(255, tint);
image(randomImage, 0, 0);
//debug info
fill(255);
text(String.format("frameIndex: %d\ntint: %.2f\nimageIndex: %d", frameIndex, tint, imageIndex), 10, 15);
}
The x, y position of the image isn't random, but that should be easy to replicated based on how the random image index is used.
Alternatively you can use a single random index and position that get's reset at the end of each transition:
int numFrames = 180;
int numFramesHalf = numFrames / 2;
int frameIndex = 0;
int imageIndex = 0;
int maxImages = 15;
PImage[] imgs = new PImage[42];
int randomImageIndex;
float randomX, randomY;
void setup(){
size(255, 255);
// load images
for (int i = 0; i < imgs.length; i++) {
imgs[i] = loadImage(i+".png");
}
// pick random index
randomImageIndex = int(random(0, 29));
randomX = random(width);
randomY = random(height);
}
void draw(){
// increment frame
frameIndex++;
// reset frame (if larger than transition frames total)
if(frameIndex >= numFrames){
frameIndex = 0;
// increment image index
imageIndex++;
// reset image index (if larger than total images to display)
if(imageIndex >= maxImages){
imageIndex = 0;
}
// reset random values
randomImageIndex = int(random(0, 29));
randomX = random(width);
randomY = random(height);
println("fade transition complete, next image: ", imageIndex);
}
// compute tint
int frameIndexToTint = abs(frameIndex - numFramesHalf);
float tint = map(frameIndexToTint, 0, numFramesHalf, 255, 0);
// visualise tint as background gray
background(0);
PImage randomImage =imgs[randomImageIndex];
tint(255, tint);
image(randomImage, randomX, randomY);
//debug info
fill(255);
text(String.format("frameIndex: %d\ntint: %.2f\nimageIndex: %d", frameIndex, tint, imageIndex), 10, 15);
}
And you can also encapsulate instructions grouped by functionality into functions (removing the redundant imageIndex since we're using a random index):
int numFrames = 180;
int numFramesHalf = numFrames / 2;
int frameIndex = 0;
int imageIndex = 0;
int maxImages = 15;
PImage[] imgs = new PImage[42];
int randomImageIndex;
float randomX, randomY;
void setup(){
size(255, 255);
// load images
for (int i = 0; i < imgs.length; i++) {
imgs[i] = loadImage(i+".png");
}
// pick random index
randomizeImage();
}
void draw(){
updateFrameAndImageIndices();
background(0);
PImage randomImage =imgs[randomImageIndex];
tint(255, tintFromFrameIndex());
image(randomImage, randomX, randomY);
}
float tintFromFrameIndex(){
int frameIndexToTint = abs(frameIndex - numFramesHalf);
return map(frameIndexToTint, 0, numFramesHalf, 255, 0);
}
void updateFrameAndImageIndices(){
// increment frame
frameIndex++;
// reset frame (if larger than transition frames total)
if(frameIndex >= numFrames){
frameIndex = 0;
// increment image index
imageIndex++;
// reset image index (if larger than total images to display)
if(imageIndex >= maxImages){
imageIndex = 0;
}
// reset random values
randomizeImage();
println("fade transition complete, next image: ", imageIndex);
}
}
void randomizeImage(){
randomImageIndex = int(random(0, 29));
randomX = random(width);
randomY = random(height);
}
If the goal of this coding excecise is to practice using classes, you can easily further encapsulate the image fade related functions and variables into a class:
PImage[] imgs = new PImage[42];
ImagesFader fader;
void setup(){
size(255, 255);
frameRate(60);
// load images
for (int i = 0; i < imgs.length; i++) {
imgs[i] = loadImage(i+".png");
}
// setup fader instance
// constructor args: PImage[] images, float transitionDurationSeconds, int frameRate
// use imgs as the images array, transition in and out within 1s per image at 60 frames per second
fader = new ImagesFader(imgs, 1.0, 60);
}
void draw(){
background(0);
fader.draw();
}
class ImagesFader{
int numFrames;
int numFramesHalf;
int frameIndex = 0;
PImage[] images;
int maxImages = 15;
int randomImageIndex;
float randomX, randomY;
ImagesFader(PImage[] images, float transitionDurationSeconds, int frameRate){
numFrames = (int)(frameRate * transitionDurationSeconds);
numFramesHalf = numFrames / 2;
println(numFrames);
this.images = images;
// safety check: ensure maxImage index isn't larger than the total number of images
maxImages = min(maxImages, images.length - 1);
// pick random index
randomizeImage();
}
void draw(){
updateFrameAndImageIndices();
PImage randomImage = imgs[randomImageIndex];
// isolate drawing style (so only the image fades, not everything in the sketch)
pushStyle();
tint(255, tintFromFrameIndex());
image(randomImage, randomX, randomY);
popStyle();
}
float tintFromFrameIndex(){
int frameIndexToTint = abs(frameIndex - numFramesHalf);
return map(frameIndexToTint, 0, numFramesHalf, 255, 0);
}
void updateFrameAndImageIndices(){
// increment frame
frameIndex++;
// reset frame (if larger than transition frames total)
if(frameIndex >= numFrames){
frameIndex = 0;
// randomize index and position
randomizeImage();
println("fade transition complete, next image: ", randomImageIndex);
}
}
void randomizeImage(){
randomImageIndex = int(random(0, 29));
randomX = random(width);
randomY = random(height);
}
}
If you're comfortable using Processing libraries, you can achieve the same with a tweening library like Ani:
import de.looksgood.ani.*;
import de.looksgood.ani.easing.*;
PImage[] imgs = new PImage[42];
float tintValue;
int randomImageIndex;
float randomX, randomY;
AniSequence fadeInOut;
void setup(){
size(255, 255);
frameRate(60);
// load images
for (int i = 0; i < imgs.length; i++) {
imgs[i] = loadImage(i+".png");
}
randomizeImage();
// Ani.init() must be called always first!
Ani.init(this);
// create a sequence
// dont forget to call beginSequence() and endSequence()
fadeInOut = new AniSequence(this);
fadeInOut.beginSequence();
// fade in
fadeInOut.add(Ani.to(this, 0.5, "tintValue", 255));
// fade out (and call sequenceEnd() when on completion)
fadeInOut.add(Ani.to(this, 0.5, "tintValue", 0, Ani.QUAD_OUT, "onEnd:sequenceEnd"));
fadeInOut.endSequence();
// start the whole sequence
fadeInOut.start();
}
void draw(){
background(0);
tint(255, tintValue);
image(imgs[randomImageIndex], randomX, randomY);
}
void sequenceEnd() {
randomizeImage();
fadeInOut.start();
}
void randomizeImage(){
randomImageIndex = int(random(0, 29));
randomX = random(width);
randomY = random(height);
}
Update Based on your comment regarding loading images, can you try this sketch ?
void setup(){
size(1000, 500);
textAlign(CENTER);
PImage[] images = loadImages("Data","png");
int w = 100;
int h = 100;
for(int i = 0; i < images.length; i++){
float x = i % 10 * w;
float y = i / 10 * h;
image(images[i], x, y, w, h);
text("["+i+"]",x + w / 2, y + h / 2);
}
}
PImage[] loadImages(String dir, String extension){
String[] files = listPaths(dir, "files", "extension=" + extension);
int numFiles = files.length;
PImage[] images = new PImage[numFiles];
for(int i = 0 ; i < numFiles; i++){
images[i] = loadImage(files[i]);
}
return images;
}
It should load images in the "Data" folder (as the comment mentions, not "data" which is commonly used in Processing). If "Data" is a typo, fix the path first (as Processing is key sensitive ("Data" != "data")). If the 50 images load correctly, it should display in a 10x5 grid at 100x100 px each (e.g. disregarding each image's aspect ratio). This should help test if the images load correctly. (Again, breaking the problem down to individual steps).