iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
佛心分享-SideProject30

讓演算法起舞:前端特效應用的探索之旅 系列

我又回來啦!繼上次的網頁遊戲後,這次我們將把眼光放遠,不要只做一個,來做好多個互動特效!這兩年想不開去當了職業軍人,但還是放不下,在砲兵學校受訓時,放假還是泡圖書館借了電腦,研究了幾個主題,我覺得每個都很有趣!

架構:
使用 React 打造單頁式作品集網站,其實 Vue 我也很喜歡,各有優點!

作品展示:
在每個小作品中,除了展示技術細節,還結合實際成果,比如演算法視覺化:讓快速排序在屏幕上跳起舞來!還有音訊分析、粒子系統和模擬物理等,應用於前端開發。

回顧:
最後回頭優化,確保每一個作品能無縫整合,我還覺得輪播式呈現太無聊,或許能...?最後來看看創意能到哪邊吧!

鐵人鍊成 | 共 35 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文 團隊鐵齒不信寫不完

E1 WebGL基礎概念:透過for迴圈探討渲染流程

引言 一直以來,我們在繪圖的時候要不管是用 2D 的 Canvas API 描繪形狀,或是用 3D 的 three.js 的幾何頂點描繪三角形片段,我們都離底層...

2024-10-14 ‧ 由 jerrythepotato 分享

E2 WebGL 畫圓範例:變數的傳遞與處理

引言 接下來,我們來介紹如何用頂點著色器和片段著色器渲染圖形,程式碼的部分,只要是 glsl 我都會用截圖的形式。 頂點著色器 在使用著色器時,會用到兩種變數,...

2024-10-15 ‧ 由 jerrythepotato 分享

E3 渲染的奧秘:分形茱莉亞集合的片段著色器藝術

引言 透過前兩天的範例,我們已經理解了頂點著色器和片段著色器的分工模式,頂點著色器負責處理頂點的空間定位,而片段著色器則專注於每個像素的渲染工作。接下來,我們將...

2024-10-16 ‧ 由 jerrythepotato 分享

E4 曼德博羅集的分形魔力:用片段著色器實現反鋸齒

引言 昨天我們完成了茱莉亞合集的渲染,能夠根據滑鼠的位置改變常數 C,從而渲染不同的圖形,今天我們將探討另一個經典分形——曼德柏羅集,這個集合將初始值設為 0,...

2024-10-17 ‧ 由 jerrythepotato 分享

E5 流暢分形渲染:滑鼠與手勢互動在 React 的應用

引言 在現代的網頁應用中,滑鼠和觸控的互動是增強用戶體驗的關鍵因素。無論是拖曳、縮放,還是手勢操作,都能讓網頁更加生動且易於操作。這篇文章將探討如何通過滑鼠和觸...

2024-10-18 ‧ 由 jerrythepotato 分享