<!DOCTYPE html> <html> <head> <title>Processing.js 測試</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js"></script> <script type="application/processing" data-processing-target="pjs"> float[][] distances; float maxDistance; size(200, 200); background(0); maxDistance = dist(width/2, height/2, width, height); distances = new float[width][height]; for(int i=0; i<height; i++) { for(int j=0; j<width; j++) { float d = dist(width/2, height/2, j, i); distances[j][i] = d/maxDistance * 255; } } for(int i=0; i<height; i+=2) { for(int j=0; j<width; j+=2) { stroke(distances[j][i]); point(j, i); } } </script> </head> <body> <h1>Processing.js 測試</h1> <p>演示建立二維 (2D) 陣列的語法。</p> <canvas id="pjs"></canvas> </body> </html>
使用這個線上 Processing.js 編輯器（Processing.js (1.4.8) 版本）可以直接從您的瀏覽器編輯、執行和共享 Processingjs 程式碼。這個線上編譯器讓您使用 Processing.js 的最新版本 Processing.js (1.4.8) 方便地編輯和編譯 Processingjs 程式碼。
如何使用線上 Processing.js 編輯器？
編寫和執行程式碼
- 在“原始碼”選項卡下直接編寫（或貼上）您的程式。
- 如果您想要儲存您的程式，請轉至“專案”選單然後儲存它。
- 您無需儲存即可直接執行您的程式，只需點選“執行”按鈕即可。
如何輸入使用者的輸入？
線上 Processing.js 編輯器的最新版本允許從終端視窗在執行時提供程式輸入，這與您在自己的電腦上執行程式的確切方式相同。因此，只需執行一個程式，然後從右側的終端視窗中提供您的程式輸入（如果有）。
鍵盤快捷鍵
以下是我們編輯器的關鍵詞快捷方式
| 快捷鍵 | 描述 |
|---|
| ⌘ + Enter | 執行這個程式 |
| ⌘ + S | 儲存專案（需要登入） |
| ⇧ + ⌘ + S | 另存為專案 |
| ⌘ + P | 新建專案 |
| ⌘ + G | 共享專案 |
| ⌘ + Z | 撤消編輯 |
| ⌘ + Y | 恢復編輯 |
| ⌘ + A | 選擇全部文字 |
| ⌘ + X | 剪下選定的文字 |
| ⌘ + C | 複製選定的文字 |
| ⌘ + V | 貼上複製的文字 |
| ⌘ + F | 搜尋文字 |
| ⌘ + ⌥ + F | 替換文字 |
| 快捷鍵 | 描述 |
|---|
| Ctrl + Enter | 執行這個程式 |
| Ctrl + S | 儲存專案 |
| Shift + Ctrl + S | 另存為專案 |
| Ctrl + G | 共享專案 |
| Ctrl + Z | 撤消編輯 |
| Ctrl + Y | 恢復編輯 |
| Ctrl + A | 選擇全部文字 |
| Ctrl + X | 剪下選定的文字 |
| Ctrl + C | 複製選定的文字 |
| Ctrl + V | 貼上複製的文字 |
| Ctrl + F | 搜尋文字 |
| Ctrl + H | 替換文字 |
儲存和共享專案程式碼
線上儲存 Processingjs 專案
您可以儲存您的 Processingjs 專案，以便稍後訪問該專案。要儲存一個專案，您需要使用一個連結在我們這裡建立一個登入 ID。因此在您儲存一個專案之前，請使用此頁面右上角給出的一個連結來建立一個登入 ID。
線上共享 Processingjs 專案
您可以使用此功能與您的老師、同學和同事分享您的 Processingjs 程式碼。只需單擊共享按鈕，它將建立一個短連結，可以透過電子郵件、WhatsApp 甚至透過社交媒體進行共享。如果一個共享連結近 3 個月處於被動狀態，它將被刪除。
編輯器的更多功能
- 主題 – 您可以從“設定”選單下的“編輯器主題”選項更改當前編輯器的主題。
- 字型大小 – 您可以從“設定”選單下的“字型大小”選項更改編輯器/編譯器的字型大小。
- Tab 鍵大小 – 您可以從“設定”選單下的“Tab 鍵大小”選項更改 Tab 鍵大小。
- 顯示/隱藏行號 – 您可以使用“設定”選單下的“顯示行號”或“隱藏行號”選項來顯示/隱藏程式碼中的行號。
- 還有更多功能。
為什麼要使用線上 Processing.js 編輯器？
使用線上 Processing.js 編輯器來執行您的 Processingjs 程式碼有多個好處
- 平臺獨立性：您可以從任何裝置執行您的程式碼而無需在意作業系統。
- 便利性：您不需要安裝任何東西即可使用它。
- 無需設定：不需要額外的設定即可執行您的程式碼。
- 更新版本：我們的線上編譯器/編輯器/終端是最新的且最新的。
