<script src="https://randojs.com/2.0.0.js"></script>
<canvas width="1000" height="1000" id="canvas"></canvas>
<script src="./index.js"></script>
<style>
html {
background-color: #000;
}
</style>
const ctx = document.getElementById('canvas').getContext('2d')
const W = 1000
const H = 1000
const triangle = [
{ x: W / 2, y: 10 },
{ x: W - 10, y: H - 10 },
{ x: 10, y: H - 10 }
]
const drawPoint = (p) => {
ctx.fillStyle = "#FF0"
ctx.beginPath()
ctx.arc(p.x, p.y, 0.05, 0, 2 * Math.PI)
ctx.fill()
}
const getMidPoint = ({ x: x1, y: y1 }, { x: x2, y: y2 }) => {
return { x: (x1 + x2) / 2, y: (y1 + y2) / 2 }
}
const drawPoints = (last) => {
const randomPoint = triangle[rando(2)]
const midPoint = getMidPoint(last, randomPoint)
drawPoint(midPoint)
setTimeout(() => {
drawPoints(midPoint)
}, 1)
}
drawPoints(triangle[rando(2)])
This Pen doesn't use any external CSS resources.