# Bonnie的週活動紀錄
#### tags: `活動紀錄`
---
## ==2024/04/10==
* ### [p5.js](https://p5js.org/)
起首
```
<!-- 初始化 -->
function setup() {
createCanvas(windowWidth, windowHeight); // 創建一個畫布
}
<!-- 更新圖型 -->
function draw() {
background(220); // 背景顏色
}
```
參考: https://p5js.org/reference/
ellipse(x, y, w, h) 形狀-圓形
print(frameCount) 打印出數量
fill(v1, v2, v3, [alpha]) 填色
stroke(v1, v2, v3, [alpha])(顏色) 邊線(border)
strokeWeight(weight) 邊線寬度
mouseIsPressed 偵測有沒有按滑鼠(就可以寫判斷式)
rectMode(mode) 更改形狀位置
---
## ==2024/04/10==
* ### spline
vue引入spline，專案的終端機執行 npm install @splinetool/runtime。
* composition api寫法:
``` javascript
<script setup>
import { Application } from '@splinetool/runtime';
const canvas = ref(null);
const state = reactive({
spline: {
scene: '自己spline的網址',
app: null,
isLoaded: false,
},
});
onMounted(async () => {
const app = new Application(canvas.value);
await app.load(state.spline.scene);
state.spline.app = app;
state.spline.isLoaded = true;
});
</script>
<template>
<canvas ref="canvas" />
</template>
```
## ==2024/04/02==
* ### 後端復健
* 註冊(Register)
註冊會員除了帳號密碼之外還需要有==確認密碼==。
確認密碼的輸入框(input)==id==一定要是==password_confirmation==，不然
validate的confirmed會過不了。
* ### 專題
我們這組有發生問題:
* 只有一個送出按鈕，但有好幾個form，送出按鈕沒有放在form裡面。
* 編輯頁的route使用post。
* 要導向某個頁面時使用render，而不是redirect。
* ### CSS
justify-self屬於grid屬性，所以當display為flex的時候會沒作用。
align-self屬於flex屬性，但是當display為grid的時候，還是可以使用的。
## ==2024/03/27==
* ### Three.js
* 安裝
```
npm install --save three
```
之後開啟檔案都需要要跑
```
npx vite
```
* 建立場景
* 創建和渲染Three.js場景所必需的基本組件為場景（Scene）、相機（Camera）、渲染器（Renderer）
* 可以先用官網範例測試有沒有安裝成功
```javascript=
import * as THREE from 'three';
// 創建場景
const scene = new THREE.Scene();
// 創建透視相機
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 創建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 創建立方體的幾何體
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
// 創建材質，這裡使用基本材質
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// 創建立方體物件，並將材質應用於其上
const cube = new THREE.Mesh( geometry, material );
// 將立方體添加到場景中
scene.add( cube );
// 設置相機位置
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
// 使立方體旋轉
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染場景
renderer.render( scene, camera );
}
animate();
```
* 水波紋效果
* 使用的相機為OrthographicCamera(正交相機)
* 創建一個平面幾何體PlaneGeometry
* 創建材質MeshBasicMaterial，可以設置屬性，例如color、map、transparent等。為map屬性新增紋理，可以使用TextureLoader來載入圖片，這裡使用的圖片是有透明度的，所以將transparent屬性改為true。
* 波紋由很多圓圈所組成，使用for loop長出很多材質，這些紋理都隨機設置初始旋轉角度
* 用Mesh，將材質應用於其上，之後新增到場景上。設一個空陣列將mesh放入
* 材質新增新屬性blending(混和)，將所有紋理混和一起，還有depthTest、depthWrite屬性，值都改成false
* 新增監聽滑鼠移動事件，創建一個用於儲存滑鼠位置的向量，`const mouse = new THREE.Vector2();`
* 儲存mesh的陣列使用foreach，讓每個mesh都賦予跟滑鼠位置一樣的向量
* 之後會發現mesh還是離鼠標有一段距離，
## ==2024/03/20==
* ### 專題
和學生檢討了資料結構心智圖。整體看起來有問題的地方為: 1.資料都聚集在左側、2.資料表名稱和欄位都沒有英文名、3.缺少帳號管理(users)資料表(可能不小心刪掉，本來有)、4.沒有創建時間和更新時間。
可能是資訊量太多，不太會使用figma，會想要照著設計師的區塊去長結構。
## ==2024/03/13==
* ### Three.js
本來是要由[https://threejs.org/examples/?q=water#webgl_gpgpu_water](https://threejs.org/examples/?q=water#webgl_gpgpu_water)這個範例去改成想要的樣子，但是ShaderMaterial不支援圖檔(jpg)，所以目前不使用這個範例，這範例是透過已經建好的網格，再去貼一層材質。
現在改參考[https://www.youtube.com/watch?v=vWAci72MtME](https://www.youtube.com/watch?v=vWAci72MtME)這個做法，且它是參考這網站:[https://homunculus.jp/](https://homunculus.jp/)。
也有可能使用這個範例去更改[https://threejs.org/examples/?q=water#webgl_water_flowmap](https://threejs.org/examples/?q=water#webgl_water_flowmap)。
* ### ChatGPT
使用ChatGPT但它沒反應時，可以開其他瀏覽器試試，例如:無痕模式
(前提是它沒壞掉的時候)
---
## ==2024/03/06==
* ### 遊戲官網
* 將tailwind移除，因為網頁開啟時會導致延遲，所以改用原生css
<img src="https://hackmd.io/_uploads/ryXzHLS6a.gif" style="width: 50%;" alt="延遲示意圖">
* 當滾輪下滑，觸發Intersection Observer API增加或移除transform: translateY後，將滾輪移至頂部，重整頁面，滾輪會自動下滑到白色方塊(div)的位置。目前解決方式為，在最上方加上一個div(藍色方塊)。
(如果是增加或移除transform: translateX是沒有這問題。)
<div style="display: flex; justify-content: space-between;">
<img src="https://hackmd.io/_uploads/BJNygPS66.gif" style="width: 48%;" alt="示意圖">
<img src="https://hackmd.io/_uploads/Hy5bSvrTT.gif" style="width: 48%;" alt="示意圖">
<div/>
---
## ==2024/01/10==
* ### 製作遊戲官網
這次專案使用 html + tailwind。引入tailwind的CDN，安裝tailwind css 套件，要再加入==tailwind.config.js==這隻檔案，才會有提示。
* ### 助教日常
* 同學詢問為甚麼寫.container ul li沒作用?
我先在ul加class，用class(.container .ulclass li)是有作用的。我後來有想到會不會有錯字，但我相信同學...，且筆電自超小又只有一個螢幕，有夠難看:upside_down_face:，後來請了盧大哥，結果真的是錯字，ul寫成u1，讚啦:+1::thumbsup::+1:
---
## ==2024/01/03==
* ### [webflow](https://webflow.com/?r=0)
webflow使用 HTML、CSS 和 JavaScript 來寫代碼，即使不會程式也可以製作網頁。
也可以將figma放到webflow上。
* ### 專案(功能)費用
參考連結 : https://www.cb-design.com.tw/compare/
*
* 1/4開始當助教
* 遊戲官網和公司官網都是我切版~
---
## ==2023/12/27==
* ### [spline](https://spline.design/)
* ### JS
* 專案的終端機執行 `npm install @splinetool/runtime`
* 複製程式碼
* body增加canvas標籤 `<canvas id="canvas3d"></canvas>`
文件 : https://www.npmjs.com/package/@splinetool/runtime
* ### Spline Viewer
* 引入
` <script type="module" src="https://unpkg.com/@splinetool/viewer@1.0.16/build/spline-viewer.js"></script>`
* body加入`<spline-viewer url="自己的網址"></spline-viewer>`，可以選擇滑鼠事件作用區域，global(整個視窗)或是local(canvas區域裡)
* 缺點:如果沒有付費，就不能移除logo
範例 : https://viewer.spline.design/
---
## ==2023/12/20==
* ### [spline](https://spline.design/)
* ### 製作3D模型
先將grid plane(網格)跟snapping關閉，因為用不到，heipers也關閉
建立一個正方體，點擊smooth&edit
點擊increase base subdivision
將level調整到2
使用vertex  調整頭型(可以從側面先調整，再從頭頂)
<div style="display: flex; justify-content: space-between; margin-bottom: 24px;">
<img src="https://hackmd.io/_uploads/ryECO0CU6.gif" style="width: 40%;" alt="">
<img src="https://hackmd.io/_uploads/ryCb50AI6.gif" style="width: 40%;" alt="">
</div>
製作眼睛，建立一個長方體，點擊smooth&edit後，使用loop cut ，眼睛中間有一條橫的紅線再點擊，會發現橢圓更飽滿，再將level調整到2，會更有弧度(滑順)，調整好後，crtl+D可以複製物件
<div style="display: flex; justify-content: space-between; margin-bottom: 24px;">
<img src="https://hackmd.io/_uploads/HJIHRRR8p.gif" style="width: 49%;" alt="">
<img src="https://hackmd.io/_uploads/rJ6HR0RUa.gif" style="width: 49%;" alt="">
</div>
製作嘴巴，建立一個torus(圓環)，在shape調整形狀(參數)，==調整好後記得點擊smooth&edit==
<div style="display: flex; justify-content: space-between; margin-bottom: 24px;">
<img src="https://hackmd.io/_uploads/rJRNUy1vp.gif" style="width: 39%;" alt="">
<img src="https://hackmd.io/_uploads/HylTv11va.gif" style="width: 59%;" alt="">
</div>
製作鼻子，複製眼睛來修改，使用face ，選到頂端那一面，之後往內縮，就可以得到雨滴狀，再調整大小
<div>
<img src="https://hackmd.io/_uploads/HkF6A1JPT.gif" style="width: 40%;" alt="">
</div>
製作眉毛，一樣可以複製眼睛來修改，調整好大小後，使用vertex ，選取中間後，往上推，就會有弧形
<div>
<img src="https://hackmd.io/_uploads/BJmJfx1vp.gif" style="width: 40%;" alt="">
</div>
製作耳朵，建立一個立方體，將1/3放入模型裡，點擊smooth&edit，將將level調整到3，先用face  選取到正面，之後使用inset  先建立內部擠壓，再使用extrude ，將正面再擠壓進去。
<div>
<img src="https://hackmd.io/_uploads/Bkc_VlJv6.gif" style="width: 85%;" alt="">
</div>
使用vertex  調整耳朵形狀
<div>
<img src="https://hackmd.io/_uploads/HyswYekDT.gif" style="width: 45%;" alt="">
</div>
crtl+D複製耳朵，拉到左邊後會發現有點奇怪，將scale改成-1，就會對稱
之後製作身體，將頭、眼睛、鼻子...群組起來(crtl+G)，在頭群組新增look at事件，調整plane distance參數，plane distance數值越大移動越慢，身體群組也新增look at事件
當點擊的時候發現，頭和身體分開，只要到export的play settings，將orbit改為no，就會正常了
<div style="display: flex; justify-content: space-between; margin-bottom: 24px;">
<img src="https://hackmd.io/_uploads/HkCgZ-xDT.gif" style="width: 49%;" alt="">
<img src="https://hackmd.io/_uploads/ByDvgWePa.png" style="width: 49%;" alt="">
</div>
## ==2023/12/13==
* ### [spline](https://spline.design/)
* ### 跟隨效果
點選事件(events)，選擇follow
<img src="https://hackmd.io/_uploads/HJB_cUrIT.png" width="390" height="396" alt="">
target設為滑鼠後，就會跟隨著滑鼠
第二個物件要跟隨的話，目標改成前面那個物件，而不是滑鼠，以此類推
要設定damping參數，不然後面物件不會出現。數字越大，阻力越大，延遲時間就會比較長
第二顆球damping為20，第三顆為50
<div>
<img src="https://hackmd.io/_uploads/rJ3S75SUa.gif" style="width: 50%;" alt="">
</div>
完成
<div>
<img src="https://hackmd.io/_uploads/S1H4nYBIT.gif" style="width: 50%;" alt="">
</div>
* ### 製作成動畫
將第一個物件的事件改成start，actions選擇trasition，新增delay時間，loop改為infinite，cycle改成ping pong
<div>
<img src="https://hackmd.io/_uploads/HJinjOr8a.png" style="width: 60%;" alt="">
</div>
設定移動軌跡，點擊base state，移動該物件，該物件為起始點，點擊state，移動終點
<div style="display: flex; justify-content: space-between; margin-bottom: 24px;">
<img src="https://hackmd.io/_uploads/BkSRs_HIT.png" style="width: 49%;" alt="">
<img src="https://hackmd.io/_uploads/rkJk3drLT.png" style="width: 49%;" alt="">
</div>
完成
<div>
<img src="https://hackmd.io/_uploads/r1ToZYrI6.gif" style="width: 50%;" alt="">
</div>
* ### physics物理(物體碰撞、重力)
先將physics環境開啟
將物件的body type改成dynamic
將物體移至高處後，就會向下掉落，但會發現四個方塊(群組)卻沒有分開
<div>
<img src="https://hackmd.io/_uploads/SJlS73UU6.gif" style="width: 40%;" alt="">
</div>
若想要讓四個方塊倒下後會分開，將children改為separate，
<div>
<img src="https://hackmd.io/_uploads/HyNhEhLLT.gif" style="width: 40%;" alt="">
</div>
可以修改一些參數，讓物體達到想要的效果。
friction摩擦力，數字越小，摩擦力越小(綠方塊)；
bounce彈跳，數字越大，越有彈性(紅方塊)
<div>
<img src="https://hackmd.io/_uploads/B1tzOhIUp.gif" style="width: 45%;" alt="">
</div>
可以在圓球上新增遊戲控制事件，就可以操作圓球
<div>
<img src="https://hackmd.io/_uploads/SyDZonILp.png" style="width: 50%;" alt="">
</div>
完成
<div>
<img src="https://hackmd.io/_uploads/H1Oj928U6.gif" style="width: 40%;" alt="">
</div>
* ### 微視差效果
```javascript=
<script>
const parallaxVideo = document.querySelector('.parallax-video');
// 監聽滑鼠移動事件
document.addEventListener('mousemove', (event) => {
// 計算滑鼠的相對偏移量
const offsetX = (event.clientX / window.innerWidth - 0.5) * 2;
const offsetY = (event.clientY / window.innerHeight - 0.5) * 2;
// 應用視差效果到背景影片上
parallaxVideo.style.transform = `translate(${offsetX * 20}px, ${offsetY * 20}px)`;
});
// 監聽視窗大小變化事件
window.addEventListener('resize', () => {
// 重新計算視差效果
parallaxVideo.style.transform = 'translate(0, 0)';
});
</script>
```
---
## ==2023/12/06==
* ### 研究官網
將影片放入網頁後，且可以使用滾輪操作前進和倒帶
* ### 修改專案
將服務費欄位修改成可以使用小數點
---
## ==2023/11/29==
* ### 練習Vue(國小後台)
要如何引用(使用)useAlert
* Composables\useRequest.js
* Store\useAlertStore.ts
* Components\Public\Modal\AlertModal.vue
* Components\Public\Modal\ModalDialog.vue
* Components\Public\Other\Loading.vue
* ### 分享AI繪圖工具stable doodle
https://clipdrop.co/stable-doodle (好像不能免費使用了)
---
## ==2023/11/22==
* ### 練習Vue(國小後台)
[連結 https://github.com/reliese/laravel](https://github.com/reliese/laravel)
生成所有model
```
php artisan code:models
```
建立一個特定的model
```
php artisan code:models --table=users
```
* ### 分享Ai Pin
<iframe title="vimeo-player" src="https://player.vimeo.com/video/882968794?h=5bdb9f456a" width="640" height="360" frameborder="0" allowfullscreen></iframe>
* ### 分享網站
Lusion工作室 https://lusion.co/ (動畫效果)
Junni公司 https://junni.co.jp/ (背景互動效果)
---
## ==2023/11/15==
* ### 練習Vue(國小後台)
重新建立laravel 10，跑npm run dev後有報錯(visualizer is not a function)。
在github建立新專案，要將原有的.gitattributes檔案覆蓋掉。如果本來是LF，clone 下來後會變CRLF。解決辦法為在.gitattributes加上==eol=lf==。
* ### 影像建立工具
https://www.bing.com/create
---
## ==2023/11/08==
* ### 練習Vue(國小後台)
若有設置scss全域變數，路徑也沒有問題，但沒反應或有錯誤提示，可以先關掉VS Code試試
* ### 分享修圖網站
免費下載的最大尺寸720px
https://cleanup.pictures/
* ### 分享網頁
https://river.simpleinfo.cc/
---
## ==2023/11/01==
* ### 修改專案
:::danger
iOS裝置影片若不能自動播放，先檢查手機是否開啟了==低耗電模式== :expressionless:
:::
參考資料:https://developer.apple.com/forums/thread/709821
**github無法上傳100Mb的影片、文件**
壓縮影片網址:https://www.veed.io/zh-TW/tools/video-compressor
* 點擊上傳檔案
* 點擊Upload a File後，開始選擇要壓縮或調整的影片
* 可以調整品質(高、中、低)，和解析度，調整好後按下壓縮影片(Compress Video)
* 壓縮好後就可以點擊下載，或要再調整壓縮設定也可以
### **video**
3D導覽影片頁有一個背景影片(無聲自動循環播放)，之前在iOS裝置是可以運行的，現在發現不能運行，原本video標籤上有autoplay muted loop
有文章說若是手機的話，需加入==playsinline==這個屬性，手機才會自動播放影片，~~經測試後iOS裝置還是不行~~(忘記那時候測試是否有開低耗電模式)
參考資料:https://www.minwt.com/webdesign-dev/mobilewebdesign/24029.html
### **iframe(嵌入式)**
透過[IFrame Player API](https://developers.google.com/youtube/iframe_api_reference?hl=zh-tw)
youtube網址 https://www.youtube.com/watch?v= 後方字串就是該影片的ID
```javascript=
<div id="muteYouTubeVideoPlayer"></div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('muteYouTubeVideoPlayer', {
videoId: '放入影片的ID', // YouTube Video ID
width: 560, // Player width (in px)
height: 316, // Player height (in px)
playerVars: {
autoplay: 1, // Auto-play the video on load
controls: 1, // Show pause/play buttons in player
showinfo: 0, // Hide the video title
modestbranding: 1, // Hide the Youtube Logo
loop: 1, // Run the video in a loop
fs: 0, // Hide the full screen button
cc_load_policy: 0, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
autohide: 0, // Hide video controls when playing
},
events: {
onReady: function (e) {
e.target.mute(); //靜音
},
},
});
}
</script>
```
參考資料:https://www.labnol.org/internet/embed-mute-youtube-video/29149/
如果使用嵌入式就不會有檔案太大的問題，但是播放器顯示畫面為16:9，如果不是在這尺寸，就會有黑邊出現。
* ### 分享Google彩蛋
在==手機版==Google網頁搜尋「江戶川柯南」、「柯南」...，就會有一顆APTX4869縮小藥，點擊後就能體驗吞下神秘藥物的感受
---
## ==2023/10/25==
* ### 修改專案
1. 3D導覽影片頁: 開啟隱藏的影片列表，換上5部YT影片連結、文字、圖片
2. 聯絡我們頁: YT icon改連結
3. 互動遊戲介紹頁: 更換圖片和文字
4. 3D導覽影片頁: ==追加==更換背景影片、移除播放按鈕、內容文字修改；影片列表: 移除精華影片，換上5部之前影片
* ### 觀看Vue相關影片
---
## ==2023/10/18==
* ### 做完之前的vue作業
* ### 測試滾軸特效-[lax.js](https://alexfox.dev/lax.js/)
#### CDN
`<script src="https://cdn.jsdelivr.net/npm/lax.js" ></script>`
#### 設定
```javascript=
<!-- JS -->
<script>
window.onload = function () {
lax.init()
// Add a driver that we use to control our animations
lax.addDriver('scrollY', function () {
return window.scrollY
})
// Add animation bindings to elements
lax.addElements('.selector', {
scrollY: {
translateX: [
["elInY", "elCenterY", "elOutY"],
[0, 'screenWidth/2', 'screenWidth'],
]
}
})
}
</script>
<!-- HTML -->
<div class="selector">Hello</div>
```
#### 預設的CSS
* **一定要有==lax==才能使用**
div class="==lax== lax_preset_fadeIn:50:100 lax_preset_spin"></div>
參考網址: [https://alexfox.dev/lax.js/preset-explorer](https://alexfox.dev/lax.js/preset-explorer)
Sign in with Wallet
Connect another wallet