您現在的位置是:電腦技術吧?>? 組裝維修 ??>??模擬流體,免費流體模擬??>??正文詳情

模擬流體,免費流體模擬

聶和怡2019-11-07 17:32:13 人圍觀
簡介流體模擬漢化版第1頁繪制橢圓把現實世界當中的物體模擬到計算機當中,一些簡單的物理實驗、碰撞旋轉等等難度還是不算很大,難度較大的應當算流體模擬。本文將在Canvas當中模擬出

第1頁繪制橢圓把現實世界當中的物體模擬到計算機當中,一些簡單的物理實驗、碰撞旋轉等等難度還是不算很大,難度較大的應當算流體模擬。

本文將在Canvas當中模擬出一個2D平面內的水珠,涉及的知識點和技巧包括:Jscex基礎知識,貝塞爾曲線的繪制,合理利用CanvasRenderingContext2D的translate和rotate等API。

繪制橢圓在模擬水滴之前,我們先思考一下怎么在canvas當中繪制一個橢圓。

大家可以很容易想到 下面幾種方案:1.根據橢圓笛卡爾坐標系方程繪制2.根據橢圓極坐標方程繪制3.根據橢圓曲率變化繪制4.利用四條貝塞爾曲線繪制第四種,也是性能最好的一種,這樣可以避免復雜的計算,充分利用CanvasRenderingContext2D的API(API的性能是通過嚴格測試,一般情況下比較靠譜).所以我們采用第四種方式來繪制橢圓。

var canvas;var ctx;ctx = canvas.getContext(2d);ctx.strokeStyle = #fff;function drawEllipse(x, y, w, h) {var k = 0.5522848;var ox = (w / 2) * k;var oy = (h / 2) * k;var xe = x w;var ye = y h;var xm = x w / 2;var ym = y h / 2;ctx.beginPath();ctx.moveTo(x, ym);ctx.bezierCurveTo(x, ym oy, xm ox, y, xm, y);ctx.bezierCurveTo(xm ox, y, xe, ym oy, xe, ym);ctx.bezierCurveTo(xe, ym oy, xm ox, ye, xm, ye);ctx.bezierCurveTo(xm ox, ye, x, ym oy, x, ym);ctx.stroke();ctx.clearRect(0,0,canvas.width,canvas.border=1 Height);drawEllipse(10, 10, 40, 82);(改變drawEllipse的四個參數試試)旋轉橢圓這里的旋轉不是繞上面的drawEllipse的前兩個參數x,y旋轉,二是繞橢圓的中心旋轉。

所以僅僅 CanvasRenderingContext2D.rotate是不夠的,因為CanvasRenderingContext2D.rotate是繞畫 布的左上角(0,0)旋轉。

所以我們先要把(0,0)通過CanvasRenderingContext2D.translate到橢圓的中心,然后再 drawEllipse(-a/2, b/2, a, b).上面這句話,就是繞中心旋轉的核心。

這里還可以推廣到任意圖形或者圖片(假設有約定的中心)。

如圖:

第2頁旋轉橢圓然后我們就可以先繪制一個鳥巢出來:htmlheadscript src=http://files.cnblogs.com/iamzhanglei/jscex.jscexRequire.min.js type=text/javascriptscriptheadbodystyle type=text/cssinput.css3btnbackground: -moz-linear-gradient(270deg, #d2ebf8, #0c8ab5);background: -webkit-linear-gradient(top, #d2ebf8, #0c8ab5);background: -o-linear-gradient(top, #d2ebf8, #0c8ab5);filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#000099CC, EndColorStr=#FF0087B4);border-top: 1px solid #38538c;border-right: 1px solid #1f2d4d;border-bottom: 1px solid #151e33;border-left: 1px solid #1f2d4d;border-radius: 4px;box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 2px 0px #1f3053, 0 4px 4px 1px #111111;color: #f0f0f0;font: bold 20px helvetica neue , helvetica, arial, sans-serif;padding: 10px 0 10px 0;text-align: center;text-shadow: 0px -1px 1px #1e2d4d;width: 150px;background-clip: padding-box;input.css3btn:hoverbox-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 3px 0px #1f3053, 0 4px 4px 1px #111111;cursor: pointer;input.css3btn:activebox-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;stylecanvas width=350 border=1 height=350 style=border: solid 15px #222; background-color: #111;color: #CCC;Your browser does not support the canvas element.canvasscriptvar canvas;var ctx;var px = 0;var py = 0;function init() {ctx = canvas.getContext(2d);ctx.strokeStyle = #fff;ctx.translate(70, 70);init();var i = 0;function drawEllipse(x, y, w, h) {var k = 0.5522848;var ox = (w / 2) * k;var oy = (h / 2) * k;var xe = x w;var ye = y h;var xm = x w / 2;var ym = y h / 2;ctx.beginPath();ctx.moveTo(x, ym);ctx.bezierCurveTo(x, ym oy, xm ox, y, xm, y);ctx.bezierCurveTo(xm ox, y, xe, ym oy, xe, ym);ctx.bezierCurveTo(xe, ym oy, xm ox, ye, xm, ye);ctx.bezierCurveTo(xm ox, ye, x, ym oy, x, ym);ctx.stroke();ctx.translate(x 70, y 100);px = -70;py = -100;ctx.rotate(10 * Math.PI * 2 / 360);var ct;var drawAsync = eval(Jscex.compile(async, function (ct) {while (true) {drawEllipse(px, py, 140, 200)$await(Jscex.Async.sleep(200, ct));}))function Button1_onclick() {ct.cancel();function Button2_onclick() {ct = new Jscex.Async.CancellationToken();drawAsync(ct).start();scriptbr /input type=button value=run onclick=return Button2_onclick() /input type=button value=stop onclick=return Button1_onclick() /bodyhtml第3頁繪制水滴

繪制水滴旋轉的橢圓和鳥巢神馬的和水滴有什么關系呢?我們通過改變橢圓的長軸和短軸,令其非常接近圓形(只能接近,不能等于圓形),然后每次旋轉擦除畫布,就可以達你預想不到的效果!這里需要注意的是,擦除畫布不再是一句 CanvasRenderingContext2D.clearRect(0,0,canvas.width,canvas.border=1 Height)就可以,因為畫布已經旋轉和畫布原點已經translate,所以我們使用 ctx.clearRect(-canvas.width, -canvas.border=1 Height, 2 * canvas.width, 2 * canvas.border=1 Height)來擦除畫布。

我們畫一個長軸42,短軸40的橢圓,旋轉并擦除畫布:function drawEllipse(x, y, w, h) {ctx.clearRect(-canvas.width, -canvas.border=1 Height, 2 * canvas.width, 2 * canvas.border=1 Height);var k = 0.5522848;var ox = (w / 2) * k;var oy = (h / 2) * k;var xe = x w;var ye = y h;var xm = x w / 2;var ym = y h / 2;ctx.beginPath();ctx.moveTo(x, ym);ctx.bezierCurveTo(x, ym oy, xm ox, y, xm, y);ctx.bezierCurveTo(xm ox, y, xe, ym oy, xe, ym);ctx.bezierCurveTo(xe, ym oy, xm ox, ye, xm, ye);ctx.bezierCurveTo(xm ox, ye, x, ym oy, x, ym);ctx.stroke();ctx.translate(x 20, y 21);px = -20;py = -21;ctx.rotate(10 * Math.PI * 2 / 360);var ct;var drawAsync = eval(Jscex.compile(async, function (ct) {while (true) {drawEllipse(px, py, 40, 42)$await(Jscex.Async.sleep(10, ct));}))會是什么效果呢?在線演示效果查看http://www.cnblogs.com/iamzhanglei/archive/2011/12/12/2284188.html現在大家可以看到一個晃動的水珠了

版權聲明:本文由 聶和怡 整理編輯。

原標題:cfd流體模擬,流體模擬設計

轉載注明出處:http://www.dn9ww09s.icu/assemble/11486.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • gtx顯卡,gtx960顯卡怎么樣

    gtx顯卡,gtx960顯卡怎么樣 相關圖片顯卡買rtx還是gtx視頻卡是計算機中非常重要的硬件設備其主要功能是實現電信號與圖像信號的相互轉換如果您需要玩游戲或工作,您可能想添加一個更好的視頻卡,如果您有高要求的軟...

  • 代碼示例文字英文,楔形文字

    代碼示例文字英文,楔形文字 相關圖片文ai聊天對話文本效果很簡單只需將以下代碼復制到您自己的頁面并按如下方式運行:DOCTYPE HTML public-//W3C//DTD XHTML 1.0 transitio楔形文字是哪個國家的文字...

  • 電腦藍屏修復按哪個鍵,電腦突然死機怎么辦

    電腦藍屏修復按哪個鍵,電腦突然死機怎么辦 相關圖片電腦老是藍屏怎么修復如今,計算機已經走進千家萬戶,給人們的生活帶來了便利然而,電子產品不可避免地存在一些問題在使用計算機時,用戶將遇到計算機崩潰,這將影響計算機用...

  • 局域網共享查看工具,一鍵局域網共享工具

    局域網共享查看工具,一鍵局域網共享工具 相關圖片局域網文件夾共享如果我們想訪問計算機局域網中的共享文件夾,我們需要計算機在同一個網絡中并建立一個局域網過去,計算機常常建立局域網,訪問計算機中的共享文件夾,但這也...

  • 基礎換填應比基礎寬度超出多少,換填寬度為超出底面寬度的

    基礎換填應比基礎寬度超出多少,換填寬度為超出底面寬度的 相關圖片平板貨車寬度能超出多少當我們定義divwidth時,它可能包含很多內容,這些內容將超過它我們將大力支持div或tables,這將影響網頁的美觀介紹了一種利用CSS強制隱藏冗余內容和自床的寬度...

  • 守望先鋒2配置,守望先鋒2配置要求

    守望先鋒2配置,守望先鋒2配置要求 相關圖片守望先鋒對電腦配置要求高嗎《守望先鋒》是暴雪制作的第一款團隊射擊游戲,目前在中國正式上市這個游戲是基于不久的將來的地球來自世界各地的超級英雄將用他們獨特的能力在戰...

  • ie瀏覽器假死,瀏覽器卡死

    ie瀏覽器假死,瀏覽器卡死 相關圖片瀏覽器看視頻卡死在web開發中,經常會遇到瀏覽器對事件沒有響應而進入偽死狀態的事件,甚至會彈出腳本運行時間過長的提示框如果發生這種情況,則意味著腳本失控瀏覽器中至少有...

  • 電腦酷狗怎么傳歌,酷狗傳歌到電腦

    電腦酷狗怎么傳歌,酷狗傳歌到電腦 相關圖片酷狗傳歌在哪里隨著科技時代的飛速發展,現在很多高科技越來越方便,那么你還在擔心電腦版的酷狗對著手機唱歌嗎現在它不像以前那么乏味了,也不需要數據線這對小白來說是個空...

  • 電腦顯示器調亮度,電腦顯示屏怎么調亮度調節

    電腦顯示器調亮度,電腦顯示屏怎么調亮度調節 相關圖片臺式電腦屏幕亮度怎么調電腦基本上是人手,很多人每天都會用電腦瀏覽網頁、上網、看視頻、面對電腦屏幕,眼睛有點受不了,對吧屏幕亮度是個大問題,那么如何調整電腦屏幕亮度...

  • 什么是元素,元素

    什么是元素,元素 相關圖片元素B教程詳細信息摘要:HTML5詳細信息標簽困難:主要支持瀏覽器:Chrome 12 版本我最喜歡的新HTML5標簽是details元素,它剛剛集成到Chrome的E元素...

熱評文章

  • 華碩筆記本開機后黑屏,華碩筆記本黑屏沒反應

    華碩筆記本開機后黑屏,華碩筆記本黑屏沒反應 相關圖片筆記本開機后一直黑屏在使用筆記本電腦的過程中,至少會遇到一些問題,長時間使用筆記本電腦后會出現問題然而,無論問題是什么,都會有解決的辦法或理由當筆記本打開時,黑屏...

  • 怎么右對齊,右對齊

    怎么右對齊,右對齊 相關圖片excel右對齊使用CSS來實現正確的對齊似乎是一個太基本的例子,但越是基本,越有可能出錯,有時甚至找不到線索這也是我開始寫CS時遇到的問題今天,我向CSS初學者演示了一個非常字符...

  • 筆記本怎么調節屏幕亮度,聯想筆記本屏幕亮度怎么調

    筆記本怎么調節屏幕亮度,聯想筆記本屏幕亮度怎么調 相關圖片聯想電腦亮度調節失靈現在有筆記本電腦的朋友不在少數他們中的許多人已經使用筆記本電腦很長時間了,但他們不知道如何調整筆記本電腦屏幕的亮度筆記本電腦的屏幕與普通顯示器...

  • 動易網站模板,動易cms怎么改模板

    動易網站模板,動易cms怎么改模板 相關圖片動易一--列文章列表內容的間隔顏色定義——方法1(Yahoo提供):如果是默認值,即不需要更改getarticlelist中的參數,則可以使用CSS定義(在后臺樣式動易標簽...

  • 怎么設置電腦自動關機,電腦設置每天自動關機

    怎么設置電腦自動關機,電腦設置每天自動關機 相關圖片電腦自動關機如今,越來越多的上班族使用電腦有時他們下班后忘記關電腦,這會浪費電能,影響電腦的使用壽命通過自動關閉計算機,不僅可以避免因遺忘而造成的計算機浪費,而且...

  • 電腦主機品牌推薦,電腦機箱哪個牌子好

    電腦主機品牌推薦,電腦機箱哪個牌子好 相關圖片電腦電源品牌最近,很多朋友都會問“什么牌子的臺式機機箱最好?”在買電腦之前實際上,很難回答這個問題畢竟,每個品牌都有自己的好產品,這些產品都很差不用說什么牌子的臺...

  • 怎么讓div置頂,div置頂

    怎么讓div置頂,div置頂 相關圖片怎樣讓div顯示在最上面!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/css3浮動置頂...

  • 電腦打不開回收站,電腦回收站打不開怎么辦

    電腦打不開回收站,電腦回收站打不開怎么辦 相關圖片電腦上回收站在哪里找眾所周知,win10系統將有一個回收站設置,供用戶臨時刪除文件一些用戶發現他們電腦上的回收站在使用過程中無法打開怎么了?怎么解決現在,小編給大家介紹一...

  • 八大戰略布局,八大

    八大戰略布局,八大 相關圖片戰略布局的意義您是否熟悉在DIV CSS網頁布局方面需要掌握的技能在這里我想和大家分享的是,良好的習慣可能會縮短你的設計周期這里有八個必要的CSS設計技巧好習慣可以縮短你的設四...

  • 筆記本固態硬盤哪個牌子好,移動固態硬盤什么牌子好

    筆記本固態硬盤哪個牌子好,移動固態硬盤什么牌子好 相關圖片瑞勢固態硬盤好么目前,作為市場上最熱門的硬件之一:固態硬盤,已經引起了越來越多的數字愛好者的關注由于固態硬盤已經擺脫了高價位的時代,逐漸進入了人性化的主流,很多注...

關注微信

变脸官网查询