2f:null 30:["$","title",null,{"children":"[CAP6721] Chathura Assignment 09 (UCFID: 3948890) | Chathura Jayalath | Observable"}] 35:T37b4,pixelColorCode = [ ` struct Ray { vec3 origin; vec3 direction; float tMin; float 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; const float PI = 3.14159265358; 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 float theExposure; uniform int numDivs; uniform int numSmpDiv; uniform int numBounces; uniform mat4 mtFloor; uniform mat4 mtRoof; uniform mat4 mtWallBack; uniform mat4 mtWallLeft; uniform mat4 mtWallRight; uniform mat4 mtBig; uniform mat4 mtSmall; AABB cannonical_aabb = AABB(vec3(-0.5),vec3(0.5)); mat4 allTransforms[7]; vec3 matCols[7]; `, ` 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) { return insersectsRayAABB(ray, cannonical_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); } // samplePosUV is such that -0.5 <= u,v <= 0.5 vec3 getRayDirection(vec2 samplePosOffset, vec2 delta, vec3 camU, vec3 camV, vec3 camW){ vec2 sampleDelta = delta + samplePosOffset; return normalize(-camW + camV*sampleDelta.y + camU*sampleDelta.x); } struct AffineSquare { vec2 minPoint; // p0 vec2 p1; vec2 maxPoint; // p2 vec2 p3; }; AffineSquare GenerateAffineSquare(vec2 minPoint, vec2 maxPoint) { // Quadrilataral Affine Transformation of a Point AffineSquare as; as.minPoint = minPoint; // p0 as.p1 = vec2(maxPoint.x, minPoint.y); as.maxPoint = maxPoint; // p2 as.p3 = vec2(minPoint.x, maxPoint.y); return as; } vec2 getAffineUVPos(AffineSquare as, float u, float v) { return (1.0 - v) * ( (1.0 - u) * as.minPoint + u * as.p1 ) + v * ( (1.0 - u) * as.p3 + u * as.maxPoint ); } vec3 getLightPosSample(vec2 pixel, float seedMult) { AffineSquare asLight = GenerateAffineSquare(lightPosMin.xz, lightPosMax.xz); vec2 this_randomlightpos2D = getAffineUVPos( asLight, gold_noise(pixel, fract(time)+ seedMult * 6.0 + 3.0), gold_noise(pixel, fract(time)+ seedMult * 6.0 + 4.0) ); return vec3(this_randomlightpos2D.x, lightPosMin.y, this_randomlightpos2D.y); } struct RayCollisionOutput { float tmin; // collision tmin value int matchID; // colliding object index Ray matchInvRay; // colliding object's inverse transformation matrix }; // Used for both shadow test and ray-scene intersection RayCollisionOutput detectNearestAABBCollision(vec3 rayOrigin, vec3 rayDirection, int startIdx, int endIdx, int ignoreIdx){ // Storage of matching collision: RayCollisionOutput retVal; retVal.tmin = INFINITY; // collision tmin value retVal.matchID = -1; // colliding object index Ray ray = Ray(rayOrigin, rayDirection, 0.0, INFINITY); // ---------Iterate over each object for collision------- for(int i=startIdx; i <= endIdx; i++){ if (ignoreIdx != i){ Ray invRay = ray; //invRay.direction = ray.direction; mat4 mt = allTransforms[i]; // the 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 < retVal.tmin){ retVal.tmin = invRay.tMin; retVal.matchID = i; retVal.matchInvRay = invRay; } } } } return retVal; } struct RayHitInfo { vec3 pos; // hitpos vec3 normal; // hitnormal }; RayHitInfo getRayHitInfo(RayCollisionOutput rco, Ray ray) { RayHitInfo retVal; vec3 q = pointOnRay(rco.matchInvRay, rco.tmin); // hitpoint on cannonical scene retVal.pos = pointOnRay(ray, rco.tmin); // hitpoint on real scene vec3 N = getNormal(cannonical_aabb, q); // normal on cannonical aabb vec4 realN4 = allTransforms[rco.matchID] * vec4(N,0.0); // normal on real scene homogenous vector retVal.normal = normalize(vec3(realN4[0], realN4[1], realN4[2])); // normal on real scene return retVal; } vec3 getRandomHemisphereSample(vec3 realNormal, vec3 hitpos, float randomZ, float randomPhi){ float r = sqrt(1.0 - randomZ * randomZ); vec3 d = vec3(hitpos.x + r * cos(randomPhi), hitpos.y + r * sin(randomPhi), hitpos.z + randomZ); //--find U,V,W such that Normal == W and U,V,W are orthogonal vec3 tempVector = realNormal; if (abs(realNormal.x) < abs(realNormal.y) && abs(realNormal.x) < abs(realNormal.z)) tempVector.x = 1.0; else if (abs(realNormal.y) < abs(realNormal.x) && abs(realNormal.y) < abs(realNormal.z)) tempVector.y = 1.0; else tempVector.z = 1.0; vec3 U = normalize(cross(tempVector,realNormal)); vec3 V = cross(realNormal,U); vec3 W = realNormal; //-- vec3 dsample = vec3(dot(d, U) , dot(d, V), dot(d, W)); return dsample; } vec3 pixelColor(vec2 pixel){ vec3 color = Background; allTransforms[0] = mtFloor; allTransforms[1] = mtRoof; allTransforms[2] = mtWallBack; allTransforms[3] = mtWallLeft; allTransforms[4] = mtWallRight; allTransforms[5] = mtBig; allTransforms[6] = mtSmall; matCols[0] = vec3(1.0,0.99,0.81); matCols[1] = vec3(1.0,0.99,0.81); matCols[2] = vec3(1.0,0.99,0.81); matCols[3] = vec3(0.9,0.1,0.1); matCols[4] = vec3(0.1,0.9,0.1); matCols[5] = vec3(1.0,0.99,0.81); matCols[6] = vec3(1.0,0.99,0.81); // -------------- Ray Base (Common for all Samples) ------------------ 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; vec2 pixelOriginOffset = pixelSize * (-0.5); // Now the ray that goes through pixel origin will be like: // getRayDirection(pixelOriginOffset, delta, cameraU, cameraV, cameraW); // ------------------- Pixel Samples ------------------------- float numSamples = 0.0; int numDivisions = numDivs; // per direction int numSamplesPerDiv = numSmpDiv; vec2 squareSize = vec2(pixelSize / float(numDivisions)); // stratified cell size vec3 L_pixel = vec3(0.0); // color of the pixel for(int cols = 0; cols < numDivisions; cols++){ for(int rows = 0; rows < numDivisions; rows++){ vec2 minPointOffset = pixelOriginOffset + vec2(squareSize.x * float(cols), squareSize.y * float(rows)); AffineSquare asPixel = GenerateAffineSquare(minPointOffset, minPointOffset + squareSize); // samples per division for(int s=0; s < numSamplesPerDiv; s++){ numSamples += 1.0; vec2 this_posOffset = getAffineUVPos( asPixel, gold_noise(pixel, fract(time)+ numSamples * 6.0 + 1.0), gold_noise(pixel, fract(time)+ numSamples * 6.0 + 2.0) ); //------------------ Processing the Pixel Sample : Start ------------------- // set the the Ray origin and direction of first iteration vec3 originPoint = cameraEye; // ray of the sample ( same origin, random uv direction) vec3 rayDirection = getRayDirection(this_posOffset, delta, cameraU, cameraV, cameraW); // get ray sample direction //--- Calc first hit point for Emitter hit--- Ray current_ray = Ray(originPoint, rayDirection, 0.0, INFINITY); RayCollisionOutput current_rco = detectNearestAABBCollision(current_ray.origin, current_ray.direction, 0, 6, -1); RayHitInfo rayhit; if(current_rco.matchID > -1){ //--- Check if its a point on the emitter--- vec3 p = pointOnRay(current_ray,current_rco.tmin); // hitpoint on real scene if(lightPosMin.x <= p.x && p.x <= lightPosMax.x && lightPosMin.y <= p.y && p.y <= lightPosMax.y && lightPosMin.z <= p.z && p.z <= lightPosMax.z){ L_pixel = L_pixel + vec3(1.0); // L_emission == vec3(1.0) }else{ //--- Not a point on the emitter, therefore, process pathing--- // initial rayhit rayhit = getRayHitInfo(current_rco, current_ray); vec3 factor = vec3(1.0); // color Of Previous Path Bounces //-------- bounces start -------- for(int itr = 0; itr < numBounces ; itr++){ // light point sample vec3 this_randomlightpos = getLightPosSample(pixel, numSamples); vec3 lightNormal = vec3(0.0, -1.0, 0.0); vec3 distVec = this_randomlightpos - rayhit.pos; // direct lighting vec3 L_direct = clamp( matCols[current_rco.matchID] * dot(rayhit.normal, normalize(this_randomlightpos - rayhit.pos)) * dot(lightNormal, normalize(p - this_randomlightpos)) / ( dot(distVec,distVec) ) , 0.0, 1.0); // ------- Shadow Computation ---------- vec3 shadowRayDir = normalize(this_randomlightpos - rayhit.pos); float tmin_base; // calc tmin_base checkRayVsSphereCollision(rayhit.pos, shadowRayDir, this_randomlightpos, 0.0001, tmin_base); // iterate over each shadow enabled object for collision, ignore collision with current object RayCollisionOutput shadow_rco = detectNearestAABBCollision(rayhit.pos, shadowRayDir, 5, 6, current_rco.matchID); // apply shadowing effect if collision occurred if(shadow_rco.tmin <= tmin_base){ L_direct = vec3(0.0); } L_pixel = L_pixel + factor * L_direct; // ---- indirect lighting ---- factor = factor * matCols[current_rco.matchID]; // sampling the hemisphere direction float rnd_z = gold_noise(pixel, fract(time)+ numSamples * 6.0 + 5.0); float rnd_phi = 2.0 * PI * gold_noise(pixel, fract(time)+ numSamples * 6.0 + 6.0); vec3 dirSample = getRandomHemisphereSample(rayhit.normal, rayhit.pos, rnd_z, rnd_phi); originPoint = rayhit.pos; // next iteration origin rayDirection = dirSample; // next iteration direction current_ray = Ray(originPoint, rayDirection, 0.0, INFINITY); current_rco = detectNearestAABBCollision(current_ray.origin, current_ray.direction, 0, 6, -1); // --- process if there are any collisions --- if(current_rco.matchID > -1){ rayhit = getRayHitInfo(current_rco, current_ray); }else{ break; } } //-------- bounces end -------- } // emmision check end } // collision with an object end //------------------ Processing the Pixel Sample : End ------------------- } // for samples } // for rows } // for cols return clamp(theExposure * L_pixel / numSamples, 0.0, 1.0); } ` ]36:T9ec,{ // 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.2, 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, theExposure : dataInputs.theExposure, numDivs: dataInputs.numDivs, numSmpDiv: dataInputs.numSamplesPerDiv, numBounces: dataInputs.numBounces, 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":"8593a3941baa2316","slug":"cap6721-chathura-assignment-09-ucfid-3948890","title":"[CAP6721] Chathura Assignment 09 (UCFID: 3948890)","thumbnail":null,"access_level":"public","create_time":"$D2021-03-16T22:48:22.475Z","update_time":"$D2021-03-23T23:39:07.356Z","view_time":null,"first_public_time":"$D2022-12-28T01:26:24.002Z","has_unpublished_edits":null,"fork":true,"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":1363,"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 09 (UCFID: 3948890)","cells":[{"id":853,"value":"md`# [CAP6721] Chathura Assignment 09 (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 theExposure: slider({\n title: \"Exposure Effect\",\n min: 0.01,\n max: 10.0,\n step: 0.01,\n sliderStyle: {\n width: '150px'\n },\n value: 2.0\n }),\n numDivs: slider({\n title: \"Num of Divisions Per Side\",\n min: 1.0,\n max: 50.0,\n step: 1.0,\n sliderStyle: {\n width: '150px'\n },\n value: 4.0\n }),\n numSamplesPerDiv: slider({\n title: \"Num of Samples Per Division\",\n min: 1.0,\n max: 20.0,\n step: 1.0,\n sliderStyle: {\n width: '150px'\n },\n value: 10.0\n }),\n numBounces: slider({\n title: \"Num. Path Bounces\",\n min: 1,\n max: 50,\n step: 1,\n sliderStyle: {\n width: '150px'\n },\n value: 5\n })\n})","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: 2.0,\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 - 0.001, -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 + 0.001, 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 { color, checkbox } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"import {slider} from '@bartok32/diy-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"