30:T6fd,// from https://trekhleb.medium.com/weighted-random-in-javascript-4748ab3a1500 /** * Picks the random item based on its weight. * The items with higher weight will be picked more often (with a higher probability). * * For example: * - items = ['banana', 'orange', 'apple'] * - weights = [0, 0.2, 0.8] * - weightedRandom(items, weights) in 80% of cases will return 'apple', in 20% of cases will return * 'orange' and it will never return 'banana' (because probability of picking the banana is 0%) * * @param {any[]} items * @param {number[]} weights * @returns {{item: any, index: number}} */ function weightedRandom(items, weights, rnd = Math.random) { if (items.length !== weights.length) { throw new Error('Items and weights must be of the same size'); } if (!items.length) { throw new Error('Items must not be empty'); } // Preparing the cumulative weights array. // For example: // - weights = [1, 4, 3] // - cumulativeWeights = [1, 5, 8] const cumulativeWeights = []; for (let i = 0; i < weights.length; i += 1) { cumulativeWeights[i] = weights[i] + (cumulativeWeights[i - 1] || 0); } // Getting the random number in a range of [0...sum(weights)] // For example: // - weights = [1, 4, 3] // - maxCumulativeWeight = 8 // - range for the random number is [0...8] const maxCumulativeWeight = cumulativeWeights[cumulativeWeights.length - 1]; const randomNumber = maxCumulativeWeight * rnd(); // Picking the random item based on its weight. // The items with higher weight will be picked more often. for (let itemIndex = 0; itemIndex < items.length; itemIndex += 1) { if (cumulativeWeights[itemIndex] >= randomNumber) { return { item: items[itemIndex], index: itemIndex, }; } } }31:T5ee,await visibility(), (() => { const t = now / 2000 const prng = new PRNG(t | 0) const a = prng.rand(-TAU * 10, TAU * 10) const u = PVector.fromAngle(a).mag(150) const b = prng.rand(-TAU * 10, TAU * 10) const v = PVector.fromAngle(b).mag(150) const tt = ease(t % 1, 3) const c = lerpAngle(a, b, tt) const w = PVector.fromAngle(c).mag(150) return svg`` })()32:Te08,// let spline = new Spline(x1, y1, x2, y2, x3, y3, … xn, yn [, smoothness [, isClosed]]) class Spline { constructor(...pts) { pts = pts.flat() let smoothness = 1 this.isClosed = false if(pts.length % 2 == 1) { smoothness = pts.pop() } else if(typeof pts[pts.length - 1] === 'boolean'){ this.isClosed = pts.pop() smoothness = pts.pop() } this.pts = pts.reduce((acc, curr, i) => { if(!acc[i/2|0]) acc[i/2|0] = {} acc[i/2|0][['x', 'y'][i%2]] = curr return acc }, []) this.centers = [] for(let i = 0; i < this.pts.length - (this.isClosed ? 0 : 1); i++) { const {x: x1, y: y1} = this.pts[i % this.pts.length] const {x: x2, y: y2} = this.pts[(i + 1) % this.pts.length] this.centers[i % this.pts.length] = { x: (x1 + x2) / 2, y: (y1 + y2) / 2 } } this.ctrls = this.isClosed ? [] : [[this.pts[0], this.pts[0]]] for(let i = this.isClosed ? 0 : 1; i < this.centers.length; i++) { const pt = this.pts[i] const c0 = this.centers[(this.centers.length + i - 1) % this.centers.length] const c1 = this.centers[i] const dx = (c0.x - c1.x) / 2 const dy = (c0.y - c1.y) / 2 this.ctrls[i] = [ { x: pt.x + smoothness * dx, y: pt.y + smoothness * dy }, { x: pt.x - smoothness * dx, y: pt.y - smoothness * dy } ] } if(!this.isClosed) { this.ctrls.push([ this.pts[this.pts.length - 1], this.pts[this.pts.length - 1] ]) } this.d = `M${this.pts[0].x},${this.pts[0].y} ${this.centers.map((d, i) => `C${this.ctrls[i][1].x},${this.ctrls[i][1].y},${this.ctrls[(i + 1) % this.pts.length][0].x},${this.ctrls[(i + 1) % this.pts.length][0].y},${this.pts[(i + 1) % this.pts.length].x},${this.pts[(i + 1) % this.pts.length].y}`).join(' ')}` this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path') this.path.setAttribute('d', this.d) this.pathLen = this.path.getTotalLength() } // drawPts, drawCtrls and drawCenter are color strings drawSpline(ctx, drawPts = false, drawCtrls = false, drawCenters = false) { const {pts, ctrls, centers} = this ctx.beginPath() ctx.moveTo(pts[0].x, pts[0].y) for(let i = 0; i < centers.length; i ++) { ctx.bezierCurveTo( ctrls[i][1].x, ctrls[i][1].y, ctrls[(i + 1) % pts.length][0].x, ctrls[(i + 1) % pts.length][0].y, pts[(i + 1) % pts.length].x, pts[(i + 1) % pts.length].y ) } ctx.stroke() if(drawPts) { ctx.fillStyle = drawPts pts.forEach(({x, y}) => ctx.square(x, y, 10)) } if(drawCtrls) { ctx.fillStyle = drawCtrls ctx.strokeStyle = drawCtrls ctx.lineWidth = 1 ctrls.forEach(([ctrl0, ctrl1]) => { const {x: x0, y: y0} = ctrl0 const {x: x1, y: y1} = ctrl1 ctx.beginPath() ctx.moveTo(x0, y0) ctx.lineTo(x1, y1) ctx.stroke() ctx.square(x0, y0, 10) ctx.square(x1, y1, 10) }) } if(drawCenters) { centers.forEach((c, i) => { ctx.strokeStyle = drawCenters ctx.beginPath() ctx.moveTo(pts[i].x, pts[i].y) ctx.lineTo(pts[(i+1) % pts.length].x, pts[(i+1) % pts.length].y) ctx.stroke() ctx.fillStyle = drawCenters ctx.square(c.x, c.y, 10) }) } } getSVGPath() { return this.d } getPtAt(t) { return this.path.getPointAtLength(t * this.pathLen) } }33:T4b5,await visibility(), (() => { const w = 200 const p0 = PVector.random(PVector(w, w)) const p1 = PVector.random(PVector(w, w)) const proj1 = p0.clone().sub(p1).mag(1000) const p2 = PVector.random(PVector(w, w)) const p3 = PVector.random(PVector(w, w)) const proj2 = p2.clone().sub(p3).mag(1000) const intersection = lineLineIntersection(p0, p1, p2, p3) return svg`` })()34:T48a,await visibility(), (() => { const w = 200 const s1 = new Segment(PVector.random(PVector(w, w)), PVector.random(PVector(w, w))) const rectX = 30 const rectY = 30 const rectW = w-60 const rectH = w-60 const intersection = clipSegmentToRect(s1, rectX, rectY, rectW, rectH) return svg`` })()35:T1eb8,class Polygon { // create a new Polygon from SVG path string static fromPath(path, lengthBetweenPts = 5) { const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path') pathElement.setAttribute('d', path) const pathLength = pathElement.getTotalLength() const poly = new Polygon(...array(pathLength / lengthBetweenPts | 0).map(i => { return PVector(pathElement.getPointAtLength(i * lengthBetweenPts)) })) poly.originalPath = path return poly } // Boolean operations using ClipperLib // https://sourceforge.net/p/jsclipper/wiki/Home%206/ static intersection(p1, p2) { const INTERSECTION = ClipperLib.ClipType.ctIntersection return Polygon.boolOp(INTERSECTION, p1, p2) } static union(p1, p2) { const UNION = ClipperLib.ClipType.ctUnion return Polygon.boolOp(UNION, p1, p2) } static diff(p1, p2) { const DIFF = ClipperLib.ClipType.ctDifference return Polygon.boolOp(DIFF, p1, p2) } static xor(p1, p2) { const XOR = ClipperLib.ClipType.ctXor return Polygon.boolOp(XOR, p1, p2) } static boolOp(type, p1, p2) { const polygonToClipperPath = p => p.pts.map(pt => ({ X: pt.x * 100, Y: pt.y * 100 })) const subj_paths = [polygonToClipperPath(p1)] const clip_paths = [polygonToClipperPath(p2)] const clipper = new ClipperLib.Clipper(); const SUBJECT = ClipperLib.PolyType.ptSubject // 0 const CLIP = ClipperLib.PolyType.ptClip // 1 clipper.AddPaths(subj_paths, SUBJECT, true) clipper.AddPaths(clip_paths, CLIP, true) const result = []; const EVEN_ODD = ClipperLib.PolyFillType.pftEvenOdd // 0 const NON_ZERO = ClipperLib.PolyFillType.pftNonZero // 1 const POSITIVE = ClipperLib.PolyFillType.pftPositive // 2 const NEGATIVE = ClipperLib.PolyFillType.pftNegative // 3 clipper.Execute(type, result, NON_ZERO, NON_ZERO) return result.map(pts => new Polygon(...pts.map(pt => PVector(pt.X / 100, pt.Y / 100)))) } // offset done using ClipperLib // https://sourceforge.net/p/jsclipper/wiki/Home%206/#b-offsetting-paths static offset(p, delta, type = 'round') { // scale up coords since Clipper is using integer const scale = 1000 let paths = [p.pts.map(pt => ({ X: pt.x * scale, Y: pt.y * scale }))] // Simplifying paths = ClipperLib.Clipper.SimplifyPolygons(paths, ClipperLib.PolyFillType.pftNonZero) // Cleaning var cleandelta = 0.1 // 0.1 should be the appropriate delta in different cases paths = ClipperLib.JS.Clean(paths, cleandelta * scale) // Create an instance of ClipperOffset object var co = new ClipperLib.ClipperOffset() const jointType = type === 'miter' ? ClipperLib.JoinType.jtMiter : type === 'square' ? ClipperLib.JoinType.jtSquare : ClipperLib.JoinType.jtRound // Add paths co.AddPaths(paths, jointType, ClipperLib.EndType.etClosedPolygon) // Create an empty solution and execute the offset operation let offsetted_paths = new ClipperLib.Paths() co.Execute(offsetted_paths, delta * scale) ClipperLib.JS.ScaleDownPaths(offsetted_paths, scale) if(!(offsetted_paths[0] && offsetted_paths[0].length > 0)) return null return new Polygon(...offsetted_paths[0].map(pt => PVector(pt.X, pt.Y))) } constructor(...pts) { this.pts = pts.map(pt => pt.clone()) this.segments = pts.map((pt, i) => new Segment(pt, pts[(i + 1 ) % pts.length])) this.center = new PVector(pts.reduce((acc, d) => PVector.add(acc, d), PVector())).div(pts.length) } // adapted from https://www.codeproject.com/tips/84226/is-a-point-inside-a-polygon contains(pt) { const pts = this.pts let c = false for (let i = 0, j = pts.length-1; i < pts.length; j = i++) { if ( ((pts[i].y > pt.y) != (pts[j].y > pt.y)) && (pt.x < (pts[j].x-pts[i].x) * (pt.y-pts[i].y) / (pts[j].y-pts[i].y) + pts[i].x) ) { c = !c } } return c } getBoundingBox() { const xs = this.pts.map(pt => pt.x) const ys = this.pts.map(pt => pt.y) const minX = Math.min(...xs) const maxX = Math.max(...xs) const minY = Math.min(...ys) const maxY = Math.max(...ys) return { origin: PVector(minX, minY), width: maxX - minX, height: maxY - minY } } getHatchesParametric(originalAngle = PI/2, startSpacing = 1, endSpacing = 10, func = t => t, offset = 0, alternate = false) { if(offset !== 0) return Polygon.offset(this, -offset).getHatchesParametric(originalAngle, startSpacing, endSpacing, func, 0, alternate) //bounding box const originalBB = this.getBoundingBox() const bb = { origin: originalBB.origin.clone().sub(Math.min(startSpacing, endSpacing) * 2), width: originalBB.width + 4 * Math.min(startSpacing, endSpacing), height: originalBB.height + 4 * Math.min(startSpacing, endSpacing) } // hatches let angle = ((originalAngle % TAU) + TAU) % PI if(angle > PI/2) angle -= PI if(modularDist(angle, PI/2) < 0.00001) angle += 0.00001 const hatchDirOriginal = PVector.fromAngle(originalAngle).setMag(1000) const hatchDir = PVector.fromAngle(angle).setMag(1000) let startY, endY let leftPoint, rightPoint if(angle < 0) { rightPoint = bb.origin.clone().add(PVector(bb.width, bb.height)) startY = bb.origin.y endY = lineLineIntersection( bb.origin, bb.origin.clone().addY(bb.height), rightPoint, rightPoint.clone().sub(hatchDir) ).y leftPoint = PVector(bb.origin.x, endY) } else { rightPoint = bb.origin.clone().addX(bb.width) startY = lineLineIntersection( bb.origin, bb.origin.clone().addY(bb.height), rightPoint, rightPoint.clone().sub(hatchDir) ).y endY = bb.origin.y + bb.height leftPoint = PVector(bb.origin.x, startY) } const hatches = [] for(let y = startY, stepY = startSpacing, i = 0; y < endY; y += stepY) { const segA = new Segment(PVector(bb.origin.x, startY), PVector(bb.origin.x, endY)) const segB = new Segment(leftPoint, rightPoint) const t = (y - startY) / (endY - startY) const d = startSpacing + (endSpacing - startSpacing) * func(t) const step = hatchDir.clone().rotateBy(PI/2).setMag(d) const stepProjection = hatchDir.clone().mult(angle < 0 ? -1 : 1).add(step) const stepIntersection = lineLineIntersection(segA.a, segA.b, PVector.add(bb.origin, step), PVector.add(bb.origin, stepProjection)) stepY = stepIntersection.y - bb.origin.y const A = PVector(bb.origin.x, y) const B = A.clone().add(hatchDir) const ray = new Ray(A, hatchDir) const intersections = this.segments.map(seg => raySegIntersection(ray, seg)) .filter(d => d) .sort((a, b) => a.y > b.y ? 1 : a.y < b.y ? -1 : a.x > b.x ? 1 : a.x < b.x ? -1 : 0) if(intersections.length < 2) continue; else { if(alternate && i % 2) intersections.reverse() const segments = [] for(let i = 0; i < intersections.length && intersections[i + 1]; i += 2) { segments.push(new Segment(intersections[i], intersections[i + 1])) } hatches.push(segments) i++ } } return hatches.filter(d => d).flat().filter(seg => this.contains(seg.pointAt(0.3))) } getHatches(originalAngle = PI/2, spacing = 2, offset = 0, alternate = false) { return this.getHatchesParametric(originalAngle, spacing, spacing, t => t, offset, alternate) } getHatches2(originalAngle = PI/2, startSpacing = 1, endSpacing = 10, power = 1, offset = 0, alternate = false) { return this.getHatchesParametric(originalAngle, startSpacing, endSpacing, t => t ** power, offset, alternate) } }36:T1179,await visibility(), (() => { const w = width const h = 300 const originalAngle = random(-TAU, TAU) const spacing = randInt(5, 15) const offset = 0 // polygon const n = randInt(3, 30) // const p = new Polygon(...array(n).map(i => { // const angle = TAU / n * i // const rad = 100 // const x = w/2 + Math.cos(angle) * rad // const y = h/2 + Math.sin(angle) * rad // return PVector(x, y) // })) const p = new Polygon(...array(n).map(i => { const angle = TAU / n * i const x = w/2 + Math.cos(angle) * random(20, w/2) const y = h/2 + Math.sin(angle) * random(20, h/2) return PVector(x, y) })) //bounding box const bb = p.getBoundingBox() // hatches let angle = ((originalAngle % TAU) + TAU) % PI if(angle > PI/2) angle -= PI const hatchDirOriginal = PVector.fromAngle(originalAngle).setMag(1000) const hatchDir = PVector.fromAngle(angle).setMag(1000) let startY, endY let leftPoint, rightPoint if(angle < 0) { rightPoint = bb.origin.clone().add(PVector(bb.width, bb.height)) startY = bb.origin.y - 5 endY = lineLineIntersection( bb.origin, bb.origin.clone().addY(bb.height), rightPoint, rightPoint.clone().sub(hatchDir) ).y + 5 leftPoint = PVector(bb.origin.x, endY) } else { rightPoint = bb.origin.clone().addX(bb.width) startY = lineLineIntersection( bb.origin, bb.origin.clone().addY(bb.height), rightPoint, rightPoint.clone().sub(hatchDir) ).y - 5 endY = bb.origin.y + bb.height + 5 leftPoint = PVector(bb.origin.x, startY) } const segA = new Segment(PVector(bb.origin.x, startY), PVector(bb.origin.x, endY)) const segB = new Segment(leftPoint, rightPoint) const step = hatchDir.clone().rotateBy(PI/2).setMag(spacing) const stepProjection = hatchDir.clone().mult(angle < 0 ? -1 : 1).add(step) const stepIntersection = lineLineIntersection(segA.a, segA.b, PVector.add(bb.origin, step), PVector.add(bb.origin, stepProjection)) const stepY = stepIntersection.y - bb.origin.y const hatches = [ ...p.getHatches(originalAngle, spacing, offset, true), // ...p.getHatches(originalAngle + random(TAU), spacing), // ...p.getHatches(originalAngle + random(TAU), spacing) ] return svg`` })()37:T1081,await visibility(), (() => { const w = width const h = 300 const originalAngle = random(-TAU, TAU) const startSpacing = randInt(2, 10) const endSpacing = randInt(30, 60) const offset = 0 // polygon const n = randInt(3, 30) const p = new Polygon(...array(n).map(i => { const angle = TAU / n * i const x = w/2 + Math.cos(angle) * random(20, w/2) const y = h/2 + Math.sin(angle) * random(20, h/2) return PVector(x, y) })) //bounding box const bb = p.getBoundingBox() // hatches let angle = ((originalAngle % TAU) + TAU) % PI if(angle > PI/2) angle -= PI const hatchDirOriginal = PVector.fromAngle(originalAngle).setMag(1000) const hatchDir = PVector.fromAngle(angle).setMag(1000) let startY, endY let leftPoint, rightPoint if(angle < 0) { rightPoint = bb.origin.clone().add(PVector(bb.width, bb.height)) startY = bb.origin.y - 5 endY = lineLineIntersection( bb.origin, bb.origin.clone().addY(bb.height), rightPoint, rightPoint.clone().sub(hatchDir) ).y + 5 leftPoint = PVector(bb.origin.x, endY) } else { rightPoint = bb.origin.clone().addX(bb.width) startY = lineLineIntersection( bb.origin, bb.origin.clone().addY(bb.height), rightPoint, rightPoint.clone().sub(hatchDir) ).y - 5 endY = bb.origin.y + bb.height + 5 leftPoint = PVector(bb.origin.x, startY) } const segA = new Segment(PVector(bb.origin.x, startY), PVector(bb.origin.x, endY)) const segB = new Segment(leftPoint, rightPoint) const step = hatchDir.clone().rotateBy(PI/2).setMag(Math.min(startSpacing, endSpacing)) const stepProjection = hatchDir.clone().mult(angle < 0 ? -1 : 1).add(step) const stepIntersection = lineLineIntersection(segA.a, segA.b, PVector.add(bb.origin, step), PVector.add(bb.origin, stepProjection)) const stepY = stepIntersection.y - bb.origin.y const hatches = [ ...p.getHatchesParametric(originalAngle, startSpacing, endSpacing, t => t ** 3, offset, true), ] return svg`` })()38:T499,await visibility(), (() => { const w = width const h = 300 const p1 = new Polygon(...array(360).map(i => { return PVector(w/2 + Math.cos(TAU/360*i) * (h/2 - 30), h/2 + 20 + Math.sin(TAU/360*i) * (h/2 - 30)) })) const p2 = Polygon.fromPath(`M${Math.sin(now/700) * 150 + w/2-150 | 0},${h-30} L${Math.sin(now/700) * 150 + w/2 | 0},30 L${Math.sin(now/700) * 150 + w/2+150 | 0},${h-30} Z`, 1) // const p2 = Polygon.fromPath(`M${150 + w/2-150 | 0},${h-30} L${150 + w/2 | 0},30 L${150 + w/2+150 | 0},${h-30} Z`, 1) const op = ['union', 'intersection', 'diff', 'xor'] const result = Polygon.boolOp(((now/1400) | 0) % op.length, p2, p1) return svg`` })()39:Ta2a,hatchMultiplePolygons = (polys = [], originalAngle = 0, spacing = 2, alternate = false) => { const boundingPoly = new Polygon(...polys.map(p => p.pts).flat()) //bounding box const originalBB = boundingPoly.getBoundingBox() const bb = { origin: originalBB.origin.clone().sub(spacing * 2), width: originalBB.width + 4 * spacing, height: originalBB.height + 4 * spacing } // hashes let angle = ((originalAngle % TAU) + TAU) % PI if(angle > PI/2) angle -= PI if(modularDist(angle, PI/2) < 0.00001) angle += 0.00001 const hatchDirOriginal = PVector.fromAngle(originalAngle).setMag(1000) const hatchDir = PVector.fromAngle(angle).setMag(1000) let startY, endY let leftPoint, rightPoint if(angle < 0) { rightPoint = bb.origin.clone().add(PVector(bb.width, bb.height)) startY = bb.origin.y endY = lineLineIntersection( bb.origin, bb.origin.clone().addY(bb.height), rightPoint, rightPoint.clone().sub(hatchDir) ).y leftPoint = PVector(bb.origin.x, endY) } else { rightPoint = bb.origin.clone().addX(bb.width) startY = lineLineIntersection( bb.origin, bb.origin.clone().addY(bb.height), rightPoint, rightPoint.clone().sub(hatchDir) ).y endY = bb.origin.y + bb.height leftPoint = PVector(bb.origin.x, startY) } const segA = new Segment(PVector(bb.origin.x, startY), PVector(bb.origin.x, endY)) const segB = new Segment(leftPoint, rightPoint) const step = hatchDir.clone().rotateBy(PI/2).setMag(spacing) const stepProjection = hatchDir.clone().mult(angle < 0 ? -1 : 1).add(step) const stepIntersection = lineLineIntersection(segA.a, segA.b, PVector.add(bb.origin, step), PVector.add(bb.origin, stepProjection)) const stepY = stepIntersection.y - bb.origin.y const hatches = array(((endY - startY) / stepY | 0) + 1).map(i => { const A = PVector(bb.origin.x, startY + i * stepY) const B = A.clone().add(hatchDir) const ray = new Ray(A, hatchDir) const intersections = polys.map(p => p.segments).flat().map(seg => raySegIntersection(ray, seg)) .filter(d => d) .sort((a, b) => a.y > b.y ? 1 : a.y < b.y ? -1 : a.x > b.x ? 1 : a.x < b.x ? -1 : 0) if(intersections.length < 2) return null if(alternate && i % 2) intersections.reverse() const segments = [] for(let i = 0; i < intersections.length && intersections[i + 1]; i += 2) { segments.push(new Segment(intersections[i], intersections[i + 1])) } return segments }).filter(d => d).flat() return hatches }3a:T40f,await visibility(), (() => { const w = width const h = 400 const center = PVector(w/2, h/2) const p1 = new Polygon(...array(12).map(i => PVector(Math.cos(TAU/12 * i)*h/2, Math.sin(TAU/12 * i)*h/2).add(center))) const p2 = new Polygon(...array(12).map(i => PVector(Math.cos(TAU/12 * i)*(h/2 - 50), Math.sin(TAU/12 * i)*(h/2 - 50)).add(center))) const p3 = new Polygon(...array(12).map(i => PVector(Math.cos(TAU/12 * i)*(h/2 - (i%2?75 : -30)), Math.sin(TAU/12 * i)*(h/2 - (i%2?75 : -30))).add(center))) const hatches = hatchMultiplePolygons([p1, p2, p3]) const basicStyle = 'fill="none" stroke-width="4"' return svg`` })()3b:Tc94,await visibility(), (() => { const w = width const h = 500 const a = PVector.random2D().setMag(200).add(PVector(w/2 + randInt(-10, 11), h/2 + randInt(-10, 11))) const b = PVector.random2D().setMag(200).add(PVector(w/2 + randInt(-10, 11), h/2 + randInt(-10, 11))) const c = PVector.random2D().setMag(200).add(PVector(w/2 + randInt(-10, 11), h/2 + randInt(-10, 11))) const t = new Triangle(a, b, c) return svg`` })()3c:T997,class Triangle extends Polygon { constructor(a, b, c) { super(a, b, c) this.a = a.clone() this.b = b.clone() this.c = c.clone() this.ab = new Segment(this.a, this.b) this.bc = new Segment(this.b, this.c) this.ca = new Segment(this.c, this.a) // https://www.mathsisfun.com/geometry/triangle-centers.html // center of mass this.centroid = segSegIntersection(new Segment(this.a, this.bc.center), new Segment(this.b, this.ca.center)) const ab = PVector.sub(this.b, this.a) const ac = PVector.sub(this.c, this.a) const ba = PVector.sub(this.a, this.b) const bc = PVector.sub(this.c, this.b) const ca = PVector.sub(this.a, this.c) const cb = PVector.sub(this.b, this.c) this.abPerp = ab.clone().rotateBy(Math.PI/2).setMag(10000) this.bcPerp = bc.clone().rotateBy(Math.PI/2).setMag(10000) this.caPerp = ca.clone().rotateBy(Math.PI/2).setMag(10000) this.circumcenter = segSegIntersection( new Segment(PVector.add(this.ab.center, this.abPerp), PVector.sub(this.ab.center, this.abPerp)), new Segment(PVector.add(this.bc.center, this.bcPerp), PVector.sub(this.bc.center, this.bcPerp)) ) this.aBisector = ab.clone().rotateBy((ac.angle2D() - ab.angle2D())/2).setMag(10000) this.bBisector = bc.clone().rotateBy((ba.angle2D() - bc.angle2D())/2).setMag(10000) this.cBisector = ca.clone().rotateBy((cb.angle2D() - ca.angle2D())/2).setMag(10000) this.incenter = segSegIntersection( new Segment(PVector.add(this.a, this.aBisector), PVector.sub(this.a, this.aBisector)), new Segment(PVector.add(this.b, this.bBisector), PVector.sub(this.b, this.bBisector)) ) this.inCircleRadius = Math.min( PVector.sub(segSegIntersection(new Segment(PVector.add(this.a, this.aBisector), PVector.sub(this.a, this.aBisector)), this.bc), this.incenter).mag(), PVector.sub(segSegIntersection(new Segment(PVector.add(this.b, this.bBisector), PVector.sub(this.b, this.bBisector)), this.ca), this.incenter).mag(), PVector.sub(segSegIntersection(new Segment(PVector.add(this.c, this.cBisector), PVector.sub(this.c, this.cBisector)), this.ab), this.incenter).mag() ) this.orthocenter = segSegIntersection( new Segment(PVector.add(this.a, this.bcPerp), PVector.sub(this.a, this.bcPerp)), new Segment(PVector.add(this.b, this.caPerp), PVector.sub(this.b, this.caPerp)) ) } }3d:T9ac,class HexGrid { constructor(x, y, w, h, hexSize = 10, type = 'flat') { this.x = x this.y = y this.w = w this.h = h // type can be either 'flat' or 'pointy' this.type = type === 'flat' || type === 'pointy' ? type : 'flat' this.hexHeight = Math.sqrt(3) * hexSize this.hexWidth = 2 * hexSize if(this.type === 'pointy') [this.hexWidth, this.hexHeight] = [this.hexHeight, this.hexWidth] // swap this.hexPoints = this.getHexPoints() this.nx = this.type === 'flat' ? 2 + (w / (this.hexWidth * 3/4)) : 2 + (w / (this.hexWidth * 1/2)) this.ny = this.type === 'flat' ? 2 + (h / (this.hexHeight * 1/2)) : 2 + (h / (this.hexHeight * 3/4)) this.centers = this.getCenters() this.w = this.centers.sort((a, b) => b.x - a.x)[0].x - this.x this.h = this.centers.sort((a, b) => b.y - a.x)[0].y - this.y delete this.nx delete this.ny } getHexPoints() { if(this.type === 'flat') { return [ { x: this.hexWidth / 2, y: 0 }, { x: this.hexWidth / 4, y: this.hexHeight / 2 }, { x: -this.hexWidth / 4, y: this.hexHeight / 2 }, { x: -this.hexWidth / 2, y: 0 }, { x: -this.hexWidth / 4, y: -this.hexHeight / 2 }, { x: this.hexWidth / 4, y: -this.hexHeight / 2 }, ] } else { return [ { x: 0, y: -this.hexHeight / 2 }, { x: this.hexWidth / 2, y: -this.hexHeight / 4 }, { x: this.hexWidth / 2, y: this.hexHeight / 4 }, { x: 0, y: this.hexHeight / 2 }, { x: -this.hexWidth / 2, y: this.hexHeight / 4 }, { x: -this.hexWidth / 2, y: -this.hexHeight / 4 }, ] } } getCenters() { const centers = [] for(let i = 0; i < this.ny; i ++) { let isOut = false for(let j = 0; j < this.nx && !isOut; j ++) { let x = this.x let y = this.y if(this.type === 'flat') { x += j * this.hexWidth * 3/2 + (i % 2) * this.hexWidth * 3/4 y += i * this.hexHeight * 1/2 } else { x += j * this.hexWidth + (i % 2) * this.hexWidth * 1/2 y += i * this.hexHeight * 3/4 } if(x - this.hexWidth/2 < this.x + this.w && y - this.hexHeight/2 < this.y + this.h) { centers.push({ x, y }) } else isOut = true } } return centers } }3e:[] 2e:{"title":"Utilities","cells":[{"id":0,"value":"md`# Utilities\n\nA collection of snippets for working with arrays, math, randomness, animation and geometry.\n___`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1519,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"md`___\n## Arrays\n### array\nreturns an array with \\`n\\` elements where each is equal to its index`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"array = n => {let A = new Array(n); for (let i = 0; i < n; i++) A[i] = i; return A}","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"array(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1967,"value":"md`___\n### range\nreturns an array containing values from \\`start\\` to \\`end\\`. \nOptional \\`step\\` between values.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1970,"value":"range = (start, end, step = 1) => {\n const n = -~((end - start) / step), A = new Array(n)\n for (let i = 0, k = start; i < n; i++, k += step) A[i] = k\n return A\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1973,"value":"range(6, 12)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2036,"value":"range(8, 16, 4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2038,"value":"range(8, 16, 5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2047,"value":"md`___\n### cut\ncut a range from \\`a\\` to \\`b\\` in \\`n\\` parts and returns the position of the cuts.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2007,"value":"cut = (a, b, n) => array(n + 1).map(i => a + i * (b - a) / n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2067,"value":"cut(0, 10, 4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2052,"value":"cut(5, 25, 5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2314,"value":"cut(1, 35, 6)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2441,"value":"cut2 = (a, b, n) => array(n).map(i => lerp(a, b, i/(n-1)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2443,"value":"cut2(5, 25, 5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2049,"value":"md`___\n### shiftLeft / shiftRight\nShift elements in array to the left/right. \nElements going out of the array are added at the opposite end/beginning of the array.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2012,"value":"shiftLeft = (arr, n = 1) => shiftRight(arr, -n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2017,"value":"shiftLeft(array(10), 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2013,"value":"shiftRight = (arr, n = 1) => {\n const m = arr.length, copy = new Array(m)\n n = ((n % m) + m) % m\n for (let i = 0, k = m-n; k < m;) copy[i++] = arr[k++]\n for (let i = n, k = 0; k < m-n;) copy[i++] = arr[k++]\n return copy\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2032,"value":"shiftRight(array(10), 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":675,"value":"md`___\n### shuffle\nnon destructive shuffle method based on Fisher–Yates shuffle: \nhttps://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"shuffle = (arr, r = random) => {\n const copy = [...arr] // create a copy of original array\n for (let i = copy.length - 1; i; i --) {\n const randomIndex = randInt(0, i + 1, r)\n ;[copy[i], copy[randomIndex]] = [copy[randomIndex], copy[i]] // swap\n }\n return copy\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"shuffle(array(10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"md`___\n## Math\n### Math constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"PI = Math.PI","pinned":true,"hidden":false,"mode":"ojs"},{"id":764,"value":"TAU = Math.PI * 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"goldenRatio = (1 + Math.sqrt(5)) / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":2106,"value":"md`___\n### Distance`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2127,"value":"squareDist = (...args) => {\n const len = args.length / 2\n return array(len).reduce((acc, d, i) => acc + (args[i] - args[i + len]) ** 2, 0)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2145,"value":"squareDist(0, 0, 0, 10, 10, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2109,"value":"dist = (...args) => squareDist(...args) ** .5","pinned":true,"hidden":false,"mode":"ojs"},{"id":2143,"value":"dist(0, 0, 0, 10, 10, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2132,"value":"manhattanDist = (...args) => {\n const len = args.length / 2\n return array(len).reduce((acc, d, i) => acc + Math.abs(args[i] - args[i + len]), 0)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2111,"value":"manhattanDist(0, 0, 0, 10, 10, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":656,"value":"md`___\n### lerp\nlinear interpolation between \\`a\\` and \\`b\\` using a normalized value \\`amount\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"lerp = (a, b, amount, clamped = false) => {\n const t = !clamped ? amount : clamp(amount, 0, 1)\n return a * (1 - t) + b * t\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"lerp(27, 38, 0.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2155,"value":"md`### inverseLerp\nget normalized equivalent of \\`value\\` between \\`a\\` and \\`b\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1960,"value":"inverseLerp = (a, b, value, clamped = false) => {\n let out = (value - a) / (b - a)\n return !clamped ? out : clamp(out, 0, 1)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1961,"value":"inverseLerp(10, 15, 17, true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":654,"value":"md`___\n### mix\nlike \\`lerp\\` but for arrays`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"mix = (a, b, amount) => {\n if (a.length === b.length) return a.map((d, i) => lerp(a[i], b[i], amount))\n throw new Error('lengths do not match')\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"mix([2,4,6], [1, 9, 12], 0.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":660,"value":"md`___\n### clamp\nclamp a value \\`a\\` between a \\`min\\` and a \\`max\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"clamp = (a, min, max) => Math.max(Math.min(a, max), min)","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"clamp(23, 10, 20)","pinned":true,"hidden":false,"mode":"ojs"},{"id":664,"value":"md`___\n### map\nlinear interpolation from a range \\`[a, b]\\` to another range \\`[c, d]\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"map = (n, a, b, c, d, clamped = false) => lerp(c, d, inverseLerp(a, b, n, clamped))","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"map(37, 28, 89, -10, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"map(5, 7, 16, 0, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"map(5, 7, 16, 0, 10, true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1637,"value":"md`### modularDist\nComputes modular distance between 2 values`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1641,"value":"modularDist = (value, mod) => Math.abs(value - mod * Math.round(value/mod))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1645,"value":"modularDist((now/100000) * TAU, PI)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1313,"value":"md`___\n## Randomness\n### random`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"random = (a, b, r = Math.random) => {\n if(Array.isArray(a)) return a[r() * a.length | 0]\n if(!a && a !== 0) return r()\n if(!b && b !== 0) return r() * a\n\n if(a > b) [a, b] = [b, a] // swap values\n return a + r() * (b - a)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2175,"value":"random(5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"random(10, 50)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2104,"value":"random([1, 3, 5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2163,"value":"md`___\n### randBool`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2164,"value":"randBool = (threshold = .5, r = random) => r() < threshold","pinned":true,"hidden":false,"mode":"ojs"},{"id":2167,"value":"randBool()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2169,"value":"randBool(.7)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1556,"value":"md`___\n### randInt`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"randInt = (a, b, r = random) => Math.floor(random(a, b, r))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2170,"value":"randInt(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"randInt(20, 50)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1560,"value":"md`___\n### coin\nreturns either -1 or 1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"coin = (p = .5, r = random) => r() < p ? -1 : 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":1771,"value":"md`Based on https://www.npmjs.com/package/prng`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2421,"value":"___\n### Gaussian Random","pinned":false,"hidden":false,"mode":"md"},{"id":2424,"value":"// Standard Normal variate using Box-Muller transform\n// adapted from https://stackoverflow.com/a/36481059\nfunction gaussianRand(mean=0, stdev=1, r=random) {\n const u = 1 - r() // Converting [0,1) to (0,1]\n const v = r()\n const z = Math.sqrt(-2 * Math.log(u)) * Math.cos(TAU * v)\n // Transform to the desired mean and standard deviation:\n return z * stdev + mean\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2426,"value":"gaussianRand()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2150,"value":"md`___\n### expRand\ncustomizable exponential randomness`","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"expRand = (a, b, p = 2, r = random) => {\n if(!a && a !== 0) return r() ** p\n if(!b && b !== 0) return (r() ** p) * a\n\n if(a > b) [a, b] = [b, a] // swap values\n return a + (r() ** p) * (b - a)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"await visibility(), (() => {\n const height = 200\n const nChoices = 200\n const results = new Array(nChoices).fill(0)\n const N = 10e5\n \n array(N).forEach(() => results[expRand(0, nChoices, power) | 0]++)\n \n return svg``\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"power = 8","pinned":true,"hidden":false,"mode":"ojs"},{"id":2293,"value":"### circleRand\nbased on [Ivan Dianov](/@illus0r)'s article: https://ivandianov.com/circular-random/","pinned":false,"hidden":false,"mode":"md"},{"id":2291,"value":"circleRand = (a, b, r = random) => a + (1 - Math.sqrt(1 - r() ** 2)) * (b - a)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2295,"value":"await visibility(), (() => {\n const height = 200\n const nChoices = 200\n const results = new Array(nChoices).fill(0)\n const N = 10e5\n \n array(N).forEach(() => results[circleRand(0, nChoices) | 0]++)\n \n return svg``\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2388,"value":"### Weighted Random","pinned":false,"hidden":false,"mode":"md"},{"id":2390,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2392,"value":"weightedRandom([ '🍌', '🍎', '🥕' ], [ 3, 7, 1 ])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1543,"value":"md`___\n### Seedable Pseudo Random Number Generator`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1537,"value":"PRNG = require('https://bundle.run/prng@0.0.1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1826,"value":"{\n const prng = new PRNG(135)\n return array(10).map(i => prng.rand(1, 13))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1541,"value":"seededRandom = (seed) => {\n const prng = new PRNG(seed)\n \n return (a, b, r = prng.rand) => {\n const n = 100000\n if(b) return prng.rand(a * n, b * n) / n\n if(a) return prng.rand(a * n) / n\n return prng.rand(n) / n\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":780,"value":"{\n const prng = seededRandom(135)\n return array(10).map(i => prng(1, 13))\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":2380,"value":"#### Seeded Random Functions","pinned":false,"hidden":false,"mode":"md"},{"id":2333,"value":"rnd = seed => {\n let prng = new PRNG(seed)\n const reset = seed => prng = new PRNG(seed)\n const r = () => prng.rand(10e7)/10e7\n const rnd = (a, b) => random(a, b, r)\n const rndInt = (a, b) => randInt(a, b, r)\n const rndBool = (a, b, n) => randBool(a, r)\n const rndCoin = (a) => coin(a, r)\n const gssnRnd = (a, b) => gaussianRand(a, b, r)\n const rndExp = (a, b, n) => expRand(a, b, n, r)\n const rndCirc = (a, b, n) => circleRand(a, b, r)\n const wghtdRnd = (a, b, n) => weightedRandom(a, b, r)\n\n return {\n reset,\n random: rnd,\n randInt: rndInt,\n randBool: rndBool,\n coin: rndCoin,\n gaussianRand: gssnRnd,\n expRand: rndExp,\n circleRand: rndCirc,\n weightedRandom: wghtdRnd,\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2382,"value":"{\n const r = rnd(135)\n const {random, randInt, randBool, coin, expRand, circleRand, weightedRandom, gaussianRand} = r\n\n let a = [\n random(5, 15),\n randInt(5, 15),\n randBool(.9),\n coin(.1),\n gaussianRand(),\n expRand(100, 200, 8),\n circleRand(100, 200),\n weightedRandom([ '🍌', '🍎', '🥕' ], [ 3, 7, 1 ])\n ]\n \n r.reset(135)\n let b = [\n random(5, 15),\n randInt(5, 15),\n randBool(.9),\n coin(.1),\n gaussianRand(),\n expRand(100, 200, 8),\n circleRand(100, 200),\n weightedRandom([ '🍌', '🍎', '🥕' ], [ 3, 7, 1 ])\n ]\n\n return [a, b]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1405,"value":"md`___\n## Animation helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1791,"value":"md`### beat\nBased on https://observablehq.com/@mattdesl/heartbeat-function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1399,"value":"beat = (value, intensity = 2, freq = 1) => (Math.atan(Math.sin(value * TAU * freq) * intensity) + PI / 2) / PI","pinned":true,"hidden":false,"mode":"ojs"},{"id":1793,"value":"md`### ease`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1318,"value":"ease = (p, g) => !g ? 3 * p * p - 2 * p * p * p :\n p < 0.5 ? 0.5 * Math.pow(2 * p, g) :\n 1 - 0.5 * Math.pow(2 * (1 - p), g)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1798,"value":"md`### softplus`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"softplus = (q, p) => {\n const qq = q + p\n if(qq <= 0) return 0\n if(qq >= 2 * p) return qq - p\n return 1 / (4 * p) * qq * qq\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1413,"value":"md`More easing functions can be found on https://observablehq.com/@d3/easing-animations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1944,"value":"easing = require('d3-ease')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1802,"value":"md`___\nPorts from Motion Toolkit (https://thebookofshaders.com/examples/?chapter=motionToolKit) for timeline:\n### step`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1395,"value":"step = (x, edge) => x < edge ? 0 : 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":1806,"value":"md`### smoothstep`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1418,"value":"smoothstep = (x, edge0, edge1) => {\n const t = clamp((x - edge0) / (edge1 - edge0), 0, 1)\n return t * t * (3 - 2 * t)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1808,"value":"md`### linearstep`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1423,"value":"linearstep = (t, begin, end) => clamp((t - begin) / (end - begin), 0, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1812,"value":"md`### linearstepUpDown`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1426,"value":"linearstepUpDown = (t, upBegin, upEnd, downBegin, downEnd) => linearstep(t, upBegin, upEnd) - linearstep(t, downBegin, downEnd)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1814,"value":"md`### stepUpDown`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1429,"value":"stepUpDown = (t, begin, end) => step(t, begin) - step(t, end)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1830,"value":"md`___\n## Working with angles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1888,"value":"md`### radToDeg\nConverts radians to degrees`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1832,"value":"radToDeg = angle => angle * (360 / TAU )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1890,"value":"md`### degToRad\nConverts degrees to radians`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1833,"value":"degToRad = angle => angle * (TAU / 360)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1883,"value":"md`### modAngle\nReturns equivalent angle in range 0 - TAU`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1838,"value":"modAngle = angle => angle - TAU * Math.floor(angle/TAU)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1895,"value":"md`### lerpAngle\nShortest linear interpolation between angles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1840,"value":"lerpAngle = (a, b, v) => {\n let diff = modAngle(b - a)\n if(diff > PI) diff = -modAngle(a - b)\n return a + diff * v\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1863,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1928,"value":"md`___\n## Geometry\n### Recursive subdivisions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1917,"value":"// adapted from https://note.com/outburst/n/na98a31f0b2cb\nfunction divideRect(x, y, w, h, n, arr, threshold = 0.7, rnd = random) {\n n--\n\n if (n >= 0 && rnd() < threshold) {\n if (w >= h) {\n let randomW = w * rnd(0.1, 0.9)\n divideRect(x, y, randomW, h, n, arr, threshold, rnd)\n divideRect(x+randomW, y, w-randomW, h, n, arr, threshold, rnd)\n }\n else {\n let randomH = h * rnd(0.1, 0.9)\n divideRect(x, y, w, randomH, n, arr, threshold, rnd)\n divideRect(x, y+randomH, w, h-randomH, n, arr, threshold, rnd)\n }\n }\n else {\n arr.push({ x, y, w, h, n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1922,"value":"// adapted from https://note.com/outburst/n/n694e1c5194ba\nfunction divideRect4(x, y, w, h, n, arr, threshold = .7, rnd = Math.random) {\n n--\n\n if (n >= 0 && rnd() < threshold) {\n let hw = w/2\n let hh = h/2\n\n divideRect4(x, y, hw, hh, n, arr, threshold, rnd)\n divideRect4(x+hw, y, hw, hh, n, arr, threshold, rnd)\n divideRect4(x+hw, y+hh, hw, hh, n, arr, threshold, rnd)\n divideRect4(x, y+hh, hw, hh, n, arr, threshold, rnd)\n }\n else {\n arr.push({ x, y, w, h, n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1923,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2448,"value":"function divideQuad(A, B, C, D, n, arr, threshold = 0.7, rnd = random) {\n /*\n A_________B\n / /\n / /\n D_________C\n */\n n--\n\n if (n >= 0 && rnd() < threshold) {\n if (rnd() < .5) {\n const AB = PVector.lerp(A, B, rnd())\n const DC = PVector.lerp(D, C, rnd())\n divideQuad(A, AB, DC, D, n, arr, threshold, rnd)\n divideQuad(AB, B, C, DC, n, arr, threshold, rnd)\n }\n else {\n const AD = PVector.lerp(A, D, rnd())\n const BC = PVector.lerp(B, C, rnd())\n divideQuad(A, B, BC, AD, n, arr, threshold, rnd)\n divideQuad(AD, BC, C, D, n, arr, threshold, rnd)\n }\n }\n else {\n arr.push({ A, B, C, D, n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2450,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":2464,"value":"### Spline Class","pinned":false,"hidden":false,"mode":"md"},{"id":2466,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1582,"value":"md`### Ray Class`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"class Ray {\n constructor(pos, dir) {\n this.pos = pos.clone()\n this.dir = dir.clone()\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1585,"value":"md`### Segment Class`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"class Segment { \n constructor(a, b) {\n this.a = a.clone()\n this.b = b.clone()\n this.center = this.pointAt(0.5)\n this.dx = this.a.distX(this.b)\n this.dy = this.a.distY(this.b)\n }\n \n copy() {\n return new Segment(this.a, this.b)\n }\n \n getLength() {\n return PVector.sub(this.b, this.a).mag()\n }\n \n getAngle() {\n return PVector.sub(this.b, this.a).angle2D()\n }\n \n pointAt(n) {\n return PVector.lerp(this.a, this.b, n)\n }\n \n reduce(n) {\n const ab = PVector.sub(this.b, this.a).setMag(n)\n this.a.add(ab)\n this.b.sub(ab)\n this.center = this.pointAt(0.5)\n this.dx = this.a.distX(this.b)\n this.dy = this.a.distY(this.b)\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`### Intersections`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"raySegIntersection = (ray, seg) => {\n // ray is defined by its emitting position (pos) and a direction (dir)\n // seg is defined between 2 points \"a\" and \"b\"\n const x1 = seg.a.x\n const y1 = seg.a.y\n const x2 = seg.b.x\n const y2 = seg.b.y\n\n const x3 = ray.pos.x\n const y3 = ray.pos.y\n const x4 = ray.pos.x + ray.dir.x\n const y4 = ray.pos.y + ray.dir.y\n \n const bx = x1 - x2\n const by = y1 - y2\n\n const den = bx * (y3 - y4) - by * (x3 - x4)\n if (den == 0) return undefined\n\n const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / den\n const u = -(bx * (y1 - y3) - by * (x1 - x3)) / den\n if (t >= 0 && t <= 1 && u > 0) return PVector(x1 + t * (x2 - x1), y1 + t * (y2 - y1))\n \n return null\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"await visibility(), (() => {\n const w = 200 \n const ray = new Ray(PVector.random(PVector(w, w)), PVector.random2D().setMag(1000))\n const seg = new Segment(PVector.random(PVector(w, w)), PVector.random(PVector(w, w)))\n const intersection = raySegIntersection(ray, seg)\n \n return svg``\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"function segSegIntersection(s1, s2) {\n const x1 = s1.a.x\n const y1 = s1.a.y\n const x2 = s1.b.x\n const y2 = s1.b.y\n\n const x3 = s2.a.x\n const y3 = s2.a.y\n const x4 = s2.b.x\n const y4 = s2.b.y\n\n const bx = x2 - x1\n const by = y2 - y1\n const dx = x4 - x3\n const dy = y4 - y3\n\n const b_dot_d_perp = bx * dy - by * dx\n if (b_dot_d_perp == 0) return null\n\n const cx = x3 - x1\n const cy = y3 - y1\n\n const t = (cx * dy - cy * dx) / b_dot_d_perp\n if (t < 0 || t > 1) return null\n\n const u = (cx * by - cy * bx) / b_dot_d_perp\n if (u < 0 || u > 1) return null\n\n return PVector(x1 + t * bx, y1 + t * by)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"await visibility(), (() => {\n const w = 200 \n const s1 = new Segment(PVector.random(PVector(w, w)), PVector.random(PVector(w, w)))\n const s2 = new Segment(PVector.random(PVector(w, w)), PVector.random(PVector(w, w)))\n const intersection = segSegIntersection(s1, s2)\n return svg``\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"lineLineIntersection = (p0, p1, p2, p3) => {\n const A1 = p1.y - p0.y\n const B1 = p0.x - p1.x\n const C1 = A1 * p0.x + B1 * p0.y\n const A2 = p3.y - p2.y\n const B2 = p2.x - p3.x\n const C2 = A2 * p2.x + B2 * p2.y\n const denominator = A1 * B2 - A2 * B1\n\n if(denominator == 0) return null\n\n return PVector((B2 * C1 - B1 * C2) / denominator, (A1 * C2 - A2 * C1) / denominator)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1843,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2495,"value":"clipSegmentToRect = (seg, rx, ry, rw, rh) => {\n let isVecInRect = (v, rx, ry, rw, rh) => v.x >= rx && v.x <= rx + rw && v.y >= ry && v.y <= ry + rh\n //Segment is fully inside Rect\n let isAIn = isVecInRect(seg.a, rx, ry, rw, rh)\n let isBIn = isVecInRect(seg.b, rx, ry, rw, rh)\n if(isAIn && isBIn) return seg\n\n let intersections = [\n new Segment(PVector(rx,ry), PVector(rx+rw,ry)), //top\n new Segment(PVector(rx,ry), PVector(rx,ry+rh)), //left\n new Segment(PVector(rx,ry+rh), PVector(rx+rw,ry+rh)), //bottom\n new Segment(PVector(rx+rw,ry), PVector(rx+rw,ry+rh)) //right\n ].map(s => segSegIntersection(s, seg)).filter(d => d)\n if(intersections.length === 2) return new Segment(intersections[0], intersections[1])\n if(intersections.length === 1) return new Segment(intersections[0], isAIn ? seg.a : seg.b)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2502,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"md`___\n### Polygon Class`","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1614,"value":"md`Hatching`","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2222,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":1617,"value":"md`Boolean operations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1620,"value":"md`Offsetting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1588,"value":"await visibility(), (() => {\n const w = 300\n const h = 300\n\n const N = 24\n const p = new Polygon(...array(N).map(i => {\n const angle = TAU/N * i - PI/2\n const radius = 70 + (i % 2) * 40\n return PVector(w/2 + Math.cos(angle) * radius, h/2 + Math.sin(angle) * radius)\n }))\n\n const p2 = Polygon.offset(p, Math.sin(now/500) * 30, 'round')\n\n return svg``\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1720,"value":"md`___\n### Alternate hatching with multiple Polygons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1486,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1695,"value":"md`### SVG utilities for Polygon class`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1306,"value":"pathFromPolygon = (p, style) => {\n const path = p.originalPath ? p.originalPath : `${p.pts.map((pt, i) => `${i === 0 ? 'M' : 'L'}${pt.x} ${pt.y}`).join(' ')} Z`\n \n if(style) return ``\n else return path\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1308,"value":"pathFromHatches = (hatches, style = `stroke=\"black\"`, alternate = false, joined = true) => {\n const path = `${hatches.map(({a, b}, i) => {\n if(alternate && i % 2) [a, b] = [b, a]\n return `${i === 0 || !joined ? 'M' : 'L'}${a.x} ${a.y} L${b.x} ${b.y}`\n }).join(' ')}`\n \n if(style) return ``\n return path\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1698,"value":"linesFromHatches = (hatches, style, alternate = false) => hatches.map((seg, i) => {\n let {a, b} = seg\n if(alternate && i % 2) [a, b] = [b, a]\n return ``\n}).join(' ')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1526,"value":"md`___\n### Triangle Class`","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`___\n## Hexagonal Grid\nHexGrid is a custom class to compute an hexagonal grid based on [Red Blob Games' Hexagonal Grids](https://www.redblobgames.com/grids/hexagons/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs"},{"id":1457,"value":"md`___\n## Simplex Noise\nPurely out of laziness 🙃`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1462,"value":"SimplexNoise = require('simplex-noise@2.4')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1465,"value":"simplex = new SimplexNoise()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1468,"value":"md`\\`\\`\\`js\nimport { simplex } from '@makio135/utilities'\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"md`___\n## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"PVector = require('pvectorjs/index.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"ClipperLib = require(\"https://makio135.gitlab.io/js/clipper.min.js\").catch(() => window.ClipperLib)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1516,"value":"import {toc} from '@bryangingechen/toc'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}