处理多个图像

Question

澄清我的最后一个问题：

我想在处理中显示，处理中的许多照片在15秒内逐渐消失，一秒钟的开始时间，所以一次屏幕上大约有15张图像，在各个级别上褪色。

此示例显示15个对象，但它们都开始在一起：

PImage[] imgs = new PImage[42];
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);
  }
}

Answer 1

如果您可以淡入图像，则也可以通过从最大淡出值中减去淡入量（例如反转淡出值）来跨越图像。

在您的情况下，您正在使用色调，因此是0-255的值。
假设tint是您的变量：255 -tint是倒数值。

这是您可以运行的基本草图，可以说明这一点（使用fill（）而不是tint（））：

void draw(){
  
  float fade = map(sin(frameCount * 0.03), -1.0, 1.0, 0, 255);
  
  background(0);
  noStroke();
  // use fade value
  fill(192, 0, 192, fade);
  ellipse(45, 50, 60, 60);
  // invert the fade value (by subtracting it from the max value)
  fill(0, 192, 192, 255 - fade);
  ellipse(60, 50, 60, 60);
  
}

从上一个问题和答案您可以调整代码以使用倒置的色调值来交叉表。捕获是，您需要存储对先前图像的引用，以将倒置的色调应用于：

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, 3.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;
  
  PImage previousImage;
  float previousX, previousY;

  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();
    // if there is a previous image, cross fade it
    float tintAlpha = tintFromFrameIndex();
    if(previousImage != null){
      // invert tint -> max(255) - value
      tint(255, 255 - tintAlpha);
      image(previousImage, previousX, previousY);
    }
    // render current random image (on top of the previous one, if any)
    tint(255, tintAlpha);
    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){
      // update previous image before generating another random image
      previousImage = imgs[randomImageIndex];
      previousY = randomX;
      previousY = randomY;
      
      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);
  }
  
}

上面的Skeetch可能不是100％准确的（因为我没有完全获得随机化逻辑），但希望它说明了机制交叉的。