在處理過程中動畫處理形狀集合的最簡單方法？

Question

我一直在學習處理，現在感覺相當舒適的繪畫形狀和編輯顏色等。我試圖採取邁出一步的動畫我之前的作品之一，但我似乎繼續跑到死角或我可以'讓團隊協調一致。實質上，我試圖以任何方式在屏幕上移動整個吉他，只要它保持完好無損。如果您有建議，我將不勝感激！

當前代碼如下：

void setup() { 

size(600,600); 

smooth(); 

noLoop(); 

} 

void draw() { 
    //pegs 
    strokeJoin(SQUARE); 
    fill(255,255,255); 
    rect(530,105,20,20); 
    rect(565,70,20,20); 
    rect(473,50,20,20); 
    rect(505,18,20,20); 

    //neck and head 
    strokeWeight(60); 
    strokeCap(SQUARE); 
    strokeJoin(ROUND); 
    stroke(165,42,42); 
    line(490,110,560,40); 
    fill(255,255,255); 
    strokeWeight(45); 
    strokeCap(SQUARE); 
    strokeJoin(ROUND); 
    line(300,295,500,105); 



    //guitar body 
    noStroke(); 
    fill(222,184,135); 
    ellipse(200,400,200,200); 
    ellipse(280,310,150,150); 

    //Sound Hole 
    fill(255,140,0); 
    ellipse(235,360,110,110); 
    fill(0,0,0); 
    ellipse(235,360,100,100); 

    //strings 
    stroke(255,255,255); 
    strokeWeight(3); 
    line(170,390,540,40); 
    line(180,400,550,45); 
    line(195,410,560,50); 
    line(207,420,570,55); 

//string attatchment bottom 
strokeWeight(6); 
strokeCap(SQUARE); 
stroke(165,42,42); 
line(210,425,170,385); 


} 

Answer 1

下面的代碼將動畫的吉他，這樣它會沿着X軸正方向移動。這只是一個例子，讓你知道「動畫」的真實效果：

// this will be used to move the guitar along x 

int alongX = 0; 

void setup() { 

    background(128); 

    size(600, 600); 

    smooth(); 

    //noLoop(); 
} 

void draw() { 
    background(128); 
    //pegs 
    strokeJoin(SQUARE); 
    fill(255, 255, 255); 
    rect(530+alongX, 105, 20, 20); 
    rect(565+alongX, 70, 20, 20); 
    rect(473+alongX, 50, 20, 20); 
    rect(505+alongX, 18, 20, 20); 

    //neck and head 
    strokeWeight(60); 
    strokeCap(SQUARE); 
    strokeJoin(ROUND); 
    stroke(165, 42, 42); 
    line(490+alongX, 110, 560+alongX, 40); 
    fill(255, 255, 255); 
    strokeWeight(45); 
    strokeCap(SQUARE); 
    strokeJoin(ROUND); 
    line(300+alongX, 295, 500+alongX, 105); 



    //guitar body 
    noStroke(); 
    fill(222, 184, 135); 
    ellipse(200+alongX, 400, 200, 200); 
    ellipse(280+alongX, 310, 150, 150); 

    //Sound Hole 
    fill(255, 140, 0); 
    ellipse(235+alongX, 360, 110, 110); 
    fill(0, 0, 0); 
    ellipse(235+alongX, 360, 100, 100); 

    //strings 
    stroke(255, 255, 255); 
    strokeWeight(3); 
    line(170+alongX, 390, 540+alongX, 40); 
    line(180+alongX, 400, 550+alongX, 45); 
    line(195+alongX, 410, 560+alongX, 50); 
    line(207+alongX, 420, 570+alongX, 55); 

    //string attatchment bottom 
    strokeWeight(6); 
    strokeCap(SQUARE); 
    stroke(165, 42, 42); 
    line(210+alongX, 425, 170+alongX, 385); 

    // incrementing alongX to move it along +x, decrement it to move it along -x 
    alongX++; 
} 

這個想法很簡單。動畫基本上是運動的幻覺。對象顯示爲可以移動，但效果可以非常簡單地通過以不同位置在屏幕上繪製和重繪（以特定速度：以特定速度：frameRate）來實現，使得它們看起來好像它們實際上他們不是。

這種效果是有效，你必須在你的草圖某些事物（或任何其他動畫包）：

• 你需要有一個控制對象的位置，使變量 當你想移動的對象，你可以很容易地改變控制位置的變量的值 以這樣一種方式，它會給運動的錯覺 。

• 在這種情況下，您還需要繼續重繪背景。那 是爲什麼我在draw()方法中加入了background(128);行。 如果您對該線條發表評論，您會看到效果與 不同，並且吉他會留下痕跡（也許這就是您想要的內容......稍後會消失的線索，它取決於您！）。

• 您需要在草圖另一個要考慮的是，雖然 rect S和ellipse唯一需要有一個變量 以便它們從左至右移動改變（在此 草圖的情況下） ，line需要同時有x值由您的 變量操縱。

• 在setup()noLoop()是專門設計，所以你可以從 draw()停止其infinite loop或game loop但停藥 draw()意味着沒有動畫效果。例如，您可以讓noLoop()（例如 ）在按下某個按鍵時停止動畫，但您想要也要提供loop()以獲取動畫按 按下某個鍵。這些是你認爲 關於和玩的一些事情和決定。

• 最後，我只是稍微更改了一下草圖，以向您展示動畫可能如何工作。你可以添加大量的東西，使其 真棒。

PS：酷吉他！

UPDATE

越來越舒適，在移動的物體的想法後，我想看看載體，以及它們如何被用來設定方向和物體的速度。在Processing中查看PVector。 This tutorial將足以讓你與PVectors。但我會對物體做這件事。例如，一個完整的Guitar對象。不在個人line s和rect s。