描画イメージtwitching in処理

Question

このスケッチでは、オブジェクトのリストを水平に描画します。各オブジェクトのx位置は、左のオブジェクトに依存します。また、オブジェクトが画面上にないときは描画されません。しかし、私が動くとき、オブジェクトはつまらない。私は本当に理由を知らないのですが、処理の負荷イメージに少し時間がかかり、わずかな遅延が生じることがありますか？私はrectangle（rect（））を描画するだけでこれをテストしましたが、問題は発生しません。

以下同じアルゴリズムを使用して、インターネットからロードされた画像を描画するコードです。（それは別のウェブサイトから画像を取得しているので、ロードするためにスケッチのためにしばらく時間がかかる場合があります）を実行した後、左と右の矢印キーを使用して左右に移動します。上下の矢印を使用して移動速度を変更します。それだけで私が持っている画像を使用しているため

PImage backgroundImage; 
PFont font; 
int x = 0; 
int xoffset = 0; 
int deltax = 5; 
float scale = 512/30; 
float deltascale = 0.02; 
ArrayList<Object> ObjectList; 

class Object { 
    String name; 
    float diameter; 
    String unit; 
    String sprite; 
    PImage img; 
    int wid; 
    int hei; 
    int xpos; 

    Object(String Oname, float Odiameter, String Ounit, String Oimg) { 
    name = Oname; 
    diameter = Odiameter; 
    unit = Ounit; 
    img = loadImage(Oimg); 
    sprite = Oimg; 
    //img = loadImage(Oimg); 
    wid = img.width; 
    hei = img.height; 
    } 
} 

void setup() { 
    size(1500, 800); 
    frameRate(200); 
    fill(255,255,255); 
    textSize(32); 
    textAlign(CENTER, CENTER); 
    text("Images are loading (this may take a while)",700,400); 
    ObjectList = new ArrayList(); 
    readObjects(); 
} 

void addObject(String Aname, float Adiameter, String Aunit, String Aimg) { 
    ObjectList.add(new Object(Aname, Adiameter, Aunit, Aimg)); 
} 

void readObjects() { 
    addObject("RED", 30, "m", "https://s-media-cache-ak0.pinimg.com/736x/8f/1b/cc/8f1bcc72c81d1e9370597f7239ee476a.jpg"); 
    //addObject("ORANGE", 60, "m", "http://6iee.com/data/uploads/36/489075.jpg"); 
    addObject("YELLOW", 70, "m", "https://i.stack.imgur.com/aez1V.jpg"); 
    addObject("GREEN", 100, "m", "http://space-facts.com/wp-content/uploads/mars.jpg"); 
    addObject("PURPLE", 105, "m", "http://space-facts.com/wp-content/uploads/jupiter.png"); 
    addObject("PINK", 110, "m", "https://vignette1.wikia.nocookie.net/starwars/images/4/4a/Alderaan.jpg"); 
    addObject("BROWN", 150, "m", "https://cdn.pixabay.com/photo/2013/07/12/16/33/venus-151142_960_720.png"); 
    addObject("GRAY", 180, "m", "http://www.lpi.usra.edu/lpi_40th/images/1989/neptune.jpg"); 
    //addObject("WHITE", 200, "m", "http://www.clipartkid.com/images/19/log-in-sign-up-upload-clipart-Dpr48a-clipart.png"); 
    addObject("INDIGO", 300, "m", "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Sun_in_February.jpg/155px-Sun_in_February.jpg"); 
    addObject("SKYBLUE", 301, "m", "https://upload.wikimedia.org/wikipedia/commons/e/ea/Uranus_(Edited).jpg"); 
    addObject("BLUE", 1000, "m", "https://vignette2.wikia.nocookie.net/heman/images/3/36/Earth.jpg"); 
} 




void draw() { 

    fill(0,0,0); 
    rect(0, 0, 1500, 800); 

    int x = 0 + xoffset; 
    for (Object drawObject : ObjectList) { 
    float dia = drawObject.diameter; 

    if (x+drawObject.img.width >= 0 && x <= 1500) { 


     //checks if image is too small to be drawn 
     int drawWidth = int(scale * dia); 
     int drawHeight = int(drawWidth * drawObject.hei/drawObject.wid); 
     if (drawWidth > 0 && drawHeight > 0) { 
     drawObject.img.resize(drawWidth, drawHeight); 
     image(drawObject.img, x, 400-(drawObject.img.height/2)); 
     //calculates font size relative to object's current size 
     int textSize; 
     //checks if the name or diameter is longer, then uses the longer one for calculation 
     fill(255,255,255); 
     if (drawObject.name.length() < str(drawObject.diameter).length()) { 
      textSize = int(drawObject.img.width/str(drawObject.diameter).length()); 
     } else { 
      textSize = int(drawObject.img.width/drawObject.name.length()); 
     } 
     if (textSize > 0) { 
      textSize(textSize); 
      float texty = 418+(drawObject.img.height/2); 
      if (texty < (418+(drawObject.img.height/2))) { 
      texty = 418; 
      } 
      text(drawObject.name, x+(drawObject.img.width/2), texty); 
      text(drawObject.diameter+drawObject.unit, x+(drawObject.img.width/2), texty+textSize); 
     } 
     } 
     drawObject.xpos = x; 
     x += (drawObject.img.width*0.08 + drawObject.img.width); 
    } 
    //display deltax 
    textSize(32); 
    text(str(deltax), 1450, 10); 
    text(str(deltascale), 1450, 50); 

    println(str(scale)); 
    } 
} 

void mouseWheel(MouseEvent event) { 
    float e = event.getCount(); 
    if (e < 0) { 
    scale *= (1 + deltascale); 
    } else if (e > 0) { 
    scale *= (1 - deltascale) ; 
    } 
} 

void keyPressed() { 
    if (key == CODED) { 
    if (keyCode == LEFT) { 
     xoffset += deltax; 
    } else if (keyCode == RIGHT) { 
     xoffset -= deltax; 
    } else if (keyCode == UP) { 
     deltax += 5; 
    } else if (keyCode == DOWN) { 
     deltax -= 5; 
    } 
    } 
    if (key == 'r') { 
    //reloadObjects(); 
    } else if (key == 'q') { 
    deltascale += 0.02; 
    } else if (key == 'a') { 
    deltascale -= 0.02; 
    } 
    if (deltax < 0) { 
    deltax = 0; 
    } else if (deltascale < 0) { 
    deltascale = 0; 
    } 
} 

次元のコードは動作しません。

The original code

私は誰かがこのバグで私を助け、または私のアルゴリズムを向上させることができます願っています。 編集：コードが検証可能になり、問題が発生しました

Answer 1

さて、画像の1つが画面の左端から外れると、画像がジャンプすることに気がつきました。それぞれの画像がオフスクリーンになるにつれて、x位置が異なるように計算されるようです。 if (x+drawObject.img.width >= 0 && x <= 1500)テストを取り除く（一時的にコメントアウトしてください）、コードはifの内部に保管してください。 （ケビン・ワークマンが言ったように）あなたが時間をかけて低品質につながる画像データを、リサンプリングされimg.resize()呼び出すとき

• 間違い
• を独自のオブジェクトクラスを作成しないでください：

  いくつかのポイントが

  。 image()関数にはwidth, heightパラメータを使用する方が良いでしょう（またはscale()変換関数を使用しますが、それはもっと紛らわしいかもしれません）。ドローコードの残りの部分にimg.width/heightの代わりにdrawWidth/Heightを使用してください。
• あなたは、画像を中央だけではなく、自分で数学をすることのimageMode(CENTER)を使用する場合 - あなたは「マジックナンバー」400
• は、画面サイズに生の数値を使用しないようにしてくださいを使用しているように見える、特に以来 - 代わりにwidth & heightグローバルを使用してください。画面サイズを変更すると、あなたの生活が楽になります。