【3/18〜】Amazon、VMwareが語る『クラウドの未来』 スラッシュドット    はてなブックマーク  Yahoo!ブックマークに登録  印刷
絵心がなくても簡単に絵が描けるProcessing
連載インデックスへ
絵心がなくても簡単に絵が描けるProcessing（2）

Processingの対話式スケッチプログラミングで遊ぼう

collisions.doppac.cc
田中 孝太郎
2008/11/17
Processing.jsを使ったミニ実行環境で遊びながら、Processingの基本的なスケッチプログラミングを始めてみよう

Processing.jsで実際にProcessingを体験してみよう

- PR -

　この連載では前回の「芸術の秋にProcessingでスケッチプログラミングを始めてみよう」に引き続き、簡単にグラフィックを扱うプログラミングができるプログラミング環境「Processing」について解説していきます。

　なお前回の記事の後、Processingの最新バージョン（0156）がリリースされました。Processingを起動すると新バージョンリリースを通知するダイアログが表示されるので、前回の記事と同様に公式サイトよりダウンロードし、インストールしておきましょう。

　また今回は、Processingでのプログラムの実行を分かりやすく体験してもらうために、前回記事で紹介したProcessing互換のJavaScriptライブラリ「Processing.js」で、サンプルプログラムを実行できるミニ実行環境を用意しましたので、実際に試してみてください。

ProcessingのコアAPIで自由自在にスケッチ！

　Processingには、グラフィックや色、動きなどを制御するプログラムを書くうえでよく使う計算や、便利な機能を提供する命令群（コアAPI）が標準で用意されています。そのすべてをここで紹介できませんが、特徴的な部分を紹介しながら、まずはProcessingでできることを見ていきましょう。

□ 図形描画

　「point」（点を描く）、「ellipse」（円、楕円を描く）といった基本的な図形を描く命令のほか、指定した頂点を結ぶ平面や閉曲面、ワイヤーフレームなどを描画できます。

http://processing.org/reference/ellipse_.html

ellipse() Language (API) Processing 1.0 (BETA) via kwout

　また、「smooth」と呼ばれる命令を指定することで、グラフィックの境界に中間色を使い滑らかに描画できます。

http://processing.org/reference/smooth_.html

smooth() Language (API) Processing 1.0 (BETA) via kwout

□ カラーリング

　Processingでは、非常に多彩な方法で色を指定できます。RGB値による指定はもちろん、用途に応じてHSB値（色相／彩度／明度）を使用できるので、プログラムの中で色をコントロールすることがとても容易です。HTMLやCSSでおなじみの16進数カラーコード指定（#000000〜#FFFFFF）によって、直接色を指定することもできます。

http://processing.org/reference/colorMode_.html

colorMode() Language (API) Processing 1.0 (BETA) via kwout

　カラーリングを数値指定する範囲を通常の256段階から、好きな段階に変更できるのもProcessingのユニークな機能です。

□ 画像、文字描画

　画像や文字の描画には、「PImage」「PFont」と呼ばれる専用のクラスが用意されており、簡単に扱うことができます。PImageクラスはマスク切り抜き、フィルタ処理などの高度なメソッドも用意されています。

http://processing.org/reference/PImage.html

PImage Language (API) Processing 1.0 (BETA) via kwout

　Processingで文字を描画するPFontクラスは、フォントを画像として描画する方式で、事前にマシンに入ったフォントからデータを作成しておくことでどんな環境で実行しても好きなフォントが使用できますが、残念ながら日本語の表示には現状では問題点が多いです。

http://processing.org/reference/PFont.html

PFont Language (API) Processing 1.0 (BETA) via kwout

□ ビットマップ操作

　画面をピクセル単位で処理するプログラミングが高速に行える点もProcessingの特徴です。命令1つで、画面のピクセルデータを「pixels」と呼ばれる配列で取得したり、画面に反映したりできます。

http://processing.org/reference/pixels.html

pixels[] Language (API) Processing 1.0 (BETA) via kwout

□ リファレンスを参考に

　実際にProcessingにどんな命令が用意されているかは、用意されているWeb上のリファレンスページをご覧ください。リファレンスは残念ながら英語版しか用意されていませんが、簡単なサンプルプログラムもあるので、参考になるでしょう。

http://processing.org/reference/index.html

Language (API) Processing 1.0 (BETA) via kwout

　また、このリファレンスはインストールしたProcessingにも含まれており、メニューの［Help］→［References］を選択することで、ローカルPCでも見ることができます。

　いよいよ次ページでは、Processingのプログラムの仕方を解説していきます。実際にProcessing.jsを使ったWeb上でProcessingのプログラムを体験できるミニ実行環境を設置しているので、ぜひ試してみてください。

  1/3

　INDEX
絵心がなくても簡単に絵が描けるProcessing（2）　
Processingの対話式スケッチプログラミングで遊ぼう
Page1
Processing.jsで実際にProcessingを体験してみよう
ProcessingのコアAPIで自由自在にスケッチ！
  Page2
Processingの3つのプログラミングスタイル
連続モードのスケッチプログラムを体験してみよう
  Page3
マウス、キーボードの入力に反応させるには？
さらにProcessingを高度に扱う外部ライブラリ

絵心がなくても簡単に絵が描けるProcessing バックナンバー 連載インデックスへ»


「デザインハック」コーナーへ


リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

スキルアップ／キャリアアップ（JOB@IT）

＠IT Special -PR-
「いつかは壊れるサーバ」そんな故障に
迅速で安価に手軽に対応する方法とは？
New！
「特権ユーザー」の事件を防げ！
万能権限を持つユーザーの管理方法とは？
New！
仮想環境の構築とデータ保護の特効薬？！
実績と信頼性の高いパッケージで安心運用
仮想環境のバックアップもこれまでどおり
「まるごと取ってまるごと戻す」簡単運用
おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介
その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？
美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？
進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

→＠IT Special ヘ

お勧め求人情報

キャリアアップ　〜JOB＠IT
＠IT Special -PR-
◆ 　 TomcatやJBossなどAPサーバ環境に関する
情報を集約！ “業務”用APサーバ大百科
New！
◆ 　 一気に解説！　最新のクラスタストレージ
「RAIDを超えたストレージ基準」……など
New！
◆ 　 クラウド的ユーザー体験の変化は脅威か？
仮想化技術を使いこなす運用管理術を紹介
New！

◆ 　 上司や部下、部署内メンバーとの情報共有
を“ガラッ”と変えるコラボツールとは？
New！
◆ 　 おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
◆ 　 社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

◆ 　 Twitterのアカウントはなぜ突破された？
メールによる新手の攻撃手法とその対策
◆ 　 もう仮想化のお試しフェイズは終わりだ！
Hyper-V 2.0が基幹システムも仮想化
◆ 　 美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？

◆ 　 クライアント企業から求められる人材
⇒IT技術と経営戦略を併せ持つ「戦略家」
◆ 　 .NET編集長が実践する「技術情報検索術」
サンプル・コードを簡単に探す“技”は？
◆ 　 業務効率と情報セキュリティ対策を両立！
手間なく確実に機密情報を守る方法とは？

◆ 　 進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
◆ 　 運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

◆ 　 【CTC事例】約30の基幹システムを統合！
膨大なバッジジョブを制御した方法は？
◆ 　 仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する
◆ 　 その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？

→＠IT Special ヘ