Processing 像素密度?啥玩意?

語言: CN / TW / HK

在後面的源碼分析中,會涉及到像素密度這個概念,想着怕部分讀者有困惑,先做個鋪墊文。

好啦,話不多説,進入主題!

在 Processing 中,有一個像素密度的概念,對應的接口是 pixelDensity(density) ,參數 density 必須是1或者2,其他數值都是非法的。我們先看下官方文檔説明,小菜用機翻了下,準確度還不錯:)

此功能是 Processing 3.0 的新增功能。它使 Processing 可以使用高分辨率屏幕(如 Apple Retina 顯示器和 Windows 高 DPI 顯示器)上的所有像素進行渲染。此函數只能在程序中運行一次,並且必須在沒有 setup() 的程序中緊跟 size() 之後使用,並在程序有 setup() 時在 setup() 中使用。pixelDensity() 應該只與硬編碼數字一起使用或與 displayDensity() 結合使用。當像素密度設置為大於 1 時,它會更改所有像素操作,包括 get()、set()、blend()、copy() 和 updatePixels() 的所有工作方式。

例子

void setup() {
size(600, 400);
// pixelDensity(displayDensity());
// pixelDensity(1);
pixelDensity(2);
println(displayDensity());
println(width, height);
println(pixelWidth, pixelHeight);
}

void draw() {
loadPixels();

for (int i = 0; i < pixelWidth * pixelHeight; i++) {
pixels[i] = color(0, 0, 255);
}

for (int i = 0; i < width * height; i++) {
pixels[i] = color(255, 255, 0);
}
updatePixels();

noLoop();
}

這個例子大家來和小菜一起來理解下。

1)像素密度設置為了2,那麼 size(600, 400) ,獲取到的 width 為 600, height 為 400, pixelWidth 為 1200, pixelHeight 為 800。

2)如果不設置像素密度或者設置為1,那麼 size(600, 400) ,獲取到的 width 為 600, height 為 400, pixelWidth 為 600, pixelHeight 為 400。這一點,尤其要注意哦。因為基本平時,大家是不會主動設置像素密度的,所以 widthpixelWidth ,以及 heightpixelHeight 都是兩兩相等的。

3)將 pixelWidth * pixelHeight (1200 * 800 = 960000)也就是屏幕中所有的像素都填充為藍色 color(0, 0, 255)

4)將 width * height (600 * 400 = 240000)個數的像素,也就是屏幕 1 / 4 的區域填充為黃色 color(255, 255, 0)

ppi

提到像素密度,會經常提到 ppi 這個東西,也就是 Pixel Per Inch ,每英寸像素個數,1英寸 = 2.54釐米。

屏幕密度的計算方式:

我們拿 iPhone13 舉例,圖片來自 apple 官網。

5.4英寸屏幕的 ppi 達到了 476 ppi,算是超級視網膜了。

下圖的 1 英寸 1 個像素,4 個像素,16 個像素

在知乎上有一篇討論,感興趣的可以戳 《DPI、PPI、DP、PX 的詳細計算方法及算法來源是什麼?》 [1]

像素密度對 loadPixels 的影響

pixelDensity(2) 的情況下,通過 loadPixels 讀取到的像素數據存在了 pixels 數組中。

所以,我們要牢記住,數組 pixels 的長度本質上 pixelWidth * pixelHeight 的大小,而不是 width * height 的大小,平時沒有問題,是因我們大部分情況並不會設置像素密度,默認為1的情況下,他們剛好相等而已。

像素密度對保存圖片的影響

void mousePressed() {
save("sketch.png");
}

pixelDensity(2); 的情況下,我們保存下圖片,可以看到圖片的尺寸為 pixelWidthpixelHeight 大小。

注意:warning::不設置 pixelDensity 或者設置為1,保存的圖片大小為我們通過 size(600, 400) 設置的 寸大小。

所以,我們也可以通過設置高像素密度,來保存更清晰的圖片。

其他

除了上面的 loadPixelsupdatePixels 等,關於對像素的相關操作的 api,都需要大家留意一個心眼,在像素密度不為1的情況下,像素座標的計算、獲取問題。

參考資料

[1]

《DPI、PPI、DP、PX 的詳細計算方法及算法來源是什麼?》: https://www.zhihu.com/question/21220154

小菜與老鳥後期會不定期更新一些 Processing 繪製的代碼思路分析,歡迎關注不迷路。

如果有收穫,能一鍵三連麼?