如何向此代码添加幻灯片显示功能？

Question

[大家好，我是新来的处理人员，因此我想尝试一下，我找到了此代码https://www.openprocessing.org/sketch/437870，并试图找到一种方法可以添加多个图像。这样，当我更改mouseWheel（）时，就可以了。我也找到了幻灯片显示的其他代码https://www.openprocessing.org/sketch/48114/#，但我不知道如何将它们合并在一起。如果您能帮助我，我将非常高兴。

Answer 1

我不精通CSS，所以不确定您作为程序员的技能水平，但是您提供的示例适用于类，因此我们将继续进行。这是我们将得到的结果：

首先，我们必须解决问题，然后我们才能对其进行编码。这就是我应该怎么做：

1. 创建一个类以保留像素化图像数据。
2. 使用所需的所有图像初始化程序。
3. 使draw()循环适应新的体系结构。
4. 创建循环图像的方法。

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

---

创建一个类以保留像素化图像数据

该课程将需要以下功能：

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

这是我们将如何完成此操作：

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();
}

快完成了！

---

创建循环图像的方法

我们需要一种循环浏览图像的方法。可能是单击（但吸引子使它变得不那么有趣）了，就像您说的那样与鼠标滚轮链接，与键或类似的东西链接。因为它简单明了，所以我们将使用空格键：

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

很简单，对吧？如果您继续进行，那么现在应该已经有了一个可以运行的程序。尝试一下！别忘了包括示例附带的2类（我在这里复制代码，以防日后删除源代码或类似的东西，但请注意，我对此代码进行了零更改）：] >

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);
  }
}
玩得开心！