104學習精靈

後端設計

關注

邀請朋友

Line

Facebook

複製連結

取消

關於教室

關注人數 0 人

104人力銀行從職缺中挑選出常見技能所成立的官方教室，提供大家進行共學互動。

學習主持人

持續分享知識，
有機會成為官方教室主持人

教室標籤

後端設計

Hi~ 歡迎分享學習資源，有學習問題可匿名向Giver發問！

我要分享

我要提問

後端設計學習推薦

全部

影片

文章

Hahow 好學校

關注

Hahow 小蛙編輯

創作內容編輯

2022/08/20

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

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

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

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

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

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

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

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

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

詳見原文>

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

hahow.in

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

0 0 47 0

拍手

留言

分享到：

Line

Facebook

複製連結

取消

學習精靈

sony1708.pixnet.net

10239 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