2f:null 30:["$","title",null,{"children":"[CAP6721] Chathura Assignment 07 (UCFID: 3948890) | Chathura Jayalath | Observable"}] 35:T226c,pixelColorCode = [ ` struct Ray { vec3 origin; vec3 direction; float tMin, tMax; }; `, ` vec3 pointOnRay(in Ray ray,float t){ return (ray.origin+t*ray.direction); } `, ` struct AABB{ vec3 minP; vec3 maxP; }; `, ` const float EPSILON = 1e-5; const float INFINITY = 1e5; uniform vec3 Background; uniform vec2 resolution; uniform vec3 cameraU; uniform vec3 cameraV; uniform vec3 cameraW; uniform vec3 cameraEye; uniform float fov; uniform float time; uniform vec3 lightPosMin; uniform vec3 lightPosMax; uniform int numDivs; uniform int numSmpDiv; uniform float shadowStrength; uniform mat4 mtFloor; uniform mat4 mtRoof; uniform mat4 mtWallBack; uniform mat4 mtWallLeft; uniform mat4 mtWallRight; uniform mat4 mtBig; uniform mat4 mtSmall; `, ` Ray getRay(vec2 pixel){ Ray ray; ray.origin = cameraEye; float height = 2.*tan(fov/2.); float aspect = resolution.x/resolution.y; float width = height*aspect; vec2 windowDim = vec2(width,height); vec2 pixelSize = windowDim/resolution; vec2 delta = -0.5*windowDim + pixel*pixelSize; ray.direction = normalize(-cameraW + cameraV*delta.y + cameraU*delta.x); ray.tMin = 0.; ray.tMax = INFINITY; return ray; } `, ` bool insersectsRayAABB(inout Ray ray, AABB aabb) { vec3 tMin = (aabb.minP.xyz - ray.origin) / ray.direction; vec3 tMax = (aabb.maxP.xyz - ray.origin) / ray.direction; vec3 t1 = min(tMin, tMax); vec3 t2 = max(tMin, tMax); //float tNear = max(max(max(t1.x, t1.y), t1.z),ray.tMin); //float tFar = min(min(min(t2.x, t2.y), t2.z),ray.tMax); float tNear = max(max(t1.x, t1.y), t1.z); float tFar = min(min(t2.x, t2.y), t2.z); if (tNear < tFar){ ray.tMin = tNear; ray.tMax = tFar; return true; } return false; } `, ` vec3 getNormal(AABB aabb,vec3 p){ vec3 c = (aabb.minP+aabb.maxP)/2.; vec3 d = p-c; vec3 v = abs(d); int i = v.y > v.x ? ( v.z > v.y ? 2 : 1 ) : ( v.z > v.x ? 2 : 0 ); // Which Sign of the axis: The sign of the component selects the positive or negative direction. return (i == 0) ? ((p.x>=0.)?vec3(1,0,0):vec3(-1,0,0)) : (i == 1) ? ((p.y>=0.)?vec3(0,1,0):vec3(0,-1,0)) : ((p.z>=0.)?vec3(0,0,1):vec3(0,0,-1)); } vec3 getNormalColor(AABB aabb,vec3 p, vec3 c1, vec3 c2, vec3 c3, vec3 c4, vec3 c5, vec3 c6){ vec3 c = (aabb.minP+aabb.maxP)/2.; vec3 d = p-c; vec3 v = abs(d); int i = v.y > v.x ? ( v.z > v.y ? 2 : 1 ) : ( v.z > v.x ? 2 : 0 ); // Which Sign of the axis: The sign of the component selects the positive or negative direction. return (i == 0) ? ((p.x>=0.)?c1:c2) : (i == 1) ? ((p.y>=0.)?c3:c4) : ((p.z>=0.)?c5:c6); } bool insersectsRayCannonicalAABB(inout Ray ray) { AABB aabb; aabb.minP = vec3(-0.5); aabb.maxP = vec3(0.5); return insersectsRayAABB(ray, aabb); } bool checkRayVsSphereCollision( vec3 origin, vec3 dir, vec3 center, float radius, inout float out_t){ vec3 O_C = origin - center; float A = dot(dir,dir); float B = 2.0 * dot( dir, O_C); float D = dot(O_C, O_C) - (radius * radius); if ((B * B - 4.0 * A * D) < 0.0){ return false; // not hitting Sphere } float det = sqrt(B * B - 4.0 * A * D); // Far contact: float t1 = (0.0 - B + det) / (2.0 * A); // Output the Near contact: out_t = (0.0 - B - det) / (2.0 * A); return true; // hitting the Sphere } // Gold Noise ©2015 dcerisano@standard3d.com // - based on the Golden Ratio // - uniform normalized distribution // - fastest static noise generator function (also runs at low precision) float PHI = 1.61803398874989484820459; // Φ = Golden Ratio float gold_noise(in vec2 xy, in float seed){ return fract(tan(distance(xy*PHI, xy)*seed)*xy.x); } vec3 pixelColor(vec2 pixel){ vec3 color = Background; Ray ray = getRay(pixel); AABB aabb; aabb.minP = vec3(-0.5); aabb.maxP = vec3(0.5); mat4 allTransforms[7]; allTransforms[0] = mtFloor; allTransforms[1] = mtRoof; allTransforms[2] = mtWallBack; allTransforms[3] = mtWallLeft; allTransforms[4] = mtWallRight; allTransforms[5] = mtBig; allTransforms[6] = mtSmall; vec3 matCols[7]; matCols[0] = vec3(0.9,0.9,0.9); matCols[1] = vec3(0.9,0.9,0.9); matCols[2] = vec3(0.9,0.9,0.9); matCols[3] = vec3(0.9,0.1,0.1); matCols[4] = vec3(0.1,0.9,0.1); matCols[5] = vec3(0.9,0.9,0.9); matCols[6] = vec3(0.9,0.9,0.9); float tmin = INFINITY; int matchID = -1; for(int i=0; i < 7; i++){ Ray invRay = ray; // get original ray mat4 mt = allTransforms[i]; // inverse transform mat4 imt = inverse(mt); // inverse transform // apply transform to ray vec4 transformedRayOrigin = imt * vec4(invRay.origin, 1.0); vec4 transformedRayDir = imt * vec4(invRay.direction, 0.0); invRay.origin = transformedRayOrigin.xyz; invRay.direction = transformedRayDir.xyz; // compute tmin if (insersectsRayCannonicalAABB(invRay)){ if(invRay.tMin < tmin){ matchID = i; tmin = invRay.tMin; } } } if(matchID > -1){ Ray invRay = ray; // get original ray mat4 mt = allTransforms[matchID]; mat4 imt = inverse(mt); vec4 transformedRayOrigin = imt * vec4(invRay.origin, 1.0); vec4 transformedRayDir = imt * vec4(invRay.direction, 0.0); invRay.origin = vec3(transformedRayOrigin[0], transformedRayOrigin[1], transformedRayOrigin[2]); invRay.direction = vec3(transformedRayDir[0],transformedRayDir[1],transformedRayDir[2]); vec3 q = pointOnRay(invRay,tmin); vec3 p = pointOnRay(ray,tmin); // hitpoint on real scene vec3 N = getNormal(aabb, q);// normal on cannonical aabb vec4 realN4 = mt * vec4(N,0.0); vec3 realN = normalize(vec3(realN4[0], realN4[1], realN4[2])); // light square grid vec3 colSum = vec3(0.0); float numSamples = 0.0; int numDivisions = numDivs; // per direction int numSamplesPerDiv = numSmpDiv; vec3 squareSize = (lightPosMax - lightPosMin) / float(numDivisions); for(int cols = 0; cols < numDivisions; cols++){ for(int rows = 0; rows < numDivisions; rows++){ vec3 minPoint = lightPosMin + vec3(squareSize.x * float(cols), 0.0, squareSize.z * float(rows)); vec3 maxPoint = minPoint + squareSize; // multiple light samples for(int s=0; s < numSamplesPerDiv; s++){ numSamples += 1.0; float u = gold_noise(pixel, fract(time)+ numSamples + 1.0); float v = gold_noise(pixel, fract(time)+ numSamples + 2.0); // p0 = minPoint vec3 p1 = vec3(maxPoint.x, minPoint.y, minPoint.z); // p2 = maxPoint vec3 p3 = vec3(minPoint.x, maxPoint.y, maxPoint.z); vec3 this_lightpos = (1.0 - v) * ( (1.0 - u) * minPoint + u * p1 ) + v * ( (1.0 - u) * p3 + u * maxPoint ); // diffuse color computation vec3 lightNormal = vec3(0.0, -1.0, 0.0); vec3 this_color = clamp( matCols[matchID] * dot(realN, normalize(this_lightpos - p)) * dot(lightNormal, normalize(p - this_lightpos)) , 0.0, 1.0); // shadow computation for bigbox and small box vec3 shadowRayDir = normalize(this_lightpos - p); float tmin_base; float tmin_boxes = INFINITY; // calc tmin_base checkRayVsSphereCollision(p, shadowRayDir, this_lightpos, 0.0001, tmin_base); // compute tmin_boxes for(int i=5; i < 7; i++){ if(matchID != i) { Ray shadowRay; shadowRay.origin = p; shadowRay.direction = shadowRayDir; shadowRay.tMin = 0.; shadowRay.tMax = INFINITY; mat4 shmt = allTransforms[i]; // inverse transform mat4 ishmt = inverse(shmt); // inverse transform // apply transform to ray vec4 transformedShadowRayOrigin = ishmt * vec4(shadowRay.origin, 1.0); vec4 transformedShadowRayDir = ishmt * vec4(shadowRay.direction, 0.0); shadowRay.origin = transformedShadowRayOrigin.xyz; shadowRay.direction = transformedShadowRayDir.xyz; // compute tmin_boxes if (insersectsRayCannonicalAABB(shadowRay)){ if(shadowRay.tMin < tmin_boxes){ tmin_boxes = shadowRay.tMin; } } } } if(tmin_boxes < tmin_base){ this_color *= shadowStrength; } colSum += this_color; } } } return clamp( colSum / numSamples , 0.0, 1.0); } //return vec3(gold_noise(pixel, fract(time)+1.0),gold_noise(pixel, fract(time)+2.0),gold_noise(pixel, fract(time)+3.0)); return Background; } ` ]36:T9c6,{ // transformation matrices let mtfloor = Array.from(getTransformation([0,-1.05,0],0,[2,0.1,2])); let mtroof = Array.from(getTransformation([0,1.05,0],0,[2,0.1,2])); let mtwallback = Array.from(getTransformation([0,0,-1.05],0,[2.2,2.2,0.1])); let mtwallleft = Array.from(getTransformation([-1.05,0,0],0,[0.1,2.2,2.0])); let mtwallright = Array.from(getTransformation([1.05,0,0],0,[0.1,2.2,2])); let mtbigbox = Array.from(getTransformation([-0.25,-0.25,-0.25],-30 * Math.PI / 180,[0.6,1.5,0.6])); let mtsmallbox = Array.from(getTransformation([0.25,-0.75,0.25],30 * Math.PI / 180,[0.6,0.6,0.6])); // ------------------------------ let count = 0; let cameraAt = [0, 0, 0]; let cameraUp = [0, 1, 0]; let M = twgl.m4.axisRotation(cameraUp, deg2rad(1)); let cameraU = [1, 0, 0], cameraV = [0, 1, 0], cameraW = [0, 0, 1]; let cameraEye = [0, 0, 6]; //let lightPos = cameraEye; const computeUVW = () => { cameraW = twgl.v3.normalize([ cameraEye[0] - cameraAt[0], cameraEye[1] - cameraAt[1], cameraEye[2] - cameraAt[2] ]); cameraU = twgl.v3.normalize(twgl.v3.cross(cameraUp, cameraW)); cameraV = twgl.v3.normalize(twgl.v3.cross(cameraW, cameraU)); }; const rotateCamera = () => { cameraEye = twgl.m4.transformDirection(M, cameraEye); //lightPos = twgl.m4.transformDirection(M, lightPos); computeUVW(); return count++; }; computeUVW(); render(Date.now()); function render(time) { gl.clear(gl.COLOR_BUFFER_BIT); const uniforms = { Background: hex2rgb(backgroundColor), resolution: [gl.canvas.width, gl.canvas.height], cameraU: cameraU, cameraV: cameraV, cameraW: cameraW, cameraEye: cameraEye, fov: deg2rad(30), time: time, lightPosMin: lpmin, lightPosMax: lpmax, numDivs: dataInputs.numDivs, numSmpDiv: dataInputs.numSamplesPerDiv, shadowStrength: dataInputs.shadowStrength, mtFloor: mtfloor, mtRoof: mtroof, mtWallBack: mtwallback, mtWallLeft: mtwallleft, mtWallRight: mtwallright, mtBig: mtbigbox, mtSmall: mtsmallbox }; gl.useProgram(programInfo.program); twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo); twgl.setUniforms(programInfo, uniforms); twgl.drawBufferInfo(gl, bufferInfo); return count++; } while (rotate) { render(Date.now()); yield Promises.delay(1000 / 30, rotateCamera()); } return md`### WebGL Render code`; }37:[] 33:{"id":"7c09ce23cd1c56c1","slug":"cap6721-chathura-assignment-07-ucfid-3948890","title":"[CAP6721] Chathura Assignment 07 (UCFID: 3948890)","thumbnail":"d901d734fde163c493576ca386a61922ec753297194423e21f62bb627c3de84c","access_level":"public","create_time":"$D2021-03-02T16:20:18.439Z","update_time":"$D2021-03-09T20:45:42.057Z","view_time":null,"first_public_time":"$D2022-12-28T01:37:43.859Z","has_unpublished_edits":null,"fork":{"id":"9bac0345dd29f696","slug":"cap6721-chathura-assignment-06-ucfid-3948890","title":"[CAP6721] Chathura Assignment 06 (UCFID: 3948890)","owner":{"id":"faa67bfd1359f951","login":"deamonpog","name":"Chathura Jayalath"}},"stars":0,"starred":false,"owner":{"type":"team","id":"faa67bfd1359f951","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":"starter_2024"},"version":1137,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5fe81dea2f61079a","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":null}],"members":[{"type":"individual","id":"5fe81dea2f61079a","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"[CAP6721] Chathura Assignment 07 (UCFID: 3948890)","cells":[{"id":853,"value":"md`# [CAP6721] Chathura Assignment 07 (UCFID: 3948890)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md` Ray Tracing AABB\nSee \n - [ray definition.](https://observablehq.com/@spattana/ray)\n - [ray 2D AABB intersection demo.](https://observablehq.com/@spattana/ray-box-intersection)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof backgroundColor = color({\n value: \"#4d4747\",\n title: \"Background Color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"viewof windowSize = columns({\n width : slider({\n title: \"Width\",\n min: 256.0,\n max: 1024.0,\n step: 128.0,\n value: 512.0\n }),\n height : slider({\n title: \"Height\",\n min: 256.0,\n max: 1024.0,\n step: 128.0,\n value: 512.0\n }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"viewof dataInputs = columns({\n numDivs: slider({\n title: \"Num of Divisions Per Side\",\n min: 1.0,\n max: 200.0,\n step: 1.0,\n value: 2.0\n }),\n numSamplesPerDiv: slider({\n title: \"Num of Samples Per Division\",\n min: 1.0,\n max: 200.0,\n step: 1.0,\n value: 4.0\n }),\n shadowStrength: slider({\n title: \"Shadow strength\",\n min: 0.0,\n max: 1.0,\n step: 0.05,\n value: 0.5\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"md`#### I got a really sharp image when Light Length and Light Width are set to minimum as possible and high number of samples and divisions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"viewof lightInput = columns({\n ypos : slider({\n title: \"Light Y-Pos\",\n min: -1.5,\n max: 1.5,\n step: 0.05,\n value: 1.01\n }),\n length : slider({\n title: \"Light Length\",\n min: 0.01,\n max: 1.5,\n step: 0.01,\n value: 0.25\n }),\n width : slider({\n title: \"Light Width\",\n min: 0.01,\n max: 2.0,\n step: 0.01,\n value: 0.25\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"canvas = DOM.canvas(width, height)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"viewof rotate = checkbox({\n description: \"Just a single checkbox to toggle\",\n options: [{ value: \"toggle\", label: \"rotate\" }],\n value: null\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"lightHeight = lightInput.ypos","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"lpmin = [-lightInput.width/2, lightHeight, -lightInput.length/2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"lpmax = [lightInput.width/2, lightHeight, lightInput.length/2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"errorBlock = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"getInvTransformation = (translate, rotate, scale) => {\n const scaleM = twgl.m4.scaling(scale);\n const rotateM = twgl.m4.rotateY(twgl.m4.identity(), rotate);\n const translateM = twgl.m4.translation(translate);\n return twgl.m4.inverse( twgl.m4.multiply(translateM, twgl.m4.multiply(rotateM, scaleM)) );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"getTransformation = (translate, rotate, scale) => {\n const scaleM = twgl.m4.scaling(scale);\n const rotateM = twgl.m4.rotateY(twgl.m4.identity(), rotate);\n const translateM = twgl.m4.translation(translate);\n return twgl.m4.multiply(translateM, twgl.m4.multiply(rotateM, scaleM));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"deg2rad = deg => (deg * Math.PI) / 180","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`### Leave the following code unchanged.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"bufferInfo = twgl.createBufferInfoFromArrays(gl, {\n position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"programInfo = {\n errorBlock.style.display = \"none\";\n return twgl.createProgramInfo(gl, [shaders.vs, shaders.fs], message => {\n errorBlock.style.display = \"block\";\n errorBlock.innerHTML = message;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"shaders = ({\n fs: `#version 300 es\nprecision highp float;\nout vec4 fragColor;\n//-------You Code appears below this line--------------------------\n${pixelColorCode.join(\"\\n//----------------\")}\n//-------You Code appears above this line--------------------------\nvoid main() {\n fragColor = vec4(pixelColor(gl_FragCoord.xy),1.0);\n}`,\n vs: `#version 300 es\nprecision highp float;\nin vec4 position;\n\nvoid main() {\n gl_Position = position;\n}`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"gl = {\n const gl = canvas.getContext('webgl2', { antialias: true });\n gl.clearColor(0,0,0, 1); // Choose a clear color\n gl.clear(gl.COLOR_BUFFER_BIT);\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"height = windowSize.height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"width = windowSize.width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`### Local Helper Functions`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"hex2rgb = hex =>\n (hex = hex.replace('#', ''))\n .match(new RegExp('(.{' + hex.length / 3 + '})', 'g'))\n .map(l => parseInt(hex.length % 2 ? l + l : l, 16) / 255)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`### External Libraries and Functions (imports)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"import { slider, color, checkbox } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"twgl = require(\"twgl.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"columns = (args) => {\n const form = html``\n form.value = {}\n\n let cols = 0\n for (const key in args) {\n form.appendChild(args[key])\n cols++\n }\n \n form.style = `display: grid; grid-gap: 10px 15px; grid-template-columns: repeat(${cols}, auto); grid-auto-flow: row;`\n \n form.oninput = () => {\n form.value = Object.keys(args).reduce((result, key) => {\n result[key] = args[key].value\n return result\n }, Array.isArray(args) ? [] : {})\n }\n form.oninput()\n \n return form\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 34:"$33:body"