處理語言終極指南第一部分：基礎

已發表: 2022-03-11

您正在與無聊作鬥爭，並渴望使用您的創造力。你想建造一些東西，一些視覺上令人印象深刻的東西，一些藝術的東西。或者，也許您想學習編程並儘快做出令人印象深刻的事情。如果是這樣，那麼處理語言就是要走的路。

到目前為止，在我使用過的所有編程語言中，Processing 無疑是最有趣的語言之一。它是一門簡單的語言 - 易於學習、理解和使用，但功能非常強大。這幾乎就像您正在使用代碼行在空白畫布上繪畫。沒有任何嚴格的規則或準則可以限制您的創造力，唯一的限制是您的想像力。

在大學裡，我是一個項目的助教，該項目聚集了高中生並教他們處理。他們中的大多數沒有很強的編程背景，有的甚至沒有寫過一行代碼。只需五天，他們就可以學習語言並製作自己的簡單遊戲。成功率幾乎是百分之一百，我們很少遇到失敗。在本文中，這正是我們要做的。我將整個程序縮減為兩部分。第一部分，我將談論語言。我將給出一個基本的概述，一個處理過程的演練，我將給出一些提示和技巧。然後在下一部分，我們將一步一步構建一個簡單的遊戲，每一步都會詳細解釋。我還將使用 p5js 將游戲的代碼轉換為 JavaScript，以便我們的遊戲可以在 Web 瀏覽器中運行。

你應該已經知道的

要理解並輕鬆閱讀這些文章，您應該具備編程的基本知識，因為我不會談論編程基礎知識。不過，我基本上不會觸及任何高級編程概念，因此只需要表面上的理解即可。有些部分我會談到一些低級的想法和概念，例如面向對象編程 (OOP)，但它們並不重要。這些是為對語言結構感興趣的好奇讀者準備的。如果你不想知道，你可以跳過這些部分。除此之外，您唯一應該擁有的就是學習這種令人敬畏的語言的雄心和創建自己的遊戲的熱情！

如何關注

我總是讚成通過嘗試和實驗來學習編程。您越早投入到自己的遊戲中，您就會越快適應 Processing。所以這將是我的第一個建議，在你自己的環境中嘗試每一步。 Processing 有一個簡單易用的 IDE（即代碼編輯器），它是您唯一需要下載和安裝的東西。你可以在這裡下載。

所以讓我們開始吧！

什麼是處理語言？

本節包括該語言的簡要技術概述、其結構以及有關編譯和執行過程的一些說明。詳細信息將包括有關編程和 Java 環境的一些高級知識。如果您暫時不介意細節並且迫不及待地想學習和編寫自己的遊戲，您可以跳到“處理基礎”部分。

Processing 是一種可視化編程語言，可以這麼說，它允許您使用代碼進行草圖繪製。然而，它本身並不完全是一種編程語言，它是他們所謂的“Java-esque”編程語言，這意味著該語言構建在 Java 平台之上，但本身並不完全是 Java。它基於 Java，當您點擊運行按鈕時，您的所有代碼都會被預處理並直接轉換為 Java 代碼。 Java 的 PApplet 類是所有處理草圖的基類。舉個例子，讓我們看幾個基本的處理代碼塊：

 public void setup() { // setup codes goes here } public void draw() { // draw codes goes here }

這些代碼塊將被轉換成這樣的東西：

 public class ExampleFrame extends Frame { public ExampleFrame() { super("Embedded PApplet"); setLayout(new BorderLayout()); PApplet embed = new Embedded(); add(embed, BorderLayout.CENTER); embed.init(); } } public class Embedded extends PApplet { public void setup() { // setup codes goes here } public void draw() { // draw codes goes here } }

您可以看到處理代碼塊是用一個從 Java 的 PApplet 擴展而來的類包裝的。因此，您在處理代碼中定義的所有類（如果有）都將被視為內部類。

Processing 基於 Java 的事實給了我們很多優勢，尤其是如果您是 Java 開發人員。不僅語法熟悉，而且還使您能夠執行以下操作，例如在草圖中嵌入 Java 代碼、庫、JAR 文件，直接在 Java 應用程序中使用處理小程序，定義類和使用標準數據類型，如 int 、浮點數、字符等。如果您想花一些時間進行設置，您甚至可以直接從 Eclipse 編寫處理代碼。您不能做的一件事是在處理草圖中使用 AWT 或 Swing 組件，因為它們與處理的循環性質相衝突。但請放心，我們不會在本文中做任何花哨的事情。

加工基礎

處理代碼由兩個主要部分組成，設置和繪製塊。設置塊在代碼執行時運行一次，繪製塊連續運行。 Processing 背後的主要思想是，您在繪圖塊中編寫的內容將每秒從上到下執行 60 次，直到您的程序終止。我們將利用這個想法來構建一切。我們將讓我們的物體移動，保持我們的分數，檢測碰撞，實施重力，並使用這個功能做幾乎所有其他事情。 這個刷新循環是我們項目的心跳。我將在後面的部分解釋如何使用這個心跳來讓你的代碼栩栩如生。首先，讓我向您介紹Processing IDE。

處理IDE

如果您已經閱讀到此為止，但仍未下載 Processing IDE，請繼續下載。在整篇文章中，我將概述一些簡單的任務供您自己嘗試，只有在您啟動並運行 IDE 的情況下才能練習。這裡簡單介紹一下處理IDE。它非常簡單且不言自明，所以我會保持簡短。

如您所料，運行和停止按鈕會按照它們的建議進行操作。當您單擊運行按鈕時，您的代碼將被編譯並執行。從本質上講，處理程序永遠不會終止，它們會永遠運行，直到它們受到干擾。您可以通過編程方式終止它，但如果您不這樣做，您可以使用停止按鈕。

運行和停止右側看起來像蝴蝶的按鈕是調試器。使用調試器需要另外一篇專門介紹它的文章。它超出了本文的範圍，因此您現在可以忽略它。調試器按鈕旁邊的下拉菜單是您添加/設置模組的地方。 Mods為您提供一些特定的功能，允許您為 Android 編寫代碼，允許您使用 Python 編寫代碼，等等。 Mods 也超出了範圍，因此您可以將其保持在默認 Java 模式並忽略它。

代碼編輯器上的窗口是您的草圖通常運行的地方。在圖像中它是空白的，因為我們沒有設置任何屬性，如大小或背景顏色，或者我們沒有繪製任何東西。

代碼編輯器沒什麼好說的，它只是你編寫代碼的地方。有行號（！）舊版本的處理沒有，你無法想像當我第一次看到它們時我是多麼高興。

下面的黑框是控制台。我們將使用它來打印內容以進行快速調試。控制台旁邊的錯誤選項卡是您的錯誤將出現的地方。這也是 Processing 3.0 附帶的一個新的有用功能。在舊版本中，錯誤被打印到控制台，很難跟踪它們。

設置塊

如前所述，設置塊在程序啟動時執行一次。您可以使用它來進行配置以及只希望運行一次的事情，例如加載圖像或聲音。這是一個示例設置塊。在您自己的環境中運行此代碼並親自查看結果。

 public void setup() { // Size of our sketch will be 800x600, // and use the P2D rendering engine. size(800, 600, P2D); // We could have used this function instead of size() // fullScreen(P2D); // The background color of our sketch will be black // by default, unless specified otherwise background(0); // We could have used this to set a background image. // Note that size of our sketch should be the same as the image. // background(loadImage("test.jpg")); // Shapes and objects will be filled with red by default, // unless specified otherwise. fill(255,0,0); // Shaped and objects will have a white border by default, // unless specified otherwise. stroke(255); }

與樣式（背景、填充、描邊）相關的方法將在屬性和設置部分進行說明。現在，您需要知道的是我們在此處設置的設置和配置如何影響我們的整個草圖。此處編寫的代碼用於設置適用於整個草圖的一些基本規則集。您還應該在本節中了解以下列出的方法：

size() - 顧名思義，這個函數用於配置我們草圖的大小。它必須在設置代碼塊的第一行。它可以以下列形式使用：

尺寸（寬度，高度）；
尺寸（寬度、高度、渲染器）；

寬度和高度值可以以像素為單位。 Size 函數接受第三個參數，renderer，用於設置我們的草圖將使用哪個渲染引擎。默認情況下，渲染器設置為 P2D。可用的渲染器有 P2D（處理 2D）、P3D（處理 3D，如果您的草圖將包含 3D 圖形，則應使用）和 PDF（2D 圖形直接繪製到 Acrobat PDF 文件中。可以在此處找到更多信息）。 P2D 和 P3D 渲染器使用 OpenGL 兼容的圖形硬件。

fullScreen() - 從 Processing 3.0 開始，現在可以使用 fullScreen 函數代替 size() 函數。就像 size() 函數一樣，它也應該在設置塊的第一行。用法如下：

全屏（）;
全屏（顯示）；
全屏（渲染器）；
全屏（顯示，渲染器）；

如果您在沒有任何參數的情況下使用它，您的處理草圖將簡單地以全屏運行，並將在您的主顯示器上運行。 'display' 參數用於設置你的草圖將在哪個顯示器上運行。例如，如果您將外部顯示器連接到您的計算機，您可以將顯示變量設置為 2（或 3、4 等），然後您的草圖將在那裡運行。 'renderer' 參數如上面 size() 部分所述。

設置塊

這是新版 Processing 中引入的另一個功能。它是一個代碼塊，就像 setup 和 draw 一樣。當您想要使用可變參數定義 size() 或 fullScreen() 方法時，它很有用。如果您使用的環境不是 Processing 自己的 IDE，例如 Eclipse，則還需要在此代碼塊中定義 size() 和其他樣式屬性，例如 smooth()。但在大多數情況下，您將不需要它，在本文中絕對不會。

繪製塊

沒有什麼特別的東西可以談論拉塊，但它的一切都是特別的。繪製塊是所有魔術發生的地方。它是您程序的核心，每秒跳動 60 次。此代碼塊包含您的所有代碼邏輯。你所有的形狀、物體等都會寫在這裡。

我們將在本文中討論的大部分代碼都來自繪圖塊，因此清楚地了解該代碼塊的工作原理非常重要。為了給您演示，您可以嘗試以下方法。首先請注意，我們可以使用print()或println()方法將任何內容打印到控制台。打印方法僅打印到控制台，但 println 打印並在末尾附加一個換行符，因此每個 println() 將打印在單獨的行中。

所以，看看下面的代碼塊。首先，嘗試猜測它將在控制台中打印什麼。然後，繼續嘗試一下：

 void setup(){ } void draw(){ int x = 0; x += 1; print(x+" "); }

如果您猜到“1 2 3 4……”，我就知道了！這是處理中的困惑之一。還記得這個塊反復被執行嗎？當您在這裡定義一個變量時，它會在每個循環中一遍又一遍地定義。在每次迭代中，x 設置為 0，遞增 1 並打印到控制台。因此我們得到結果“1 1 1 1…”。這個例子有點明顯，但當事情變得有點複雜時，它可能會令人困惑。

我們不希望 x 被覆蓋，那麼我們如何實現這一點並獲得結果“1 2 3 4...”？通過使用全局變量。這沒什麼花哨的，我們只在繪圖塊之外定義變量，所以它不會在每次迭代時重新定義。此外，變量的範圍在整個草圖中都可以訪問。請看下面的代碼：

 int x = 0; void setup(){ } void draw(){ x += 1; print(x+" "); }

您可能會問自己，在我們的塊之外定義的變量如何工作？為什麼我們不使用 setup() 塊，因為它在開始時執行一次？答案與面向對象編程和作用域有關，不熟悉的可以跳過這一段。請參閱我解釋處理代碼如何轉換為 Java 的部分。還記得它們是如何被 Java 類包裹起來的嗎？我們在 setup() 和 draw() 塊之外編寫的變量也會被包裝，因此它們被視為包裝我們代碼的外部類的字段。使用 x+=1 與使用 this.x+=1 相同。在我們的例子中，它的功能也是一樣的，在 draw() 的範圍內沒有定義名為 x 的變量，並且搜索了一個外部範圍，即this的範圍。為什麼我們不在 setup() 部分定義變量 x 呢？如果我們這樣做了，定義 x 的範圍將是 setup 函數的範圍，並且無法從 draw() 塊中訪問它。

繪製形狀和文本

現在我們知道如何使用設置塊配置我們的草圖，並且我們知道繪圖塊的作用。因此，是時候獲得一點視覺效果並了解處理過程中有趣的部分：如何繪製形狀。

在開始之前，您應該了解坐標系。在處理中，您確定在屏幕上繪製的每個對象的坐標。坐標係以像素為單位。原點（即起點）是左上角，您應該給出相對於該點的坐標。您應該知道的另一件事是，每個形狀都有不同的參考點。例如，rect() 將其左上角作為參考點。對於 ellipse()，它是中心。這些參考點可以通過 rectMode() 和 ellipseMode() 等方法進行更改，我將在屬性和設置部分進行說明。提供了一個示例圖，以幫助您更好地理解。

本文是處理的基本概述，因此我們不會涉及任何復雜的形狀，如頂點或 3D 形狀。基本的 2D 形狀實際上足以讓我們創建自己的遊戲。在圖中，您可以看到如何繪製形狀的示例。每個形狀都有自己要創建的語法，但基本思想是給出它的坐標或大小或兩者兼而有之。以下是您應該熟悉的一些形狀（對於下面給出的所有值，“x”和“y”表示以像素為單位的 x 和 y 坐標，“w”和“h”也表示以像素為單位的寬度和高度值）：

point() - 簡單點，只需要一個坐標。用法：

點（x，y）
point(x, y, z) - 如果您使用 3 維。

line() - 用於創建一條線。您可以創建一條只有起點和終點的線。用法：

線（x1，y1，x2，y2）
line(x1, y1, z1, x2, y2, z2) - 如果您使用 3 維。

triangle() - 用於創建三角形。用法：三角形（x1，y1，x2，y2，x3，y3）

quad() - 用於創建四邊形。用法：四邊形（x1，y1，x2，y2，x3，y3，x4，y4）

rect() - 用於創建一個矩形。參考點默認為左上角（見圖）。這是用法：

矩形（x，y，w，h）
rect(x, y, w, h, r) - 'r' 表示圓角的像素半徑。
rect(x, y, w, h, tl, tr, br, bl) - 分別為左上角、右上角、右下角、左下角的半徑。這也以像素為單位。

ellipse() - 用於創建橢圓形狀。這也用於創建一個圓形，應給出相同的寬度和高度值。此形狀的參考點默認為中心（見圖）。這是用法：

橢圓（x，y，w，h）

arc() - 畫一條弧線。用法：

arc(x, y, w, h, start, stop) - 'start' 和 'stop' 用於確定開始和停止繪製圓弧的角度。值以弧度為單位。可以使用諸如“PI、HALF_PI、QUARTER_PI 和 TWO_PI”之類的常數。
arc(x, y, w, h, start, stop, mode) - 'mode' 變量用於確定弧（字符串）的渲染風格。可用選項為“OPEN、CHORD、PIE”。 OPEN 將使未繪製的部分保持無邊界。 CHORD 將用邊框完成未繪製的部分。 PIE 將使您的弧看起來像一個餅圖。

在屏幕上顯示文本類似於顯示形狀，基本思想是您確定要顯示文本的坐標。然而，處理文本還有更多內容。在屬性和設置部分之後，您將可以更好地控製文本，您將在其中學習如何將設置和屬性應用於對象。現在，我將展示顯示文本的基礎知識。有很多方法可以做到，我只會展示要領。

text() - 顯示文本。用法：

text(c, x, y) - 'c' 表示字符，將顯示任何字母數字字符。
text(c, x, y, z) - 如果您使用 3 個維度。
text(str, x, y) - 'str' 是要顯示的字符串。
text(str, x, y, z) - 如果您使用 3 個維度。
text(num, x, y) - 'num' 是要顯示的數值。
text(num, x, y, z) - 如果您使用 3 個維度。

屬性和設置

本節首先要解釋的是設置對象屬性背後的邏輯。填充顏色、背景顏色、邊框、邊框寬度、邊框顏色、形狀對齊、邊框樣式等可能是這些屬性的一些示例。

當你設置一個屬性時，你必須記住代碼是從上到下執行的。假設您將“填充”屬性設置為紅色，在該線下方繪製的所有對像都將被填充為紅色，直到它被另一個填充屬性覆蓋。同樣的事情也適用於其他屬性，但請注意，並非所有屬性都會相互覆蓋。例如，“stroke”屬性不會覆蓋“fill”屬性，而是它們一起工作。這是您理解邏輯的可視化表示：

正如您在圖像中看到的，第一行將填充顏色設置為紅色，第二行將描邊顏色設置為藍色。我們現在有兩個活動設置：填充紅色和藍色筆觸。如您所料，無論我們的對像在下一行是什麼，它都將被紅色填充並帶有藍色筆劃（如果適用）。你可以這樣繼續檢查圖像，你就會掌握邏輯。

以下是一些常用的基本屬性和設置：

樣式設置

fill() - 設置對象的填充顏色。此設置還用於為文本著色。目前，我們只需要知道以下用法：

fill(r, g, b) - 紅色、綠色和藍色值作為整數
fill(r, g, b, a) - 附加 alpha 值，最大值為 255

noFill() - 將填充顏色設置為透明。

stroke() - 設置對象的筆觸顏色。 Stroke 屬性適用於對象周圍的線條和邊框。目前，我們只需要知道以下用法：

stroke(r, g, b) - 紅色、綠色和藍色值作為整數。
stroke(r, g, b, a) - 附加 alpha 值，最大值為 255

noStroke() - 刪除筆劃。

strokeWeight() - 設置描邊的寬度。用法：

strokeWeight(x) - x 是一個整數，表示筆劃的寬度（以像素為單位）。

background() - 設置背景顏色。目前，我們只需要知道以下用法：

background(r, g, b) - 紅色、綠色和藍色值作為整數。
background(r, g, b, a) - 附加 alpha 值，最大值為 255

對齊設置

ellipseMode() - 設置作為參考點對齊橢圓的位置。用法：

ellipseMode(mode) - 'mode' 是參數，這裡是可用的參數：
- CENTER（默認）：以中心為參考點。
- RADIUS：這也將中心作為參考點，但在此模式下，您指定的 w 和 h 值被視為一半（即半徑而不是直徑）
- CORNER：以左上角為參考點。
- CORNERS：將前兩個參數（x 和 y）設置為橢圓左上角的位置，後兩個參數（w 和 h）設置為橢圓左下角的位置。所以這個模式，“寬度”和“高度”是無關緊要的。在這種情況下，將其視為 ellipse(x_tl,y_tl,x_br,y_br) 更有意義。

rectMode() - 設置作為參考點對齊矩形的位置。用法：

rectMode(mode) - 'mode' 是參數，這裡是可用的參數：
- CENTER：以中心為參考點。
- RADIUS：這也將中心作為參考點，但在這種模式下，您指定的 w 和 h 值被視為一半
- CORNER（默認）：以左上角為參考點。
- CORNERS：將前兩個參數（x 和 y）設置為橢圓左上角的位置，後兩個參數（w 和 h）設置為橢圓左下角的位置。所以這個模式，“寬度”和“高度”是無關緊要的。在這種情況下，將其視為 rect(x_tl,y_tl,x_br,y_br) 更有意義。

文本相關設置

textSize() - 設置文本的字體大小。用法：

textSize(size) - 所需大小的整數值。

textLeading() - 設置文本的行高。用法：

textLeading(lineheight) - 行間距的像素值。

textAlign() - 設置作為參考點對齊文本的位置。用法。

textAlign(alignX) - 'alignX' 用於水平對齊。可用：左、中、右
textAlign(alignX, alignY) - 'alignY' 用於垂直對齊。可用：頂部、底部、中心、基線。

動畫

到目前為止，我們學習瞭如何繪製對象和文本。但它們的問題在於它們是靜態的。現在我們如何讓它們移動？很簡單，我們不是將坐標作為整數給出，而是使用變量來增加/減少它們。有道理？看看下面的代碼：

 // initialize x and y as 0 int x=0; int y=0; void setup(){ size(800,600); background(255); // set background color to white } void draw(){ fill(255,0,0); // fill color red stroke(0,0,255); // stroke color blue ellipseMode(CENTER); // ref. point to ellipse is its center ellipse(x, y, 20, 20); // draw the ellipse // increment x and y x+=5; y+=5; }

你看到我們是如何管理動畫的嗎？我們將 x 和 y 設置為全局變量，並將它們的初始值設置為 0。在繪製循環中，我們創建了橢圓，將填充顏色設置為紅色，描邊顏色設置為藍色，並將坐標設置為 x 和 y。當我們增加 x 和 y 時，球只是改變了它的位置。但是這段代碼有一個問題，你注意到了嗎？作為對自己的一項簡單挑戰，請嘗試找出問題所在，並進行測試。結果如下：

我讓這種情況發生的目的是讓你意識到處理的循環性質是如何工作的。參考“Draw Block”部分的例子，你還記得為什麼我們得到“1 1 1…”而不是“1 2 3…”嗎？球留下痕蹟的原因相同。每次繪製塊迭代時，x 和 y 都會增加 5，因此球會被重繪為向下和向右 5 個像素。但是，從先前的迭代中繪製的球仍保留在視圖中。我們如何讓它們消失？有什麼猜測嗎？

為了消除球留下的痕跡，我們只需從設置塊中刪除背景（255），並將其粘貼到繪圖塊的第一行。當我們的背景代碼在設置塊中時，它在開始時運行一次，使我們的背景變成白色。但這還不夠，我們需要將每個循環的背景設置為白色，以覆蓋從前一個循環中繪製的球。背景是第一行意味著它首先運行，它成為基礎層。在每個循環中，我們的畫布被塗成白色，新元素被繪製在白色背景之上。所以我們沒有標記。

這就是在處理中為事物設置動畫的想法，以編程方式操縱對象的坐標以改變它們的位置。但是我們將如何做一些花哨的事情，比如讓球保持在屏幕上？或者也許實施重力？我將在本文的下一部分教如何做這些事情。我們將通過嘗試和構建來學習。我們將學習如何做到這一點並立即將它們應用到我們的遊戲中。最後，我們將擁有一款完整、可玩且充滿樂趣的遊戲。

鍵盤和鼠標交互

Processing中的鍵盤和鼠標交互非常簡單直接。您可以為每個事件調用一些方法，並且您在其中編寫的內容將在事件發生時執行一次。還有一些全局變量，例如 mousePressed 和 keyPressed，您可以在繪圖塊中使用以利用循環。以下是一些帶有解釋的方法：

 void setup() { size(500, 500); } void draw() { if (mousePressed) { // Codes here will be executed as long as the mouse // button is pressed if (mouseButton == LEFT){ // This lines will be executed as long as // the clicked mouse button is the left mouse // button. } } if (keyPressed) { // Codes here will be executed as long as a key // on the keyboard is pressed if (key == CODED) { // This if statement checks if the pressed key // is recognised by Processing. if (keyCode == ENTER) { // This lines will be executed if the pressed key // is the enter key. } } else{ // This lines will be executed if the pressed key // is not recognised by processing. } } } void mousePressed() { // These codes will be executed once, when mouse // is clicked. Note that mouseButton variable is // also be used here. } void keyPressed() { // These codes will be executed once, when a key // is pressed. Note that key and keyCode variables // are also usable here. }

如您所見，很容易檢查是否單擊了鼠標或按下了哪個鍵。然而，mousePressed 和 keyCode 變量有更多選項可用。 mousePressed的可用選項是 LEFT、RIGHT 和 CENTER。 keyCode還有很多可用的；上、下、左、右、ALT、控制、SHIFT、退格、TAB、ENTER、返回、ESC 和刪除。

關於鼠標變量需要了解的一件事，我們會經常用到它，那就是如何獲取鼠標的坐標。要獲得光標的準確坐標，我們可以直接在 draw() 塊中使用mouseX和mouseY變量。最後但並非最不重要的一點是，您應該查看許多其他有用的方法。它們都記錄在處理參考中。

結論

您現在應該已經熟悉了 Processing。然而，如果你停在這裡，所有這些知識都會飛走。我強烈建議你繼續練習，玩弄你所學的東西。為了幫助您練習，我將為您提供兩個練習。你應該盡量自己做。如果您遇到困難，Google 和 Processing Reference 應該是您最好的朋友。我將為第一個提供代碼，但查看它們應該是您做的最後一件事。

進一步閱讀 Toptal 工程博客：

如何從頭開始編寫解釋器