今天來試試看利用Canvas來做聲音的視覺表現！搭配Javascript web audio API(其實是因為找不到好玩的點子)主要是根據這個影片實作。 老樣...
上一篇我們提到我們接著要開始玩一些比較有趣的實作~ 所以我們就來講講怎麼在web端實作綠幕摳像(Green Screen Keying)~ 什麼是綠幕摳像？...
前述 今天來畫個時鐘～！一樣利用 requestAnimationFrame，再判斷當前時間，每一秒往前進，就完成啦！ codesendBox import...
大家都知道Google斷線時會有小恐龍的離線遊戲，以前第一次看到的時候超驚喜！（我到現在斷線的時候還是會玩一下XD）品牌如果發揮一點創意，將品牌元素加進小遊戲裡...
前述 雖然用一般的 css 就可以完成進度條，但為了符合主題，用了 canvas 來完成！ codesendBox import React, { useSt...
老實說我決定要寫影像處理這個部分的時候還蠻猶豫的，因為在javascript 做影像處理的這個領域，IT邦之前其實就有蠻多寫的蠻不錯的文章。 例如第11屆鐵人賽...
有時候會碰到網站要放GIF動畫，但GIF大小動輒幾M起跳，造成網頁Loading慢、圖片邊緣鋸齒，支援顏色也不多，不太完美。 這時候 sprite 雪碧圖就登場...
時間過得很快，這邊我們已經來到物理模擬篇的最後一節 ~ 二維布料模擬了。 原本其實我是打算把這一篇放在彈性模擬後面做講解，因為這個案例其實就是上位版本的彈性模擬...
前述 今天終於久違的真正完成了一個項目，一起來看看效果跟 code 吧！我就直接在 code 裡註記 操作囉～ codesendBox import { us...
(10/11更)私下有一些朋友反應手機不太能玩，我才想起這個問題，所以有對此demo在長版進行微調，原文主要講解橫版(電腦端)的處理 先給大家看看成果吧！h...
今天正式進入Canvas的世界了！老樣子先看成品：今天來做點科技感的畫面，橘色是滑鼠的游標，這個是滿常看到的： 但在這之前，想先談一下到底是什麼時候該用SVG...
在開始之前，我可能需要先給各位科普一些基礎的CG動畫(Computer Graphic)常識～也就是我們這個chapter 的主角粒子(Particles) 什...
接下來時間真的很緊，也顧不上結構了，只能就目前想到的功能，先以直覺的方式編寫了，如果講不太清楚還多多包涵！昨天的一定要先看唷，今天是接著作下去的 轉場 玩家從進...
磁力/引力模擬 彈力、磁力和引力其實本質上很接近。 之所以說相近，是因為他們都是一種長距離作用力。 彈簧在被壓縮的狀況下會產生擴張的力量，而在拉長的狀況下則會進...
Fabricjs 官方文檔 Fabric.js is a powerful and simpleJavascript HTML5 canvas library...
題外話 補充昨天忘記下的結論：不管要繪製的圖案多大，都建議畫(儲存)在一個和原圖一樣大的canvas上，取代原本的圖案，當作未來的繪製來源。 let leafI...
呃，首先呢~ 敝人小弟在下我今天仔細的思考了一下，決定這次還是再來一篇『中場休息』科普文，等到明天再來繼續磁力/引力的部分 其實是因為剛好工作應接不暇來不及寫...
樹葉問題 先前在第三章畫樹時，就有發現把樹葉畫上去時，系統工作時間會增加而導致掉偵，原圖是300x300，50kb左右，不是很大，但是我們要畫一大堆落葉的話，計...
二維彈性模擬(第二部分) 我們在上一篇文做完了整體案例場景的搭建，而我們接下來則是要把後續的物理運算做完~ 簡單用圖片講解一下這個案例的物理模型 : 畫面中每...
前述 接續昨天做的『文字換行』，今天利用上一篇的操作來做一個應用，這次的應用靈感是從這個網站來的，滑到最下方，有一個填上文字、修改位置與大小，就可以下載成為賀卡...
提醒：本篇承接第三章 讓我們說回那顆樹 既然樹是我們遊戲場景的主體之一，首先當然是要來整修一下我們的樹，此時我意外發現有個很讚的教學影片：Fractal T...
在上一篇文中我們提到了一維彈力模擬的案例 這次我們則是要實作二維彈力模擬～並且是存在重力場的狀態! 原則上原理是不會有太大的差異，我們這邊再複習一下模擬程序1幀...
前言 其實我算蠻容易分心的，說好要搞流程圖，結果都在打code；說好要做遊戲，結果都在搞動畫；雖然列了大綱，中途還是更換了幾個主題，臨時起意去畫樹，不過，這樣的...
程式碼 今天來學習文字換行 export default function App() { const canvasRef = useRef(null);...
經過一天的休息，我們又再度回到了物理模擬的世界~ 我們在這次的chapter要來介紹的是彈力、張力、引力與磁力這種物體之間～與距離相關的作用力的演算方法。 首先...
經過了連續5篇複雜度略高的物理模擬系列，我在想看官們多少會有點疲乏~ 所以我在規劃了幾篇『中場休息』系列科普文，用來穿插在主要的chapter之間， 休息是為...
今天挑戰半小時寫完一篇文章(被打，其實我寫完程式了，把文章撰寫出來就好嚕。 https://jerry-the-potato.github.io/Chapt...
沒錯~我就硬是不要給把標題打成『彈跳球世界V』，咬我啊～ 這篇是斜面碰撞的後篇~ 今天要來補完我們在上一篇沒有解決掉的reposition 和反射速度運算的...
一樣先上圖! https://jerry-the-potato.github.io/Chapter4-demo3/ Staring（因為像星星一樣繞行） 有了前...
關於前面的小畫家 復刻小畫家先做到昨天作為最後一篇，接下來會帶各位，利用前其所學的功能，製作各種canvas 互動小東西！敬請期待。 這邊也附上前面的所製作的...
Global Rachel
Mizok
雪莉
jerrythepotato
iThome鐵人賽
看影片追技術