Question

我正在“处理”中创建雪花模拟，但是我不确定如何对图像执行多个转换，因为您似乎只能执行一次。

class Snowflake{
  float imgWidth;
  float imgHeight;
  PVector pos;
  PVector vel;
  final float firstXPos;

  float a = 0.0;
  float angularVel = 0.01;

  float x;
  float amp;
  float period;

  Snowflake(float xWidth, float yHeight){
    imgWidth = xWidth;
    imgHeight = yHeight;
    pos = new PVector(random(width), 0);
    vel = new PVector(0,1);
    firstXPos = this.pos.x;
  }
  void descend(){
    amp = 75;  
    period = 200;

    x = amp * sin((frameCount/period) * TWO_PI);

这是我尝试旋转图像并来回摆动的地方。

    pushMatrix();
    translate(firstXPos,this.pos.y);
    image(snowflakeImg, x, this.pos.y, imgWidth, imgHeight);
    popMatrix();

    //creating a line for oscillation reference
    //translate(firstXPos, this.pos.y);
    //stroke(255);
    //line(0,0,x,y);

}
  void update(){
    pos.add(vel);
    a += angularVel;
  }

}

这是我的草图，只是加载资产并设置草图

PImage snowflakeImg;
Snowflake snowFlake;

void setup() {
  imageMode(CENTER);
  snowflakeImg = loadImage("snowflake.png", "png");
  snowFlake = new Snowflake(25, 25);
  size(800,600);
}

void draw(){
  background(0);
  snowFlake.descend();
  snowFlake.update();  
}

Answer 1

您正在创建一个Snowflake实例。您需要创建更多，然后更新每个。

在这种情况下，您应该首先初始化Snowflake对象的数组（在声明变量的顶部）。这是分配99个Snowflake对象的数组的示例：

int numSnowflakes = 99;
Snowflake[] snowflakes = new Snowflake[numSnowflakes];

然后在setup()中，您可以将每个数组元素初始化为新的Snowflake实例：

for(int i = 0 ; i < numSnowflakes; i++){
    snowflakes[i] = new Snowflake(25, 25);
  }

最后在draw()中，您可以循环遍历每个对象，以便它可以descend()和update()：

for(int i = 0 ; i < numSnowflakes; i++){
    snowflakes[i].descend();
    snowflakes[i].update();  
  }

如果您对“处理”中的数组不熟悉，我可以推荐以下资源：

一旦掌握了这一点，您也应该研究ArrayList。

更新为了解决您的评论，您可以使用push / pop矩阵调用来进一步隔离坐标系并围绕其中心旋转图像：

x = amp * sin((frameCount/period) * TWO_PI);
// enter local coordinate system #1
pushMatrix();
// move to flake position
translate(firstXPos,this.pos.y);
  // enter local coordinate system #2
  pushMatrix();
    // move to updated (oscillated) x position
    translate(x, this.pos.y);
    // rotated from translated position (imageMode(CENTER) helps rotate around centre)
    rotate(frameCount * 0.1);
    // render the image at it's final transformation
    image(snowflakeImg,0,0, imgWidth, imgHeight);
  popMatrix();
popMatrix();

有关更多信息，请查看Coordinate Systems Processing tutorial。

作为参考，这是我对每个薄片以随机宽度使用的测试草图：

PImage snowflakeImg;
Snowflake snowFlake;

int numSnowflakes = 99;
Snowflake[] snowflakes = new Snowflake[numSnowflakes]; 

void setup() {
  imageMode(CENTER);
  //snowflakeImg = loadImage("snowflake.png", "png");
  PGraphics snowflakeG = createGraphics(25,25);
  snowflakeG.beginDraw();
  snowflakeG.rectMode(CENTER);
  snowflakeG.rect(0,0,25,25);
  snowflakeG.endDraw();
  snowflakeImg = snowflakeG;

  for(int i = 0 ; i < numSnowflakes; i++){
    snowflakes[i] = new Snowflake(25, 25);
  }

  size(800,600);
}

void draw(){
  background(0);
  for(int i = 0 ; i < numSnowflakes; i++){
    snowflakes[i].descend();
    snowflakes[i].update();  
  }
}
class Snowflake{
  float imgWidth;
  float imgHeight;
  PVector pos;
  PVector vel;
  final float firstXPos;

  float a = 0.0;
  float angularVel = 0.01;

  float x;
  float amp;
  float period;

  Snowflake(float xWidth, float yHeight){
    imgWidth = xWidth;
    imgHeight = yHeight;
    pos = new PVector(random(width), 0);
    vel = new PVector(0,1);
    firstXPos = this.pos.x;
  }
  void descend(){
    amp = 75;  
    period = 200;

    x = amp * sin((frameCount/period) * TWO_PI);
    // enter local coordinate system #1
    pushMatrix();
    // move to flake position
    translate(firstXPos,this.pos.y);
      // enter local coordinate system #2
      pushMatrix();
        // move to updated (oscillated) x position
        translate(x, this.pos.y);
        // rotated from translated position (imageMode(CENTER) helps rotate around centre)
        rotate(frameCount * 0.1);
        // render the image at it's final transformation
        image(snowflakeImg,0,0, imgWidth, imgHeight);
      popMatrix();
    popMatrix();

    //creating a line for oscillation reference
    //translate(firstXPos, this.pos.y);
    //stroke(255);
    //line(0,0,x,y);

}
  void update(){
    pos.add(vel);
    a += angularVel;
  }

}

您还应该签出Daniel Shiffman's Snowfall coding challenge。即使是p5.js，也可以在Processing中轻松应用相同的逻辑。

如何在处理中旋转和振荡相同的对象

1 个答案: