「後端設計」在職進修、線上學習、共學教室

Hahow 好學校

關注

Hahow 小蛙編輯

創作內容編輯

2022/08/20

結合網頁、設計、數學與特效，用一年的時間打造的超強線上程式課

結合網頁、設計、數學與特效，一整年的時間打造的超強線上程式課

就在不久前的2017/8–2018/8，我花了整整一年時間，在Hahow製作我的第二門線上課程，這不只是一門線上課程，而是把我對線上課程的想像再做好做滿、做爆，做到未曾有人嘗試的東西，也希望他能夠在深度、廣度上完整超過第一堂《動態互動網頁程式入門》。

而這堂《動態互動網頁特效入門》，便是一條尋找自我的旅程，深掘是什麼造就了對互動網頁跟程式的憧憬，所以在講到這堂課的製作過程之前，我想從這堂課的主題-數學以及教育開始講起。

繞了一大圈才發現，原來創作能透過數學脫穎而出

數千年來，數學家與科學家花了大半輩子的時間，看著宇宙的星星月亮，推算出了萬有引力跟萬物運行的軌跡，在沙地上畫著三角形與方形，推算出了畢式定理跟得到了世界上居然有不能用分數表達的數字。

數學與科學真正的美，在於用一條式子可以預測未來，擺脫非理性的判斷跟控制，透過兩千多年來，人類不斷思考世界到底是什麼鬼東西的成果，我們終於在這混亂不堪的世界中找到了秩序，藉以預測今天月亮會怎麼變化，知道了怎麼藉由電力架構邏輯運算變成電腦，更激發了人類的潛能，蓬勃的促進了各種藝術跟互動科技的產生。

台灣的教育，讓數學在很多人的心中是學生時期的夢靨，提到便心生反感，更何況去主動接觸，於是多少人在一次又一次的小考中，執筆的手一緊，跟不上進度的失落感，壓垮了最後一根稻草，便從此放棄數學了，只好安慰自己說著：我真的做不到，我大概…一輩子不擅長這個吧！

後來的我們，在職場的某一刻察覺做遊戲用到了大量的演算法與數學，後來的我們，也許從商、從醫，也許從事設計，發現原來生活除了找錢做生意會用到加減乘除外，很多創作也能透過數學與演算法脫穎而出。

詳見原文>

https://hahow.in/cafeteria/articles/60dee0bf179ac2000605235b

hahow.in

結合網頁、設計、數學與特效，用一整年的時間打造的超強線上程式課

0 0 49 0

拍手

留言

分享到：

Line

Facebook

複製連結

取消

熱門精選

每日推薦課程

關注

104學習精靈

產品

01/06 10:28

【免費報名】零經驗↘只要19週↘您也可以轉職前端工程師。專業技術養成班｜線上開課說明會

想轉換跑道當前端工程師，但又不知道如何開始?

這麼多前端工程師課程，那些又能跟業界銜接?

【非工程背景↘零經驗↘跨領域轉職】

緯育TibaMeｘ104學習精靈現正舉辦【跨領域轉職前端工程師。課程說明會】

透過19週培訓課程，從基礎 → 進階，從進階 → 完成專題作品，協助您成功轉職！

本課程將提供104報名會員優惠【確認報名課程可享報名再折$2,000】優惠

⚡ 線上說明會 | 緯育TibaMe的優惠，透過104活動吧報名，若確認報名課程，再享緯育TibaMe的優惠+再折$2,000

⚡ 呈上，該優惠活動會於緯育TibaMe 付款時享有。

⚡ 確認報名課程，可享緯育TibaMe 相關付款優惠（例如：信用卡分期．．．等）

真的！席次最後倒數！免費報名！相信自己一次！

【前往報名】https://meet.104.com.tw/event/50bf57ed-1ce3-4b48-bd43-a280c0cb1e0f

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

【報名截止日】

🔴 1/16 (四) 20:00~21:00 | 報名到1/15 (三) 15:00

線上說明會連結與資訊，將於1/15(三)18:00 前陸續發送到您報名的電子郵件信箱。

🔴1/21 (二) 20:00~21:00 | 報名到1/20 (一) 15:00

線上說明會連結與資訊，將於1/20(一)18:00 前陸續發送到您報名的電子郵件信箱。

meet.104.com.tw

【免費報名】零經驗↘只要19週↘您也可以轉職前端工程師。專業技術養成班｜線上開課說明會｜104活動吧

1 0 3838 1

拍手

留言

分享到：

Line

Facebook

複製連結

取消

學習精靈

sony1708.pixnet.net

13799 3

Hahow 好學校

關注

Hahow 小蛙編輯

創作內容編輯

2022/08/19

網頁互動創作新手必讀：快速上手 p5.js

對網頁互動創作有興趣？你可以試試更方便的 p5.js！五步驟簡單上手程式創作，學習資源一次整理給你！

當我們想要在網頁上繪圖，最常用的除了 CSS 之外，就是 HTML5 提供的 Canvas 了，Canvas 的 API 接口讓我們可以實現有效率、高靈活性在網頁上繪圖的夢想，Canvas 的許多基礎都在《動畫互動網頁特效入門（JS/CANVAS）》中提到，讓你可以從頭開始，完成豐富的網頁互動創作。

但是對於想要快速開始互動網站、藝術創作的人來說，Canvas 上像是繪圖、形狀、物理模擬或是常用的數學公式等功能都需要自己從頭處理。有沒有更快的方式呢？

你可以試試 p5.js！

答案是有的，就是今天要介紹的 p5.js，p5 是由 Processing 延伸而成的 JavaScript 函式庫，Processing 是設計給沒有程式基礎的人快速進行創作的平台，而 p5.js 可以理解為 Processing 的 JavaScript 版本。它將許多繪圖、數學、物理模擬等函式封裝好讓我們可以直接使用，如此一來我們可以在享受 Canvas 繪圖的同時不用費心思處理瑣碎的工具！

在本篇文章中我們將會實作一個簡單的畫布，把滑鼠當作筆刷，滑鼠經過的路徑會留下彩色的軌跡，點擊的狀況下軌跡則變成方形的圖案，增加繪製的多樣性。

我們將以 OpenProcessing 作為本次範例的平台，這是一個像是 Code Pen 的線上程式碼編輯器，可以在創作的同時即時看到程式碼運做的狀況，十分方便！

詳見原文>

https://hahow.in/cafeteria/articles/609232e5cacb075c79620906