GUIを扱う準備をする（G4P）

◆PROCESSING　逆引きリファレンス

　カテゴリー：GUI

【解説】

PROCESSINGは簡単に絵を描いたり、画像を扱うことができる優れた言語ですが、GUI（Graphical User Interface）を扱うのは苦手です（汗）。

PROCESSINGでGUIを扱うには、以下の２通りの方法があります。

AWT / SwingなどのJavaの命令を使う
GUI用の拡張ライブラリを使う

PROCESSING用のGUIライブラリの代表としては、ControlP5 と G4P があります。

ControlP5については、以下のサイト様などが参考となります。

またG4Pについては、以下のサイト様などが参考となります。

公式サイト様
コンピュータ・書評・お仕事の記録様
G4P (GUI for Processing) 様

G4Pは日本語での解説ページが少ないですね（汗）。

この記事では、あえて（日本語解説ページが少ない）G4PをPROCESSINGにインストールする手順について解説したいと思います。

なおPROCESSINGでAWTやSwingのGUI部品を使う方法については、「GUIを扱う準備をする（Swing）」記事を参照してください。

G4Pをインストールする手順について

標準エディタ経由でインストールする

標準エディタを起動し、メニューの「スケッチ」から「ライブラリをインポート」を選択します。

次に、サブメニューから「ライブラリを追加」を選択します。Contribution Manager 画面が開きます。

Contribution Manager 画面の左端にある Libraries タブを選択し、一番上の検索窓に「G4P」と入力します。

「G4P | Provides a set of 2D GUI controls and …」とかかれた行を選択し、右下にある Install ボタンを押下してください。

2017/11 月現在、Ver4.1.4がインストールされました。

【注意】

インストールしたG4Pライブラリを利用するには、スケッチの先頭に
import g4p_controls.*;
の１行を記入して下さい。

【関連記事】

サンプルプログラム

グラフィックボタンを表示する例：

import g4p_controls.*;

/**
 * PROCESSING G4P GButton表示サンプル
 * @author MSLABO
 * @version 1.0
 */
GButton gButton; 

void setup(){
  size( 200, 200 );
  
  //G4Pのグラフィックボタンを作成
  gButton = new GButton( this, 50, 85, 100, 30, "G4P Button" );
  
}

void draw(){
  background( 220 );
}

import g4p_controls.*;

/**

* PROCESSING G4P GButton表示サンプル

* @author MSLABO

* @version 1.0

GButton gButton;

void setup(){

size( 200, 200 );

//G4Pのグラフィックボタンを作成

gButton = new GButton( this, 50, 85, 100, 30, "G4P Button" );

}

void draw(){

background( 220 );

}

ボタンを作成して、画面中央に表示します。
「え、これだけ？」というくらいシンプルに実現できます（笑）。

なお上記サンプルでは、ボタン押下に反応する部分は作成していません。詳しくは、「GButtonを扱うには（G4P）」記事を参照して下さい。

＜出力サンプル＞

PROCESSING逆引きリファレンス一覧へ戻る

本ページで利用しているアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。

iconka.com 様
ICOOON MONO 様

◆PROCESSING 逆引きリファレンス

カテゴリー：GUI