动画图像,但图像不动

时间:2016-01-10 10:29:26

标签: arrays image jquery-animate processing

所以这是我的总代码所以我从flickr中获取一个图像将它存储在一个数组中,然后在绘制中循环覆盖这些图像。然后我希望他们动画到100,100点。请参阅我的评论以获得更详细的解释。

int imageIndex;
XML xml; 
String tag_mode = "all";
String words[];
PImage[] displayImages;
int amount = 500;
int counter = 0;
PrintWriter output;
int j = 0;
int x =50;
int y = 50;
String labelNaam = "Medium";

void setup() {
  size(500, 500);
  String lines[] = loadStrings("text.txt");
  words = split(lines[0], " ");
  displayImages = new PImage[amount];
  output = createWriter("positions.txt"); 


  for (int k = 0; k<words.length; k++) { 

    int randomX = int(random(2));
    if (randomX == 1) {
       x = displayWidth;
    } else {
       x = -500;
    }
    int randomX2 = int(random(2, 4));
    if (randomX2 == 2) {
       y = displayHeight;
    } else {
       y = -500;
    }

    String query = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=MY_API_KEY&tags="+ words[k] + "&sort=relevance&extras=url_o&tag_mode="+ tag_mode +"format=rest";
    xml = loadXML(query);

    XML[] children = xml.getChildren("photos");
    if (children.length > 0) {
        XML[] childPhoto = children[0].getChildren("photo");
  //    println(childPhoto);

        if (childPhoto.length > 0) {
            for (int i = 0; i < 1; i++) {
               String id = childPhoto[i].getString("id");
               String title = childPhoto[i].getString("title");
               String user = childPhoto[i].getString("owner");
               String url = "https://www.flickr.com/photos/"+user+"/"+id;

               String query2 ="https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=MY_APIKEY&photo_id="+id+"&format=rest";
               xml= loadXML(query2);
               XML[] children2 = xml.getChildren("sizes");

                  if (children2.length > 0) {
                     XML[] childSize2 = children2[0].getChildren("size");
                     if (childSize2.length >0) {
                         println(counter);
                         if (counter <= words.length) {
                              String labelNaam = "Medium";
                              String label = childSize2[5].getString("label");
                              String source = childSize2[5].getString("source");  
                              displayImages[counter] = loadImage(source, "jpg");
                              counter++;
                              }
                           }
                       }
                  }
             }
       }
   }

   textAlign(CENTER, CENTER);
   smooth();
}

void draw() {
  if (j > words.length-1) {
      j = 0;
  }

  if (displayImages[j] != null) {

     println(x + "|||||"+ y);
     image(displayImages[j], x, y);
     j++;
  }
  if (x < 100) {
      x+=100;
  } else {
      x-=100;
  }

  if (y < 100) {
     y+=100;
  } else {
     y-=100;
  }
  delay(1000);
}

1 个答案:

答案 0 :(得分:0)

每次调用draw() 时,您都会将图像的位置设置在窗口界限之外。然后,您将图像移动10个像素。但是接下来你只是将图像移回到窗外的一个位置,所以增量运动并没有真正做任何事情。

相反,您应该只在草图的开头初始化图像的位置一次

int x;
int y; 
PImage image;
int j =0;
int amount = 500;

void setup() {
  size(500, 500);
  image = loadImage("cat1.jpg");

  int randomX = int(random(2));
  if (randomX == 1) {
    x = width + 500;
  } else {
    x = -500;
  }
  int randomX2 = int(random(2, 4));
  if (randomX2 == 2) {
    y = height + 500;
  } else {
    y = -500;
  }
}

void draw() {

  background(255);

  if (x < 100) {
    x+=10;
  } else {
    x-=10;
  }
  if (y < 100) {
    y+=10;
  } else {
    y-=10;
  }

  println(x + ", " + y);

  image(image, x, y, 25, 25);
}