基于Processing的室內溫度可視化的實現

徐 杰

同濟大學軟件學院，上海 200092

0 引言

隨著計算機網絡技術的迅速普及，人類已經進入了信息化時代，伴隨而來的便是海量的信息出現在人類的生活之中，人們每天需要處理的信息量正在以爆炸式的態勢在增長。為了能夠迅速、有效地在這些抽象并且復雜的數據中提取出人們需要的關系與內容，鑒于人腦擅長處理圖形數據，也隨之出現了信息可視化(Information Visualization)這一概念。信息可視化又具有跨專業、跨平臺的特性，從而導致信息的復雜與多樣性，所以如何從這些信息運用到實際的具體應用中去也成了困擾從業人員的一大難題，由此，便孕生了Processing 的出現。

Processing 建立在Java 之上，是其的一個延伸，因其開源的特性，也得到了許多開源社區的支持，有著極高的拓展性，比如OpenGL，Javascript 等等，Processing 項目也可以作為Applet 的形式，在Java 環境下進行開發。

1 2D 溫度可視化的設計與實現

1.1Java 模式

Processing 作為Java 的一種延伸，可以將其移植到Java環境下，讓Processing 不僅能適用于非程序開發人員，這也為職業可視化開發人員提供一個更為專業的平臺，讓其有更廣泛的應用。本次項目便是在Java 環境下完成。Processing提供了完整的Java 接口，在項目中引入Processing 提供的core.jar, gluege-rt.jar, gluegen-rt-natives.jar, joglall.jar, jog-all-natives.jar，選擇自己所用對應的版本。在開發時，引入processing.core，并將要實現的代碼作為PApplet 的子類,若要將其獨立運行成Java Applet，在Demo的main 函數中加入

PApplet.main(new String[] { "--present", "Demo" });

1.2 可視化處理

先確定某個溫度由某個顏色值表示，周邊的溫度以溫度顏色的透明度隨距離遞增。考慮到一個傳感器只能夠準確地測出某一點的溫度，筆者先將該傳感器假設為一個小的熱源放出點，周邊隨距離而降低的溫度暫先用透明度增大的相同顏色表示。就這個傳感器，先選取相應的區域作為畫板，將整個畫板透明化，以傳感器為畫板中心做出該傳感器的溫度分布，再按照該傳感器在原房間地圖的坐標覆蓋上去。當相鄰的兩個傳感器的探測范圍相交時，具有透明度的顏色會自動疊加，合成一個中間色，我們便用這個中間色去預測沒有傳感器監測的位置的實際溫度。可以看出，僅僅是透明的顏色并不能表現我們需要的溫度值，但是通過Processing 對具有透明度的顏色的疊加表現，便可以很輕松地得到一個可以比較合理地預測出當前位置實際溫度的顏色，否則已經存在的顏色將會直接被新的顏色覆蓋，讓可視化效果失去合理性。因此，有足夠數量的傳感器以合理的位置分布在房間內，就可以得到理想的溫度分布。

根據預定的溫度顏色對應表，通過對20°C 和8°C 兩個傳感器周邊溫度分布進行透明化之后，合成出來的中間色也基本符合沒有傳感器的位置的實際溫度。

筆者選取HSB 色系去實現與溫度的對應。在RGB 色系中，需要R,G,B 三個信息組成一個顏色，而在HSB 中，在飽和度(Saturation)和亮度(Brightness)確定時，只需色調值(Hue)就可確定一個顏色，大大簡化了處理過程。

1.3 寬度優先搜索

我們提到用具有透明度屬性的顏色去表示傳感器周邊溫度，那該如何去判斷透明度，那就是距離。而由于現實世界中障礙物的存在(墻壁，窗戶等)，阻礙了溫度的直接傳導，所以不能簡單地直接計算目標位置距離傳感器的直接距離。考慮到這些，寬度優先搜索則成了一個較為理想的解決方法。我們給空間上的每個像素點定義1 個單位距離，而障礙物的像素點則定義一個較大的距離，以此來表現出其對溫度傳導的阻礙作用，再對各個像素點做寬度優先搜索，便可以得到一個合理的距離分布。

寬度優先搜索從根節點開始依次搜索其所有鄰節點，當一層中的所有點的鄰節點全部搜索完畢之后，則開始搜索下一層的所有節點的鄰節點，依次類推……在此，筆者選擇8 向的歐幾里得距離去計算距離值，然后對每個像素點選取距離最小的值。而對于墻壁等地圖中為黑色的像素點，給其設置一個合理并且較大的值，就可以解決在遇到不同障礙物的情況下(單個或者多個黑色像素點)，由于距離的增加而導致透明度相應的改變。例如筆者選擇一個傳感器的有效范圍為150 個像素點，給一個黑色像素點的距離值設為75。

得到每個像素點的距離之后，用map()函數將Alpha 的范圍(0-255)值映射到當前的距離值范圍(0-150)。為了能得到更好的實際效果，筆者在做映射變化時做了點調整，使得距離越遠時透明度隨距離的變化率就越大。

transparent=map((float)Math.pow(MAX_DISdist,1.5),0,(float)Math. pow(MAX_DIS,1.5),0,255);

2 3D 效果

考慮到多個樓層，我們可以將多個樓層的溫度分布情況呈現在一個3D 模型中，并且提供樓層切換、視角翻轉縮放等功能，通過對各個樓層做透明度處理，強化當前樓層、弱化其他樓層，從而獲得更好的視覺體驗，提高產品的使用價值。

在Processing 的3D 模型中，坐標系如右圖所示，當完成了二維可視化后，若把原本2D 中的X-Y 平面拉伸到3D 中的X-Z 平面，再經過角度的翻轉，便能實現基本的3D 效果。在beginShape() 和endShape() 之間用texture() 和vertex()實現要圖形的樣式與位置信息。rotateX(),rotateY()實現沿坐標軸的旋轉。

假設有兩個樓層，單個熱源時寬度優先搜索的實驗效果。

floor1=(float)(currentFloor*100-Math.pow(-1,currentFloor)*160*MAX_COUNT-changeCount)/MAX_ COUNT);

floor2=(float)((3-currentFloor)*100-Math.pow(-1,3-currentFloor)*160*(MAX_COUNT-changeCount)/MAX_ COUNT);

改變currentFloor 便能實現樓層切換。我們設計兩個透明度，在切換的過程中會有樓層透明度的動態變化，最終當前樓層(currentFloor)的透明度為100%(255 為100%，此處值為260)，非當前樓層為15.6%(40/255)。假設MAX _COUNT=60，Processing 中每秒默認為30 幀，這樣切換樓層的變化過程耗時2 秒。

同時，利用計算當前鼠標坐標與上一個鼠標坐標的差值，便可以完成用鼠標轉動3D 模型的功能。通過scale()也可以控制3D 模型的縮放，并用constrain()限制其縮放范圍。

本論文并未對3D 模型中Y 軸方向的溫度分布可視化做深入研究，故暫用隨機給取的顏色的飽和度(Brightness)做Y 軸分量

3 結論

在未來，信息將會大量地涌入人類生活，如果幫助人類有效地處理信息將會成為一個重要的課題。可視化技術無疑是最好的也是值得去深入研究的方向之一。通過本文的實驗我們發現，Processing 技術的出現，大大簡化了可視化實現的難度，本次溫度可視化的實驗也只能算是一個拋磚引玉之作，但藉此，筆者相信，在不久的將來，Processing 技術也會在人類生活，平面以及三維設計等等各個領域，占有重要的地位。

[1]羅萬才，雷君虎，李敘庚.基于Processing的信息可視化研究.電腦知識與技術，2009，5.

[2]Casey Reas, Ben Fry, Getting Started with Processing, makezine.com.

[3]Casey Reas, Ben Fry, Processing A Programming Handbook for Visual Designers and Artists, MIT Press.

[4]http：//processing.org/overview/ (Date Accessed： 2013.08.18).

[5]http：//baike.baidu.com/link?url=mmXpx4Z5CiG9z6k l7yPCdtV0Vff3PixYFXnoEyA9t2_NSqnTvViV-uEx9wj2c4Rz2QvOH Wi5GtmA2ae6QjYEIK (Date Accessed： 2013.08.18).

[6]http：//en.wikipedia.org/wiki/Breadth-first_search (Date Accessed： 2013.08.19).

[7]Stuart Russell, Peter Norvig, Artificial Intelligence A Modern Approach (Third Edition).