請使用「Hugo Elias」算法生成波浪！ Java

Question

在我最近的項目中，我似乎碰到了一堵牆，涉及圖像上的波紋/波紋。我製作了一個可以在完美的網格上使用基本顏色的作品;哎呀，我甚至根據波浪的高度爲顏色添加了陰影。

但是，我的總體目標是使這種效果在圖像上工作，就像您會看到here一樣。我正在使用一種算法，人們稱之爲Hugo Elias方法（儘管idk如果他真的想出了這個設計）。他的教程可以找到here！

當遵循該教程時，我發現他的僞代碼難以遵循。我的意思是大多數情況下這個概念是有意義的，直到我在圖像上點擊高度圖部分。問題是x和y偏移量會拋出ArrayIndexOutOfBoundsException，因爲他將偏移量添加到相應的x或y。如果波形太大（即在我的情況下爲512），則會引發錯誤;但是，如果它太小，你看不到它。

任何想法或修復我的企圖實現他的算法將使我的一天。謝謝！

所以我不能真正做出一個小的可編譯版本並顯示問題，但我會給出我在算法中使用的三種方法。另請注意，buffer1和buffer2是wave（current和previous）的高度貼圖，imgArray是一個由int [img.getWidth（）* img.getHeight（）]表示的bufferedImage，其中包含ARGB值。

反正在這裏你去：

public class WaveRippleAlgorithmOnImage extends JPanel implements Runnable, MouseListener, MouseMotionListener 
{ 
    private int[] buffer1; 
    private int[] buffer2; 

    private int[] imgArray; 
    private int[] movedImgArray; 

    private static double dampening = 0.96; 
    private BufferedImage img; 

    public WaveRippleAlgorithmOnImage(BufferedImage img) 
    { 
     this.img = img; 

     imgArray = new int[img.getHeight()*img.getWidth()]; 
     movedImgArray = new int[img.getHeight()*img.getWidth()]; 

     imgArray = img.getRGB(0, 0, 
       img.getWidth(), img.getHeight(), 
       null, 0, img.getWidth()); 

     //OLD CODE 
     /*for(int y = 0; y < img.getHeight(); y++) 
     { 
      for(int x = 0; x < img.getWidth(); x++) 
      { 
       imgArray[y][x] = temp[0 + (y-0)*img.getWidth() + (x-0)]; 
      } 
     }*/ 

     buffer1 = new int[img.getHeight()*img.getWidth()]; 
     buffer2 = new int[img.getHeight()*img.getWidth()]; 

     buffer1[buffer1.length/2] = (img.getWidth() <= img.getHeight() ? img.getWidth()/3 : img.getHeight()/3); 
     //buffer1[25][25] = 10; 

     back = new BufferedImage(img.getWidth(), img.getHeight(), BufferedImage.TYPE_INT_ARGB); 

     this.addMouseListener(this); 
     this.addMouseMotionListener(this); 

    } 

    //<editor-fold defaultstate="collapsed" desc="Used Methods"> 
    @Override 
    public void run() 
    { 
     while(true) 
     { 
      this.update(); 
      this.repaint(); 
      this.swap(); 
     } 
    } 

    //Called from Thread to update movedImgArray prior to being drawn. 
    private void update() 
    { 
     //This is my attempt of trying to convert his code to java. 
     for (int i=img.getWidth(); i < imgArray.length - 1; i++) 
     { 
      if(i % img.getWidth() == 0 || i >= imgArray.length - img.getWidth()) 
       continue; 

      buffer2[i] = (
         ((buffer1[i-1]+ 
          buffer1[i+1]+ 
          buffer1[i-img.getWidth()]+ 
          buffer1[i+img.getWidth()]) >> 1)) - buffer2[i]; 

      buffer2[i] -= (buffer2[i] >> 5); 
     } 

     //Still my version of his code, because of the int[] instead of int[][]. 
     for (int y = 1; y < img.getHeight() - 2; y++) 
     { 
      for(int x = 1; x < img.getWidth() - 2; x++) 
      { 
       int xOffset = buffer1[((y)*img.getWidth()) + (x-1)] - buffer1[((y)*img.getWidth()) + (x+1)]; 
       int yOffset = buffer1[((y-1)*img.getWidth()) + (x)] - buffer1[((y+1)*img.getWidth()) + (x)]; 

       int shading = xOffset; 

       //Here is where the error occurs (after a click or wave started), because yOffset becomes -512; which in turn gets 
       //multiplied by y... Not good... -_- 
       movedImgArray[(y*img.getWidth()) + x] = imgArray[((y+yOffset)*img.getWidth()) + (x+xOffset)] + shading; 
      } 
     } 

     //This is my OLD code that kidna worked... 
     //I threw in here to show you how I was doing it before I switched to images. 
     /* 
     for(int y = 1; y < img.getHeight() - 1; y++) 
     { 
      for(int x = 1; x < img.getWidth() - 1; x++) 
      { 
       //buffer2[y][x] = ((buffer1[y][x-1] + 
       //buffer1[y][x+1] + 
       //buffer1[y+1][x] + 
       //buffer1[y-1][x])/4) - buffer2[y][x]; 
       buffer2[y][x] = ((buffer1[y][x-1] + 
         buffer1[y][x+1] + 
         buffer1[y+1][x] + 
         buffer1[y-1][x] + 
         buffer1[y + 1][x-1] + 
         buffer1[y + 1][x+1] + 
         buffer1[y - 1][x - 1] + 
         buffer1[y - 1][x + 1])/4) - buffer2[y][x]; 

       buffer2[y][x] = (int)(buffer2[y][x] * dampening); 
      } 
     }*/ 
    } 

    //Swaps buffers 
    private void swap() 
    { 
     int[] temp; 

     temp = buffer2; 
     buffer2 = buffer1; 
     buffer1 = temp; 
    } 

    //This creates a wave upon clicking. It also is where that 512 is coming from. 
    //512 was about right in my OLD code shown above, but helps to cause the Exeception now. 
    @Override 
    public void mouseClicked(MouseEvent e) 
    { 
     if(e.getX() > 0 && e.getY() > 0 && e.getX() < img.getWidth() && e.getY() < img.getHeight()) 
      buffer2[((e.getY())*img.getWidth()) + (e.getX())] = 512; 
    } 

    private BufferedImage back; 
    @Override 
    public void paintComponent(Graphics g) 
    { 
     super.paintComponent(g); 

     back.setRGB(0, 0, img.getWidth(), img.getHeight(), movedImgArray, 0, img.getWidth()); 
     g.drawImage(back, 0, 0, null); 
    } 
} 

所以任何建議或想法，將不勝感激。再次感謝！

P.S.以下是舊代碼工作的兩個圖像。

Answer 1

看着我原來的僞代碼，我假設數組出界錯誤正在發生的事情，當你嘗試查找基於偏移質感。問題的發生是因爲水中的折射使我們能夠看到紋理的外部。

for every pixel (x,y) in the buffer 

    Xoffset = buffer(x-1, y) - buffer(x+1, y) 
    Yoffset = buffer(x, y-1) - buffer(x, y+1) 

    Shading = Xoffset 

    t = texture(x+Xoffset, y+Yoffset) // Array out of bounds? 

    p = t + Shading 

    plot pixel at (x,y) with colour p 

end loop 

解決這個問題的方法很簡單，只需要夾緊紋理座標，或者讓它們換行。此外，如果您發現折射量太多，可以通過稍微移位Xoffset和Yoffset值來降低折射率。

int clamp(int x, int min, int max) 
{ 
    if (x < min) return min; 
    if (x > max) return max; 
    return x; 
} 

int wrap(int x, int min, int max) 
{ 
    while (x<min) 
     x += (1+max-min); 

    while (x>max) 
     x -= (1+max-min); 

    return x; 
} 


for every pixel (x,y) in the buffer 

    Xoffset = buffer(x-1, y) - buffer(x+1, y) 
    Yoffset = buffer(x, y-1) - buffer(x, y+1) 

    Shading = Xoffset 

    Xoffset >>= 1        // Halve the amount of refraction 
    Yoffset >>= 1        // if you want. 

    Xcoordinate = clamp(x+Xoffset, 0, Xmax) // Use clamp() or wrap() here 
    Ycoordinate = clamp(y+Yoffset, 0, Ymax) // 
    t = texture(Xcoordinate, Ycoordinate) 

    p = t + Shading 

    plot pixel at (x,y) with colour p 

end loop