點擊圓形隨機變色 | p5.js

更新 發佈閱讀 1 分鐘

程式碼

dist()

隨機不重疊的圓形 | p5.js 變化版,dist() 除了用來判斷兩個圓是否重疊,也可以拿來判斷滑鼠在哪個圓內。

滑鼠跟圓心的距離如果小於圓形半徑,表示滑鼠在圓內,回傳 boolean 值,用來決定要不要變更顏色。

function mouseInCircle(circle) {
return dist(mouseX, mouseY, circle.x, circle.y) < circle.r;
}


random()

p5.js 的 random() 除了可以隨機取得範圍內的數值,例如:random(50)、random(-10, 100),也可以隨機取得陣列的值,這個作品用來隨機取得顏色,先創建色彩陣列,再透過 random(陣列)取隨機值。

const colors = ["#ccd5ae", "#e9edc9", "#fefae0", "#faedcd", "#d4a373"];
random(colors);


mousePressed()

偵測滑鼠點擊,點擊後執行內部程式碼

function mousePressed() {
for (let a=0; a<circles.length; a++) {
if (mouseInCircle(circles[a])) {
circles[a].clr = random(colors2)
}
}
}
留言
avatar-img
阿榮 | 前端 ~ 互動藝術程式
2會員
39內容數
主要放程式學習筆記,分享 Creative Coding 相關內容、作品
2024/04/11
向量 vector: magnitude 量 + direction 方向
Thumbnail
2024/04/11
向量 vector: magnitude 量 + direction 方向
Thumbnail
2024/04/09
來源影片:9.8: Random Circles with No Overlap - p5.js Tutorial 目標:想要畫隨機且不重疊的圓型
Thumbnail
2024/04/09
來源影片:9.8: Random Circles with No Overlap - p5.js Tutorial 目標:想要畫隨機且不重疊的圓型
Thumbnail
2024/04/05
Creative Coding 作品變化概念,有或沒有的差別,隨機性,色彩模式的調整...等
Thumbnail
2024/04/05
Creative Coding 作品變化概念,有或沒有的差別,隨機性,色彩模式的調整...等
Thumbnail
看更多
你可能也想看
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
高中數學主題練習—過圓外一點之切線
Thumbnail
高中數學主題練習—過圓外一點之切線
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
高中數學主題練習—過圓上一點之切線
Thumbnail
高中數學主題練習—過圓上一點之切線
Thumbnail
高中數學主題練習—分點計算
Thumbnail
高中數學主題練習—分點計算
Thumbnail
高中數學主題練習—分點計算
Thumbnail
高中數學主題練習—分點計算
Thumbnail
高中數學主題練習—點與圓之關係
Thumbnail
高中數學主題練習—點與圓之關係
Thumbnail
隨機不重疊的圓形 | p5.js 變化版,dist() 除了用來判斷兩個圓是否重疊,也可以拿來判斷滑鼠在哪個圓內。
Thumbnail
隨機不重疊的圓形 | p5.js 變化版,dist() 除了用來判斷兩個圓是否重疊,也可以拿來判斷滑鼠在哪個圓內。
Thumbnail
高中數學主題練習—兩點斜率
Thumbnail
高中數學主題練習—兩點斜率
Thumbnail
高中數學主題練習—線與圓之關係
Thumbnail
高中數學主題練習—線與圓之關係
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News