31:T443,md` We moved the issue to finding a point in a triangle. But which triangle should we choose? Of course a random one! Do we just select a random number between 1 and 5? **No!** With the above mentioned approach we would treat each triangle equal. Looking at the bigger picture, we want our points to be **random**, this implies a **uniform** distribution of points in the polygon. Formulated differently: Each location in the polygon should have the same chance of being chosen. This is why we can't pick a random index, this would mean smaller triangles have the same chance of being chosen as bigger ones. We have to adjust for the area of each triangle. A small pre-calculation will help us here: - Determine the total area covered by all triangles - Build a cumulative distribution. This basically tells us _"triangles 1 to 3 cover x% of the total area"_. This can be a running total of the area over all triangles. Below function does mostly this. Instead of a running total of the area, I use a running total of the relative area covered by a triangle compared to the total area. `32:T4a07,function createEarcut() { function earcut(data, holeIndices, dim) { dim = dim || 2; var hasHoles = holeIndices && holeIndices.length, outerLen = hasHoles ? holeIndices[0] * dim : data.length, outerNode = linkedList(data, 0, outerLen, dim, true), triangles = []; if (!outerNode) return triangles; var minX, minY, maxX, maxY, x, y, invSize; if (hasHoles) outerNode = eliminateHoles(data, holeIndices, outerNode, dim); // if the shape is not too simple, we'll use z-order curve hash later; calculate polygon bbox if (data.length > 80 * dim) { minX = maxX = data[0]; minY = maxY = data[1]; for (var i = dim; i < outerLen; i += dim) { x = data[i]; y = data[i + 1]; if (x < minX) minX = x; if (y < minY) minY = y; if (x > maxX) maxX = x; if (y > maxY) maxY = y; } // minX, minY and invSize are later used to transform coords into integers for z-order calculation invSize = Math.max(maxX - minX, maxY - minY); invSize = invSize !== 0 ? 1 / invSize : 0; } earcutLinked(outerNode, triangles, dim, minX, minY, invSize); return triangles; } // create a circular doubly linked list from polygon points in the specified winding order function linkedList(data, start, end, dim, clockwise) { var i, last; if (clockwise === signedArea(data, start, end, dim) > 0) { for (i = start; i < end; i += dim) last = insertNode(i, data[i], data[i + 1], last); } else { for (i = end - dim; i >= start; i -= dim) last = insertNode(i, data[i], data[i + 1], last); } if (last && equals(last, last.next)) { removeNode(last); last = last.next; } return last; } // eliminate colinear or duplicate points function filterPoints(start, end) { if (!start) return start; if (!end) end = start; var p = start, again; do { again = false; if (!p.steiner && (equals(p, p.next) || area(p.prev, p, p.next) === 0)) { removeNode(p); p = end = p.prev; if (p === p.next) break; again = true; } else { p = p.next; } } while (again || p !== end); return end; } // main ear slicing loop which triangulates a polygon (given as a linked list) function earcutLinked(ear, triangles, dim, minX, minY, invSize, pass) { if (!ear) return; // interlink polygon nodes in z-order if (!pass && invSize) indexCurve(ear, minX, minY, invSize); var stop = ear, prev, next; // iterate through ears, slicing them one by one while (ear.prev !== ear.next) { prev = ear.prev; next = ear.next; if (invSize ? isEarHashed(ear, minX, minY, invSize) : isEar(ear)) { // cut off the triangle triangles.push(prev.i / dim); triangles.push(ear.i / dim); triangles.push(next.i / dim); removeNode(ear); // skipping the next vertice leads to less sliver triangles ear = next.next; stop = next.next; continue; } ear = next; // if we looped through the whole remaining polygon and can't find any more ears if (ear === stop) { // try filtering points and slicing again if (!pass) { earcutLinked( filterPoints(ear), triangles, dim, minX, minY, invSize, 1 ); // if this didn't work, try curing all small self-intersections locally } else if (pass === 1) { ear = cureLocalIntersections(ear, triangles, dim); earcutLinked(ear, triangles, dim, minX, minY, invSize, 2); // as a last resort, try splitting the remaining polygon into two } else if (pass === 2) { splitEarcut(ear, triangles, dim, minX, minY, invSize); } break; } } } // check whether a polygon node forms a valid ear with adjacent nodes function isEar(ear) { var a = ear.prev, b = ear, c = ear.next; if (area(a, b, c) >= 0) return false; // reflex, can't be an ear // now make sure we don't have other points inside the potential ear var p = ear.next.next; while (p !== ear.prev) { if ( pointInTriangle(a.x, a.y, b.x, b.y, c.x, c.y, p.x, p.y) && area(p.prev, p, p.next) >= 0 ) return false; p = p.next; } return true; } function isEarHashed(ear, minX, minY, invSize) { var a = ear.prev, b = ear, c = ear.next; if (area(a, b, c) >= 0) return false; // reflex, can't be an ear // triangle bbox; min & max are calculated like this for speed var minTX = a.x < b.x ? (a.x < c.x ? a.x : c.x) : b.x < c.x ? b.x : c.x, minTY = a.y < b.y ? (a.y < c.y ? a.y : c.y) : b.y < c.y ? b.y : c.y, maxTX = a.x > b.x ? (a.x > c.x ? a.x : c.x) : b.x > c.x ? b.x : c.x, maxTY = a.y > b.y ? (a.y > c.y ? a.y : c.y) : b.y > c.y ? b.y : c.y; // z-order range for the current triangle bbox; var minZ = zOrder(minTX, minTY, minX, minY, invSize), maxZ = zOrder(maxTX, maxTY, minX, minY, invSize); var p = ear.prevZ, n = ear.nextZ; // look for points inside the triangle in both directions while (p && p.z >= minZ && n && n.z <= maxZ) { if ( p !== ear.prev && p !== ear.next && pointInTriangle(a.x, a.y, b.x, b.y, c.x, c.y, p.x, p.y) && area(p.prev, p, p.next) >= 0 ) return false; p = p.prevZ; if ( n !== ear.prev && n !== ear.next && pointInTriangle(a.x, a.y, b.x, b.y, c.x, c.y, n.x, n.y) && area(n.prev, n, n.next) >= 0 ) return false; n = n.nextZ; } // look for remaining points in decreasing z-order while (p && p.z >= minZ) { if ( p !== ear.prev && p !== ear.next && pointInTriangle(a.x, a.y, b.x, b.y, c.x, c.y, p.x, p.y) && area(p.prev, p, p.next) >= 0 ) return false; p = p.prevZ; } // look for remaining points in increasing z-order while (n && n.z <= maxZ) { if ( n !== ear.prev && n !== ear.next && pointInTriangle(a.x, a.y, b.x, b.y, c.x, c.y, n.x, n.y) && area(n.prev, n, n.next) >= 0 ) return false; n = n.nextZ; } return true; } // go through all polygon nodes and cure small local self-intersections function cureLocalIntersections(start, triangles, dim) { var p = start; do { var a = p.prev, b = p.next.next; if ( !equals(a, b) && intersects(a, p, p.next, b) && locallyInside(a, b) && locallyInside(b, a) ) { triangles.push(a.i / dim); triangles.push(p.i / dim); triangles.push(b.i / dim); // remove two nodes involved removeNode(p); removeNode(p.next); p = start = b; } p = p.next; } while (p !== start); return p; } // try splitting polygon into two and triangulate them independently function splitEarcut(start, triangles, dim, minX, minY, invSize) { // look for a valid diagonal that divides the polygon into two var a = start; do { var b = a.next.next; while (b !== a.prev) { if (a.i !== b.i && isValidDiagonal(a, b)) { // split the polygon in two by the diagonal var c = splitPolygon(a, b); // filter colinear points around the cuts a = filterPoints(a, a.next); c = filterPoints(c, c.next); // run earcut on each half earcutLinked(a, triangles, dim, minX, minY, invSize); earcutLinked(c, triangles, dim, minX, minY, invSize); return; } b = b.next; } a = a.next; } while (a !== start); } // link every hole into the outer loop, producing a single-ring polygon without holes function eliminateHoles(data, holeIndices, outerNode, dim) { var queue = [], i, len, start, end, list; for (i = 0, len = holeIndices.length; i < len; i++) { start = holeIndices[i] * dim; end = i < len - 1 ? holeIndices[i + 1] * dim : data.length; list = linkedList(data, start, end, dim, false); if (list === list.next) list.steiner = true; queue.push(getLeftmost(list)); } queue.sort(compareX); // process holes from left to right for (i = 0; i < queue.length; i++) { eliminateHole(queue[i], outerNode); outerNode = filterPoints(outerNode, outerNode.next); } return outerNode; } function compareX(a, b) { return a.x - b.x; } // find a bridge between vertices that connects hole with an outer ring and and link it function eliminateHole(hole, outerNode) { outerNode = findHoleBridge(hole, outerNode); if (outerNode) { var b = splitPolygon(outerNode, hole); filterPoints(b, b.next); } } // David Eberly's algorithm for finding a bridge between hole and outer polygon function findHoleBridge(hole, outerNode) { var p = outerNode, hx = hole.x, hy = hole.y, qx = -Infinity, m; // find a segment intersected by a ray from the hole's leftmost point to the left; // segment's endpoint with lesser x will be potential connection point do { if (hy <= p.y && hy >= p.next.y && p.next.y !== p.y) { var x = p.x + (hy - p.y) * (p.next.x - p.x) / (p.next.y - p.y); if (x <= hx && x > qx) { qx = x; if (x === hx) { if (hy === p.y) return p; if (hy === p.next.y) return p.next; } m = p.x < p.next.x ? p : p.next; } } p = p.next; } while (p !== outerNode); if (!m) return null; if (hx === qx) return m.prev; // hole touches outer segment; pick lower endpoint // look for points inside the triangle of hole point, segment intersection and endpoint; // if there are no points found, we have a valid connection; // otherwise choose the point of the minimum angle with the ray as connection point var stop = m, mx = m.x, my = m.y, tanMin = Infinity, tan; p = m.next; while (p !== stop) { if ( hx >= p.x && p.x >= mx && hx !== p.x && pointInTriangle( hy < my ? hx : qx, hy, mx, my, hy < my ? qx : hx, hy, p.x, p.y ) ) { tan = Math.abs(hy - p.y) / (hx - p.x); // tangential if ( (tan < tanMin || (tan === tanMin && p.x > m.x)) && locallyInside(p, hole) ) { m = p; tanMin = tan; } } p = p.next; } return m; } // interlink polygon nodes in z-order function indexCurve(start, minX, minY, invSize) { var p = start; do { if (p.z === null) p.z = zOrder(p.x, p.y, minX, minY, invSize); p.prevZ = p.prev; p.nextZ = p.next; p = p.next; } while (p !== start); p.prevZ.nextZ = null; p.prevZ = null; sortLinked(p); } // Simon Tatham's linked list merge sort algorithm // http://www.chiark.greenend.org.uk/~sgtatham/algorithms/listsort.html function sortLinked(list) { var i, p, q, e, tail, numMerges, pSize, qSize, inSize = 1; do { p = list; list = null; tail = null; numMerges = 0; while (p) { numMerges++; q = p; pSize = 0; for (i = 0; i < inSize; i++) { pSize++; q = q.nextZ; if (!q) break; } qSize = inSize; while (pSize > 0 || (qSize > 0 && q)) { if (pSize !== 0 && (qSize === 0 || !q || p.z <= q.z)) { e = p; p = p.nextZ; pSize--; } else { e = q; q = q.nextZ; qSize--; } if (tail) tail.nextZ = e; else list = e; e.prevZ = tail; tail = e; } p = q; } tail.nextZ = null; inSize *= 2; } while (numMerges > 1); return list; } // z-order of a point given coords and inverse of the longer side of data bbox function zOrder(x, y, minX, minY, invSize) { // coords are transformed into non-negative 15-bit integer range x = 32767 * (x - minX) * invSize; y = 32767 * (y - minY) * invSize; x = (x | (x << 8)) & 0x00ff00ff; x = (x | (x << 4)) & 0x0f0f0f0f; x = (x | (x << 2)) & 0x33333333; x = (x | (x << 1)) & 0x55555555; y = (y | (y << 8)) & 0x00ff00ff; y = (y | (y << 4)) & 0x0f0f0f0f; y = (y | (y << 2)) & 0x33333333; y = (y | (y << 1)) & 0x55555555; return x | (y << 1); } // find the leftmost node of a polygon ring function getLeftmost(start) { var p = start, leftmost = start; do { if (p.x < leftmost.x) leftmost = p; p = p.next; } while (p !== start); return leftmost; } // check if a point lies within a convex triangle function pointInTriangle(ax, ay, bx, by, cx, cy, px, py) { return ( (cx - px) * (ay - py) - (ax - px) * (cy - py) >= 0 && (ax - px) * (by - py) - (bx - px) * (ay - py) >= 0 && (bx - px) * (cy - py) - (cx - px) * (by - py) >= 0 ); } // check if a diagonal between two polygon nodes is valid (lies in polygon interior) function isValidDiagonal(a, b) { return ( a.next.i !== b.i && a.prev.i !== b.i && !intersectsPolygon(a, b) && locallyInside(a, b) && locallyInside(b, a) && middleInside(a, b) ); } // signed area of a triangle function area(p, q, r) { return (q.y - p.y) * (r.x - q.x) - (q.x - p.x) * (r.y - q.y); } // check if two points are equal function equals(p1, p2) { return p1.x === p2.x && p1.y === p2.y; } // check if two segments intersect function intersects(p1, q1, p2, q2) { if ( (equals(p1, q1) && equals(p2, q2)) || (equals(p1, q2) && equals(p2, q1)) ) return true; return ( area(p1, q1, p2) > 0 !== area(p1, q1, q2) > 0 && area(p2, q2, p1) > 0 !== area(p2, q2, q1) > 0 ); } // check if a polygon diagonal intersects any polygon segments function intersectsPolygon(a, b) { var p = a; do { if ( p.i !== a.i && p.next.i !== a.i && p.i !== b.i && p.next.i !== b.i && intersects(p, p.next, a, b) ) return true; p = p.next; } while (p !== a); return false; } // check if a polygon diagonal is locally inside the polygon function locallyInside(a, b) { return area(a.prev, a, a.next) < 0 ? area(a, b, a.next) >= 0 && area(a, a.prev, b) >= 0 : area(a, b, a.prev) < 0 || area(a, a.next, b) < 0; } // check if the middle point of a polygon diagonal is inside the polygon function middleInside(a, b) { var p = a, inside = false, px = (a.x + b.x) / 2, py = (a.y + b.y) / 2; do { if ( p.y > py !== p.next.y > py && p.next.y !== p.y && px < (p.next.x - p.x) * (py - p.y) / (p.next.y - p.y) + p.x ) inside = !inside; p = p.next; } while (p !== a); return inside; } // link two polygon vertices with a bridge; if the vertices belong to the same ring, it splits polygon into two; // if one belongs to the outer ring and another to a hole, it merges it into a single ring function splitPolygon(a, b) { var a2 = new Node(a.i, a.x, a.y), b2 = new Node(b.i, b.x, b.y), an = a.next, bp = b.prev; a.next = b; b.prev = a; a2.next = an; an.prev = a2; b2.next = a2; a2.prev = b2; bp.next = b2; b2.prev = bp; return b2; } // create a node and optionally link it with previous one (in a circular doubly linked list) function insertNode(i, x, y, last) { var p = new Node(i, x, y); if (!last) { p.prev = p; p.next = p; } else { p.next = last.next; p.prev = last; last.next.prev = p; last.next = p; } return p; } function removeNode(p) { p.next.prev = p.prev; p.prev.next = p.next; if (p.prevZ) p.prevZ.nextZ = p.nextZ; if (p.nextZ) p.nextZ.prevZ = p.prevZ; } function Node(i, x, y) { // vertice index in coordinates array this.i = i; // vertex coordinates this.x = x; this.y = y; // previous and next vertice nodes in a polygon ring this.prev = null; this.next = null; // z-order curve value this.z = null; // previous and next nodes in z-order this.prevZ = null; this.nextZ = null; // indicates whether this is a steiner point this.steiner = false; } // return a percentage difference between the polygon area and its triangulation area; // used to verify correctness of triangulation earcut.deviation = function(data, holeIndices, dim, triangles) { var hasHoles = holeIndices && holeIndices.length; var outerLen = hasHoles ? holeIndices[0] * dim : data.length; var polygonArea = Math.abs(signedArea(data, 0, outerLen, dim)); if (hasHoles) { for (var i = 0, len = holeIndices.length; i < len; i++) { var start = holeIndices[i] * dim; var end = i < len - 1 ? holeIndices[i + 1] * dim : data.length; polygonArea -= Math.abs(signedArea(data, start, end, dim)); } } var trianglesArea = 0; for (i = 0; i < triangles.length; i += 3) { var a = triangles[i] * dim; var b = triangles[i + 1] * dim; var c = triangles[i + 2] * dim; trianglesArea += Math.abs( (data[a] - data[c]) * (data[b + 1] - data[a + 1]) - (data[a] - data[b]) * (data[c + 1] - data[a + 1]) ); } return polygonArea === 0 && trianglesArea === 0 ? 0 : Math.abs((trianglesArea - polygonArea) / polygonArea); }; function signedArea(data, start, end, dim) { var sum = 0; for (var i = start, j = end - dim; i < end; i += dim) { sum += (data[j] - data[i]) * (data[i + 1] + data[j + 1]); j = i; } return sum; } // turn a polygon in a multi-dimensional array form (e.g. as in GeoJSON) into a form Earcut accepts earcut.flatten = function(data) { var dim = data[0][0].length, result = {vertices: [], holes: [], dimensions: dim}, holeIndex = 0; for (var i = 0; i < data.length; i++) { for (var j = 0; j < data[i].length; j++) { for (var d = 0; d < dim; d++) result.vertices.push(data[i][j][d]); } if (i > 0) { holeIndex += data[i - 1].length; result.holes.push(holeIndex); } } return result; }; return earcut; } 33:[] 2f:{"title":"clx. Random Point inside polygon","cells":[{"id":456,"value":"md`# clx. Random Point inside polygon`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"md`\n# Finding Random Points in a Polygon\n\nThe title states a seemingly trivial problem: How can we determine a random point which resides inside of a given polygon. Let's explore how to approach this challenge.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"md`\nWhy would we want to do that anyway? In my case, we were given a bunch of geographic _areas of interest_ defined by (GeoJSON) polygons on a map. Our application should support to jump to a random point which is located in one of those areas. But to keep this feature shorter, we are gonna start with a single polygon.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"md`**Let's start of with a bunch of points describing our polygon:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"points = [[50, 50], [200, 50], [300, 100], [350, 250], [250, 350], [100, 300], [50, 150], [50, 50]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`**Humans are kind of bad with numbers, so here is our polygon:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"{\n const canvas = DOM.canvas(400, 400);\n drawPolygon(canvas.getContext('2d'), points);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`\nThe first thing which comes to mind, is to _brute force_ the issue: Generate random points in the polygons bounding box (\"extent\") until you find a point which definitely lies in the polygon. \n\nFor me this doesn't feel nice, there should be a straight forward solution. This just moves the issue to checking whether a point is inside of a polygon or not (which is another interesting problem!).\n\nSo how can we **break this down**? We can simplify the geometry we have to work with, a obvious choice would be to use triangles. Triangles are easy, math class thaught us **all the things** about triangles, we are comfortable with triangles.\n\n**Let's go ahead and split our polygon up:**\n\n(I'm using [earcut](https://github.com/mapbox/earcut) for this)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"triangles = triangulate(points)","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"md`**This is what we have now, five triangles describing our initial polygon:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"{\n const canvas = DOM.canvas(400, 400);\n const context = canvas.getContext('2d');\n \n triangles.forEach(triangle => drawPolygon(context, triangle))\n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"function generateDistribution(triangles) {\n const totalArea = triangles.reduce((sum, triangle) => sum + getTriangleArea(triangle), 0);\n const cumulativeDistribution = [];\n \n for (let i = 0; i < triangles.length; i++) {\n const lastValue = cumulativeDistribution[i - 1] || 0;\n const nextValue = lastValue + getTriangleArea(triangles[i]) / totalArea;\n cumulativeDistribution.push(nextValue);\n }\n // [area1, area1 + aera2, area1 + area2 + area3, ...]\n return cumulativeDistribution;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"md`\nNow for choosing a random triangle:\n\n- Create a \"target\" area: _target-area = total-area * Math.random()_\n- In your running total of areas, search for the first value bigger than your _target-area_ and use this index to select a triangle\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"function selectRandomTriangle(triangles) {\n const cumulativeDistribution = generateDistribution(triangles);\n const rnd = Math.random();\n const index = cumulativeDistribution.findIndex(v => v > rnd);\n \n return triangles[index];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`If you look at the visualization for a while, you should see, that the bigger triangles are chosen more frequently than the smaller ones:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"{\n const canvas = DOM.canvas(400, 400);\n const context = canvas.getContext('2d');\n \n setInterval(() => {\n context.clearRect(0, 0, canvas.width, canvas.height);\n triangles.forEach(triangle => drawPolygon(context, triangle, false));\n \n const randomTriangle = selectRandomTriangle(triangles);\n \tdrawPolygon(context, randomTriangle, true);\n }, 500)\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"md`\nNow we have chosen our triangle. How do we go about generating a random point inside of it? Alpha Wolfram has a [great post](http://mathworld.wolfram.com/TrianglePointPicking.html) about this. The gist of it: We assume one point of the triangle to be at the origin of our coordinate system [0, 0]. For the other two points we create two random _weights_ in the range of [0, 1]. We multiply (scale) each point by one of the weights and add both points up. **Tada** random points!\n\nClose! We now have random points inside of a parallelogram created by the original triangle and its mirror image. An easy way is to flip the points in the wrong half back into our triangle:\n\n**If the sum of our random weights is greater than _1_ we invert both weights:**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"function calcRandomPoint(triangle) {\n let wb = Math.random();\n let wc = Math.random();\n\n // point will be outside of the triangle, invert weights\n if (wb + wc > 1) {\n wb = 1 - wb;\n wc = 1 - wc;\n }\n\n const [a, b, c] = triangle.map(coords => ({x: coords[0], y: coords[1]}));\n\n const rb_x = wb * (b.x - a.x);\n const rb_y = wb * (b.y - a.y);\n const rc_x = wc * (c.x - a.x);\n const rc_y = wc * (c.y - a.y);\n\n const r_x = rb_x + rc_x + a.x;\n const r_y = rb_y + rc_y + a.y;\n\n return [r_x, r_y]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"md`\nPutting it all togher:\n\n1. Split the polygon in triangles\n2. Choose a random triangle adjusting for triangle area\n3. Calculate a random point inside of the chosen triangle\n4. $$$ Profit\n\nPull on the slider below to adjust the number of points generated.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"{\n const canvas = DOM.canvas(400, 400);\n const context = canvas.getContext('2d');\n \n const MAX_NUMBER_OF_POINTS = 5000;\n \n const render = () => {\n const numberOfPoints = Math.floor(pointsSlider.value * MAX_NUMBER_OF_POINTS);\n \n context.clearRect(0, 0, canvas.width, canvas.height);\n drawPolygon(context, points);\n \n for (let i = 0; i < numberOfPoints; i++) {\n const randomTriangle = selectRandomTriangle(triangles);\n const randomPoint = calcRandomPoint(randomTriangle);\n\n context.beginPath();\n context.arc(...randomPoint,2 ,0, Math.PI * 2);\n context.fill();\n }\n }\n \n pointsSlider.addEventListener('input', render);\n \n render();\n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"pointsSlider = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"md`\nCompare above version to the one below. Here we don't adjust for the triangle area when choosing one. It's pretty obvious that our points aren't uniformily distributed in the polygon.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"{\n const canvas = DOM.canvas(400, 400);\n const context = canvas.getContext('2d');\n \n const MAX_NUMBER_OF_POINTS = 5000;\n \n const render = () => {\n const numberOfPoints = Math.floor(pointsSlider.value * MAX_NUMBER_OF_POINTS);\n \n context.clearRect(0, 0, canvas.width, canvas.height);\n drawPolygon(context, points);\n \n for (let i = 0; i < numberOfPoints; i++) {\n const randomTriangle = triangles[Math.floor(Math.random() * triangles.length)]\n const randomPoint = calcRandomPoint(randomTriangle);\n\n context.beginPath();\n context.arc(...randomPoint,2 ,0, Math.PI * 2);\n context.fill();\n }\n }\n \n pointsSlider.addEventListener('input', render);\n \n render();\n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"md`\nNow how do we extend this to multiply polygons? There are two options:\n\n1. Triangulate all polygons and then just choose from a bigger number of triangles\n2. Use the same procedure we used to choose a random triangle to select a random polygon\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`\nThat's it for now. I hope you enjoyed diving into this seemingly easy, but surprisingly complex problem as much as I did!\n\nFeel free to fork and share this! **Give me your feedback on Twitter [@Scarysize](https://twitter.com/Scarysize)**\n\n_Below you can find some helper functions, take a look if you are interested_ ⬇️\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"function drawPolygon(context, coordinates, withFill = false) {\n const start = coordinates[0];\n const linePoints = coordinates.slice(1);\n \n context.beginPath();\n context.moveTo(...start);\n\n linePoints.forEach(p => context.lineTo(...p));\n\t\n context.lineTo(...start);\n \n if (withFill) {\n context.fill();\n return;\n }\n \n context.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"function triangulate(points) {\n const earcut = createEarcut();\n // [[x0, y0], [x1, y1], ...] ==> [x0,y0, x1,y1, ....]\n const flatPoints = points.reduce((f, p) => [...f, ...p], []);\n // indices to coordinate \"pairs\" in the \"flatPoints\" array\n const indices = earcut(flatPoints);\n \n const triangles = [];\n \n // three indices describe a triangle\n for (let i = 0; i < indices.length; i += 3) {\n const triangleIndices = [indices[i], indices[i + 1], indices[i + 2]];\n const points = triangleIndices.map(index => {\n const x = flatPoints[index * 2];\n const y = flatPoints[index * 2 + 1];\n \n return [x, y];\n });\n\t\n // A triangle is a set of 3 points: [a, b, c] where each point has the form [x, y]\n triangles.push(points);\n }\n \n return triangles;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"/* https://en.wikipedia.org/wiki/Shoelace_formula */\nfunction getTriangleArea(triangle) {\n const [a, b, c] = triangle;\n \n return 0.5 * (\n (b[0] - a[0]) * (c[1] - a[1]) -\n (c[0] - a[0]) * (b[1] - a[1])\n );\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}