# [Session 5] 2024-03-28(四) p5.js / p5.js / 互動系統與模擬方法：運用函數、物件互動和自然模擬增強互動性

13:20-16:20
https://youtube.com/live/S9x3XuJP8pE?feature=share
https://learningsynths.ableton.com/en/playground
- 畫布操作 & 函數 & 圖層
https://openprocessing.org/sketch/2223525

[課堂資料目錄](https://drive.google.com/drive/u/3/folders/14EyKA1-UPyZn3iTJCQ2opIASW8K3SsOs)

# 課程目標
* p5.js入門3

## 上次課堂Feedback
* 希望能分組
* 速度還是有點快
* 作業完成率
* 多留一些實作時間

## Rundown
* 作業賞析
* 技巧：每個格子的不同單位狀態先想好
* shadowBlur不能太大，畫面會當掉
* 音像經驗分享
* [Rnbo](https://cycling74.com/products/rnbo])
* [Learning Synths](https://learningsynths.ableton.com/en/playground)
* [Arena VJ](https://www.resolume.com/software)
* [Madmapper](https://www.simp4live.com/products/madmapper3-2-pro)
* [NDI 協議](https://www.mylumens.com/tw/Blog_detail/110/A-Brief-History-of-NDI)
* p5.js入門教學3
* 期中 Project 題目

政大同學作品
https://www.fxhash.xyz/gentk/KT1EfsNuqwLAWDd3o4pvfUx1CAh5GMdTrRvr-181298

## 案例賞析
Ode to Untitled
https://www.artblocks.io/collections/presents/projects/0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270/359

Archetype
https://www.artblocks.io/collections/curated/projects/0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270/23

Life and Love and Nothing
https://www.artblocks.io/collections/presents/projects/0x99a9b7c1116f9ceeb1652de04d5969cce509b069/476

## 預計拆解實作範例
The Harvest
https://www.artblocks.io/collections/curated/projects/0x99a9b7c1116f9ceeb1652de04d5969cce509b069/407

### p5.js入門3

https://openprocessing.org/sketch/2223416
## 仿作山脈圖
1. 使用 noise 取樣不斷往右畫方塊 (x)
- x 用負數從畫布外開始畫
3. 加入往右下畫方塊 (x,y)
- 每次畫加入背景可以達成景身效果
- 加入 start y 來保留出天空
4. 用 % 讓其中一些山脈填滿白色
5. 用 random 把一些 rect 填滿白色
6. 從白色 rect 中選一些讓 y = -1000 形成光柱效果
7. 光柱變光點
1. 用紅方塊定位
2. 往上隨機灑點 (方塊變小即為點)
3. y random 外面再 random 一次，讓靠下方機率(密度)變高
- 參考隨機分布圖控制random位置

7. 背景與邊框
8. 連續畫顏色
- x 取餘數 % 符合條件填紅色
- 可以用 print() 觀測 x 值
- 在 setup 時定義紅色位置
- 可用 map + 取整數把太亂的 random 縮到某個範圍
9. 可以用 rotate/translate 配合 push/pop 達到筆觸旋轉移動的效果

### 虛擬畫布的功能
> push 儲存現有畫布參數
> rotate/translate 移動畫布並做畫
> pop 拿回原本的畫布參數


##

- 技巧：透過點描 線條 提升作品細緻度
1. 噪聲
2. 遞迴切割
3. 畫布操作
4. 圖層分層

https://course.creativecoding.in/notes

Chapter 6
增添色彩－玩耍色彩與留下痕跡

Chapter 7
進階繪圖 - 畫布操作與編織複雜圖形

Chapter 8
函數與物件互動 - 建構無法預測的小世界

# 參考資料
Orba - Midi input, Synthesizer (https://artiphon.com/products/orba2)