iT邦幫忙

2024 iThome 鐵人賽

DAY 28
0
生成式 AI

TouchDesigner系列 第 28

Day28 p5.js時鐘完成

  • 分享至 

  • xImage
  •  

先創造三個有關時間的函數分別是
Second
Minute
Hour
https://ithelp.ithome.com.tw/upload/images/20241010/20168943bwp9m2K1fs.png
https://ithelp.ithome.com.tw/upload/images/20241010/201689437kgYDI4OG7.png

打印出來就能看到它是跟著時間跑的,而且這個函數是真的與現實同步的,現在12點print出來就是12點
在分別把三個函數套上昨天看到的map上,當一秒過去就會隨著圓的結束位置跑
讓變數map()第一個是值s他原本是0到60的循環,要把它改成0到PI*2(也就是6.14)
https://ithelp.ithome.com.tw/upload/images/20241010/20168943NTNgFAP9g3.png

會了一個剩下兩個就好辦ㄌ
要注意的是時針在時鐘上面轉的時候只會經過12個數字,所以它的範圍應該是12,創造完變數應該是長這樣,我原本想把起始位置調的跟真的時鐘從中間開始的,但我怎麼調他都不在中間….
https://ithelp.ithome.com.tw/upload/images/20241010/20168943vKtvP4l9v1.png

劃出三個圈分別更改他們的參數就好ㄌ
https://ithelp.ithome.com.tw/upload/images/20241010/20168943eeJCNqtfaD.png
這樣能看出來我在幾點寫的嗎?
我在晚上11.寫ㄉ
鐵人賽截止前半個小時,哈哈
https://ithelp.ithome.com.tw/upload/images/20241010/20168943t5dvwQ4pxg.png
推薦大家擴充功能裝一個能抓顏色的,這樣能在網頁上隨地抓色碼蠻方便的。
https://ithelp.ithome.com.tw/upload/images/20241010/20168943cWhriNLqDB.png


上一篇
Day27 時鐘(1)
下一篇
Day29 最後的p5.js
系列文
TouchDesigner31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言