JSFiddle - React, Tailwind, and code Playground
by magneto903
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="600" height="600" ></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 verts_arr = [];
var edges_arr = [];
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]
...