# 第 15 章 【程式創作的後續應用】發表作品 - 輸出與使用至不同平台

<!-- 課程連結https://hahow.in/courses/5d1ba52a0d5f3b0021dbb996/main?item=5ef993961f7c0f34720db5bd -->

### 大綱

藝術家
- Zach Lieberman
https://www.instagram.com/zach.lieberman/
- Tyler Hobbs
https://tylerxhobbs.com/
- Luigii Luca
https://www.instagram.com/luigiiluca/
- Manolo Gamboa Naon
https://www.behance.net/manoloide

- 把 creative code 的思想納入設計中

### 單元一

OpenProcessing 的專案可打包下載 zip
打開 index.html 即可執行

用 VSCode 打開資料夾
1. 先將 Canvas 改成全螢幕

createCanvas(windowWidth, windowHeight)

2. 消除 html 邊界

./index.html
<style>
body{
    margin: 0;
    padding: 0;
}
</style>

3. 加入 Window Resize 處理

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

4. 更改 html 標題

./index.html
<title>作品標題</title>

發佈到Github

### 單元2

最直接 iframe 暴力崁入
當成 hero banner 的場合

./index.html
<style>
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50vh;
        border: none;
        z-index: -1;
    }
</style>
<iframe src='作品網址'></iframe>

工商時間：
動畫互動網頁程式入門 (HTML/CSS/JS)
https://hahow.in/courses/56189df9df7b3d0b005c6639/main
動畫互動網頁特效入門（JS/CANVAS）
https://hahow.in/courses/586fae97a8aae907000ce721/main

### 單元3

下載畫布的辦法 - 直接另存圖片
<canvas> 在網頁上等同於圖片 <img>

大量截圖：利用 function 截圖

function mousePressed(){
 save()
}

#### 提升解析度
- 直接放大
- pixelDensity() 加大像素密度，開太大會增加運算 loading 甚至當機，留意材質解析度
- 當成背景拉到其他軟體如 Photoshop Illustrator 運用

名片設計教學 ....

- 挑字型
- 標題的級距
- 排版時利用網格系統製造結構感
- 設計時盡量在既有的素材上採樣，維持設計的系統感。
- 提升設計細節

- 找出固定的模式，成為未來自我作品的特色。
- 從影像軟體的探索自己最喜歡的狀態，再反推修改自己的程式。

池田亮司 < 雜訊感
https://theartpressasia.com/2019/08/13/i-think-i-dont-like-the-word-called-understand-ryoji-ikeda-solo-exhibition-taipei-fine-arts-museum/

找出有辦法讓觀賞者互動的辦法

作品細節
- 當下心情
- 作品創意來源
- 素材等等等 ....

- Processing vs p5.js
功能差不多但會有語法差異
例如：`size()` v.s. `createCanvas()`，`mousePressed` v.s. `mouseIsPressed`.

processing 要定義資料型態

https://github.com/processing/p5.js/wiki/Processing-transition

### 心態建立