随机产生小球大小

src/pages/screen.page.vue

@@ -2,6 +2,7 @@
 import { Notify }                         from '@/platform';
 import { copyrightMethod, processMethod } from '@/request/api';
 import { useVisitor }                     from '@/stores';
+import getBubbles                         from '@/tools/bubble';
 import { useElementSize }                 from '@vueuse/core';
 import { useRequest }                     from 'alova/client';
 import p5                                 from 'p5';
@@ -32,6 +33,7 @@ interface Bubble {
   dx?: number;
   dy?: number;
   diameter?: number;
+  size?: number;
 }
 
 watchEffect(() => {
@@ -81,15 +83,7 @@ function init({ width, height, container }: { width: number; height: number; con
       sketch.pop();
     };
 
-    const bubbles: Bubble[] = [
-      { text: '有气\n无力', color: '#367dd599' },
-      { text: '容易\n犯困', color: '#b1450399' },
-      { text: '睡眠\n障碍', color: '#34b10399' },
-      { text: '消化\n不良', color: '#b1860399' },
-      { text: '肩颈\n腰痛', color: '#03b19b99' },
-      { text: '掉\n头发', color: '#b1a30399' },
-      { text: '记忆力\n下降', color: '#34b10399' },
-    ];
+    const bubbles: Bubble[] = getBubbles();
     const drawBubble = (x = 40, y = x, diameter = 90) => {
       for ( const bubble of <Required<Bubble>[]> bubbles ) {
         bubble.diameter ??= diameter;
@@ -106,7 +100,7 @@ function init({ width, height, container }: { width: number; height: number; con
         if ( bubble.x + radius >= width - y ) bubble.x = width - y;
         if ( bubble.y + radius >= height - y ) bubble.y = height - y;
         // 绘制
-        const size = 24;
+        const size = bubble.size;
         const color = sketch.color(bubble.color);
         sketch.push();
         sketch.fill('#fff');
@@ -127,7 +121,10 @@ function init({ width, height, container }: { width: number; height: number; con
         }
       }
       const collide = (bubble: Required<Bubble>, other: Required<Bubble>) => {
-        const radius = Math.floor(bubble.diameter / 2);
+        const ra = Math.floor(bubble.diameter / 2);
+        const rb = Math.floor(other.diameter / 2);
+
+        const radius = Math.max(ra, rb);
 
         let angle = sketch.atan2(other.y - bubble.y, other.x - bubble.x);
         let target = sketch.createVector(bubble.x, bubble.y);

src/tools/bubble.ts

@@ -0,0 +1,36 @@
+/**
+ * 小球直径
+ * font = mx+c [14, 24]
+ */
+const SIZE = [50, 90] as const;
+const SIZE_S = 8;
+const SIZE_M = 0.25;
+const SIZE_C = 1.5;
+
+const seed_text = ['有气\n无力', '容易\n犯困', '睡眠\n障碍', '消化\n不良', '肩颈\n腰痛', '掉\n头发', '记忆力\n下降'];
+const seed_color = ['#367dd599', '#b1450399', '#34b10399', '#b1860399', '#03b19b99', '#b1a30399', '#34b10399'];
+
+function getRandomValueWithStep(step: number, min: number, max: number) {
+  step = Math.max(1, step);
+  if (min > max) {
+    [min, max] = [max, min];
+  }
+
+  const range = max - min;
+  const steps = Math.floor(range / step) + 1;
+  const random = Math.floor(Math.random() * steps);
+  return min + random * step;
+}
+
+export default function () {
+  const max = seed_text.length - 1;
+  return seed_text.map((text, i) => {
+    const diameter = getRandomValueWithStep(SIZE_S, ...SIZE);
+    return {
+      text,
+      color: seed_color[i],
+      diameter,
+      size: Math.floor(diameter * SIZE_M + SIZE_C),
+    };
+  });
+}