如何在此代码中添加幻灯片放映功能？

Question

大家好我是处理新手，所以我想尝试一下，我发现这段代码 https://www.openprocessing.org/sketch/437870 and I am trying to find a way how can I add multiple images.So that when I do mouseWheel() image changes .I found this other code https://www.openprocessing.org/sketch/48114/# 也用于幻灯片放映，但我不知道如何将它们合并在一起。我会很高兴如果你能帮助我。

Answer 1

我不精通 CSS，所以我不确定你作为程序员的技能水平，但你提供的示例是使用 class，所以我们会这样继续。这是我们将得到的结果：

首先要解决问题，然后才能编码通过。我认为我们应该如何进行：

创建一个 class 来保存像素化图像数据。
用您想要的所有图像初始化程序。
使 draw() 循环适应新架构。
创建循环图像的方法。

我将主要回收现有代码，但以一种让我们得到你想要的东西的方式。

创建 class 以保留像素化图像数据

此 class 将需要以下功能：

粒子数组列表。
一种加载图像并将其转换为粒子的方法。
一种渲染方法。

以下是我们将如何完成此任务：

class PixelizedImage {
  // Here's an arrayList for the Particles
  ArrayList<Particle> particles = new ArrayList<Particle>();

  // the constructor will transform the image in a particle Array, no need to have a special method
  public PixelizedImage(PImage img) {
    img.loadPixels();

    for (int y = 0; y < img.height; y++) {
      for (int x = 0; x < img.width; x++) {
        int loc = x + y * img.width;
        color pixelColor = img.pixels[loc];

        if (alpha(pixelColor) == 0) { 
          continue;
        }
        if (loc % 8 > 0) { 
          continue;
        }
        if (y % 8 != 0) {
          continue;
        }

        Particle pixel = new Particle(x+(width-img.width)/2, y+(height-img.height)/2, pixelColor);
        particles.add(pixel);
        pixel.display();
      }
    }
  }

  // Render() will draw the pixelized image
  public void Render() {
    for (Particle particle : particles) {
      if (mousePressed) {
        PVector force = a.attract(particle);
        a.update();
        particle.applyForce(force);
      } else {
        particle.arrive();
      }
      particle.update();
      particle.display();
    }
  }
}

对于初学者来说，这可能看起来有些复杂，但我向您保证，我主要回收了您链接到的代码。这里需要技巧的部分是知道要回收什么以及在哪里使用它，一旦你掌握了阅读代码的窍门，你就可以很容易地做到这一点。

用你想要的所有图像初始化程序

当然，setup() 和 draw() 等方法以及全局变量必须更新以遵循新架构。

首先，全局变量：我们不需要全部。这是我们现在需要的：

// an arrayList of PixelizedImage to keep them at hand
ArrayList<PixelizedImage> images = new ArrayList<PixelizedImage>();
// the index of the image currently displayed
int currentDisplay = 0;
// variables needed by the surviving original code
Attractor a;
int pixelStep = 5;

setup()方法用于在程序的主循环开始之前进行初始化。这就是我们加载图像的地方：

void setup() {
  // size of the window and attractor for the original code
  size(800, 600); 
  a = new Attractor();

  // initializing all the images and storing them in the 'images' ArrayList
  for (String s : new String[] {"1.png", "2.png", "3.png", "4.png", "5.png", "6.png"}) {
    images.add(new PixelizedImage(loadImage(s)));
  }
}

我们现在准备好实际展示和循环浏览这些图像！

使 `draw()` 循环适应新架构

draw() 循环运行大约每秒 60 次（除非你改变 FPS 或者你的机器很慢）。它可以做任何你想做的事，在我们的例子中它只会绘制图像，所以它足够短：

void draw() {
  background(0);
  noStroke();

  // knowing the index of the current image, we fish it out of the ArrayList and draw it
  images.get(currentDisplay).Render();
}

快完成了！

创建循环图像的方法

我们需要一种循环浏览图像的方法。它可能是点击（但吸引器使它变得不那么有趣），如你所说链接到鼠标滚轮，链接到一个键或类似的东西。因为它简单明了，我们将使用 space 栏：

void keyPressed() {
  // if the key actually being pressed makes a ' ' character:
  if (key == ' ') {
    currentDisplay++;
    if (currentDisplay >= images.size()) {
      currentDisplay = 0;
    }
  }
}

很简单吧？如果你跟进了，你现在应该有一个工作程序。尝试一下！不要忘记包含您的示例附带的 2 class （我正在此处复制代码以防源被删除或将来发生类似的事情，但请注意我对此进行了零更改代码):

class Particle {
  PVector pos;
  PVector vel;
  PVector acc;
  PVector target;
  color pixelColor;
  int mass;
  float maxVel;
  float maxforce;

  Particle(int x, int y, color inputColor) {
    pos = new PVector(x, y);
    target = new PVector(x, y);
    vel = new PVector(0, 0);
    acc = new PVector(0, 0);
    pixelColor = inputColor;
    mass = 1;
    maxVel = 20;
    maxforce = 1.5;
  }

  void applyForce(PVector force) {
    acc.add(force);
  }

  void arrive() {
    PVector desired = PVector.sub(target, pos);  // A vector pointing from the position to the target
    float d = desired.mag();
    // Scale with arbitrary damping within 100 pixels
    if (d < 100) {
      float m = map(d, 0, 100, 0, maxVel);
      desired.setMag(m);
    } else {
      desired.setMag(maxVel);
    }

    // Steering = Desired minus Velocity
    PVector steer = PVector.sub(desired, vel);
    steer.limit(maxforce);  // Limit to maximum steering force
    applyForce(steer);
  }

  void update() {
    vel.add(acc);
    vel.limit(maxVel);
    pos.add(vel);
    acc.mult(0);
  }

  void display() {
    fill(pixelColor);
    ellipse(pos.x, pos.y, pixelStep, pixelStep);
  }
}

class Attractor {
  PVector position; 
  float mass;
  float G;

  Attractor() {
    position = new PVector(width/2, height/2);
    mass = 20;
    G = 1;
  }

  PVector attract(Particle p) {
    PVector force = PVector.sub(position, p.pos);
    float d = force.mag();
    d = constrain(d, 2, 6);
    force.normalize();
    float strength = (G * mass * p.mass) / (d * d);
    force.mult(strength);      
    return force;
  }

  void update() {
    position.x = mouseX;
    position.y = mouseY;
  }

  void display() {
    fill(255, 0, 0);
    ellipse(position.x, position.y, 16, 16);
  }
}

玩得开心！

如何在此代码中添加幻灯片放映功能？

How can I add slide show feature to this code?

processing

slideshow

创建 class 以保留像素化图像数据

用你想要的所有图像初始化程序

使 `draw()` 循环适应新架构

创建循环图像的方法

如何在此代码中添加幻灯片放映功能？

How can I add slide show feature to this code?

processing

slideshow

创建 class 以保留像素化图像数据

用你想要的所有图像初始化程序

使 draw() 循环适应新架构

创建循环图像的方法

使 `draw()` 循环适应新架构