2b:null 2c:["$","title",null,{"children":"Raytracing in 40 minutes, the Observable port | Miguel de Icaza | Observable"}] 31:T451,md` This is an ObservableHQ port of the ["Raytracing in 40 minutes"](https://colab.research.google.com/drive/1TT9J_rSu_EAkzxx_q-tN5IZHcMN9_nLS?usp=sharing#scrollTo=-lRdu9bTVnkq) from Peter Shirley, one cute feature is that when you update any of the values of this port, it automatically updates all the renderings as you change the functions and variables in this file. Peter announced that he would be doing [a short lecture](https://twitter.com/Peter_shirley/status/1379861345189863424?s=20) explaining this on his twitter feed. 3D Vectors and Colors in this notebook are represented as arrays of three values, there is no special data type for it. The dimensions of the images are controled by the variables w and h at the bottom of this file, and various simple vector operations are also found at the bottom of this file under "Helper Functions". *These* notebook is a stripped down version of the C++ ebook **Ray Tracing In One Weekend** found here: https://raytracing.github.io/ These blocks incrementally builds a simple ray tracer. The first block makes an image with random colors. `32:T4f6,md`**PROGRAM 2**. We add a constant colored sphere. The implicit equation for a sphere with origin at center is ${tex`x^2 + y^2 + z^2 - R^2 = 0`}. In vector form, for 3D points ${tex`\mathbf{p} = (x,y,z)`} on sphere that is: ${tex.block`f(\mathbf{p}) = \mathbf{p} \cdot \mathbf{p} - R^2`} When the center is at ${tex`\mathbf{c} = (cx, cy, cz)`} the implicit equation for points on the sphere is: ${tex.block`f(\mathbf{p}) = (\mathbf{p - c}) \cdot (\mathbf{p - c}) - R^2`} For a ray ${tex`p(t) = \mathbf{o} + t\mathbf{v}`}, it will be on the sphere (so “hit” it) when ${tex`f(p(t)) = 0`}. ${tex.block`\begin{aligned} (\mathbf{o} + t\mathbf{v} - \mathbf{c}) \cdot (\mathbf{o} + t\mathbf{v} - \mathbf{c}) - R^2 &= 0 \\ \left((\mathbf{o} - \mathbf{c}) \cdot (\mathbf{o} - \mathbf{c})\right) 2t \left((\mathbf{o} - \mathbf{c}) \cdot \mathbf{v}\right) + t^2 (\mathbf{v} \cdot \mathbf{v}) - R^2 &= 0 \end{aligned}` /* Is the second equation missing a "+" or something between (o-c · o-c) and 2t? */ } We can write that as ${tex`At^2 + Bt + C = 0`} and solve the quadratic for ${tex`t`}. If the ray missed the sphere there is no real solution (the discriminant is negative). If two solutions, take the smallter that is positive (negative hits are "behind" you).` 33:T586,renderImage (function (ray_origin, ray_direction) { var hit_something, t, i let multiplier = [1.0,1.0,1.0] while (true) { [hit_something, t, i] = hit_array(ray_origin, ray_direction, centers, radii) if (hit_something){ if (not_zero (emitted_colors [i])) { return mulVV (multiplier, emitted_colors [i]) break } ray_origin = addVV (ray_origin, mulVS (ray_direction, t)) let surface_normal = mulVS (subVV (ray_origin, centers[i]), 1.0/radii[i]) if (refractive_indices [i] > 1.0) { let cos_incident = dot(ray_direction,surface_normal) var ni, nt if (cos_incident < 0){ ni = 1.0 nt = refractive_indices[i] } else { ni = refractive_indices[i] nt = 1.0 surface_normal = subVV ([0, 0, 0], surface_normal) } var can_refract, refracted_direction [can_refract, refracted_direction] = refract(ray_direction, surface_normal, ni, nt) if (can_refract) { ray_direction = refracted_direction } else { ray_direction = reflect(ray_direction, surface_normal) } } else { ray_direction = reflect (ray_direction, surface_normal) multiplier = mulVV (multiplier, specular_reflectivity[i]) } } else { return mulVV (multiplier, background_color (ray_direction)) break } } })34:T5e4,// // The only difference here is that we are starting to use `centers2` instead of centers renderImage (function (ray_origin, ray_direction) { var hit_something, t, i let multiplier = [1.0,1.0,1.0] while (true) { [hit_something, t, i] = hit_array(ray_origin, ray_direction, centers2, radii) if (hit_something){ if (not_zero (emitted_colors [i])) { return mulVV (multiplier, emitted_colors [i]) break } ray_origin = addVV (ray_origin, mulVS (ray_direction, t)) let surface_normal = mulVS (subVV (ray_origin, centers2[i]), 1.0/radii[i]) if (refractive_indices [i] > 1.0) { let cos_incident = dot(ray_direction,surface_normal) var ni, nt if (cos_incident < 0){ ni = 1.0 nt = refractive_indices[i] } else { ni = refractive_indices[i] nt = 1.0 surface_normal = subVV ([0, 0, 0], surface_normal) } var can_refract, refracted_direction [can_refract, refracted_direction] = refract(ray_direction, surface_normal, ni, nt) if (can_refract) { ray_direction = refracted_direction } else { ray_direction = reflect(ray_direction, surface_normal) } } else { ray_direction = reflect (ray_direction, surface_normal) multiplier = mulVV (multiplier, specular_reflectivity[i]) } } else { return mulVV (multiplier, background_color (ray_direction)) break } } })35:T77d,// The change here is in the introduction of cosine1/cosine2/cosine, the class to glass_fresnel, and the randomdetermination for refract or reflect renderImage (function (ray_origin, ray_direction) { var hit_something, t, i let multiplier = [1.0,1.0,1.0] while (true) { [hit_something, t, i] = hit_array(ray_origin, ray_direction, centers2, radii) if (hit_something){ if (not_zero (emitted_colors [i])) { return mulVV (multiplier, emitted_colors [i]) break } ray_origin = addVV (ray_origin, mulVS (ray_direction, t)) let surface_normal = mulVS (subVV (ray_origin, centers2[i]), 1.0/radii[i]) if (refractive_indices [i] > 1.0) { let cosine1 = dot(ray_direction,surface_normal) var ni, nt if (cosine1 < 0){ ni = 1.0 nt = refractive_indices[i] } else { ni = refractive_indices[i] nt = 1.0 surface_normal = subVV ([0, 0, 0], surface_normal) } var can_refract, refracted_direction [can_refract, refracted_direction] = refract(ray_direction, surface_normal, ni, nt) if (can_refract) { cosine1 = Math.abs(cosine1) let cosine2 = Math.abs(dot(refracted_direction, surface_normal)) let cosine = Math.min (cosine1, cosine2) let prob_reflect = glass_fresnel(cosine) if (randomUniform() < prob_reflect) { ray_direction = reflect(ray_direction, surface_normal) } else { ray_direction = refracted_direction } } else { ray_direction = reflect(ray_direction, surface_normal) } } else { ray_direction = reflect (ray_direction, surface_normal) multiplier = mulVV (multiplier, specular_reflectivity[i]) } } else { return mulVV (multiplier, background_color (ray_direction)) break } } })36:T405,// This version takes a number of samples, and calls the callback with the accumulator vector // Thanks to Paul Robello for providing a fix to this method, which I had ported incorrectly. renderSamplesImage = function (num_samples, calculatePixel) { let img = makeImage () let ctx = img.ctx let d = img.data.data let ray_origin = [0,0,0] let aspect = h/w let window_depth = 2 let i = 0 for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++){ let accum = [0, 0, 0] for (let s = 0; s < num_samples; s++) { let u = (x + randomUniform()) / w let v = (y + randomUniform()) / h let p = [2.0*u-1.0, aspect*(2.0*v-1.0), -window_depth] let ray_direction = unit_vector(p) let color = background_color (ray_direction) let res = calculatePixel (ray_origin, ray_direction, [0,0,0]) accum = addVV(res,accum); } putPixel (d, x, y, divVS (accum, num_samples)) } } img.ctx.putImageData(img.data, 0, 0) return img.canvas }37:T7a5,// The change here is in the introduction of cosine1/cosine2/cosine, the class to glass_fresnel, and the randomdetermination for refract or reflect renderSamplesImage (2, function (ray_origin, ray_direction, accum) { var hit_something, t, i let multiplier = [1.0,1.0,1.0] while (true) { [hit_something, t, i] = hit_array(ray_origin, ray_direction, centers2, radii) if (hit_something){ if (not_zero (emitted_colors [i])) { accum = addVV (accum, emitted_colors [i]) break } ray_origin = addVV (ray_origin, mulVS (ray_direction, t)) let surface_normal = mulVS (subVV (ray_origin, centers2[i]), 1.0/radii[i]) if (refractive_indices [i] > 1.0) { let cosine1 = dot(ray_direction,surface_normal) var ni, nt if (cosine1 < 0){ ni = 1.0 nt = refractive_indices[i] } else { ni = refractive_indices[i] nt = 1.0 surface_normal = subVV ([0, 0, 0], surface_normal) } var can_refract, refracted_direction [can_refract, refracted_direction] = refract(ray_direction, surface_normal, ni, nt) if (can_refract) { cosine1 = Math.abs(cosine1) let cosine2 = Math.abs(dot(refracted_direction, surface_normal)) let cosine = Math.min (cosine1, cosine2) let prob_reflect = glass_fresnel(cosine) if (randomUniform() < prob_reflect) { ray_direction = reflect(ray_direction, surface_normal) } else { ray_direction = refracted_direction } } else { ray_direction = reflect(ray_direction, surface_normal) } } else { ray_direction = reflect (ray_direction, surface_normal) multiplier = mulVV (multiplier, specular_reflectivity[i]) } } else { accum = addVV (accum, mulVV (multiplier, background_color (ray_direction))) break } } return accum })38:T9fd,{ let refractive_indices = [1.0, 1.5] let emitted_colors = [[3.0,3.0,3.0], [0.0,0.0,0.0]] let centers = [[-1.0,0.0,-5.0], [1.0,0.0,-5.0]] let radii = [1.0, 1.0] let specular_reflectivity = [[0.0,0.0,0.0], [0.0,0.0,0.0]] let num_small_spheres = 10 let small_radius = 0.3*Math.pow(1.0/num_small_spheres, 0.333) for (var i = 0; i < num_small_spheres; i++) { refractive_indices.push(1.5) emitted_colors.push([0.0,0.0,0.0]) centers.push(random_in_sphere([1.0, 0.0, -5.0], 1.0-1.1*small_radius)) radii.push(-small_radius) specular_reflectivity.push([0.0,0.0,0.0]) } return renderSamplesImage (2, function (ray_origin, ray_direction, accum) { var hit_something, t, i let multiplier = [1.0,1.0,1.0] for (var bounces = 0; bounces < 30; bounces++){ [hit_something, t, i] = hit_array(ray_origin, ray_direction, centers, radii) if (hit_something){ if (not_zero (emitted_colors [i])) { accum = addVV (accum, emitted_colors [i]) break } ray_origin = addVV (ray_origin, mulVS (ray_direction, t)) let surface_normal = mulVS (subVV (ray_origin, centers[i]), 1.0/radii[i]) if (refractive_indices [i] > 1.0) { let cosine1 = dot(ray_direction,surface_normal) var ni, nt if (cosine1 < 0){ ni = 1.0 nt = refractive_indices[i] } else { ni = refractive_indices[i] nt = 1.0 surface_normal = subVV ([0, 0, 0], surface_normal) } var can_refract, refracted_direction [can_refract, refracted_direction] = refract(ray_direction, surface_normal, ni, nt) if (can_refract) { cosine1 = Math.abs(cosine1) let cosine2 = Math.abs(dot(refracted_direction, surface_normal)) let cosine = Math.min (cosine1, cosine2) let prob_reflect = glass_fresnel(cosine) if (randomUniform() < prob_reflect) { ray_direction = reflect(ray_direction, surface_normal) } else { ray_direction = refracted_direction } } else { ray_direction = reflect(ray_direction, surface_normal) } } else { ray_direction = reflect (ray_direction, surface_normal) multiplier = mulVV (multiplier, specular_reflectivity[i]) } } else { accum = addVV (accum, mulVV (multiplier, background_color (ray_direction))) break } } return accum }) } 39:T9cd,{ let refractive_indices = [1.0, 1.0] let emitted_colors = [[3.0,3.0,3.0], [0.0,0.0,0.0]] let centers = [[-1.0,0.0,-5.0], [1.0,0.0,-5.0]] let radii = [1.0, 1.0] let specular_reflectivity = [[0.0,0.0,0.0], [0.0,0.0,0.0]] let diffuse_reflectivity = [[0,0,0], [0.9, 0.8, 0.5]] return renderSamplesImage (2, function (ray_origin, ray_direction, accum) { var hit_something, t, i let multiplier = [1.0,1.0,1.0] for (var bounces = 0; bounces < 30; bounces++){ [hit_something, t, i] = hit_array(ray_origin, ray_direction, centers, radii) if (hit_something){ if (not_zero (emitted_colors [i])) { accum = addVV (accum, emitted_colors [i]) break } ray_origin = addVV (ray_origin, mulVS (ray_direction, t)) let surface_normal = mulVS (subVV (ray_origin, centers[i]), 1.0/radii[i]) if (not_zero(diffuse_reflectivity[i])) { let target = random_on_sphere(addVV (ray_origin, surface_normal), 0.99) ray_direction = unit_vector(subVV (target, ray_origin)) multiplier = mulVV (multiplier, diffuse_reflectivity[i]) } else if (refractive_indices [i] > 1.0) { let cosine1 = dot(ray_direction,surface_normal) var ni, nt if (cosine1 < 0){ ni = 1.0 nt = refractive_indices[i] } else { ni = refractive_indices[i] nt = 1.0 surface_normal = subVV ([0, 0, 0], surface_normal) } var can_refract, refracted_direction [can_refract, refracted_direction] = refract(ray_direction, surface_normal, ni, nt) if (can_refract) { cosine1 = Math.abs(cosine1) let cosine2 = Math.abs(dot(refracted_direction, surface_normal)) let cosine = Math.min (cosine1, cosine2) let prob_reflect = glass_fresnel(cosine) if (randomUniform() < prob_reflect) { ray_direction = reflect(ray_direction, surface_normal) } else { ray_direction = refracted_direction } } else { ray_direction = reflect(ray_direction, surface_normal) } } else { ray_direction = reflect (ray_direction, surface_normal) multiplier = mulVV (multiplier, specular_reflectivity[i]) } } else { accum = addVV (accum, mulVV (multiplier, background_color (ray_direction))) break } } return accum }) } 3a:[] 2f:{"id":"601562c2a9f54f3f","slug":"raytracing-in-40-minutes-the-observable-port","title":"Raytracing in 40 minutes, the Observable port","thumbnail":"7085dc9def8569f727c8a1bdf1d286ebd97873c185c06cebeb7cf52886cfc717","access_level":"public","create_time":"$D2021-04-07T22:54:03.271Z","update_time":"$D2021-05-29T19:34:18.597Z","view_time":null,"first_public_time":"$D2021-04-11T19:57:35.469Z","fork":false,"stars":58,"starred":false,"owner":{"type":"team","id":"564dbd7bc172fa04","login":"migueldeicaza","name":"Miguel de Icaza","avatar_url":"https://avatars-next.observableusercontent.com/42663af6502a3a79791d572a39327c5e6305110bb0276931d9e454e9cad5f298","tier":"starter_2024"},"version":766,"publish_version":766,"role":null,"authored":false,"authors":[{"type":"individual","id":"e9b953f35bf5807a","login":"migueldeicaza","name":"Miguel de Icaza","avatar_url":"https://avatars-next.observableusercontent.com/42663af6502a3a79791d572a39327c5e6305110bb0276931d9e454e9cad5f298","tier":null}],"members":[{"type":"individual","id":"e9b953f35bf5807a","login":"migueldeicaza","name":"Miguel de Icaza","avatar_url":"https://avatars-next.observableusercontent.com/42663af6502a3a79791d572a39327c5e6305110bb0276931d9e454e9cad5f298","tier":null,"role":"editor"}],"comments":[{"id":"e9fccf7e1be38055","reply_to_id":null,"content":"Typo: \"No we\" -> \"Now we\"","create_time":"$D2021-04-11T20:52:19.032Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"6ee9d4b62b18a6c1","reply_to_id":null,"content":"I think the readability of the code can be improved through the proper use of const and let. Especially const will make it clear which variables are immutable.","create_time":"$D2021-04-11T20:57:37.586Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"f985d5197e47f944","reply_to_id":null,"content":"In case you didn't know (it's a bit hard to find), you can manually set the preview image for your notebook. In the notebook overview you have to find the context menu (the three dots below the preview image on the right, next to notebook title), then it should be one of the options. Might be nicer to show one of the later images in your notebook instead of this random noise","create_time":"$D2021-04-12T14:53:47.094Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"347b6e6ed52df362","reply_to_id":"f985d5197e47f944","content":"Thank you!","create_time":"$D2021-04-12T20:35:50.867Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e9b953f35bf5807a","login":"migueldeicaza","name":"Miguel de Icaza","avatar_url":"https://avatars-next.observableusercontent.com/42663af6502a3a79791d572a39327c5e6305110bb0276931d9e454e9cad5f298","tier":null}},{"id":"e2685820fddb25ca","reply_to_id":"e9fccf7e1be38055","content":"Thank you!","create_time":"$D2021-04-12T20:36:18.472Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e9b953f35bf5807a","login":"migueldeicaza","name":"Miguel de Icaza","avatar_url":"https://avatars-next.observableusercontent.com/42663af6502a3a79791d572a39327c5e6305110bb0276931d9e454e9cad5f298","tier":null}},{"id":"07be2ef6b493edd5","reply_to_id":null,"content":"This function does not correctly average the pixel data. Higher sample values passed to the function make things dark.\nThe calculatePixel function should be passed [0,0,0] in place of accum and\nputPixel should be moved after the \"for s\" block and use accum instead of res.","create_time":"$D2021-04-12T23:11:44.851Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c72508044671b369","login":"paul-robello","name":"Paul Robello","avatar_url":"https://avatars-next.observableusercontent.com/098e177a37b85a7cc96a49a0dc166ce2a0d1952beb154046df4084148cbbce0f","tier":null}},{"id":"4dbda52b1461cb1a","reply_to_id":"07be2ef6b493edd5","content":"My fork of this function https://observablehq.com/@paul-robello/raytracing-in-40-minutes-the-observable-port#renderSamplesImage","create_time":"$D2021-04-13T15:41:22.077Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c72508044671b369","login":"paul-robello","name":"Paul Robello","avatar_url":"https://avatars-next.observableusercontent.com/098e177a37b85a7cc96a49a0dc166ce2a0d1952beb154046df4084148cbbce0f","tier":null}},{"id":"478e86d8d0145586","reply_to_id":"07be2ef6b493edd5","content":"Thank you for providing the fix! I had not caught that!\n\nCheers!","create_time":"$D2021-04-15T16:13:53.861Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e9b953f35bf5807a","login":"migueldeicaza","name":"Miguel de Icaza","avatar_url":"https://avatars-next.observableusercontent.com/42663af6502a3a79791d572a39327c5e6305110bb0276931d9e454e9cad5f298","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"Raytracing in 40 minutes, the Observable port","cells":[{"id":0,"value":"md`# Raytracing in 40 minutes, the Observable port`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"md`***PROGRAM 0: Random values***`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"{\n let random = d3.randomInt(0,255)\n\n let img = makeImage ()\n let ctx = img.ctx\n let d = img.data.data\n let i = 0\n for (let x = 0; x < w; x++){\n for (let y = 0; y < h; y++) {\n d [i++] = random()\n d [i++] = random()\n d [i++] = random()\n d [i++] = 255\n }\n }\n img.ctx.putImageData(img.data, 0, 0)\n return img.canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"md`**PROGRAM 1:** We make rays fan out from the origin and query colors in that direction. In a world without objects that is the \"background\" (a fiction graphics people use to hard-code colors coming from far away, often stored as an \"environment map\") that can be thought of an an emcompassing light emitting distant sphere we are inside of. In this case we hard-code as smoothly varying from dark blue \"down\" (in the Y direction) and light blue \"up\".`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"// Computes the unit vector given a vector\nunit_vector = function unit_vector(a) {\n let len = Math.sqrt (dot(a,a))\n return divVS(a, len)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":280,"value":"// This takes as input a unit vector, and returns a 3-value vector representing the RGB color\nbackground_color = function(v) {\n let u = 0.5 * (1.0 + v[1])\n return addVV (mulVS([0.7, 0.8, 0.9],u), mulVS([0.05, 0.05, 0.2], 1.0-u))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"{\n let img = makeImage ()\n let ctx = img.ctx\n let d = img.data.data\n \n let ray_origin = [0,0,0]\n let aspect = h/w\n let window_depth = 2\n\n let i = 0\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++){\n let u = (x + 0.5) / w\n let v = (y + 0.5) / h\n let p = [2.0*u-1.0, aspect*(2.0*v-1.0), -window_depth]\n let ray_direction = unit_vector(p)\n let color = background_color (ray_direction)\n\n putPixel (d, x, y, color)\n }\n }\n img.ctx.putImageData(img.data, 0, 0)\n return img.canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"md`We are going to refactor the common operations of ray tracing into its own method, as the loop remains identical for the rest of this document.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"// This takes a function taht receives the buffer, x, y, ray_direction and ray_origin parameters\n// the invoked method should call putPixel on it\nrenderImage = function (calculatePixel) {\n let img = makeImage ()\n let ctx = img.ctx\n let d = img.data.data\n \n let ray_origin = [0,0,0]\n let aspect = h/w\n let window_depth = 2\n\n let i = 0\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++){\n let u = (x + 0.5) / w\n let v = (y + 0.5) / h\n let p = [2.0*u-1.0, aspect*(2.0*v-1.0), -window_depth]\n let ray_direction = unit_vector(p)\n\n let color = calculatePixel (ray_origin, ray_direction) \n putPixel (d, x, y, color)\n }\n }\n img.ctx.putImageData(img.data, 0, 0)\n return img.canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"hit_sphere = function (ray_origin, ray_direction, center, radius) {\n let oc = subVV (ray_origin, center)\n let qb = dot(oc,ray_direction)\n let qc = dot(oc,oc)-radius*radius\n let discriminant = qb*qb-qc\n if (discriminant > 0) {\n let t = (-qb - Math.sqrt(discriminant))\n \n if (t > 0.00001) {\n return t\n } \n t = (-qb + Math.sqrt(discriminant))\n if (t > 0.0001) {\n return t\n }\n }\n return 1.0e9\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":362,"value":"{\n let center = [0, 0, -10]\n let radius = 1.0\n\n return renderImage (function (ray_origin, ray_direction) {\n let t = hit_sphere(ray_origin, ray_direction, center, radius)\n if (t < 1.0e8) {\n return ([1, 0, 0])\n } else {\n return background_color (ray_direction)\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":377,"value":"md`**PROGRAM 3**: Now we color the sphere with a colormap that visualizes the surface normal at the hitpoint. That normal is in the direction from the center of the sphere to the hitpoint on the sphere (divided by its length to make a unit-length vector). The (x,y,z) values of a unit-length vector are each within the interval from -1 to +1, so shifiting each to [0,2] and then multiplying by 0.5 makes each component in [0,1] to a valid RGB color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":380,"value":"pseudo_color = function (v) {\n return mulVS (addVV ([1,1,1], v), 0.5)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"{\n let center = [0, 0, -10]\n let radius = 1.0\n\n return renderImage (function (ray_origin, ray_direction) {\n let t = hit_sphere(ray_origin, ray_direction, center, radius)\n if (t < 1.0e8) {\n let hit_point = addVV (ray_origin, mulVS (ray_direction, t))\n let surface_normal = mulVS (subVV (hit_point, center), 1/radius)\n return pseudo_color (surface_normal)\n } else {\n return background_color (ray_direction)\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":388,"value":"md`\nPROGRAM 4: Now we want to test for intersection against multiple spheres. We do this by testing each of them in series and returning the information for the closest one hit, if any.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":391,"value":"hit_array = function (ray_origin, ray_direction, centers, radii) {\n let t_min = 9.0e8\n let i_min = -1\n let hit_something = false\n for (var i in centers) {\n let t = hit_sphere(ray_origin, ray_direction, centers[i], radii[i])\n if (t >= 0.0001 && t < t_min) {\n t_min = t\n i_min = i\n hit_something = true\n }\n }\n return [hit_something, t_min, i_min]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":475,"value":"big_radius = 10000.0\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":478,"value":"radii = [ 1.0, big_radius, 1.0, 1.0, -0.95 ]\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"// And the 4 vectors for the centers of the spheres\ncenters = [ [0.0, 3.0, -10.0], [0.0, -big_radius - 1, 0.0], [1.0, 1.0, -7.0], [-1.0, 0.0, -6.0]]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":599,"value":"md`Observable works best when the data is immutable, but some of the latter examples use a larger set of body elements, so for that reason, we are going to use the variable \"centers\" and later \"centers2\" to render. The lenght of this array, drives the behavior of the rendering (it iterates over all those elements) and expects other things like radii to have as many elements as centers has`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":603,"value":"centers2 = [ [0.0, 3.0, -10.0], [0.0, -big_radius - 1, 0.0], [1.0, 1.0, -7.0], [-1.0, 0.0, -6.0], [1, 1, -7]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":396,"value":"{\n\n return renderImage (function (ray_origin, ray_direction) {\n var hit_something, t, i\n [hit_something, t, i] = hit_array(ray_origin, ray_direction, centers, radii)\n if (hit_something){\n let hit_point = addVV (ray_origin, mulVS (ray_direction, t))\n let surface_normal = mulVS (subVV (hit_point, centers[i]), 1.0/radii[i])\n return pseudo_color(surface_normal)\n } else {\n return background_color (ray_direction)\n }\n })\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":457,"value":"md`**PROGRAM 5.** Now we make it so that if a ray hits a sphere, it spawns a new ray in the \"reflection\" direction which for an ideal mirror can be done with a small vector equation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":460,"value":"reflect = function(v, n) {\n return subVV (v, mulVS (mulVS (n, dot(v,n)), 2.0))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":462,"value":"{\n return renderImage (function (ray_origin, ray_direction) {\n var hit_something, t, i\n while (true) {\n [hit_something, t, i] = hit_array(ray_origin, ray_direction, centers, radii)\n if (hit_something){\n ray_origin = addVV (ray_origin, mulVS (ray_direction, t))\n let surface_normal = mulVS (subVV (ray_origin, centers[i]), 1.0/radii[i])\n ray_direction = reflect (ray_direction, surface_normal)\n } else {\n return background_color (ray_direction)\n }\n }\n })\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":471,"value":"md`**PROGRAM 6:** Now we add two things: 1) allow objects to emit light of a certain color, and 2) the specularly (mirror) reflecting spheres attenuate the light so that only the fraction \"specular_reflectivity\" (a potentially different number of each sphere) is passed on.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":488,"value":"emitted_colors = [ [5.0, 5.0, 5.0], [0.0, 0.0, 0.0], [0.0, 0.0, 0.0], [0.0, 0.0, 0.0], [0, 0, 0] ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":490,"value":"specular_reflectivity = [ [0.0, 0.0, 0.0], [0.7, 0.7, 0.7], [0.7, 0.6, 0.5], [1.0, 1.0, 1.0], [0,0,0] ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":494,"value":"not_zero = function (c) {\n return dot(c,c) > 1.0e-6\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":492,"value":"{\n return renderImage (function (ray_origin, ray_direction) {\n var hit_something, t, i\n let multiplier = [1.0,1.0,1.0]\n while (true) {\n [hit_something, t, i] = hit_array(ray_origin, ray_direction, centers, radii)\n if (hit_something){\n if (not_zero (emitted_colors [i])) {\n return mulVV (multiplier, emitted_colors [i])\n }\n ray_origin = addVV (ray_origin, mulVS (ray_direction, t))\n let surface_normal = mulVS (subVV (ray_origin, centers[i]), 1.0/radii[i])\n ray_direction = reflect (ray_direction, surface_normal)\n multiplier = mulVV (multiplier, specular_reflectivity[i])\n } else {\n return mulVV (multiplier, background_color (ray_direction))\n }\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":532,"value":"md`**PROGRAM 7:** Now we add the ability to refract (as happens for glass, water, etc). When a ray hits an object with a refractive index above 1.0, we bend the light and refract the ray into the surface (in real life it splits so this is a simplification we will fix later). In the case where the ray cannot reftact, we reflect it (\"total internal reflection\" because that only happens when a ray comes from the inside of an object)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":536,"value":"// v and normal are vectors, ni and nt are scalars\nrefract = function (v, normal, ni, nt) {\n let eta = ni/nt \n let c1 = -dot(v, normal)\n let w = eta*c1\n let c2m = (w-eta)*(w+eta)\n if (c2m < -1.0) {\n return [false, v]\n } else {\n return [true, addVV (mulVS (v, eta), mulVS (normal, (w-Math.sqrt(1.0+c2m))))]\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":539,"value":"refractive_indices = [ 1.0, 1.0, 1.5, 1.0, 1.5 ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":541,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":568,"value":"md`**PROGRAM 8**: Now we add a hollow glass sphere. We do that with an old and glorious hack: a sphere with a negative radius inside another sphere. The negative radius does not change how sphere hit works (it only has R^2 terms) but does make the normal point into the sphere, and we use this to say \"the normal points from glass to air\". Good for hollow spheres and to make bubbles!`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":610,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":614,"value":"md`**PROGRAM 9:** Here we add that light splits between reflective and refractive components, and the amount going in each component adds to 100% but the proporions varies with the angle of incidence givened by the \"Fresnal Equations\". This is commonly (pretty much always) approximated by the \"Schlick Approximation\" a polynomial of the cosine of the angle of incidence *on the air side*. To avoid two recursive calls to track both rays we do this in a Monte Carlo choice that chooses either a reflection or refraction but not both. This is noisy, but on average correct.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":621,"value":"glass_fresnel = function(c) {\n let c5 = Math.pow (1-c, 5)\n return 0.05 * (1-c5)+ 0.95 * c5\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":619,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":626,"value":"md`**PROGRAM 10:** Now we take multiple samples per pixel so that the resulting pixels will be closer to the right \"converged answer\". This is mainly to resolve the noise in the glass we introduced, but while we are at it we make the samples hit random locations in the pixel rather than their center, so we anti-alias the edges as well. It probably takes 100 sample to look smooth but the default is smaller so the notbook is faster.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":634,"value":"md`For this, we are going to change the render function that we have been using, for one that can do multiple samples`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":633,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":658,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":669,"value":"md`**PROGRAM 11:** Now we add air bubbles in a glass sphere. If we added MANY more bubbles and made them smaller we could get an opaque object like a bubbly ice cube`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":672,"value":"random_in_sphere = function(c, rad) {\n let a = randomUniform2()\n let b = Math.sqrt(1.0-a*a)\n let phi = randomUniform2pi ()\n let R = rad*Math.pow(randomUniform(), 0.33333)\n let x = R*b*Math.cos(phi)\n let y = R*b*Math.sin(phi)\n let z = R*a\n return addVV (c, [x, y, z])\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":684,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":704,"value":"md`**PROGRAM 12** Instead of creating opacity from complex microstructure, which would work great if we had enough time, we create a diffuse behavior which reflects in a random direction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":711,"value":"random_on_sphere = function(c, rad) {\n let a = randomUniform2()\n let b = Math.sqrt(1.0-a*a)\n let phi = randomUniform2pi ()\n let x = rad*b*Math.cos(phi)\n let y = rad*b*Math.sin(phi)\n let z = rad*a\n return addVV (c, [x, y, z])\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":709,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":720,"value":"md`**PROGRAM 13**. Now we add a bunch of random spheres for our final program`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":521,"value":"html`

Helper Functions

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"makeImage = function makeImage(){\n // Create a Canvas element\n let canvas = document.createElement('canvas');\n\n// Size the canvas to the element\ncanvas.width = w;\ncanvas.height = h;\n\n// Draw image onto the canvas\nlet ctx = canvas.getContext('2d');\n \n // Finally, get the image data as a Uint8ClampedArray\n // ('data' is an array of RGBA pixel values for each pixel)\n const raw = ctx.getImageData(0, 0, w, h);\n \n // Let us get a normal array back to maniputate\n const flatArray = Array.from(raw.data);\n return { canvas: canvas, ctx: ctx, data: raw }\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":201,"value":"// Computes the dot product of two 3D vectors\ndot = function dot(a,b) {\n return a [0]*b[0]+a[1]*b[1]+a[2]*b[2]\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"// Adds two 3d vectors\naddVV = function (a,b) {\n return [a[0]+b[0],a[1]+b[1],a[2]+b[2]]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"// Subtracts the second 3d vector from the first\nsubVV = function (a,b){\n return [a[0]-b[0],a[1]-b[1],a[2]-b[2]]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"// Divides a 3D vector by a scalar value\ndivVS = function divVS(vec,scalar) {\n return [vec[0]/scalar,vec[1]/scalar, vec[2]/scalar]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":219,"value":"// Multiplies a 3D vector by a scalar\nmulVS = function mulVS (vec, scalar) {\n return [vec[0]*scalar, vec[1]*scalar, vec[2]*scalar]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":499,"value":"// Multiplies two 3D vectors\nmulVV = function (a, b) {\n return [a[0]*b[0],a[1]*b[1],a[2]*b[2]]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"// Draws a pixel on the buffer `bitmap` that is of size `w`x`h` at position `x`, `y` \n// with the color specified as RGB values in the range 0..1\nputPixel = function(bitmap,x,y,color) {\n let p = ((h-y)*w+x)*4\n bitmap [p++] = color [0]*255\n bitmap [p++] = color [1]*255\n bitmap [p++] = color [2]*255\n bitmap [p] = 255\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"w = 512\n\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"h = 384","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"d3 = require(\"d3-random@>=2.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":637,"value":"randomUniform = d3.randomUniform(0.0,1.0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":674,"value":"randomUniform2 = d3.randomUniform(-1.0,1.0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":679,"value":"randomUniform2pi = d3.randomUniform(0, 2*3.141592)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"