iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

P5.js 學習之路 系列

生成式藝術的step1 ,如何從圖像視覺學習演算法

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文 團隊週六 Podcast 團
DAY 1

Day1 - 在開始之前

前言 Hi,大家好,我是從新手工程師CC,學習前端的時間約兩年,遇到了很多問題(坑?)也都慢慢找到方法解決,越來越有解bug經驗了。不過在演算法上面還是有點吃力...

2022-09-16 ‧ 由 misvamda 分享
DAY 2

Day2 - 生成式藝術介紹

Day2 - 生成式藝術介紹 先來一點文謅謅的介紹 生成藝術是一種新媒體藝術風格,也可以稱為程式藝術、互動藝術或生成設計,是現在十分引人注目的設計手法,在世界各...

2022-09-17 ‧ 由 misvamda 分享
DAY 3

Day3 - 介紹編碼工具P5.js 與線上開發平台 OpenProcessing 與 P5.js editor

線上編輯平台 官方提供的開發平台,整合官方範例和其他創作者的程式資源 P5.js Editor 滿主流的開發平台,超級多大神在上面秀作品秀技術XD,版面做的...

2022-09-18 ‧ 由 misvamda 分享
DAY 4

Day4 - 基礎程式架構介紹

打開線上編輯平台後,就會看到兩段預設開啟的程式碼,setup 和 draw,這兩段是最常使用的兩個函式 setup 只會被執行一次,用來設定執行動畫前的初始化...

2022-09-19 ‧ 由 misvamda 分享
DAY 5

Day5 - 定位座標

canvas是整張畫布,而在上面要定位任何形狀、圖片、文字都需要使用到座標,座標的操作可以幫助物件定位,而HTML canvas是一的二維網格,起始點(0,0)...

2022-09-20 ‧ 由 misvamda 分享
DAY 6

Day6 - 畫個形狀吧,有沒有這麼簡單

今天要介紹P5.js中,幾種常見的形狀工具函式,前面有說過,生成式藝術最常見的類型大部分為波普藝術,像是幾何交疊,線段表現等等,因此形狀的利用在這當中也相當重要...

2022-09-21 ‧ 由 misvamda 分享
DAY 7

Day7 - 上色處理,顏色模式介紹

今天進入顏色模式的分享,會介紹到怎麼指定顏色模式,以及基礎的上色與相關操作 顏色模式 顏色模式主要分兩種,分別為以下,默認模式為 RGB RGB HSB R...

2022-09-22 ‧ 由 misvamda 分享
DAY 8

Day8 - 上色處理[加開場],那些p5提供的顏色物件函數

昨天講到了如何設定顏色以及 顏色相關可以使用的物件 P5.js有提供一些物件給developer們開發使用,如下,默認是RGB模式,但也可以使用在HSB模式喔~...

2022-09-23 ‧ 由 misvamda 分享
DAY 9

Day9 - 體驗P5.js提供的幾種隨機模式

p5.js 有提供一些隨機參數供我們在創作的時候可以利用,分別是 randomGaussian random noise 但等等,隨機參數有什麼作用呢?什麼...

2022-09-24 ‧ 由 misvamda 分享
DAY 10

Da10 - p5.js中的條件、迴圈、變數

p5.js 是基於js創設的函式庫,因此也擁有了程式語言的特性可以使用,可以設變數、立條件立flag、使用迴圈來取代重複性的工作。兼天會與大家分享利用寫程式的技...

2022-09-25 ‧ 由 misvamda 分享