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
vue
<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(() => {
    clearInterval(rotationInterval)
  });
});

</script>

<template>
  <!-- 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"/>
</template>

Released under the MIT License.