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

大家好，我是处理方面的新手，所以我正在尝试玩，我找到了这段代码，我正在尝试找到一种方法，如何添加多个图像图像更改。我也找到了幻灯片放映的其他代码，但我不知道如何将它们合并在一起。如果您能帮助我，我将非常高兴。

我不精通CSS，因此我不确定您作为程序员的技能水平，但您提供的示例是与类一起工作的，因此我们将继续。下面是我们将得到的结果：

首先，我们必须解决这个问题，然后我们才能把它编码通过。我想说的是我们应该如何进行：

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

使用所需的所有图像初始化程序

使

draw（）

循环适应新的体系结构

创建循环图像的方法

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

---

创建一个类以保留像素化图像数据 该类将需要以下功能：

• 粒子阵列列表
• 加载图像并将其转换为粒子的方法
• 渲染方法

以下是我们将如何实现这一目标：

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（）

方法用于在程序主循环开始之前初始化。我们将在这里加载图像：

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类（我在这里复制代码，以防将来源代码被删除或类似的情况，但请注意，我对此代码做了零更改）：

类粒子{
PVector位置；
PVector-vel；
PVector-acc；
PVector目标；
彩色像素；
整数质量；
浮动最大值；
浮动最大力；
粒子（整数x，整数y，颜色inputColor）{
pos=新的PVector（x，y）；
目标=新的PVector（x，y）；
vel=新的PVector（0,0）；
acc=新的PVector（0,0）；
像素颜色=输入颜色；
质量=1；
maxVel=20；
最大力=1.5；
}
无效应用力（PVector力）{
acc.add（部队）；
}
无效到达（）{
所需PVector=PVector.sub（目标，位置）；//从位置指向目标的向量
float d=所需的.mag（）；
//100像素范围内具有任意阻尼的缩放
如果（d<100）{
float m=map（d，0，100，0，maxVel）；
所需的setMag（m）；
}否则{
所需的设定值（最大值）；
}
//转向=所需的负速度
PVector转向=PVector.sub（所需，水平）；
转向。限制（最大力）；//限制到最大转向力
应用力（转向）；
}
无效更新（）{
添加级别（acc）；
水平极限（最大水平）；
位置添加（vel）；
acc.mult（0）；
}
无效显示（）{
填充（像素颜色）；
椭圆（位置x、位置y、像素步长、像素步长）；
}
}
类吸引子{
PVector位置；
浮体；
浮球G；
吸引子（）{
位置=新的PVector（宽度/2，高度/2）；
质量=20；
G=1；
}
PVector吸引（粒子p）{
PVector力=PVector.sub（位置，p.pos）；
float d=力.mag（）；
d=约束（d，2，6）；
force.normalize（）；
浮子强度=（G*质量*p.质量）/（d*d）；
力量（力量）；
返回力；
}
无效更新（）{
位置x=鼠标；
位置y=鼠标；
}
无效显示（）{
填充（255,0,0）；
椭圆（位置x，位置y，16，16）；
}
}

---

玩得开心

你好!！请在您的问题中发布相关代码，因为链接的内容可能会在将来被修改或删除（每个问题也可作为存档供将来参考）。关于您的问题，关键是将图像加载到数组或ArrayList中（我更喜欢），并比较原始代码，以便能够循环遍历它们。你的编程能力如何？你会使用课堂吗？（我在问，所以我不提供一个太复杂而没有用处的答案）对不起，这是我第一次发帖。我还不擅长编程。如果你是指CSS，我知道CSS中的类。非常感谢！我已经想了好几天了。我照你说的做了，它工作得很好你是最棒的@laancelot解释得很好，回答得很透彻（+1）

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

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