翟國棟 李瑞興 楊琛

摘? 要 優(yōu)化設計融合最優(yōu)化設計與計算機技術來尋求工程最優(yōu)解。在優(yōu)化設計課程教學中，通過Web前端技術設計一款迭代過程可視化的優(yōu)化設計課程實踐平臺，能夠根據(jù)用戶的輸入自動彈出可視化的圖形顯示，包括迭代過程中迭代點的變化及函數(shù)值的變化。該系統(tǒng)運用HTML、CSS和JavaScript語言進行設計，特別是在迭代過程跟蹤可視化方面表現(xiàn)突出。

關鍵詞 優(yōu)化設計;教學實踐平臺;迭代過程可視化;MATLAB

中圖分類號：G642.3? ? 文獻標識碼：B

文章編號：1671-489X（2019）22-0024-04

Design and Application of Teaching Practice Platform for Opti-mization Design Course//ZHAI Guodong， LI Ruixing， YANG Chen

Abstract Optimized design incorporates optimal design and compu-

ter technology to find engineering optimal solutions. In the optimi-zation design course teaching， this paper designs an iterative process

visualization optimization design course practice platform through Web front-end technology， which can automatically pop up the visual graphic display according to the users input， including the change of iteration point and the function value in the iterative pro-

cess. Variety. The system is designed using HTML， CSS， and Java-Script， especially in the iterative process of tracking visualizations.

Key words optimization design; teaching practice platform; visua-lization for iterative process; MATLAB

1 引言

優(yōu)化設計課程的教學目標是使學生掌握優(yōu)化設計的基本理論和方法，能夠針對復雜工程問題合理地建立數(shù)學模型、選擇優(yōu)化方法、編寫計算機程序，進而求出最優(yōu)設計方案[1-3]。長期以來，由于機械優(yōu)化設計課程理論性強、知識綜合、內(nèi)容抽象等實際問題的存在，一定程度上影響了教學質(zhì)量和學生的學習興趣[4]。

優(yōu)化設計始于20世紀60年代，經(jīng)過近50年的研究與發(fā)展，其優(yōu)化算法及計算機輔助水平得到快速發(fā)展[5-6]。華中理工大學、北京科技大學、北京工業(yè)大學等單位研發(fā)完成優(yōu)化程序庫（OPB），為優(yōu)化設計的發(fā)展做出了突出貢獻[7]。在國外，以MathWorks公司推出的MATLAB軟件為例，該軟件具有強大的數(shù)據(jù)分析、可視化顯示、算法開發(fā)等功能[8-9]，其附加的優(yōu)化工具箱也為處理優(yōu)化問題帶來極大方便。

隨著電子信息技術的不斷發(fā)展，機械設計優(yōu)化可視化逐漸被引用到機械優(yōu)化設計過程中[10]。算法可視化技術，將算法的執(zhí)行過程實時地用圖形和動畫方式演示出來，使枯燥乏味的算法流程以形象、生動、直觀的方式展現(xiàn)出來[11]，可以有效銜接最優(yōu)化方法的理論與實驗教學，有助于學生深入理解最優(yōu)化理論及思想，掌握最優(yōu)化算法設計技巧，提升創(chuàng)新能力和工程實踐能力[12]。但是現(xiàn)有的優(yōu)化設計軟件或程序庫均存在專業(yè)性強、界面復雜、操作難度大及可視化功能弱的缺陷。為了便于學生理解優(yōu)化方法，本文通過Web前端技術設計了一款迭代過程可視化的優(yōu)化設計課程實踐平臺，能夠根據(jù)用戶的輸入自動彈出可視化的圖形顯示，包括迭代過程中迭代點的變化及函數(shù)值的變化。

2 系統(tǒng)結(jié)構(gòu)組成

該系統(tǒng)共包括六大模塊，如圖1所示，分別為優(yōu)化方法選擇模塊、目標函數(shù)輸入模塊、約束條件輸入模塊、基本參數(shù)輸入模塊、優(yōu)化跟蹤模塊、結(jié)果顯示模塊。其中前四個模塊為輸入環(huán)節(jié)，用戶可以直接根據(jù)提示輸入相應的內(nèi)容;后兩個模塊為輸出環(huán)節(jié)，可以在用戶輸入后直接顯

示。其中優(yōu)化方法選擇界面如圖2所示。

3 系統(tǒng)關鍵技術

界面設計及實現(xiàn)? 本系統(tǒng)界面設計采用HTML與CSS共同設計，通過HTML實現(xiàn)程序與網(wǎng)頁的關聯(lián)以及用戶輸入框顯示及布局等，通過CSS設置元素背景、字體、顏色等內(nèi)容。設計過程中首先在HTML標簽內(nèi)通過Link元素引入CSS樣式，即可將HTML與CSS關聯(lián)起來，共同編寫靜態(tài)界面。通過HTML與CSS聯(lián)合設計用戶界面，具有簡便易用、易于調(diào)試等優(yōu)點。

優(yōu)化算法編程? 本系統(tǒng)優(yōu)化算法的編程使用JavaScript

語言，該語言與C語言具有相似的循環(huán)邏輯。編程主體是各個算法的迭代過程，運用JavaScript語言中的循環(huán)語句、判斷語句、選擇語句、創(chuàng)建函數(shù)等可以實現(xiàn)算法功能。以隨機方向法為例，算法的主體包括三個方面：首先編寫目標函數(shù)語句，其次編寫約束條件語句，最后編寫循環(huán)體。各個算法可以運用alert語句進行輸出調(diào)試，以判斷算法的正確性。

用戶函數(shù)的識別與獲取? 該過程的重點是將用戶在界面上輸入的字符串即模型函數(shù)，轉(zhuǎn)化為計算機可以識別的語言。實現(xiàn)該過程可以分為兩步：首先用JQuery中的val獲取輸入框中的函數(shù)，然后運用JavaScript語言中的eval函數(shù)將字符串轉(zhuǎn)化為計算機語言即可。

可視化圖形顯示? 該步驟的重點是獲取算法迭代過程的中間點，用于繪制迭代過程圖形。實現(xiàn)該步驟可以運用ECharts模型：首先將迭代過程的中間點傳遞到數(shù)組中，然后將該數(shù)組賦予ECharts中的data數(shù)據(jù)中，用于繪制迭代跟蹤圖像。

4 優(yōu)化實例

實例選擇

1）橫截面為矩形的樹干加工。根據(jù)生產(chǎn)實際，需要把木梁的橫截面加工成矩形。為了滿足實際生產(chǎn)要求，應該對木梁的強度條件、應力、規(guī)格等進行限制：為滿足實際使用過程中的質(zhì)量要求，木梁截面的慣性矩應當大于W;木梁的高度不能超過H;其橫截面的高度應該介于其截面寬度的1～4倍之間。需要確定如何加工矩形的截面，才能使木梁的成本最低、質(zhì)量最輕。木梁加工示意圖如圖3所示。

根據(jù)已知條件建立優(yōu)化模型如下：

2）四連桿機構(gòu)復演預期函數(shù)機構(gòu)的設計。如圖4所示，桿1、2、3、4的長度分別為l1、l2、l3、l4。其中主動桿1的輸入角為φ。已知，當桿3在右極限位置時，主動桿1此時的角度為φ0。從動桿3的輸出角為ψ，初始角度為ψ0。試設計其連桿機構(gòu)的運動參數(shù)，使其輸出角ψ=f（φ，l1，l2，l3，l4，φ0，ψ0）的函數(shù)關系滿足當曲柄從φ0位置轉(zhuǎn)到φm=φ0+90°時，最佳再現(xiàn)下面給定的函數(shù)關系：

已知l1=1，l4=5，其傳動角允許在45°≤γ≤135°范圍內(nèi)變化。

根據(jù)已知條件建立優(yōu)化模型如下：

優(yōu)化過程

1）橫截面為矩形的樹干加工。根據(jù)優(yōu)化模型，運用本系統(tǒng)進行優(yōu)化，?。?，1）為初始點，其迭代過程變化如圖5所示，優(yōu)化結(jié)果函數(shù)值變化圖像如圖6所示，結(jié)果顯示如圖7所示。

2）四連桿機構(gòu)復演預期函數(shù)機構(gòu)的設計。根據(jù)優(yōu)化模型，運用本系統(tǒng)進行優(yōu)化，取（4.5，4）為初始點，其迭代過程變化如圖8所示，優(yōu)化結(jié)果函數(shù)值變化圖像如圖9所示，結(jié)果顯示如圖10所示。

結(jié)果分析? 對于橫截面為矩形的樹干加工，本系統(tǒng)輸出優(yōu)化最優(yōu)點為（1.149 5，0.756 8），函數(shù)最優(yōu)值為1.586 9。與MATLAB優(yōu)化工具箱求得的函數(shù)最優(yōu)點（1.151 1，0.754 6）

相比，函數(shù)最優(yōu)值1.586 8非常相近。

對于四連桿機構(gòu)復演預期函數(shù)機構(gòu)的設計，本系統(tǒng)輸出優(yōu)化最優(yōu)點為（4.127 6，2.324 9），函數(shù)最優(yōu)值為0.000 4，

與其他計算方法結(jié)果也極為接近。

另外，本系統(tǒng)針對黃金分割法、坐標輪換法等方法通過大量測試，其運行結(jié)果可靠。

5 系統(tǒng)優(yōu)勢

使用方便? 本系統(tǒng)簡化了用戶編程的繁雜過程，用戶可以在優(yōu)化方法選擇模塊中選擇相應的優(yōu)化方法，計算機會根據(jù)用戶的選擇直接跳到相應的模塊執(zhí)行用戶選擇的算法，用戶只需要完成相應的優(yōu)化模型的輸入。同時，用戶可以選擇多種優(yōu)化算法進行對比。

結(jié)果可視化? 傳統(tǒng)的優(yōu)化軟件只是簡單的結(jié)果顯示，缺乏對優(yōu)化過程的顯示，用戶很難對優(yōu)化結(jié)果進行評斷。本設計輸出顯示采用可視化的圖形與數(shù)字相結(jié)合的方式，分別為用戶展示迭代過程的軌跡變化與迭代過程中函數(shù)值變化兩種圖形顯示。用戶可以結(jié)合這兩種圖形對優(yōu)化過程與優(yōu)化結(jié)果進行評斷，有助于了解算法的本質(zhì)，擺脫黑箱設計的不足，可以用于教學演示。

6 結(jié)語

本教學實踐平臺具有界面簡潔、易于操作使用、可視化與結(jié)果顯示相結(jié)合的特點，系統(tǒng)可以完成用戶優(yōu)化算法選擇、優(yōu)化模型（包括目標函數(shù)與約束條件）、參數(shù)（包括起始點、取值下限、取值上限、約束精度、步長）的輸入。系統(tǒng)能夠根據(jù)用戶的輸入自動彈出可視化的圖形顯示，包括迭代過程中迭代點的變化及函數(shù)值的變化，同時能夠輸出最終結(jié)果，便于用戶對結(jié)果進行評價。

參考文獻

[1]王桂從，王玉增，任升峰，等.工程教育專業(yè)認證背景下機械優(yōu)化設計改革探索與實踐[J].科技經(jīng)濟導刊，2019，27（3）：168.

[2]李聚波，賈新杰，邱明.機械優(yōu)化設計課程教學探索與實踐[J].科技資訊，2015，13（35）：211-212，214.

[3]翟國棟，李明陽.機械優(yōu)化設計課程實踐教學項目設計[J].實驗室研究與探索，2017，6（5）：178-183.

[4]袁新梅，馮進，華劍.面向“卓越工程師教育培養(yǎng)計劃”的機械優(yōu)化設計課程教學研究與實踐[J].中國現(xiàn)代教育裝備，2016（9）：99-101.

[5]陳立周.機械優(yōu)化設計方法[M].北京：冶金工業(yè)出版社，1997：34-35.

[6]張翔，陳建能.機械優(yōu)化設計[M].北京：科學出版社，2015.

[7]余俊，周濟.優(yōu)化方法程序庫[M].武漢：華中理工大學出版社，1997.

[8]郭仁生.基于MATLAB的優(yōu)化分析與計算[J].機械設計與制造，2004（2）：60-62.

[9]李克勤.基于CDIO理念的機械優(yōu)化設計課程教學實踐[J].科教導刊，2015（11）：128-129.

[10]林昶，蔡甫卿，余秀德.關于機械優(yōu)化設計中可視化方法的研究[J].內(nèi)燃機與配件，2018（17）：13-14.

[11]張珂.《優(yōu)化設計》課程教學改革的探索與實踐[J].中國校外教育，2017（4）：102-103.

[12]漸令，孫清瀅，邵紅梅，等.最優(yōu)化方法實驗課程創(chuàng)新設計[J].實驗室研究與探索，2018，37（10）：223-225，309.