老闆,製作一門有教育浪漫理想的課程要花多久呢?
ans:#我用了一年(汗流浹背)。
2017/8–2018/8,整整一年時間,我在 Hahow 好學校 製作我的第二門線上課程,把我對線上課程的想像再做好做滿、做爆,做到未曾有人嘗試的東西,也希望他能夠在深度、廣度上完整超過第一堂課。
#這麼猛爆努力的原因
我也同時在探討自己對互動網頁的憧憬從何而來,我最後找到數學與科學。數學與科學的美,是終於在世界中找到秩序,所以即使聽起來艱深,這門課也能與所有人共鳴。
#回到眼前
幸好課程也得到學生們猛爆的肯定(抹額頭汗),回到眼前,課程用有趣的範例,從程式、數學、或設計,整合式的帶你走入絢麗的特效網頁世界,從解決真實的問題或創作來看見學習的目的。
從 html/css 講到 物件導向 講到 數學、音樂、遊戲的綜合應用,囊括 JavaScript 完整入門、es6 物件導向,到後來自己了解原理並做一個遊戲引擎,範例從記憶遊戲、小精靈、生成式藝術到 agar.io。
長達 3,085分鐘,超過 60 個精緻範例與 400 張的投影片,以及四個加碼單元 vue-cli、GSAP、D3、Three.js 的投影片,成為 Hahow 上最長的課程,有興趣的話,就來看看吧。
--
閱讀全文 👉 http://creativecoding.peek.link/29tA
瞧瞧課程 👉
動畫互動網頁程式入門(HTML/CSS/JS):https://bit.ly/3wM2vtj
動畫互動網頁特效入門(JS/CANVAS):https://bit.ly/36KD7JV
同時也有1部Youtube影片,追蹤數超過5,470的網紅老闆,來點寇汀吧。Boss, CODING please.,也在其Youtube影片中提到,本次的教學主題是用 GSAP 製作直播互動動態效果,哲宇將會手把手帶大家製作彈跳表情符號、emoji 彈幕還有留言與點選動態等效果。 現在許多電商、遊戲甚至課程平台都有了直播的功能,如何透過網頁特效動態來為互動加分,讓使用者好有參與感,就來跟哲宇一起切磋切磋吧。 (1:50:13) 哲宇大型 ...
動畫互動網頁特效入門 js canvas 在 Facebook 的最讚貼文
【純Canvas實作小畫家物件化工具列】 #實驗 #程式
.
備課中的範例,
嘗試從0開始用純粹的Canvas,
從繪製開始「模擬」出工具列跟按鈕,
.
https://codepen.io/frank890417/pen/ZxBEYJ
.
自製「元件」的類別繼承產生工具列跟按鈕,
按鈕再繼承產生顏色按鈕跟大小按鈕,自己定義元件繪製跟動作,
判斷點擊呼叫工具列的子按鈕跟呼叫對應按鈕功能,
也保留了擴充性,可以繼續繼承架構自動排列工具列跟新增功能
.
並逐步建構現代繪圖框架three.js等常見的scene->元件模式,
結果發現寫起來好花時間,可能還要再簡化
.
動畫互動網頁特效入門(JS/CANVAS)課程:
>> https://hahow.in/cr/monoame-webdesign2
.
IG: https://instagram.com/BossCodingplease
Youtube: https://www.youtube.com/channel/UCHX_XMhPrtvOmgGOnA2eTmA/
動畫互動網頁特效入門 js canvas 在 Facebook 的最佳貼文
【製作絢麗的粒子煙火】 #實驗 #程式
-
備課中的範例,從零開始建構粒子跟向量的類別,
並使用canvas在網頁上做出絢麗的煙火
-
https://codepen.io/frank890417/full/ZxWwzL/
-
目前Canvas與特效動畫 單元上架了:
Canvas與特效動畫 - 繪圖基礎語法 與動畫原理 (44min)
Canvas與特效動畫 - 畫布的座標系操作 (60min)
Canvas與特效動畫 - 物理基礎(速度 / 加速度) (63min)
Canvas與特效動畫 - Vector 向量的概念 (47min)
Canvas與特效動畫 -
-
在課程裡面從最基礎的canvas,到寫出自己的向量class應用,
以及了解物理裡面速度跟加速度做出模擬器的基礎概念,
準備講義的時候都覺得在上物理了XD
每個單元都將近一個小時滿滿的投影片跟範例
-
動畫互動網頁特效入門(JS/CANVAS)課程:
>> https://hahow.in/cr/monoame-webdesign2
-
IG: https://instagram.com/BossCodingplease
Youtube: https://www.youtube.com/channel/UCHX_XMhPrtvOmgGOnA2eTmA/
動畫互動網頁特效入門 js canvas 在 老闆,來點寇汀吧。Boss, CODING please. Youtube 的最讚貼文
本次的教學主題是用 GSAP 製作直播互動動態效果,哲宇將會手把手帶大家製作彈跳表情符號、emoji 彈幕還有留言與點選動態等效果。
現在許多電商、遊戲甚至課程平台都有了直播的功能,如何透過網頁特效動態來為互動加分,讓使用者好有參與感,就來跟哲宇一起切磋切磋吧。
(1:50:13) 哲宇大型 debug 現場
#GSAP
--
追蹤老闆的 IG:https://www.instagram.com/bosscodingplease/
Hahow 線上課程:
動畫互動網頁程式入門 (HTML/CSS/JS) 👉 https://bit.ly/3i6OTEU
動畫互動網頁特效入門(JS/CANVAS)👉https://bit.ly/3i3sCYy
互動藝術程式創作入門 (Creative Coding) 👉 https://bit.ly/3yliGiV
Creative Coding 台灣站:https://bit.ly/3iQ8iZF
