iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

前端藝術 - 用P5.js做藝術 系列

這個文章主要是為了讓我自己去做一些參考,跟藝術相關的設定。

鐵人鍊成 | 共 30 篇文章 | 16 人訂閱 訂閱系列文 RSS系列文 團隊Web 實驗室
DAY 21

Day 21 - 物件導向與向量2 - vector

P5裡面提供了vector 這個設定 他跟class設定有點類似的設定也一並提供了function 可以交互使用 let ball function setu...

DAY 22

Day 22 - 物件導向與向量3 - class + mouseInpress 設定

接下來設定一些基本的設定需求 分別拆成 bullet 跟 ball(細胞)兩個class的寫法 class Ball{ //製造一個class constr...

DAY 23

Day 23 - p5的WebGL應用 3D 設定

3D場景的基礎 基礎的要素:物體、光源、材質與攝影機 基礎幾何形狀 平面 plane() 長方體 box() 球體 sphere() 圓柱體 cyli...

DAY 24

Day 24 - 了解文字藝術

Rita.js Rita 使用範例 拆解字串:RiString() 取得詞性 pos()(Part of Speech) nn: 名詞 jj: 形容詞...

DAY 25

Day 25 - 影像、聲音與影片的整合與拆解

能夠載入與以動作觸發聲音 能夠使用圖片結合物件互動 瞭解如何解構圖片為粒子跟像素 瞭解如何將影片放入作品中 主要這幾個重點,接下來我們就可以了解一下圖片怎麼...

DAY 26

Day 26 - 使用者影音互動 - 即時串流聲音與影片

目標 學習如何抓取跟分析聲音製作互動 瞭解如何抓取與繪製使用者的即時影片 學習如何把即時影像轉成即時抽象畫 能夠追蹤影像中的顏色 課程重點 使用麥克風...

DAY 27

Day 27 - 資料視覺化與API - 將資料轉化成藝術

前言覺得這個文章,花了太多時間在寫但有些設定好像應該 更把他分的更清楚而不是一直只丟範例出來解釋。不過現在先推之後在後修改吧目標瞭解常見的資料類型能夠載入外部資...

DAY 28

Day 28 - 發表作品 - 輸出與使用至不同平台

展示方式 在本機編輯 推薦的程式編輯器 VSCode + Live Server 外掛 設定 windowWidth, windowHeight...

DAY 29

Day29 - 物理模擬 - 讓物件自然的落下碰撞 (使用Matter.js)

Matter.js 使用 引用 Matter.js 函式庫 var s = document.createElement("script&quot...

DAY 30

感謝此時此刻的自己 - 30天完賽

我喜歡藝術,也喜歡程式碼一開始因為工作關係強迫自己要學會程式碼,原本不能接受,甚至覺得我沒有天份在這上面,後來漸漸的我腦袋浮現了這句話,但每當我想要講這句的時候...