# p5.js 讓你的網頁更有活力 ## 目的 我們會用 p5.js 寫出一個 **互動** 或 **動態** 的效果腳本，並將其放到你的網頁，讓網頁更生動有活力 ## 階段 1. p5.js 寫出互動或動態的腳本，並將其開啟服務 2. 在你的網站 (index.html) 新增 `<iframe>` 就可以把效果呈現出來了 --- ## 第一階段 1. 使用 [OpenProcessing](https://openprocessing.org/) 的 **p5.js**，寫出一個互動的 [腳本](https://openprocessing.org/sketch/1508477) 1. **OpenProcessing** 畫面右上角，點選下載檔案, 並解壓縮 ![](https://i.imgur.com/pXUqICp.jpg) 1. 在 **GitHub** 開啟一個 repo 1. 將解壓縮的檔案 **index.htm, myScripts.js** 丟進 repo ![](https://i.imgur.com/eDlD4Xt.jpg) 程式碼: [index.htm](https://github.com/marcoliu1020/p5js-HelloMarco/blob/main/index.html) [myScripts.js](https://github.com/marcoliu1020/p5js-HelloMarco/blob/main/myScripts.js) 1. 讓 **GitHub** 開啟 **index.html** 的服務 - Setting -> Pages -> Source - 把 Branch: 改成 main，並且 Save ![](https://i.imgur.com/iMHbLWa.jpg) 1. 這裡需要等一段時間 ![](https://i.imgur.com/HdxYMxr.jpg) 1. 接著就可以打開網站了 ![](https://i.imgur.com/BcoRKYu.jpg) 1. [效果](https://marcoliu1020.github.io/p5js-HelloMarco/) --- ## 第二階段 1. 將 **p5.js** 的效果加進 **Web** 1. 在你的網頁新增 `<iframe>` ![](https://i.imgur.com/vT8W9x4.jpg) [index.htm](https://github.com/marcoliu1020/p5js-HelloMarcoWeb/blob/main/index.html) [index.css](https://github.com/marcoliu1020/p5js-HelloMarcoWeb/blob/main/index.html) index.html ```htmlmixed= <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="index.css" /> </head> <body> <h1>Hello Marco</h1> <h2>Clab p5.js WorkShop</h2> </body> <!-- p5.js 的效果 --> <iframe id="myBackground" src="https://marcoliu1020.github.io/p5js-HelloMarco/" frameborder="0" ></iframe> </html> ``` index.css ```css= body { background-color: powderblue; } h1 { text-align: center; font-size: 100px; background-color: powderblue; color: rgb(206, 22, 22); } h2 { background-color: powderblue; font-size: 50px; color: rgb(51, 24, 114); /* 讓背景顏色和文字寬度一樣 如果打開後，文字將無法置中 */ display: inline-block; } #myBackground { border: none; /* vw: 螢幕寬 vh: 螢幕高 */ width: 100vw; height: 100vh; /* 絕對位置 */ position: absolute; left: 0; top: 0; /* 放最底層 */ z-index: -1; } ```