隨機不重疊的圓形 | p5.js

更新於 發佈於 閱讀時間約 1 分鐘
來源影片:9.8: Random Circles with No Overlap - p5.js Tutorial

目標:想要畫隨機且不重疊的圓型

如果直接用 random 賦予 x 和 y 的值 (圓的位置),很難避免重疊。其中一個方法 (影片中教的方法) 是看兩個圓心之間的距離有沒有大於或等於兩個圓的半徑相加,如果有就表示兩個圓沒有重疊。


使用 dist(x1, y1, x2, y2) 判斷兩點之間的距離。

把圓的資訊 (x, y, r) 存成物件,每個圓跟陣列中的圓依序比對,用 dist 判斷兩個圓是否重疊,沒重疊才加進陣列裡。

程式碼:https://openprocessing.org/sketch/2234139

留言
avatar-img
留言分享你的想法!
阿榮-avatar-img
發文者
2024/04/11
點擊圓形隨機變色 | p5.js提及了這篇文章,趕快過去看看吧!
avatar-img
阿榮 | 前端 ~ 互動藝術程式
2會員
39內容數
主要放程式學習筆記,分享 Creative Coding 相關內容、作品
2024/04/11
向量 vector: magnitude 量 + direction 方向
Thumbnail
2024/04/11
向量 vector: magnitude 量 + direction 方向
Thumbnail
2024/04/11
隨機不重疊的圓形 | p5.js 變化版,dist() 除了用來判斷兩個圓是否重疊,也可以拿來判斷滑鼠在哪個圓內。
Thumbnail
2024/04/11
隨機不重疊的圓形 | p5.js 變化版,dist() 除了用來判斷兩個圓是否重疊,也可以拿來判斷滑鼠在哪個圓內。
Thumbnail
2024/04/05
Creative Coding 作品變化概念,有或沒有的差別,隨機性,色彩模式的調整...等
Thumbnail
2024/04/05
Creative Coding 作品變化概念,有或沒有的差別,隨機性,色彩模式的調整...等
Thumbnail
看更多