P5 は Processing や p5.js にインスパイアされた描画ライブラリです。 DVI::Graphics をラップして、塗りつぶし・線の色、座標変換、ブレンドモード、 テキスト描画などを扱いやすくまとめたAPIを提供します。

目次

基本的な使い方

P5.new でインスタンスを作り、図形やテキストを描いたあと commit で画面に反映します。

require "p5"

p5 = P5.new
p5.background(0x00)                   # 画面を黒で塗りつぶす
p5.fill(p5.color(200, 0, 0))         # 塗りつぶしを赤に設定
p5.stroke(0xFF)                       # 線の色を白に設定
p5.circle(160, 120, 50)              # 円を描く
p5.text_font(DVI::Graphics::FONT_MPLUS_12)
p5.text("Hello!", 10, 10)           # テキストを描く
p5.commit                            # 画面に反映

初期状態

P5.new で作られるインスタンスは、次の状態で初期化されます。

項目 初期値
塗りつぶし色 0xFF（白）、有効
線の色 0xFF（白）、有効
線の太さ 1ピクセル
フォント DVI::Graphics::FONT_8X8
テキスト色 0xFF（白）
テキスト揃え 水平 :left、垂直 :top
行間 0（追加なし）
座標変換 なし（単位行列）

解像度の切り替え

Harucom のグラフィックモードでは 640x480px（初期値）と 320x240px の2種類の解像度を切り替えて使えます。 DVI::Graphics.set_resolution で切り替えると、width と height の値も変わります。

DVI::Graphics.set_resolution(320, 240)  # 320x240 に切り替え
p5 = P5.new
p5.width   #=> 320
p5.height  #=> 240

# 640x480 に戻す
DVI::Graphics.set_resolution(640, 480)

画面の制御

P5.new

p5 = P5.new

新しい P5 インスタンスを作り、グラフィックスモードに切り替えます。

P5#width

p5.width  #=> 640 または 320

フレームバッファの幅をピクセル数で返します。

P5#height

p5.height  #=> 480 または 240

フレームバッファの高さをピクセル数で返します。

P5#background(color)

p5.background(0x00)  # 黒で塗りつぶす
# または
p5.background(p5.color(0, 0, 0))  # 黒で塗りつぶす

画面全体を指定した RGB332 カラーで塗りつぶします。

P5#commit

p5.commit

VBlank（垂直帰線期間）を待ってから、裏画面の内容を表画面にコピーして表示します。 1フレームぶんの描画がすべて終わったあとに呼び出してください。

色とスタイル

色は RGB332 形式（1バイト）で指定します。color メソッドで通常の RGB 値（0〜255）から 変換できます。

P5#fill(color)

p5.fill(0xE0)  # 赤で塗りつぶし
# または
p5.fill(p5.color(255, 0, 0))

以降に描く図形の塗りつぶし色を設定し、塗りつぶしを有効にします。

P5#no_fill

p5.no_fill

以降に描く図形の塗りつぶしを無効にします。

P5#stroke(color)

p5.stroke(0xFF)  # 白い輪郭線

以降に描く図形の線（輪郭）の色を設定し、線の描画を有効にします。

P5#no_stroke

p5.no_stroke

以降に描く図形の線（輪郭）の描画を無効にします。

P5#stroke_weight(w)

p5.stroke_weight(3)  # 3ピクセル幅の線

線の太さをピクセル単位で設定します。line や triangle の輪郭線などに影響します。

P5#color(r, g, b)

red = p5.color(255, 0, 0)    #=> RGB332 の赤
green = p5.color(0, 255, 0)  #=> RGB332 の緑

RGB 値（各 0〜255）を RGB332 形式のカラー値（1バイト）に変換して返します。

ブレンドモード

P5#blend_mode(mode)

p5.blend_mode(P5::ADD)

ピクセルの合成方法を変更します。使えるモードは次のとおりです。

定数 動作
P5::REPLACE 上書き（初期値）
P5::ADD チャンネルごとに加算（飽和加算）
P5::SUBTRACT チャンネルごとに減算（飽和減算）
P5::MULTIPLY チャンネルごとに乗算
P5::SCREEN チャンネルごとにスクリーン合成

P5#alpha(value)

p5.alpha(128)  # 半透明

アルファブレンドを有効にして、不透明度（0〜255）を設定します。 0 で完全に透明、255 で完全に不透明になります。

図形の描画

図形は、現在の塗りつぶし色（fill）で内部を塗り、線の色（stroke）で輪郭を描きます。 座標変換（translate、rotate、scale）の影響を受けます。

P5#point(x, y)

p5.point(100, 50)

(x, y) の位置に1ピクセルの点を描きます。線の色（stroke）が使われます。

P5#line(x0, y0, x1, y1)

p5.line(0, 0, 100, 100)

(x0, y0) から (x1, y1) へ線を引きます。線の色と太さが反映されます。

P5#rect(x, y, w, h)

p5.rect(10, 10, 100, 50)

(x, y) を左上の角として、幅 w、高さ h の長方形を描きます。 回転が適用されているときは、内部的に2つの三角形として描画されます。

P5#circle(cx, cy, r)

p5.circle(160, 120, 50)

(cx, cy) を中心、r を半径とする円を描きます。 scale で縦横の倍率が異なる場合は楕円として描画されます。

P5#ellipse(cx, cy, rx, ry)

p5.ellipse(160, 120, 80, 40)

(cx, cy) を中心、rx と ry をそれぞれ横と縦の半径とする楕円を描きます。

P5#triangle(x0, y0, x1, y1, x2, y2)

p5.triangle(100, 10, 50, 90, 150, 90)

3つの頂点を結ぶ三角形を描きます。

P5#arc(cx, cy, r, start_angle, stop_angle)

p5.arc(160, 120, 50, 0, Math::PI / 2)

(cx, cy) を中心、r を半径とする扇形（パイスライス）を描きます。 角度はラジアンで指定します（0 が右方向、PI/2 が下方向）。

曲線の描画

P5#bezier(x1, y1, x2, y2, x3, y3, x4, y4)

p5.bezier(10, 10, 40, 80, 120, 80, 150, 10)

(x1, y1) から (x4, y4) への3次ベジェ曲線を描きます。 (x2, y2) と (x3, y3) が制御点です。20本の線分で近似して描画されます。

P5#curve(x1, y1, x2, y2, x3, y3, x4, y4)

p5.curve(0, 0, 50, 50, 100, 20, 150, 80)

Catmull-Rom スプライン曲線を描きます。曲線は (x2, y2) から (x3, y3) の間に描かれ、 (x1, y1) と (x4, y4) は曲線の形を決めるガイドとして使われます。 20本の線分で近似して描画されます。

テキストの描画

P5#text_font(font, wide_font = nil)

p5.text_font(DVI::Graphics::FONT_MPLUS_12)
p5.text_font(DVI::Graphics::FONT_MPLUS_12, DVI::Graphics::FONT_MPLUS_J12)

テキスト描画に使うフォントを設定します。 第2引数に日本語などの全角文字用フォントを指定すると、Unicode から JIS への変換を通じて 全角文字も表示できます。

P5#text_color(color)

p5.text_color(0xE0)  # 赤い文字

テキストの色を設定します。

P5#text_align(horizontal, vertical = :top)

p5.text_align(:center, :center)

テキストの揃え位置を設定します。

  • 水平方向: :left、:center、:right
  • 垂直方向: :top、:center、:bottom

P5#text_leading(pixels)

p5.text_leading(4)

行間の追加スペースをピクセル単位で設定します。フォントのグリフの高さに加算されます。

P5#text_width(str)

w = p5.text_width("Hello")

現在のフォントで文字列を描画したときの幅をピクセル数で返します。

P5#text(str, x, y)

p5.text("Hello, world!", 10, 10)

(x, y) の位置に UTF-8 文字列を描画します。 text_align で設定した揃え位置に応じて描画位置が調整されます。 座標変換のうち、平行移動はテキストの位置に反映されます。

画像とピクセル

P5#image(data, x, y, w, h)

p5.image(pixel_data, 10, 10, 32, 32)

RGB332 形式の画像データ（バイト列）を (x, y) の位置に描画します。 w と h は画像の幅と高さです。

P5#image_masked(data, mask, x, y, w, h)

p5.image_masked(pixel_data, mask_data, 10, 10, 32, 32)

透過マスク付きで画像を描画します。mask は 1bpp（1ビット/ピクセル）の透過マスクデータです。

P5#get_pixel(x, y)

c = p5.get_pixel(100, 50)

(x, y) の位置にあるピクセルの RGB332 カラー値を返します。

P5#set_pixel(x, y, color)

p5.set_pixel(100, 50, 0xE0)

(x, y) の位置のピクセルを指定した RGB332 カラーに設定します。

座標変換

座標変換を使うと、描画する図形の位置、角度、大きさを変えることができます。 変換は内部的にアフィン変換行列で管理されており、translate、rotate、scale を 呼ぶたびに現在の行列に積算されます。

P5#translate(tx, ty)

p5.translate(100, 50)

座標系を (tx, ty) だけ平行移動します。

P5#rotate(angle)

p5.rotate(Math::PI / 4)  # 45度回転

座標系を angle（ラジアン）だけ回転します。

P5#scale(sx, sy = sx)

p5.scale(2)        # 縦横2倍
p5.scale(2, 0.5)   # 横2倍、縦0.5倍

座標系を拡大・縮小します。引数が1つの場合は縦横同じ倍率になります。

P5#push_matrix

p5.push_matrix

現在の座標変換行列をスタックに保存します。 あとで pop_matrix を呼ぶと、この時点の状態に戻せます。

P5#pop_matrix

p5.pop_matrix

push_matrix で保存した座標変換行列をスタックから取り出して復元します。

P5#reset_matrix

p5.reset_matrix

座標変換行列を初期状態（単位行列）に戻します。すべての変換がリセットされます。