JSFiddle - React, Tailwind, and code Playground

by magneto903

HTML

<html>
  <head>
    <meta charse="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/@turf/[email protected]/turf.min.js"></script>
  </head>
  <body>
    <canvas width=500 height=500 id="canvas" ></canvas>

  </body>
</html>

JavaScript

function compareNumbers(a, b) {
  return a - b;
}

function compareVecs(a, b) {
	return Math.atan2(a[1], a[0]) - Math.atan2(b[1], b[0])
}

var generate_polygon = function(n, c_x, c_y, width, height) {
	var polygon = []

	var x = [];
	var y = [];

	for (var i=0; i < n; i++) {
    	x.push(Math.floor( Math.random() * width  ) + c_x - width  / 2)
    	y.push(Math.floor( Math.random() * height ) + c_y - height / 2)
	}
    
	x.sort(compareNumbers)
	y.sort(compareNumbers)

	var min_x = x.shift()
	var min_y = y.shift()

	var max_x = x.pop()
	var max_y = y.pop()

	var x_chain_1 = [min_x]
	var y_chain_1 = [min_y]
	var x_chain_2 = [min_x]
	var y_chain_2 = [min_y]

	for (var i=0; i < x.length; i+=2) {
    	if (Math.random() > 0.5) {
    	    x_chain_1.push(x[i])
    	    x_chain_2.push(x[i+1])
    	} else {
        	x_chain_1.push(x[i+1])
        	x_chain_2.push(x[i])
    	}
	}

	for (var i=0; i < y.length; i+=2) {
    	if (Math.random() > 0.5) {
        	y_chain_1.push(y[i])
        	y_chain_2.push(y[i+1])
    	} else {
        	y_chain_1.push(y[i+1])
        	y_chain_2.push(y[i])
    	}
	}

	x_chain_1.push(max_x)
	x_chain_2.push(max_x)

	y_chain_1.push(max_y)
	y_chain_2.push(max_y)

	var x_vec = []
	var y_vec = []

	for (var i=0; i < x_chain_1.length-1; i++) {
    	x_vec.push(x_chain_1[i+1]-x_chain_1[i])
	}

	for (var i=0; i < y_chain_1.length-1; i++) {
    	y_vec.push(y_chain_1[i+1]-y_chain_1[i])
	}

	for (var i=x_chain_2.length-1; i > 0; i--) {
    	x_vec.push(x_chain_2[i-1]-x_chain_2[i])
	}

	for (var i=y_chain_2.length-1; i > 0; i--) {
    	y_vec.push(y_chain_2[i-1]-y_chain_2[i])
	}


	var vec = []

	for (var i=0; i < x_vec.length; i++) {
    	var rand_index = Math.floor(Math.random()*y_vec.length)
    	var rand_y_vec = y_vec[rand_index]
    	y_vec.splice(rand_index, 1)
    	vec.push([x_vec[i], rand_y_vec])
	}

	vec.sort(compareVecs)

	var x = c_x;
	var y = c_y;
	for (var i=0; i < vec.length; i++) {
    	x+=vec[i][0]
    	y+=vec[i][1]
        polygon.push({
       ...