28:null 29:["$","title",null,{"children":"skalaclip | Thomas Oberbichler | Observable"}] 2e:T9ff,plot = { const height = 500 class Particle { constructor (x, y, vx, vy) { this.x = x this.y = y this.vx = vx this.vy = vy } static random () { function rnd (min, max) { return Math.floor(min + Math.random() * (max - min)) } const x = rnd(0.0, width) const y = rnd(0.0, height) const vx = rnd(-5.0, 5.0) const vy = rnd(-5.0, 5.0) return new Particle(x, y, vx, vy) } update () { this.x += this.vx this.y += this.vy if (this.x < 0) { this.vx *= -1 } if (this.y < 0) { this.vy *= -1 } if (this.x > width) { this.vx *= -1 } if (this.y > height) { this.vy *= -1 } } } function createRandomLines (numberOfLines) { const lines = [] for (let i = 0; i < numberOfLines; i += 1) { const a = Particle.random() const b = Particle.random() lines.push([a, b]) } return lines } const ctx = DOM.context2d(width, height) const canvas = ctx.canvas const lines = createRandomLines(10) const frameWidth = Math.min(width, height) * 0.8 const frameHeight = Math.min(width, height) * 0.8 while (true) { ctx.clearRect(0, 0, canvas.width, canvas.height) const frameLeft = (width - frameWidth) * 0.5 const frameRight = (width + frameWidth) * 0.5 const frameTop = (height - frameHeight) * 0.5 const frameBottom = (height + frameHeight) * 0.5 ctx.save() ctx.shadowBlur = 30 ctx.shadowColor = 'rgb(210,210,210)' ctx.fillStyle = 'white' ctx.beginPath() ctx.rect(frameLeft, frameTop, frameWidth, frameHeight) ctx.fill() ctx.restore() const clipper = new Clipper(vec2(frameLeft, frameTop), new vec2(frameRight, frameBottom)) for (let i = 0; i < lines.length; i += 1) { let [a, b] = lines[i] ctx.save() ctx.strokeStyle = 'rgb(210,210,210)' ctx.beginPath() ctx.moveTo(a.x, a.y) ctx.lineTo(b.x, b.y) ctx.stroke() ctx.restore() let result = 0; [result, a, b] = clipper.clipLine(a, b) if (result > -1) { ctx.save() ctx.beginPath() ctx.moveTo(a.x, a.y) ctx.lineTo(b.x, b.y) ctx.stroke() ctx.restore() } } // update for (let i = 0; i < lines.length; i += 1) { const [a, b] = lines[i] a.update() b.update() } // show yield canvas await Promises.delay(15) } return canvas }2f:T7a1,class Clipper { constructor (a, b) { if (a.x < b.x) { this.x_min = a.x; this.x_max = b.x; } else { this.x_min = b.x; this.x_max = a.x; } if (a.y < b.y) { this.y_min = a.y; this.y_max = b.y; } else { this.y_min = b.y; this.y_max = a.y; } this.x = [ vec3(this.x_min, this.y_min, 1), vec3(this.x_max, this.y_min, 1), vec3(this.x_max, this.y_max, 1), vec3(this.x_min, this.y_max, 1), ]; this.e = [ vec3(0, 1, -this.y_min), vec3(1, 0, -this.x_max), vec3(0, 1, -this.y_max), vec3(1, 0, -this.x_min), ]; } code (pt) { let c = 0; if (pt.x < this.x_min) { c = 8; } else if (pt.x > this.x_max) { c = 2; } if (pt.y < this.y_min) { c |= 1; } else if (pt.y > this.y_max) { c |= 4; } return c; }; clipLine (xA, xB) { const cA = this.code(xA); const cB = this.code(xB); if ((cA | cB) === 0) { return [0, xA, xB]; } if ((cA & cB) !== 0) { return [-1, xA, xB]; } const p = cross2(xA, xB); let c = 0; for (let k = 0; k < 4; k += 1) { if (dot3(p, this.x[k]) <= 0) { c |= (1 << k); } } if (c === 0 || c === 15) { return [-1, xA, xB]; } const i = tab1[c]; const j = tab2[c]; if (cA !== 0 && cB !== 0) { const newXA = cross3(p, this.e[i]); const newXB = cross3(p, this.e[j]); return [3, newXA, newXB]; } if (cA === 0) { let newXB = null; if ((cB & mask[c]) === 0) { newXB = cross3(p, this.e[i]); } else { newXB = cross3(p, this.e[j]); } return [2, xA, newXB]; } if (cB === 0) { let newXA = null; if ((cA & mask[c]) === 0) { newXA = cross3(p, this.e[i]); } else { newXA = cross3(p, this.e[j]); } return [1, newXA, xB]; } } }30:[] 2c:{"id":"bb365b47f8e97909","slug":"skalaclip","title":"skalaclip","thumbnail":"916329b34781e514c39672db58c30cc467dec369d3b214aa813eb372d7e9b18b","access_level":"public","create_time":"$D2021-01-15T00:56:57.014Z","update_time":"$D2022-12-01T10:27:03.588Z","view_time":null,"first_public_time":"$D2021-01-15T01:35:29.094Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"63ea0ba327c02e72","login":"oberbichler","name":"Thomas Oberbichler","avatar_url":"https://avatars-next.observableusercontent.com/265b4716883baf8f5978e349384c2921f054e6d4c37507f37a41a09745720cbe","tier":"starter_2024"},"version":114,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c69ce5b2b338318d","login":"oberbichler","name":"Thomas Oberbichler","avatar_url":"https://avatars-next.observableusercontent.com/265b4716883baf8f5978e349384c2921f054e6d4c37507f37a41a09745720cbe","tier":null}],"members":[{"type":"individual","id":"c69ce5b2b338318d","login":"oberbichler","name":"Thomas Oberbichler","avatar_url":"https://avatars-next.observableusercontent.com/265b4716883baf8f5978e349384c2921f054e6d4c37507f37a41a09745720cbe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"skalaclip","cells":[{"id":0,"value":"md`# skalaclip`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`A fast line clipping algorithm implemented in JavaScript.\n\n*References:*\n- [A new approach to line and line segment clipping in homogeneous coordinates](https://doi.org/10.1007/s00371-005-0305-3) (2005) by Vaclav Skala\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function vec2 (x, y) {\n return {x, y}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function vec3 (x, y, z) {\n return {x, y, z}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"function cross2 (a, b) {\n return vec3(a.y - b.y, b.x - a.x, a.x * b.y - a.y * b.x);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function cross3 (u, v) {\n const z = u.x * v.y - u.y * v.x;\n return vec2((u.y * v.z - u.z * v.y) / z, (u.z * v.x - u.x * v.z) / z)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"function dot3 (u, v) {\n return u.x * v.x + u.y * v.y + u.z * v.z\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"mask = new Int32Array([0, 1, 2, 2, 4, 0, 4, 4, 8, 1, 0, 2, 8, 1, 8, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"tab1 = new Int32Array([4, 3, 0, 3, 1, 4, 0, 3, 2, 2, 4, 2, 1, 1, 0, 4])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"tab2 = new Int32Array([4, 0, 1, 1, 2, 4, 2, 2, 3, 0, 4, 1, 3, 0, 3, 4])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"