31:T915,fancy_star = function fancy_star (context, nridges, samples_per_pixel) { const c = context; const {width:w, height:h} = c.canvas; // c.fillRect(0,0,w,h); const image = c.getImageData(0, 0, w, h); const image_data = image.data; const radius = Math.min(w, h) * 0.5; const scale = 0.190717999557544128; let sum = 0 const float_image = new Float32Array(w*h); const samples = new Float32Array((w+6)*(h+6)); // const alpha = new Float32Array(w*h); // const alpha_samples = new Float32Array((w+6)*(h+6)); for (let s = 0; s < samples_per_pixel; s++) { const [offsetx, offsety] = plastic(s); const offset_weights = []; for (let j = 0; j <= 6; j++) { for (let i = 0; i <= 6; i++) { const x = i - 3 + offsetx; const y = j - 3 + offsety; sum += offset_weights[i + 7*j] = chebeval( windowed_jinc_coeffs, (x*x + y*y) * scale - 1); } } // Note: re-use same samples array for each set of samples. for (let j = 0; j < h + 6; j++) { for (let i = 0; i < w + 6; i++) { const x = i - 3 + offsetx - w/2; const y = j - 3 + offsety - h/2; // TODO: make sure offsets are consistent direction w/ above samples[i + (w+6)*j] = inverse_gamma(star_color(x, y, nridges)); // alpha_samples[i + (w+6)*j] = ((x*x + y*y) < radius*radius); } } // convolve the array with the offset weights for (let j = 0; j < h; j++) { for (let i = 0; i < w; i++) { for (let jj = 0; jj <= 6; jj++) { for (let ii = 0; ii <= 6; ii++) { float_image[i + j*w] += samples[(i + ii) + (j + jj)*(w+6)]*offset_weights[ii + jj*7]; // alpha[i + j*w] += // alpha_samples[(i + ii) + (j + jj)*(w+6)]*offset_weights[ii + jj*7]; } } } } } // normalize float image, apply to canvas const sum_inv = 1/sum; for (let j = 0; j < h; j++) { for (let i = 0; i < w; i++) { const x = i - w/2; const y = j - h/2; const ii = i + j*w; image_data[4*ii] = image_data[4*ii+1] = image_data[4*ii+2] = 255 * gamma(float_image[ii] * sum_inv); image_data[4*ii + 3] = 255 * ((x*x + y*y) < radius*radius); } } c.putImageData(image, 0, 0); return c; }32:[] 2f:{"title":"Siemens Star","cells":[{"id":0,"value":"Title = md`# Siemens Star`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`\nTo start a naïve rendering of a sinusoidal\n[Siemens star](https://en.wikipedia.org/wiki/Siemens_star).\nThis mostly provides a place for me to experiment with methods\nfor rendering synthetic images.\n\nUpdate: Now there’s also a version which uses multiple samples per pixel\nand applies a radially symmetric antialiasing filter.\n\nNext steps:\n\n1. Get the antialiased version also rendering transparency\n2. Implement a version with a separable antialiasing filter\n3. Experiment with alternative filters and choice of sample points\n4. Implement on GPU.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"naive_star(DOM.context2d(500, 500), nridges).canvas","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"html`\n${naive_star(DOM.context2d(200, 200), nridges).canvas}\n${fancy_star(DOM.context2d(200, 200), nridges, 40).canvas}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"html`\n${naive_star(DOM.context2d(100, 100), nridges).canvas}\n${fancy_star(DOM.context2d(100, 100), nridges, 1).canvas}\n${fancy_star(DOM.context2d(100, 100), nridges, 2).canvas}\n${fancy_star(DOM.context2d(100, 100), nridges, 5).canvas}\n${fancy_star(DOM.context2d(100, 100), nridges, 10).canvas}\n${fancy_star(DOM.context2d(100, 100), nridges, 20).canvas}\n${fancy_star(DOM.context2d(100, 100), nridges, 40).canvas}\n`\n// ${fancy_star(DOM.context2d(100, 100), nridges, 200).canvas} // this one could be expensive.","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"viewof nridges = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"naive_star = function naive_star (context, nridges) {\n const c = context;\n const {width:w, height:h} = c.canvas;\n const image = c.getImageData(0, 0, w, h);\n const radius = Math.min(w, h) * 0.5; \n for (let i = 0; i < image.data.length; i += 4) {\n const x = ((i/4) % w - w/2) / radius;\n const y = (~~((i/4) / w) - h/2) / radius;\n image.data[i] = image.data[i+1] = image.data[i+2] =\n 255 * star_color(x, y, nridges);\n image.data[i+3] = 255 - 255 * ((x*x + y*y) > 1);\n }\n c.putImageData(image, 0, 0);\n return c;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"star_color = function star_color (x, y, nridges) {\n const angle = Math.atan2(y,x);\n return .5 + .45 * Math.cos(nridges*angle);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"md`\nWhat to do for fancier sampling?\n\n 1. Get sample point (x,y) offset\n 2. For each sample offset, calculate the weights to a k by k grid of\n pixel centers. For a radially symmetric filter, compute the squared\n distance to each pixel center and then apply the weight function\n 3. Compute the value of the function at a grid of pixel centers +\n sample offset (including a few pixels outside the original)\n 4. Convolve that grid with the grid of weights.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"md`Jinc-windowed Jinc function. ${tex`J_1`} is the Bessel J function, and ${tex`j_{1,k}`} is its ${tex`k`}th zero:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"tex.block`q = \\frac{j_{1,1}}{j_{1,3}}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"tex.block`\nF(x) =\n\\frac{2J_1\\left(q\\pi r\\right)}{q\\pi r}\n\\frac{2J_1(\\pi r)}{\\pi r}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"/* matlab stuff\n\nj11 = 3.8317059702075123;\nj13 = 10.1734681350627221;\nq = 0.376637142746001126;\nqpi = 1.1832404807198874;\n\nrr_max = 10.4866871749908048;\nc = 1.076061515373882;\n\nwindowed_jinc = chebfun(@(x) c * besselj(1, qpi*sqrt(x)) .* besselj(1, sqrt(x)*pi) ./ x, [0, rr_max], 'turbo')\n\n*/ ","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"windowed_jinc_coeffs = [\n 1.236613529257204e-01,\n -2.411344740073125e-01,\n 2.287566752041261e-01,\n -1.958113771147020e-01,\n 1.279025684280562e-01,\n -5.848427258666653e-02,\n 1.886609475886029e-02,\n -4.455718133255683e-03,\n 8.003548843786705e-04,\n -1.129449875403629e-04,\n 1.285838860216922e-05,\n -1.206777100157463e-06,\n 9.504068764267415e-08,\n -6.374799357038322e-09,\n 3.687452209277533e-10,\n -1.859200238985248e-11,\n 8.246512143985914e-13,\n -3.243778277448954e-14,\n 1.139570432839787e-15,\n -3.598027282754579e-17\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"import {evaluate as chebeval} from '@jrus/cheb'","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"import {gamma, inverse_gamma} from '@jrus/srgb-gamma'","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"md`The following function generates a low-discrepancy sequence over the square with each coordinate in [–.5, .5]. See [@jrus/plastic-sequence](/@jrus/plastic-sequence):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"plastic = {\n const p1 = 0.7548776662466927\n const p2 = 0.5698402909980532\n \n return function plastic (index) {\n return [(p1 * index) % 1 - .5, (p2 * index) % 1 - .5];\n } \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":440,"value":"md`at some point figure out how to draw zoomed in pictures of rendered canvases:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"four_times_nearest_neighbor = function four_times(context, x0, y0, width, height) {\n const c = context;\n const image = c.getImageData(x0, y0, width, height);\n const image4x = new ImageData(width*4, height*4);\n for (let i = 0; i < image.data.length; i+= 4) {\n const x = (i/4) % width\n const y = (~~((i/4) / height)\n }\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}