概要 |

ENVIRONMENT (IDE).Processingの開発環境はテキストエディタ、コンパイラ、ディスプレイウィンドウで構成されます。 設計制約の範囲内でソフトウェアを作成することができます。

Processing 開発環境 (PDE)
スケッチブック
タブ
座標系
プログラミングモード
レンダリングモード

Top Processing 開発環境 (PDE:Processing Development Environment)

Processing の開発環境(PDE:Processing Development Environment)はコードを記述するための簡単なテキストエディタ、メッセージエリア、 テキストコンソール、ファイルを管理するためのタブ、 よく使う機能をボタンとして配置したツールバー、そしてメニューバーによって構成されます。 プログラムを実行した場合、ディスプレイウィンドウと呼ばれる新しいウィンドウが開かれます。


IDE screenshot

Processingを使用して記述されたソフトウェアはスケッチ(sketches)と呼ばれます。 これらスケッチはテキストエディタで記述されます。 テキストエディタは切り取り/貼り付け、検索/置換テキストといった機能を持っています。 メッセージエリアは保存と出力の際のフィードバックを与えます。 また、エラー表示も行います。 コンソールはエラーメッセージや print() と println() 関数によってプログラムから出力されたテキストを表示します。 ツールバーのボタンはプログラムの実行と停止、新しいスケッチの作成、オープン、保存、出力を可能にします。

  Run
コードをコンパイルし、ディスプレイウィンドウを表示し、プログラムを実行します。
  Stop
プログラムの実行を停止します。 ただし、ディスプレイウィンドウは閉じません。
  New
新しいスケッチ(プロジェクト)を生成します。
  Open
スケッチブックからファイルや例題を開くためのオプションメニューを提供します。 またはコンピュータやネットワークのどこかからスケッチを開きます。
  Save
現在の保存場所に現行のスケッチを保存します。 もしスケッチに違う名前を付けたいなら、Fileメニューの “Save As” を選択してください。
  Export
HTMLファイル内にJavaアプレットを埋め込むために現在のスケッチを出力します。 ファイルを格納しているフォルダが開かれます。 コンピュータのデフォルトWebブラウザでソフトウェアをロードするためには index.html ファイルをクリックしてください。

File, Edit, Sketch, Tools, Help の5つのメニューにコマンドが追加されています。 メニューは文脈と密接に関係しており現在の処理に関連した項目だけが利用できます。

File
Edit
Sketch
Tools
Help
Top Sketchbook

All Processing projects are called sketches. Each sketch has its own folder. The main program file for each sketch has the same name as the folder and is found inside. For example, if the sketch is named "Sketch_123", the folder for the sketch will be called "Sketch_123" and the main file will be called "Sketch_123.pde". The PDE file extension is an acronym for the Processing Development Environment.

A sketch folder sometimes contains other folders for media files and code libraries. When a font or image is added to a sketch by selecting "Add File..." from the Sketch menu, a "data" folder is created. Files may also be added to your Processing sketch by dragging them into the text editor. Image and sound files dragged into the application window will automatically be added to the current sketch's "data" folder. All images, fonts, sounds, and other data files loaded in the sketch must be in this folder. Sketches are stored in the Processing folder, which will be in different places on your computer or network depending if you use PC, Mac, or Linux and how the preferences are set. To locate this folder, select the "Preferences" option from the "File" menu (or from the “Processing” menu on the Mac) and look for the "Sketchbook location".

It is possible to have multiple files in a single sketch. These can be Processing text files (the extension .pde) or Java files (the extension .java). To create a new file, click on the arrow button to the right of the file tabs. This button gives access to creating, deleting, and renaming the files that comprise the current sketch. You can write functions and classes in new PDE files and you can write any Java code in files with the JAVA extension. Working with multiple files makes it easier to re-use code and to separate programs into small sub-programs.

Top Tabs (Multiple Files)

It can be inconvenient to write a long program within a single file. When programs grow to hundreds and thousands of lines, breaking them into modular units helps manage the different parts. Processing manages files with the Sketchbook and each sketch can have multiple files that are managed with tabs. The arrow button in the upper-right corner of the Processing Development Environment is used to manage these files. Click this button to reveal options to create a new tab, rename the current tab, and delete the current tab. If a project has more than one tab, they can also be hidden and revealed. Hiding a tab temporarily removes that code from the sketch.

Tabs are for advanced users, and are "hidden" for a reason. When a program with multiple tabs is run, the code is grouped together and the classes in other tabs become inner classes. Because they're inner classes, you cannot use static variables. Simply place the "static" variable outside the class itself to do the same thing (it need not be explicitly named "static" once you list it in this manner). If you don't want code to be an inner class, you can also create a tab with a .java suffix, which means it will be interpreted as straight java code. If you do this, you'll need to pass the PApplet object to that object in that tab in order to get PApplet functions like line(), loadStrings() or saveFrame() to work.

Currently, the tabs get truncated when there are too many (Bug 54).

Top Coordinates

Processing uses a Cartesian coordinate system with the origin in the upper-left corner. If your program is 320 pixels wide and 240 pixels high, coordinate [0, 0] is the upper-left pixel and coordinate [320, 240] is in the lower-right. The last visible pixel in the lower-right corner of the screen is at position [319, 239] because pixels are drawn to the right and below the coordinate.


Processing can also simulate drawing in three dimensions. At the surface of the image, the z-coordinate is zero, with negative z-values moving back in space. When drawing in simulated 3D, the "camera" is positioned in the center of the screen.

Top Programming Modes

Processing allows people to program at three levels of complexity: Basic Mode, Continuous Mode, and Java Mode. People new to programming should begin with the Basic Mode to learn about coordinates, variables, and loops before moving to Continuous and Java modes.

Basic

This mode is used drawing static images and learning fundamentals of programming. Simple lines of code have a direct representation on the screen. The following example draws a yellow rectangle on the screen:

size(200, 200);
background(255);
noStroke();
fill(255, 204, 0);
rect(30, 20, 50, 50);
Continuous

This mode provides a setup() structure that is run once when the program begins and a draw() structure which by default continually loops through the code inside. This additional structure allows writing custom functions and classes and using keyboard and mouse events.

This example draws four circles on the screen and utilizes a custom function called circles(). The circles() function is not a part of the Processing language, but was written for this example. The code in draw() only runs once because noLoop() is called in setup().

void setup() {
  size(200, 200);
  noStroke();
  background(255);
  fill(0, 102, 153, 204);
  smooth();
  noLoop();
}

void draw() {
  circles(40, 80);
  circles(90, 70);
}

void circles(int x, int y) {
  ellipse(x, y, 50, 50);
  ellipse(x+20, y+20, 60, 60);
}

This example draws rectangles that follow the mouse position (stored in the system variables mouseX and mouseY). The draw() block runs forever until the program is stopped, thus creating the potential for motion and interaction.

void setup() {
  size(200, 200);
  rectMode(CENTER);
  noStroke();
  fill(0, 102, 153, 204);
}

void draw() {
  background(255);
  rect(width-mouseX, height-mouseY, 50, 50);
  rect(mouseX, mouseY, 50, 50);
}
Java

This mode is the most flexible, allowing complete Java programs to be written from inside the Processing Environment (as long as they're still subclasses of PApplet). This mode is for advanced users only and is not really recommended. Using this mode means that any additional tabs will no longer be inner classes, meaning that you'll have to do extra work to make them communicate properly with the host PApplet. It is not necessary to use this mode just to get features of the Java language. 

public class MyDemo extends PApplet {

  void setup() {
    size(200, 200);

    rectMode(CENTER);
    noStroke();
    fill(0, 102, 153, 204);
  }

  void draw() {
    background(255);
    rect(width-mouseX, height-mouseY, 50, 50);
    rect(mouseX, mouseY, 50, 50);
  }
}
Top Rendering Modes

Processing currently has three rendering modes. The programs written with Processing can be rendered using the Java 2D drawing libraries, a custom 3D engine called P3D, and through OpenGL using the JOGL interface. The rendering mode is specified through the size() function. A large effort has been made to make the Processing language behave similarly across the different rendering modes, but there are currently some inconsistencies.

JAVA2D

Utilizes the Java 2D graphics library for drawing 2D images. This is the default rendering mode for Processing so if none is specified, it draws in this way.

size(200, 200);
background(255);
noStroke();
fill(255, 204, 0);
rect(30, 20, 140, 160);

This renderer can be explicity called as shown in the example below.

size(200, 200, JAVA2D);
background(255);
noStroke();
fill(255, 204, 0);
rect(30, 20, 140, 160);
P2D

Optimized for fast 2D drawing. It's doesn't have as many features as the JAVA2D renderer but it's much faster. For example, the smooth() and strokeWeight() functions won't work. It is currently not supported, but it will be in future releases.

P3D

Optimized for fast 3D drawing, but also supports 2D:

size(200, 200, P3D);
background(0);
noStroke();
fill(204, 204);
translate(width/2, height/2);
rotateX(PI/6);
rotateY(PI/3);
rect(-60, -60, 120, 120);
OPENGL

This mode allows Processing programs to utilize the speed of an OpenGL accelerated graphics card. This expands the potential for drawing more to the screen and creating larger windows. Processing interfaces with OpenGL through JOGL, an initiative from the Game Technology Group at Sun. You need to have an OpenGL accelerated graphics card installed on your computer to fully utilize this library. For more information, please visit the OpenGL and JOGL websites.

Note: Software using this mode may appear differently on varying graphics cards as some cards support OpenGL better than others.

import processing.opengl.*;

float a; 

void setup() {
  size(800, 600, OPENGL);
  fill(0, 153);
  noStroke();
}

void draw() {
  background(255);
  translate(width/2, height/2);
  rotateX(a);
  rotateY(a*2);
  rect(-200, -200, 400, 400);
  rotateX(PI/2);
  rect(-200, -200, 400, 400);
  a += 0.01;
}
この文書の原文はクリエイティブ・コモンズ(Creative Commons)のAttribution-Noncommercial-Share Alike(表示・非営利・継承) ライセンスで公開されています。 このライセンスは同一の許諾条件の下で原作者のクレジットを表示し、また作品を営利目的で利用しなければ、作品に対して複製、頒布、展示、実演、二次的著作物の作成が行えることを示します。

© 2007 Processing.org