بسته بندی دایره ای با جاوا اسکریپت و SVG – راه کوساما

من عاشق آثار هنرمند ژاپنی یایو کوساما هستم و – برای مدت طولانی – می خواستم یک پوستر تعاملی از نقاط معروف او بسازم.

اگرچه پدرم یک معلم ریاضی بازنشسته است، من به سادگی نمی تواند الگوریتم‌های بسیار پیچیده «بسته‌بندی دایره‌ای» را درک کنید، بنابراین کار ساده‌تری را انجام دادم:

function kusamaDots(
  numDots,
  minRadius,
  maxRadius,
  width,
  height
) {
  const dots = [];

  function createDot() {
    const x = Math.floor(Math.random() * width);
    const y = Math.floor(Math.random() * height);
    const radius =
      Math.random() * (maxRadius - minRadius) + minRadius;
    const dot = { radius, x, y };
    if (!dots.some((c) => intersects(dot, c))) {
      return dot;
    }
    return null;
  }

  while (dots.length < numDots) {
    const dot = createDot();
    if (dot !== null) dots.push(dot);
  }
  return dots;
}

پارامترها عبارتند از:

1. numDots. تعداد کل نقاط
2. minRadius. حداقل شعاع یک نقطه
3. maxRadius. حداکثر شعاع یک نقطه
4. width از “بوم” (SVG viewBox).
5. height از همان.

را createDot روش یک تصادفی ایجاد می کند x و yموقعیت در داخل مرزهای viewBox. یک شعاع تصادفی بین مقادیر تعیین می کند minRadius و maxRadius.

الف را ایجاد می کند dot-object، و سپس آن را بررسی می کند که آیا نقطه قطع می کند با هر نقطه دیگری (که قبلا ایجاد شده است). برای این کار به یک روش کمکی کوچک نیاز داریم:

function intersects(first, second) {
  const dx = first.x - second.x;
  const dy = first.y - second.y;
  const distance = Math.sqrt(dx * dx + dy * dy);
  const sumOfRadii = first.radius + second.radius;
  return distance <= sumOfRadii;
}

اگر نقطه انجام دهد نه با هر نقطه دیگری قطع می شود، این است returnویرایش

پس از آن، الف while-حلقه اجرا می شود تا زمانی که numDots رسیده اند.

به خروجی نقاط، ما به سادگی ایجاد می کنیم <circle>s در SVG:

const dots = kusamaDots(
  e.target.valueAsNumber,
  10,
  150,
  1000,
  1000
);
svg.innerHTML = dots
  .map(
    (dot) =>
      `<circle r="${dot.radius}" cx="${dot.x}" cy="${dot.y}"></circle>`
  )
  .join("")

CSS

CSS نسبتاً ساده است. قاب و متن های پاسخگو شبیه ماه در 10241 نقطه است.

مهمترین بخش یک ویژگی سفارشی است که برای رنگ نقطه استفاده می شود (به عنوان fill)!

با این حال، تصمیم گرفتم یک نوار لغزنده محدوده سفارشی و یک انتخابگر رنگ به عنوان بخشی از پوستر انجام دهم، بنابراین آن را ساختم. یک تعاملی پوستر:

آیا می توانید آنها را تشخیص دهید؟!

نوار لغزنده را بکشید و بر روی انتخابگر رنگ کلیک کنید تا مورد نظر شما باشد خود پوستر:

نسخه ی نمایشی