30:T24a0,rayTracer = getSource(() => { class Vector { constructor(x, y, z) { this.x = x; this.y = y; this.z = z; } static times(k, v) { return new Vector(k * v.x, k * v.y, k * v.z); } static minus(v1, v2) { return new Vector(v1.x - v2.x, v1.y - v2.y, v1.z - v2.z); } static plus(v1, v2) { return new Vector(v1.x + v2.x, v1.y + v2.y, v1.z + v2.z); } static dot(v1, v2) { return v1.x * v2.x + v1.y * v2.y + v1.z * v2.z; } static mag(v) { return Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z); } static norm(v) { let mag = Vector.mag(v); let div = 1.0 / mag; return Vector.times(div, v); } static cross(v1, v2) { return new Vector( v1.y * v2.z - v1.z * v2.y, v1.z * v2.x - v1.x * v2.z, v1.x * v2.y - v1.y * v2.x ); } } class Color { constructor(r, g, b) { this.r = r; this.g = g; this.b = b; } static scale(k, v) { return new Color(k * v.r, k * v.g, k * v.b); } static plus(v1, v2) { return new Color(v1.r + v2.r, v1.g + v2.g, v1.b + v2.b); } static times(v1, v2) { return new Color(v1.r * v2.r, v1.g * v2.g, v1.b * v2.b); } static toDrawingColor(c) { let legalize = d => (d > 1 ? 1 : d); return { r: Math.floor(legalize(c.r) * 255), g: Math.floor(legalize(c.g) * 255), b: Math.floor(legalize(c.b) * 255) }; } } Color.white = new Color(1.0, 1.0, 1.0); Color.grey = new Color(0.5, 0.5, 0.5); Color.black = new Color(0.0, 0.0, 0.0); Color.background = Color.black; Color.defaultColor = Color.black; class Camera { constructor(pos, lookAt) { this.pos = pos; let down = new Vector(0.0, -1.0, 0.0); this.forward = Vector.norm(Vector.minus(lookAt, this.pos)); this.right = Vector.times( 1.5, Vector.norm(Vector.cross(this.forward, down)) ); this.up = Vector.times( 1.5, Vector.norm(Vector.cross(this.forward, this.right)) ); } } class Sphere { constructor(center, radius, surface) { this.center = center; this.surface = Surfaces[surface]; this.radius2 = radius * radius; } normal(pos) { return Vector.norm(Vector.minus(pos, this.center)); } intersect(ray) { let eo = Vector.minus(this.center, ray.start); let v = Vector.dot(eo, ray.dir); let dist = 0; if (v >= 0) { let disc = this.radius2 - (Vector.dot(eo, eo) - v * v); if (disc >= 0) { dist = v - Math.sqrt(disc); } } if (dist === 0) { return null; } else { return { thing: this, ray: ray, dist: dist }; } } } class Plane { constructor(norm, offset, surface) { this.surface = Surfaces[surface]; this.normal = function(pos) { return norm; }; this.intersect = function(ray) { let denom = Vector.dot(norm, ray.dir); if (denom > 0) { return null; } else { let dist = (Vector.dot(norm, ray.start) + offset) / -denom; return { thing: this, ray: ray, dist: dist }; } }; } } const Surfaces = { shiny: { diffuse: function(pos) { return Color.white; }, specular: function(pos) { return Color.grey; }, reflect: function(pos) { return 0.7; }, roughness: 250 }, checkerboard: { diffuse: function(pos) { if ((Math.floor(pos.z) + Math.floor(pos.x)) % 2 !== 0) { return Color.white; } else { return Color.black; } }, specular: function(pos) { return Color.white; }, reflect: function(pos) { if ((Math.floor(pos.z) + Math.floor(pos.x)) % 2 !== 0) { return 0.1; } else { return 0.7; } }, roughness: 150 }, matteCheckerboard: { diffuse: function(pos) { if ((Math.floor(pos.z * 10) + Math.floor(pos.x * 10)) % 2 !== 0) { return Color.white; } else { return Color.black; } }, specular: function(pos) { return Color.white; }, reflect: 0, roughness: 150 } }; class RayTracer { constructor() { this.maxDepth = 5; } _get(fnOrValue, pos) { if (typeof fnOrValue === 'function') { return fnOrValue(pos); } return fnOrValue; } intersections(ray, scene) { let closest = +Infinity; let closestInter = undefined; for (let i = 0; i < scene.things.length; i++) { let inter = scene.things[i].intersect(ray); if (inter != null && inter.dist < closest) { closestInter = inter; closest = inter.dist; } } return closestInter; } testRay(ray, scene) { let isect = this.intersections(ray, scene); if (isect != null) { return isect.dist; } else { return undefined; } } traceRay(ray, scene, depth) { let isect = this.intersections(ray, scene); if (isect === undefined) { return Color.background; } else { return this.shade(isect, scene, depth); } } shade(isect, scene, depth) { let d = isect.ray.dir; let pos = Vector.plus(Vector.times(isect.dist, d), isect.ray.start); let normal = isect.thing.normal(pos); let reflectDir = Vector.minus( d, Vector.times(2, Vector.times(Vector.dot(normal, d), normal)) ); let naturalColor = Color.plus( Color.background, this.getNaturalColor(isect.thing, pos, normal, reflectDir, scene) ); let reflectedColor = depth >= this.maxDepth ? Color.grey : this.getReflectionColor( isect.thing, pos, normal, reflectDir, scene, depth ); return Color.plus(naturalColor, reflectedColor); } getReflectionColor(thing, pos, normal, rd, scene, depth) { return Color.scale( this._get(thing.surface.reflect, pos), this.traceRay({ start: pos, dir: rd }, scene, depth + 1) ); } getNaturalColor(thing, pos, norm, rd, scene) { let addLight = (col, light) => { let ldis = Vector.minus(light.pos, pos); let livec = Vector.norm(ldis); let neatIsect = this.testRay({ start: pos, dir: livec }, scene); let isInShadow = neatIsect === undefined ? false : neatIsect <= Vector.mag(ldis); if (isInShadow) { return col; } else { let illum = Vector.dot(livec, norm); let lcolor = illum > 0 ? Color.scale(illum, light.color) : Color.defaultColor; let specular = Vector.dot(livec, Vector.norm(rd)); let scolor = specular > 0 ? Color.scale( Math.pow(specular, this._get(thing.surface.roughness, pos)), light.color ) : Color.defaultColor; return Color.plus( col, Color.plus( Color.times(this._get(thing.surface.diffuse, pos), lcolor), Color.times(this._get(thing.surface.specular, pos), scolor) ) ); } }; return scene.lights.reduce(addLight, Color.defaultColor); } render(scene, size, density) { const image = new ImageData(size, size); let recenterX = x => (x - size / 2.0) / 2.0 / size; let recenterY = y => -(y - size / 2.0) / 2.0 / size; const getPoint = (x, y, camera) => { return Vector.norm( Vector.plus( camera.forward, Vector.plus( Vector.times(recenterX(x), camera.right), Vector.times(recenterY(y), camera.up) ) ) ); }; const setPixel = (x, y, color) => { const i = (y * size + x) * 4; const c = Color.toDrawingColor(color); image.data[i + 0] = c.r; image.data[i + 1] = c.g; image.data[i + 2] = c.b; image.data[i + 3] = 255; // c.a }; for (let y = 0; y < size; y++) { for (let x = 0; x < size; x++) { let color = this.traceRay( { start: scene.camera.pos, dir: getPoint(x, y, scene.camera) }, scene, 0 ); setPixel(x, y, color); } } return image; } } self.types = { Vector, Color, Camera, Sphere, Plane }; self.rayTracer = new RayTracer(); self.scene = { things: [ new Plane(new Vector(0.0, 1.0, 0.0), 0.0, 'checkerboard'), new Sphere(new Vector(0.0, 1.0, -0.25), 1.0, 'matteCheckerboard'), new Sphere(new Vector(-1.0, NaN, 1.5), 0.5, 'shiny') ], lights: [ { pos: new Vector(-2.0, 2.5, 0.0), color: new Color(0.49, 0.07, 0.07) }, { pos: new Vector(1.5, 2.5, 1.5), color: new Color(0.07, 0.07, 0.49) }, { pos: new Vector(1.5, 2.5, -1.5), color: new Color(0.07, 0.49, 0.071) }, { pos: new Vector(0.0, 3.5, 0.0), color: new Color(0.21, 0.21, 0.35) } ], camera: new Camera(new Vector(3.0, 2.0, 4.0), new Vector(-1.0, 0.5, 0.0)) }; })31:T567,// Source: https://unpkg.com/dedent@0.7.0/dist/dedent.js function dedent(strings) { var raw = void 0; if (typeof strings === "string") { // dedent can be used as a plain function raw = [strings]; } else { raw = strings.raw; } // first, perform interpolation var result = ""; for (var i = 0; i < raw.length; i++) { result += raw[i] // join lines when there is a suppressed newline .replace(/\\\n[ \t]*/g, "") // handle escaped backticks .replace(/\\`/g, "`"); if (i < (arguments.length <= 1 ? 0 : arguments.length - 1)) { result += arguments.length <= i + 1 ? undefined : arguments[i + 1]; } } // now strip indentation var lines = result.split("\n"); var mindent = null; lines.forEach(function(l) { var m = l.match(/^(\s+)\S+/); if (m) { var indent = m[1].length; if (!mindent) { // this is the first indented line mindent = indent; } else { mindent = Math.min(mindent, indent); } } }); if (mindent !== null) { result = lines .map(function(l) { return l[0] === " " ? l.slice(mindent) : l; }) .join("\n"); } // dedent eats leading and trailing whitespace too result = result.trim(); // handle escaped newlines at the end to ensure they don't get stripped too return result.replace(/\\n/g, "\n"); }32:[] 2e:{"title":"Raytracer","cells":[{"id":0,"value":"md`\n# Raytracer\n*Raytracer Source: TypeScript playground. Significant modifications made to run it in several workers.*\n\nWarning: this burns lots of CPU/battery\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"output = {\n const size = 300;\n const ctx = DOM.context2d(size, size);\n // ctx.canvas.style.transform = `scale(${256 / size})`;\n ctx.canvas.style.transformOrigin = 'top left';\n const div = html`

${ctx.canvas}`;\n let x = 0;\n let dx = 1;\n const q = new Queue(workers.length);\n while (true) {\n x += dx;\n if (x >= 100 || x < 0) {\n dx = -dx;\n }\n\n await q.add(\n sendMessage({\n x: x / 10,\n size,\n density: window.devicePixelRatio\n }),\n img => ctx.putImageData(img, 0, 0)\n );\n console.log('∂', q.avgDuration);\n yield Promises.tick(Math.ceil(q.avgDuration / workers.length), div);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"class Queue {\n constructor(max = 10) {\n this.tasks = [];\n this.max = max;\n this.elapsed = 0;\n this.taskCount = 0;\n }\n get avgDuration() {\n if (this.taskCount) {\n return this.elapsed / this.taskCount;\n } else {\n return 100;\n }\n }\n async add(p, cb) {\n if (this.tasks.length >= this.max) {\n await this.get();\n }\n const task = {\n start: performance.now(),\n p: p.then(res => {\n task.done = true;\n task.value = res;\n task.duration = performance.now() - task.start;\n }),\n cb\n };\n this.tasks.push(task);\n }\n async get() {\n if (!this.tasks[0].done) {\n await this.tasks[0].p;\n }\n const task = this.tasks.shift();\n // debugger;\n this.elapsed += task.duration;\n this.taskCount++;\n task.cb(task.value);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"scene = value => ({\n things: [\n $.Plane($.Vector(0.0, 1.0, 0.0), 0.0, 'checkerboard'),\n $.Sphere($.Vector(0.0, 1.0, -0.25), 1.0, 'matteCheckerboard'),\n $.Sphere($.Vector(-1.0, value / 5 + 0.5, 1.5), 0.5, 'shiny')\n ],\n lights: [\n { pos: $.Vector(-2.0, 2.5, 0.0), color: $.Color(0.49, 0.07, 0.07) },\n { pos: $.Vector(1.5, 2.5, 1.5), color: $.Color(0.07, 0.07, 0.49) },\n {\n pos: $.Vector(1.5, 2.5, -1.5),\n color: $.Color(0.07, 0.49, 0.071)\n },\n { pos: $.Vector(0.0, 3.5, 0.0), color: $.Color(0.21, 0.21, 0.35) }\n ],\n camera: $.Camera($.Vector(3.0, 2.0, 4.0), $.Vector(-1.0, 0.5, 0.0))\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"$$ = new Proxy(\n {},\n {\n get(target, key) {\n if (typeof key === 'string' && key[0].match(/[A-Z]/)) {\n return (...args) => ({ type: key, args });\n }\n return target[key];\n }\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"function sendMessage(data) {\n let resolve, reject;\n\n if (!sendMessage.id) sendMessage.id = 0;\n const messageId = sendMessage.id++;\n\n const worker = workers[messageId % workers.length];\n const handler = ({ data: { id, data, err } }) => {\n if (id === messageId) {\n if (err) {\n const error = new Error(err.message);\n error.stack = err.stack;\n reject(error);\n } else {\n resolve(data);\n }\n worker.removeEventListener('message', handler);\n }\n };\n worker.addEventListener('message', handler);\n worker.postMessage({ id: messageId, data });\n\n return new Promise((res, rej) => {\n resolve = res;\n reject = rej;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"workers = [\n worker1,\n worker2,\n worker3,\n worker4,\n worker5,\n worker6,\n worker7,\n worker8\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"worker1 = Generators.worker(workerSource)","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"worker2 = Generators.worker(workerSource)","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"worker3 = Generators.worker(workerSource)","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"worker4 = Generators.worker(workerSource)","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"worker5 = Generators.worker(workerSource)","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"worker6 = Generators.worker(workerSource)","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"worker7 = Generators.worker(workerSource)","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"worker8 = Generators.worker(workerSource)","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"workerSource = `\n\"use strict\";\n${rayTracer.source}\n${messageHandler.source}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"messageHandler = getSource(() => {\n /*const deserialize = obj => {\n if (typeof obj === 'object' && obj) {\n if (obj.type && obj.args) {\n return new self.types[obj.type](...obj.args.map(deserialize));\n } else if (Array.isArray(obj)) {\n return obj.map(deserialize);\n } else {\n return Object.fromEntries(\n Object.entries(obj).map(([key, value]) => [key, deserialize(value)])\n );\n }\n }\n return obj;\n };*/\n self.addEventListener('message', function handleMessage({\n data: { id, data }\n }) {\n if (data === 'ping') {\n postMessage({ id, data: 'pong' });\n return;\n }\n const { x, size, density } = data;\n self.scene.things[2].center.y = x / 5 + 0.5;\n try {\n postMessage({\n id,\n data: self.rayTracer.render(self.scene, size * density, density)\n });\n } catch (e) {\n postMessage({\n id,\n err: {\n message: e.message,\n stack: e.stack\n }\n });\n }\n });\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"getSource = cb => ({ source: dedent(cb.toString().slice(8, -1)) })","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}