Processing 4以降で描画を鮮明にする「pixelDensity」の適切な設定方法

Processing 4系以降の最新バージョンを使っていて、Retinaや4Kなどの高解像度ディスプレイだと、線や文字が少しぼやけて見えると感じたことはないでしょうか。
近年のクリエイティブコーディングにおいて、モニター本来の性能を引き出し、鮮明なグラフィックを表現するためには pixelDensity（ピクセル密度）の正しい設定が欠かせません。

最新のProcessingを実行すると、コンソールに次のようなメッセージが表示されることがあります。

Warning: Processing now sets pixelDensity(2) by default on high-density screens. This may change how your sketch looks. To revert to the old behavior, set pixelDensity(1) in setup().

これは、「高解像度モニターを検知したため、自動的に高精細モード（密度2）を適用した」という通知です。現在の仕様では、何もしなくても自動で鮮明に描画されるようになっています。もし以前のバージョンのように、あえてドットを際立たせたい場合や標準解像度で動かしたい場合は、手動で pixelDensity(1) を設定することになります。

pixelDensity は、画面の解像度（ピクセル密度）を制御・取得するための機能です。
Retinaディスプレイや4Kモニターのような環境において、描画をデバイスの性能に合わせて鮮明にするか、あるいは負荷を抑えて処理速度を優先するかをプログラミング側から指定できます。

鮮明さ優先：
モニターの画素をフルに使い、線や文字の輪郭を非常に滑らかにする。

速度優先：
あえて解像度を抑えることで、計算負荷を減らしスムーズな動作を維持する。

この機能を使い分けることで、作品のビジュアル品質とパフォーマンスのバランスを最適化できます。

基本的な書き方と自動判別

高解像度ディスプレイに対応させる際に最もベストなのは、実行環境に合わせてプログラム側に自動判別させる方法です。

ユーザーの閲覧環境は、Windowsの標準的なモニターからMacのRetinaディスプレイまで様々です。これら全ての環境で最適な描画を行うには、displayDensity関数を活用します。
この関数は、実行中のPCが通常モニターなら 1、Retinaなどの高解像度モニターなら 2 という数値を自動で返してくれます。

実際のコードでは、size() 命令の直後に pixelDensity() を記述するのが基本的なルールです。これにより、描画エンジンがキャンバスを生成する際に、正しい解像度を割り当てることができます。

pixelDensity() の引数に displayDensity() を指定することで、実行環境のモニター性能（標準か高解像度か）を自動的に判別し、最適な描画密度を適用させることができます。

Javaモード

void setup() {
  size(600, 400);
  pixelDensity(displayDensity()); // 描画を環境に合わせて鮮明化
}

void draw() {
  if (mousePressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 100, 100);
}

Pythonモードでも考え方は同じです。セットアップ関数の冒頭で設定を行います。

Pythonモード

def setup():
    size(600, 400)
    pixelDensity(displayDensity()) # 環境に合わせて1か2を自動適用

def draw():
    if mousePressed:
        fill(0)
    else:
        fill(255)
    ellipse(mouseX, mouseY, 100, 100)

状況別の使い分け

制作現場においては、常に最高画質にすれば良いというわけでもありません。特にピクセル配列（pixels[]）を直接操作して画像処理を行うような場合は注意が必要です。
以下の表を参考に、プロジェクトの目的に合わせて設定を選択するといいでしょう。

※横にスクロールして確認できます

制作の目的	推奨する書き方	理由とメリット
描画の鮮明さを最優先	pixelDensity(displayDensity());	【推奨】実行環境のモニターが持つ最高画質で描画されます。図形や文字の輪郭が格段に鮮明になります。
高精細環境を強制する	pixelDensity(2);	実行環境に関わらず、常に2倍の密度で描画します。高解像度での静止画書き出し（save）を前提とする場合に有効です。
厳密なピクセル計算を行う	pixelDensity(1);	pixels[] 配列を操作する場合、密度が「2」になると要素数が面積比で4倍になり、計算が複雑化・低速化するため、あえて1に固定します。

p5.js（JavaScriptモード）における解像度管理

Webブラウザ上で動作する p5.js の場合、Processing（Java/Python）とは少し事情が異なります。

現在の主要なWebブラウザ（Chrome, Safari, Edgeなど）は、OS側のスケーリング設定を自動的に読み取ります。そのため、p5.jsではデフォルトで鮮明な描画が適用されるようになっています。つまり、MacのRetina環境で閲覧すれば、特に追加のコードを書かなくても最初から鮮明に描画されます。

ただ、この自動設定が高精細な画面で動かしたときだけ動作を重くしてしまう原因になることがあります。
ピクセル数が膨大になり、処理が追いつかなくなるためです。このようなパフォーマンス上の問題を解決したい場合にのみ、意図的に pixelDensity(1) を呼び出して解像度を落とす、という手法が取られます。

「Java/Python版では鮮明さを上げるために書き、p5.js版では負荷を抑えるために（下げる目的で）書くことがある」という違いを意識しておくと、マルチプラットフォームでの制作が非常にスムーズになります。