Skip to content

Demo: Equally Distribute Points

This demo shows how to use the useDistributePoints composable. It takes an octagon and draws 16 points around it equidistantly.

16 points equally spaced around an octagon
<script setup lang="ts">
import {useOctagon} from '../../../src'
import PrimitiveSVGRenderer from "./renderer/PrimitiveSVGRenderer.vue";
import {Primitive} from "../../../src/primitives/usePrimitive";
import {onMounted, onUnmounted, ref, Ref} from "vue";
import {useDistributePoints} from "../../../src/utilities/useDistributePoints";

// Create an octagon primitive
const rotation: Ref<number> = ref(0)
const octagon: Primitive = useOctagon({position: {x: 344, y: 200}, size: 200, rotation})

// Let's get an array of 16 points (vertex objects) equally distributed around the edge of the octagon
const {vertices} = useDistributePoints(octagon, 16)

onMounted(() => {

  // Constantly rotate the octagon
  const rotationInterval = setInterval(() => {
    rotation.value += 0.5
  }, 1000 / 60)

  // Clean up
  onUnmounted(() => {


  <!-- This renderer is just for demo purposes -->
  <!-- All it does is take each primitive's svgPath property and render it in an SVG context -->
  <PrimitiveSVGRenderer :primitives="[octagon]" :vertices="vertices"
                        label="16 points equally spaced around an octagon"/>

Released under the MIT License.