圖片誘發情緒實驗系統的設計與實現

池慧玲， 卿粼波， 劉 蘋， 王亞男

（1 四川大學 電子信息學院， 成都 610065； 2 四川大學 商學院， 成都 610064）

0 引言

根據行為和神經科學的研究，不同的圖片在某種程度上能夠誘發人們不同的情緒，為了驗證積極的圖片，例如：“花卉植物”、“動物萌寵”、“自然風景”等是否能夠激發人們積極的情緒，產生愉悅的心情；消極的圖片是否會使人們感到恐懼和不安，許多心理學領域的研究人員利用軟件E－Prime 做了大量的實驗。 E－Prime 是實現行為研究的一個跨平臺系統，是一個心理實驗生成系統，優化了在行為實驗中的刺激組織、時間精度等功能［1］。 但E－Prime為單任務的結構，不能同時進行多個任務，且在設計復雜的心理實驗時需要編寫相關控件的代碼，對研究人員的編程能力要求較高。

除此之外，心理學研究人員較常用的軟件是DMDX，但面對大量的實驗數據，DMDX 不能在系統內進行數據的篩選和管理，需借助其他軟件才能完成［2］。

本文針對上述實驗軟件的不足，運用B／S 架構設計開發了圖片誘發情緒實驗研究的系統，該系統可支持多種格式的圖片、音頻等誘發材料，實現了在互聯網上進行圖片誘發情緒實驗的相關流程，以及研究人員對實驗數據的管理。

1 系統需求分析及總體設計

1.1 需求分析

根據相關的圖片誘發情緒實驗的要求，針對實驗對象應該無精神病史、并且視力正常，本系統設計色盲測試、抑郁量表測試、焦慮量表測試的功能篩選出滿足要求的實驗對象；針對已通過資格審核的候選對象需要填寫信息并簽署相關的同意書，本系統設計在線電子簽名的功能；針對實驗對象觀看相關實驗講解視頻的要求，本系統設計講解視頻播放的功能；針對實驗對象進行情緒測試，本系統設計積極消極情緒量表測試、愉悅度測試、喚醒度測試的功能。 其中，愉悅度是指高興或悲傷的程度，范圍是從極端悲傷到極端高興；喚醒度是指身體激活程度，范圍是從極端困倦（如睡眠）到極端激動（如高度緊張）；針對實驗對象需要對誘發情緒的圖片或者音頻進行愉悅度、喚醒度的評分，本系統設計圖片誘發實驗對象情緒測試的功能［3］。

本系統還考慮到相關心理學研究人員會對實驗結果數據進行分析和挖掘，設計角色權限管理為研究人員提供管理員的權限，登錄系統后可查看并管理實驗圖片信息、實驗對象信息、以及實驗對象情緒測試的數據信息。

1.2 總體設計

在明確了系統需求的基礎上，為高效地完成圖片誘發情緒的研究實驗，將系統的總體實現目標通過合理的規劃與設計分為獨立的、明確的、滿足實驗需求的功能模塊。 系統主要包括4 個模塊，即：實驗對象篩選模塊、實驗對象信息錄入模塊、實驗流程模塊、實驗數據管理模塊。

實驗對象篩選模塊主要負責候選對象進行色盲測試、抑郁量表測試、焦慮量表測試；實驗對象錄入信息模塊主要負責實驗對象的身份信息填寫、知情同意書簽署；實驗流程模塊分為預備實驗和正式實驗，其中預備實驗主要負責視頻指標觀看、情緒測試，正式實驗主要負責圖片誘發實驗對象情緒測試；實驗數據管理模塊主要負責實驗圖片信息、實驗對象信息、實驗數據信息的管理。 系統框圖如圖1 所示。

圖1 系統框圖Fig. 1 System diagram

2 系統功能模塊設計與實現

2.1 實驗對象篩選模塊

候選對象需要通過3 項資格審核測試后才能成為正式的實驗對象，錄入實驗對象的信息。 其中，3項審核資格的測試分別為色盲測試、抑郁量表測試和焦慮量表測試。 若3 項測試均通過，需要填寫身份信息以及簽署知情同意書；否則，系統將會提示候選對象不能參加該實驗。 實驗對象資格審核流程如圖2 所示。

圖2 資格審核流程圖Fig. 2 Qualification review flow chart

2.2 實驗對象信息錄入模塊

實驗對象通過資格測試后，需要填寫相關的身份信息，并且簽署本實驗相關的知情同意書。 隨著HTML5 的快速發展，新引入的Canvas 元素也吸引了廣大開發者的關注。 Canvas 是一個即時渲染的矩形區域畫布，可以通過JavaScript 控制在每一個像素上的繪制，所提供的API 可以在畫布上繪制各種曲線、形狀、以及文字渲染［4］。 并且，Canvas 具有強大且高效的繪圖特性，無需第三方插件。 因此，本系統采用了Canvas 技術通過鼠標操作實現在線電子簽名的功能，能夠高效、便捷地實現簽署同意書的無紙化操作。

2.2.1 在線電子簽名的筆跡實現平滑效果

實驗對象書寫出來的線條存在鋸齒，平滑度差。究其原因，可表述如下：

（1）Canvas 用lineTo方法連接相鄰的2 個點，2個點之間是一條筆直的直線。 因此，鼠標采集到的多個點通過此方式繪制出來的是折線。

（2）瀏覽器對mousemove事件的采集頻率有限，每隔一段時間才會對鼠標的坐標進行采集。 因此，鼠標移動得越快，采集到的2 個相鄰點間的距離越遠，導致線條不平滑，書寫筆跡顯得不美觀。 本系統將實驗對象書寫的路徑看作是多段折線，利用貝塞爾曲線算法進行處理，通過貝塞爾曲線方程找到每段折線兩端點之間的插值點，再將這些點擬合起來，形成一條光滑的曲線。

根據貝塞爾曲線的基本思路，本系統利用貝塞爾曲線方程對實驗對象書寫路徑的采集點進行了以下處理，以使得實驗對象書寫筆跡能達到平滑效果，假設實驗對象利用鼠標書寫的筆跡為ABCDEFG，書寫筆跡如圖3 所示。 對此擬展開研究分述如下。

圖3 書寫筆跡Fig. 3 Writing handwriting

（1） 實 驗 對 象 按 下 鼠 標 時， 通 過 監 聽mousedown事件采集到起始點為A，實驗對象松開鼠標時，通過監聽mouseup事件采集到終止點為G，通過監聽mousemove事件采集到鼠標經過的點為B、C、D、E、F。

（2）此時設置系數k ＝0.5，在AB上找到一點A1滿足A A1／AB ＝ k，將A A1作為書寫筆跡的一部分。

（3）在BC上找到一點B1滿足BB1／BC ＝k，然后將A1和B1作為2 個端點，B作為控制點，通過二次貝塞爾曲線公式計算后， 繪制出二次貝塞爾曲線A1BB1，并將曲線A1BB1作為書寫筆跡的一部分。

（4） 同樣地，根據第（2） 步的條件，依次找出C1，D1，E1，F1后，再根據第（3） 步繪制出各個線段的二次貝塞爾曲線，都作為書寫筆跡的一部分。

（5）將這些點順滑地連接起來，即可得到平滑的書寫筆跡。

2.2.2 在線電子簽名的筆跡實現筆鋒效果

實驗對象在瀏覽器上通過鼠標操作書寫筆跡時，無法像人們在紙張上寫字一樣，能夠獲取筆的按壓力度和移動速度，在線電子簽名的筆跡沒有像手寫筆跡一樣具有筆鋒的效果， 這樣一來就顯得不夠美觀。 實驗對象在瀏覽器上無法獲得按壓力度，但能通過畫筆的移動速度來實現筆跡粗細變化的效果，讓在線電子簽名的字體變得更加美觀。 這里對研究內容給出闡釋剖析如下。

（1）Canvas 監聽mousemove事件，對實驗對象書寫移動經過的點坐標進行采集，并記錄當前的時間，保存在數組中。

（2）利用距離公式和速度公式可求得數組中兩點（例如A，B點）之間的距離S和速度V。 距離和速度可分別由式（1）、（2） 來計算求得：

（3）設定最大線寬W0，最小線寬W1，最小速度Vmin，增長線寬Wa，然后通過如公式（3）、公式（4） 得到A，B兩點的線寬Wc：

（4）畫線速度越快線條越細，但畫線速度越快，所采集的兩點間的距離S越大，因此距離和線寬是成反比的。可以利用兩點間距離S 判斷下一個點（C點）的線寬Wn與前一個點（B點）的線寬Wc之間的關系，關系有如下3 種，按照對應的方式進行繪圖：

①若Wn＞Wc時，將AB這條線段利用一系列的點進行補充，補充時注意點與點之間的距離越小，并且點的半徑越來越小，直到最小的點的直徑與AB的線寬相等。 這些點的圓心是與AB線寬的垂直中點線保持在同一條水平線上的，繪圖方式1 如圖4 所示。

圖4 繪圖方式1Fig. 4 Drawing mode 1

②若Wn＜Wc時，將BC這條線段利用一系列的點進行補充，補充時注意點與點之間的距離越小，并且點的半徑越來越大，直到最小的點的直徑與BC的線寬相等。 這些點的圓心是與BC線寬的垂直中點線保持在同一條水平線上的，繪圖方式2 如圖5 所示。

圖5 繪圖方式2Fig. 5 Drawing mode 2

③若Wn＝Wc時，保持線寬不變。

2.3 實驗流程模塊

2.3.1 預備實驗

系統將自動播放實驗講解的相關視頻，實驗對象可以通過該視頻了解實驗目的、評價指標以及評價示例，而后將開始進行情緒測試，其中包含積極／消極情緒量表測試、愉悅度測試、喚醒度測試。

如果大量的實驗對象同時觀看講解視頻，瀏覽器將會向服務器發出大量視頻資源的請求，導致了視頻加載的速度過慢，實驗對象在觀看講解視頻時會出現卡頓、延遲等現象。 目前的相關視頻播放器都需要安裝Flash 插件應用，但Flash 卻存在一定漏洞安全隱患，并且用Flash 解碼視頻非常耗電，運行緩慢，容易造成設備死機。

HTML5 的出現就是為了減少瀏覽器對插件應用的依賴程度，減少流媒體播放視頻需要安裝插件的過程。 HTML5 提供了新的標簽和應用接口，開發者使用其標準的語句就能實現豐富的多媒體內容的展示。 在HTML5 的標準中包含了更多交互性強的音頻、視頻等可支持離線緩存的應用接口［5］。 因此，本系統采用了HTML5 的Video 標簽實現了視頻播放的功能。 其中，Video 標簽的preload 屬性可控制視頻是否在頁面加載時進行加載并預備播放。 具體實現代碼如下：

在實驗對象觀看了講解視頻后，將開始進行積極／消極情緒量表測試、愉悅度測試、喚醒度測試。本系統采用的是B／S 架構，實驗對象訪問各個測試界面時，瀏覽器需要向服務端傳遞參數信息以發送各種請求。 在實驗對象操作不當的情況下，瀏覽器不斷地重復提交請求，而重復提交的請求會出現響應不及時，導致服務器的負荷過大［6］。 量表重復提交的數據將會造成數據庫中的數據冗余，數據交互和數據庫訪問執行效率大大降低。 針對上述問題，本系統提出以下具體措施進行解決。

（1）利用Lodash.throttle節流函數防止量表重復提交：throttle函數會預先設定一個執行周期，當調用動作的時刻大于等于執行周期則執行該動作，然后進入下一個周期。 本文系統采用throttle節流函數防止量表在30s內進行多次提交，實現代碼具體如下：

（2）利用Session 防止量表重復提交：實驗對象訪問登錄頁面時，根據需要會隨機生成一個token，并且token 會被保存在當前這次會話請求的Session中。 在瀏覽器發送提交量表的請求時，通過瀏覽器頁面傳遞服務端生成的token，服務端在接收到該token 后會與保存在Session 中的token 進行比較，以判斷量表是否重復提交，并做出相應的處理。

2.3.2 正式實驗

實驗對象將評價15 組圖片的愉悅度、離散情緒類別（高興、驚奇、生氣、恐懼、悲傷、厭惡、中性），評價完畢后。 15 組圖片再次呈現，依次評價圖片的喚醒度。 其中，作答時間不做控制。 每一組結束后，系統將彈出提示框強制休息至少3 min。 依次評價過15 組圖片后，系統將自動彈出“本次實驗結束”的提示框。

實驗對象進行圖片測試時，瀏覽器向服務器請求大量的圖片資源，加載的圖片越多，服務器的壓力越大，不僅影響了渲染速度、而且浪費帶寬，導致網頁獲取資源的時間更長、效率更低。 為了實驗對象能夠高效地完成測試，本系統利用圖片懶加載的方式減輕服務器的壓力，為實驗對象提供更好的體驗感。 懶加載的處理方式是設置圖片的延時加載，在瀏覽器可視區域外的圖片不會進行加載，當頁面進行輪播切換的時候，將會加載進入瀏覽器可視區域的圖片。 這樣不僅提高了測試頁面加載圖片的速度，而且減少了發送圖片請求的并發量，從而減輕了服務器的壓力［7］。 本系統利用Vue－lazyload 插件對圖片進行懶加載。 具體實現代碼如下：

＜img class＝＂lazy＂ src ＝＂［占位圖地址］＂ dataoriginal＝＂［真實url 地址］＂ alt＝＂I＇m an image＂＞

其中，img 標簽的屬性src 用一個空白的透明占位圖來代替，將圖片真實的地址放入屬性dataoriginal 中，監聽瀏覽器的可視化區域，當圖片的位置出現在可視區域中時，將src 中的屬性值替換為data－original 的屬性值。

2.4 實驗數據管理模塊

通過角色權限管理將研究人員設置為管理員的身份，管理員可以查看圖庫信息、實驗對象的信息以及下載實驗對象各環節情緒測試的數據表。 該模塊不僅為研究人員提供圖片篩選的功能，而且能夠將實驗對象的身份信息、實驗對象的情緒測試、圖片誘發實驗對象情緒測試的數據關聯在數據表中，提高了研究人員對數據進行處理和分析的效率。

本系統采用關系型數據庫MySQL 來對實驗的信息進行存儲和管理［8］，所有的數據均以關系型表格存于數據庫。 MySQL 數據庫具有體積小、成本低、速度快的優點［9］。 數據庫設計的ER（實體關系）如圖6 所示。

圖6 數據庫ER 圖Fig. 6 Database ER diagram

3 系統測試

3.1 實驗對象篩選模塊的測試

參與實驗的人員正式申請成為本系統的實驗對象前需要完成3 項測試，分別是色盲測試、抑郁量表測試和焦慮量表測試。 3 項測試頁面分別如圖7 ～圖9 所示。

圖7 色盲測試Fig. 7 Color blindness test

圖8 抑郁量表測試Fig. 8 Depression scale test

圖9 焦慮量表測試Fig. 9 Anxiety scale test

3.2 實驗對象信息錄入模塊的測試

通過3 項測試后，將進入身份信息填入的界面，實驗對象需要輸入“用戶名、聯系方式、密碼、性別、年齡、學歷、民族、角色、專業背景”等基本信息，其中聯系方式及密碼將作為實驗對象的賬號及密碼。身份注冊頁面如圖10 所示。

圖10 身份注冊Fig. 10 Status register

在身份信息填寫過后，需要閱讀實驗相關的知情同意書，并簽署自己的名字。 其中，在線電子簽名書寫筆跡優化前后的對比結果如圖11、圖12 所示。

圖11 優化前的書寫筆跡Fig. 11 Handwriting before optimization

圖12 優化后的書寫筆跡Fig. 12 Optimized handwriting

3.3 實驗流程模塊的測試

在實驗對象登錄頁面后，實驗對象開始進行積極／消極情緒量表的測試、愉悅度測試、喚醒度測試。3 項測試如圖13～圖15 所示。

圖13 積極／消極情緒量表的測試Fig. 13 Positive and negative emotion scale

圖14 愉悅度測試Fig. 14 Pleasure test

圖15 喚醒度測試Fig. 15 Arousal test

3 項測試提交以后，本系統將自動播放實驗講解視頻，視頻內容包括實驗目的、評價指標、評價示例。 講解視頻界面如圖16 所示。

圖16 講解視頻Fig. 16 Interpretation of the video

視頻播放后，實驗對象可以正式開始圖片誘發情緒測試實驗，正式實驗如圖17 所示。

圖17 正式實驗Fig. 17 Formal experiment

3.4 實驗數據管理模塊的測試

研究人員在登錄系統后會通過角色權限管理的認證，進入管理員的界面。 該管理界面能進行實驗圖片審核、實驗數據表下載以及實驗對象信息管理。詳情如圖18～圖20 所示。

圖18 實驗圖片審核Fig. 18 Review of experimental pictures

圖19 實驗數據表下載Fig. 19 Experimental data sheet download

圖20 實驗對象信息表Fig. 20 Table of subject information

3.5 系統響應速度測試

在高并發量的訪問環境下，最大限度需要容納3000人同時訪問系統，為保證實驗過程中系統的穩定性，利用Apache 開發的Jmeter 軟件進行系統的壓力測試［10］。 服務器處理器為Intel（R） Core（TM） i5－6500 CPU ＠ 3.20 GHz 3.20 GHz，內存為12 GB，系統版本為Windows10 專業版，瀏覽器為Google Chrome。 采用Jmeter 啟動3000 個線程，向系統發起請求，測試結果見表1。 由表1 可知，系統的吞吐量為正常水平，且錯誤率為0%，通過這些指標可以看出該系統的性能滿足3000 人進入實驗的要求。

表1 系統壓力測試表格Tab. 1 System pressure test form

4 結束語

本文針對現有的心理學實驗研究中軟件系統的不足，運用B／S 架構設計并開發了圖片誘發情緒實驗研究的系統，能夠實現在互聯網上進行圖片誘發情緒實驗的相關流程，利用HTML5 的Canvas 技術實現了在線電子簽名的功能，并且根據圖片情緒測試實驗的流程實現了講解視頻的播放、情緒測試、圖片誘發情緒測試等功能。 該系統具有輕量級、可移植性高、跨平臺性能好和交互性強等優點，對于心理學研究人員分析情緒特性有很大的幫助。