HTML5及JS實現粒子群仿生動畫代碼

HTML5 數學 科技 IT豆豆 2017-04-18

上一篇《HTML5動畫背後的數學 - 粒子群仿生算法簡介》系統介紹了粒子群仿生的算法，涉及到人工生命、粒子群優化算法、遺傳算法、人工網絡神經及各種算法的比較，內容比較多，也比較複雜。

本篇將通過HTML及JS代碼，具體實現粒子群仿生算法。實現效果，可訪問http://www.ikinsoft.com/fangsheng1.html查看。（編者注：由於在今日頭條編輯器中貼代碼影響排版的美觀，這裡的代碼都通過截圖展示）

1、HTML代碼

HTML代碼比較簡單，具體如下圖：

HTML5及JS實現粒子群仿生動畫代碼

粒子群仿生的HTML代碼

這裡使用了canvas 作為實現粒子運動的容器。

2、JS代碼

在這裡，我們引用了Jquery第三方類庫。

程序總體結構如下圖：

HTML5及JS實現粒子群仿生動畫代碼

程序總體結構

各個函數的實現如下圖：

HTML5及JS實現粒子群仿生動畫代碼

HTML5及JS實現粒子群仿生動畫代碼

HTML5及JS實現粒子群仿生動畫代碼

HTML5及JS實現粒子群仿生動畫代碼

HTML5及JS實現粒子群仿生動畫代碼

相關推薦

千鋒扣丁學堂HTML5培訓之JS前端知識點整理總結（一）
千鋒扣丁學堂HTML5培訓之JS前端知識點整理總結（一）
今天千鋒扣丁學堂HTML5培訓老師給大家分享一篇關於JS前端知識點整理總結（一），介紹了JS前端知識點offset，scroll，client，冒泡，事件...
HTML HTML5 瀏覽器 2019-06-30
50行Python代碼教AI實現動作平衡
50行Python代碼教AI實現動作平衡
作者 | Mike Shi譯者 | linstancy責編 | Jane出品 | AI科技大本營（id：rgznai100）【導讀】本文將為大家展示如何通...
Python 人工智能 平衡車 腳本語言 集成開發環境 編譯器 算法 設計 乒乓球 數學 Mike 2019-06-21
小猿圈HTML5教程之如何快速實現一個簡單的canvas迷宮遊戲
小猿圈HTML5教程之如何快速實現一個簡單的canvas迷宮遊戲
現在遊戲產業的多種多樣，從最早的坦克大戰、超級瑪麗到現在的英雄聯盟、刺激戰場等等數不勝數，你還記得最早的迷宮遊戲嗎？小猿圈web前端講師今天就為你如何快速...
HTML5 英雄聯盟 超級馬里奧兄弟 坦克大戰 黑白迷宮 小遊戲 Google 刺激戰場 2019-06-18
「HTML5動畫製作軟件」Hype Pro 4.0 for Mac
「HTML5動畫製作軟件」Hype Pro 4.0 for Mac
文章來源於：風雲社區Hype Pro 4.0 for Mac使用 Hype 創建令人驚歎的動畫和交互式Web內容。支持OS X 10.10或更高版本，Hy...
HTML HTML5 Mac電腦 動畫 JavaScript OS X 軟件 iPhone 操作系統 Chrome 腳本語言 iPad 瀏覽器 WebKit iOS 2019-06-16
JS實現連連看小遊戲，代碼很簡單，思路很清晰！
JS實現連連看小遊戲，代碼很簡單，思路很清晰！
這是一款比較經典的連連看遊戲源碼，規則比較簡單，基於html5實現的連連看網頁遊戲。遊戲目前設置了7關，玩家可以逐級挑戰，還可點擊右下角【重置】進行位置調...
小遊戲 HTML CSS HTML5 網頁遊戲 可視化技術 文章 2019-05-31
深度學習必備數學知識之線性代數篇，附代碼實現
深度學習必備數學知識之線性代數篇，附代碼實現
作者 | Vihar Kurama 譯者 | 李眾望 編輯 | Jane 出品 | AI科技大本營 【導讀】線性代數是一種連續的、非離散的數學...
數學 深度學習 編程語言 機器學習 Python 2018-12-08
程序員百度面試，10分鐘原生JS實現鬥魚彈幕效果，成功拿到offer!
程序員百度面試，10分鐘原生JS實現鬥魚彈幕效果，成功拿到offer!
今天逛論壇看到一位大佬去百度面試，10分鐘用原生JS寫了一個簡單的鬥魚直播彈幕效果，成功拿到了offer,分享給頭條上的小夥伴學習，因為本身還是挺簡單的，...
程序員 面試 科技 我喜歡前端不喜歡戀愛 2017-11-02
十個html5代碼片段，超實用，一定要收藏
十個html5代碼片段，超實用，一定要收藏
獲取前端學習資料及視頻進群：532018971HTML 很容易寫，但創建網頁時，您經常需要重複做同樣的任務，如創建表單。在這篇文章中，我收集了10個超有用...
HTML HTML5 Flash MP4 軟件開拓者 2017-10-31
html5的Canvas技術實現簡易繪畫板
html5的Canvas技術實現簡易繪畫板
本例說說用html5的Canvas技術實現簡易繪畫板以往也用canvas劃過繪畫布局，今次在原來的基礎上加上一些能選擇的功能，比如筆頭的大小、繪畫的形狀、...
HTML HTML5 CSS JavaScript 恆星網絡 2017-09-27
瀏覽器實現HTML5發送語音功能
瀏覽器實現HTML5發送語音功能
這是一次後臺同事讓做的一個功能，但是在手機端兼容不好，Safari清一色不支持，導致後來沒有用上，想看效果的夥伴可以用pc端瀏覽器打開模擬手機的功能查看，...
HTML5 網頁設計 MP3 Safari 剛上路的新手車 2017-09-21
前端框架Layui的CSS3動畫類—快速實現動畫效果
前端框架Layui的CSS3動畫類—快速實現動畫效果
隨著前端技術的發展，通過HTML5和CSS3可以實現很多很炫的交互效果，帶來很好的用戶體驗。然而，基於實用的前提，Layui並沒有內置過多花俏的動畫，La...
CSS HTML5 動漫 你家隔壁程序猿 2017-09-18
10個炫酷實用的HTML5圖表動畫應用
10個炫酷實用的HTML5圖表動畫應用
今天我們要來分享另外一種類型的HTML5動畫：HTML5圖表應用。圖表在網頁中應用十分廣泛，尤其是後臺的統計功能，更能體現出圖表的強大之處。本文將介紹一些...
HTML5 jQuery 鼠標 技術 IT技術之家 2017-09-17
純CSS代碼實現一組帶動畫圖標
純CSS代碼實現一組帶動畫圖標
還沒出現css動畫效果之前要實現動的圖標，一般都是插入一張gif的圖片去實現，隨著CSS3技術的流行，現在越來越多比較高級炫酷的網頁效果呈現，今天用css...
CSS HTML 科技 恆星網絡 2017-09-06
HTML5 js頁面傳值給Java後臺的小技巧
HTML5 js頁面傳值給Java後臺的小技巧
廣東優就業頁面傳值小技巧平常我們在做的web項目，一般一個HTML頁面上會有好幾個步驟，step_num①，step_num②，step_num③，一般先...
編程語言 Java HTML HTML5 廣東IT優就業 2017-08-26
50行Python代碼實現簡單的任務隊列
50行Python代碼實現簡單的任務隊列
當你的項目需要一個任務隊列時，當然你會先想到celery，然後你花了三個月弄懂了基本的配置選項，你覺得已經生無可戀了。也許你可以使用簡單一點的任務隊列，如...
編程語言 Redis Docker 科技 2017-07-08
程序員120行純css代碼製作沙漏特效，無js代碼
程序員120行純css代碼製作沙漏特效，無js代碼
沙漏特效效果圖程序員120行純css代碼製作沙漏特效，無js代碼如果有正在學習前端的夥伴，不知道怎麼學習的可以加一下我的前端群589651705，每天都會...
CSS 程序員 科技 2017-06-22
程序員300行純css代碼製作使用筆畫偏移法的SVG文本動畫特效
程序員300行純css代碼製作使用筆畫偏移法的SVG文本動畫特效
筆畫偏移法的SVG文本動畫由於上傳圖片大小有限制，所以只能製作這樣質量的動圖，實際效果比這流暢很多！程序員300行純css代碼製作使用筆畫偏移法的SVG文...
CSS 程序員 JavaScript 科技 2017-06-17
教大家利用BAT文件實現程序自我刪除（附編程代碼）
教大家利用BAT文件實現程序自我刪除（附編程代碼）
最近聽很多網友說，他們給人做程序的時候遇到了騙子，程序發給對方卻把他拉黑，尾款也打了水漂！針對這樣的情況，大家可以嘗試下以下代碼！1.我們以VB6.0為例...
軟件 科技 2017-06-16
應用HTML5 Canvas製作酷炫科技背景動畫特效
應用HTML5 Canvas製作酷炫科技背景動畫特效
更多特效代碼請添加HTML5前端交流群111645711看這性感的線條，激情的律動！廢話不多說，上代碼！源代碼<!DOCTYPE html PUBL...
HTML HTML5 Line 微軟 2017-06-16
HTML5動畫原理和HTML5動畫製作工具
HTML5動畫原理和HTML5動畫製作工具
HTML5不是一個新的現象，但HTML5的使用在過去幾年中已經有了飛速的發展。當涉及到富媒體，運動圖形和網絡上的互動內容時，HTML5幾乎完全取代了Fla...
軟件 HTML5 編程語言 JavaScript 2017-06-14
推薦中...