基于Processing的室內(nèi)溫度可視化的實(shí)現(xiàn)

徐 杰

同濟(jì)大學(xué)軟件學(xué)院，上海 200092

0 引言

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

Processing 建立在Java 之上，是其的一個(gè)延伸，因其開源的特性，也得到了許多開源社區(qū)的支持，有著極高的拓展性，比如OpenGL，Javascript 等等，Processing 項(xiàng)目也可以作為Applet 的形式，在Java 環(huán)境下進(jìn)行開發(fā)。

1 2D 溫度可視化的設(shè)計(jì)與實(shí)現(xiàn)

1.1Java 模式

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

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

1.2 可視化處理

先確定某個(gè)溫度由某個(gè)顏色值表示，周邊的溫度以溫度顏色的透明度隨距離遞增?？紤]到一個(gè)傳感器只能夠準(zhǔn)確地測出某一點(diǎn)的溫度，筆者先將該傳感器假設(shè)為一個(gè)小的熱源放出點(diǎn)，周邊隨距離而降低的溫度暫先用透明度增大的相同顏色表示。就這個(gè)傳感器，先選取相應(yīng)的區(qū)域作為畫板，將整個(gè)畫板透明化，以傳感器為畫板中心做出該傳感器的溫度分布，再按照該傳感器在原房間地圖的坐標(biāo)覆蓋上去。當(dāng)相鄰的兩個(gè)傳感器的探測范圍相交時(shí)，具有透明度的顏色會(huì)自動(dòng)疊加，合成一個(gè)中間色，我們便用這個(gè)中間色去預(yù)測沒有傳感器監(jiān)測的位置的實(shí)際溫度?？梢钥闯?，僅僅是透明的顏色并不能表現(xiàn)我們需要的溫度值，但是通過Processing 對(duì)具有透明度的顏色的疊加表現(xiàn)，便可以很輕松地得到一個(gè)可以比較合理地預(yù)測出當(dāng)前位置實(shí)際溫度的顏色，否則已經(jīng)存在的顏色將會(huì)直接被新的顏色覆蓋，讓可視化效果失去合理性。因此，有足夠數(shù)量的傳感器以合理的位置分布在房間內(nèi)，就可以得到理想的溫度分布。

根據(jù)預(yù)定的溫度顏色對(duì)應(yīng)表，通過對(duì)20°C 和8°C 兩個(gè)傳感器周邊溫度分布進(jìn)行透明化之后，合成出來的中間色也基本符合沒有傳感器的位置的實(shí)際溫度。

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

1.3 寬度優(yōu)先搜索

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

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

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

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

2 3D 效果

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

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

假設(shè)有兩個(gè)樓層，單個(gè)熱源時(shí)寬度優(yōu)先搜索的實(shí)驗(yàn)效果。

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 便能實(shí)現(xiàn)樓層切換。我們?cè)O(shè)計(jì)兩個(gè)透明度，在切換的過程中會(huì)有樓層透明度的動(dòng)態(tài)變化，最終當(dāng)前樓層(currentFloor)的透明度為100%(255 為100%，此處值為260)，非當(dāng)前樓層為15.6%(40/255)。假設(shè)MAX _COUNT=60，Processing 中每秒默認(rèn)為30 幀，這樣切換樓層的變化過程耗時(shí)2 秒。

同時(shí)，利用計(jì)算當(dāng)前鼠標(biāo)坐標(biāo)與上一個(gè)鼠標(biāo)坐標(biāo)的差值，便可以完成用鼠標(biāo)轉(zhuǎn)動(dòng)3D 模型的功能。通過scale()也可以控制3D 模型的縮放，并用constrain()限制其縮放范圍。

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

3 結(jié)論

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

[1]羅萬才，雷君虎，李敘庚.基于Processing的信息可視化研究.電腦知識(shí)與技術(shù)，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).