在处理草图中向下移动生成的图像

时间:2014-07-13 00:59:11

标签: processing processing.js

我是Processing的新手,想让下面的草图向下移动图像,而不是向上移动。我尝试在void move()中调整y到y + = speed,这样做但图像不重新加载,它们只做一个循环而屏幕变为空白。

您的帮助将不胜感激: - )

Spot[] sp = new Spot[60];
PImage myImage;
/* @pjs preload="http://mathatelle.appspot.com/imgs/drawing_circle.png"; */

void setup() {
size(800, 400);
imageMode(CENTER);
myImage = loadImage("http://mathatelle.appspot.com/imgs/drawing_circle.png"); //100x100px
for (int i = 0; i < sp.length; i++) {
sp[i] = new Spot(random(width), random(height), random(0.2,1.0), random(0.1,1.0));
}
}

void draw() {
background(0);
for (int i = 0; i < sp.length; i++) {
sp[i].move();
sp[i].display();
}
}

class Spot {
float x, y, diameter, speed; // x座標, y座標, 直径, 速さ

Spot(float _x, float _y, float _diameter, float _speed) {
x = _x;
y = _y;
diameter = _diameter;
speed = _speed;
}

void move() {
speed *= 1.01;
y -= speed;
if (y < - myImage.width*diameter/2) {
x = random(width);
y = height + myImage.width*diameter/2;
speed = random(0.5,3);
}
}

void display() {
pushMatrix();
translate(x, y);
rotate(TWO_PI*diameter);
scale(diameter);
//tint(255, 255, 255, 153);
image(myImage, 0, 0);
popMatrix();
}
}

2 个答案:

答案 0 :(得分:1)

逻辑是已经倒置的,但只是将其反转:)

这里有代码中的注释:

Spot[] sp = new Spot[60];
PImage myImage;
/* @pjs preload="http://mathatelle.appspot.com/imgs/drawing_circle.png"; */

void setup() {
  size(800, 400);
  imageMode(CENTER);
  myImage = loadImage("http://mathatelle.appspot.com/imgs/drawing_circle.png"); //100x100px
  for (int i = 0; i < sp.length; i++) {

    // a little change where spots are created...
    sp[i] = new Spot(random(width), random(-myImage.height, height - 100), random(0.2, 1.0), random(0.1, 1.0));
  }
}

void draw() {
  background(0);
  for (int i = 0; i < sp.length; i++) {
    sp[i].move();
    sp[i].display();
  }
}

class Spot {
  float x, y, diameter, speed; // x座標, y座標, 直径, 速さ

  Spot(float _x, float _y, float _diameter, float _speed) {
    x = _x;
    y = _y;
    diameter = _diameter;
    speed = _speed;
  }

  void move() {
    speed *= 1.01;

    // invert movement direction
    y += speed;

    // also invert the test...
    if (y > height + myImage.width*diameter/2) {
      x = random(width);
      y = height + myImage.width*diameter/2;
      speed = random(0.5, 3);
    }
  }

  void display() {
    pushMatrix();
    translate(x, y);
    rotate(TWO_PI*diameter);
    scale(diameter);
    //tint(255, 255, 255, 153);
    image(myImage, 0, 0);
    popMatrix();
  }
}

答案 1 :(得分:-1)

一位朋友帮助了我,这是我问题的解决方案:-)

Spot[] sp = new Spot[60];
PImage myImage;
/* @pjs preload="http://mathatelle.appspot.com/imgs/drawing_circle.png"; */

void setup() {
size(800, 400);
imageMode(CENTER);
myImage = loadImage("http://mathatelle.appspot.com/imgs/drawing_circle.png"); //100x100px
for (int i = 0; i < sp.length; i++) {

// a little change where spots are created...
sp[i] = new Spot(random(width), random(-myImage.height, height - 100), random(0.2, 1.0),        random(0.1, 1.0));
}
}

void draw() {
background(0);
for (int i = 0; i < sp.length; i++) {
sp[i].move();
sp[i].display();
}
}

class Spot {
float x, y, diameter, speed; // x座標, y座標, 直径, 速さ

Spot(float _x, float _y, float _diameter, float _speed) {
x = _x;
y = _y;
diameter = _diameter;
speed = _speed;
}

void move() {
speed *= 1.01;

y += speed;

// change y = 0 - ...
if (y > height + myImage.width*diameter/2) {
  x = random(width);
  y = 0 - myImage.width*diameter/2;
  speed = random(0.5, 3);
}
}

void display() {
pushMatrix();
translate(x, y);
rotate(TWO_PI*diameter);
scale(diameter);
//tint(255, 255, 255, 153);
image(myImage, 0, 0);
popMatrix();
}
}