29:null 2a:["$","title",null,{"children":"Final Project: Computer Graphics 2021 | Samuel Eslick | Observable"}] 2f:T8f0,move = { let {position, score, lives, facing} = mutable player; let foo = count; while (!mutable gameover || !mutable win) { //move stuff // Make sure the current position is near a whole number if (true) { // Movement North --------------------------------------------------------- if (facing == "north") { // First test to pretect against looking out-of-bounds if ((position.z != 0)) { // Test to see if key is pressed and position north of current is not a wall if ((mazeArray[position.z - 1][position.x] != g_colors.wallColor)) { position.z = position.z - 1; } } } // Movement South --------------------------------------------------------- if (facing == "south") { // First test to pretect against looking out-of-bounds if ((position.z != 18)) { // Test to see if key is pressed and position south of current is not a wall if ((mazeArray[position.z + 1][position.x] != g_colors.wallColor)) { position.z = position.z + 1; } } } // Movement East --------------------------------------------------------- if (facing == "east") { // First test to pretect against looking out-of-bounds if ((position.x != 18)) { // Test to see if key is pressed and position east of current is not a wall if ((mazeArray[position.z][position.x + 1] != g_colors.wallColor)) { position.x = position.x + 1; } } } // Movement West --------------------------------------------------------- if (facing == "west") { // First test to pretect against looking out-of-bounds if ((position.x != 0)) { // Test to see if key is pressed and position west of current is not a wall if ((mazeArray[position.z][position.x - 1] != g_colors.wallColor)) { position.x = position.x - 1; } } } } scoreTest(score); mutable player = {position, score, lives, facing}; if (mutable lives < 0) mutable gameover = true; return md` This block changes player position based on their direction`; } }30:T1e08,moveEnemy = { let {position, moved, facing, mode, cycle, notMoved} = mutable enemy; moved = false; let foo = count; while (!mutable gameover || !mutable win) { let n = false; let w = false; let e = false; let s = false; // Test to see if current enemy position is a junction if (isJunc() == true) { let xDiff = position.x - mutable player.position.x; let zDiff = position.z - mutable player.position.z; if (mode == "running") { xDiff *= -1; zDiff *= -1; } // which ever diff value is larger in magnitute, give that priority choice // If x diff is greater if (Math.abs(xDiff) > Math.abs(zDiff)) { // Try to move in x direction // if diff is positive, move west if (xDiff > 0) { if (w == true || mode == "ghost") { facing = "west"; doMove(); } else if (zDiff > 0) { // if west is a wall, try to move in x if (n == true) { facing = "north"; doMove(); } } else if (zDiff < 0) { // if diff is negative, move south if (s == true) { facing = "south"; doMove(); } } } else if (xDiff < 0) { // if diff is negative, move east if (e == true || mode == "ghost") { facing = "east" doMove(); } else if (zDiff > 0) { // if east is a wall, try to move in x if (n == true) { facing = "north"; doMove(); } } else if (zDiff < 0) { // if diff is negative, move south if (s == true) { facing = "south"; doMove(); } } else if (zDiff == 0) { if (n == true && s == true) { let rand = Math.floor(Math.random() * 2); if (rand == 0) { facing = "north"; doMove(); } else { facing = "south"; doMove(); } } else { if (n == true) { facing = "north"; doMove(); } else { facing = "south"; doMove(); } } } } } else { // If z diff is greater // Try to move in z direction // of diff is positive, move north if (zDiff > 0) { if (n == true || mode == "ghost") { facing = "north"; doMove(); } else if (xDiff > 0) { // if north is a wall, try to move in x if (w == true) { facing = "west"; doMove(); } } else if (xDiff < 0) { // if diff is negative, move east if (e == true) { facing = "east" doMove(); } } } else if (zDiff < 0) { // if diff is negative, move south if (s == true || mode == "ghost") { facing = "south"; doMove(); } else if (xDiff > 0) { // if south is a wall, try to move in x if (w == true) { facing = "west"; doMove(); } } else if (xDiff < 0) { // if diff is negative, move east if (e == true) { facing = "east" doMove(); } } else if (xDiff == 0) { if (w == true && e == true) { let rand = Math.floor(Math.random() * 2); if (rand == 0) { facing = "west"; doMove(); } else { facing = "east"; doMove(); } } else { if (w == true) { facing = "west"; doMove(); } else { facing = "east"; doMove(); } } } } } } else { doMove(); } function isJunc() { let sum = 0; // Test for wall if (position.z != 0) { if (mazeArray[position.z - 1][position.x] != g_colors.wallColor || mode == "ghost") { n = true; sum += 1; } } // Test for wall if (position.x != 0) { if (mazeArray[position.z][position.x - 1] != g_colors.wallColor || mode == "ghost") { w = true; sum += 1; } } // Test for wall if (position.x != 18) { if (mazeArray[position.z][position.x + 1] != g_colors.wallColor || mode == "ghost") { e = true; sum += 1; } } // Test for wall if (position.z != 18) { if (mazeArray[position.z + 1][position.x] != g_colors.wallColor || mode == "ghost") { s = true; sum += 1; } } if (sum > 1) { return true; } else { return false; } } function doMove() { cycle -= 1; if (cycle == 0) { if (mode == "ghost") { mode = "chasing"; cycle = 10; } } // Movement North --------------------------------------------------------- if (facing == "north") { // First test to pretect against looking out-of-bounds if ((position.z != 0)) { // Test to see if key is pressed and position north of current is not a wall if ((mazeArray[position.z - 1][position.x] != g_colors.wallColor) || mode == "ghost") { moved = true; position.z = position.z - 1; } } } // Movement South --------------------------------------------------------- if (facing == "south") { // First test to pretect against looking out-of-bounds if ((position.z != 18)) { // Test to see if key is pressed and position south of current is not a wall if ((mazeArray[position.z + 1][position.x] != g_colors.wallColor) || mode == "ghost") { moved = true; position.z = position.z + 1; } } } // Movement East --------------------------------------------------------- if (facing == "east") { // First test to pretect against looking out-of-bounds if ((position.x != 18)) { // Test to see if key is pressed and position east of current is not a wall if ((mazeArray[position.z][position.x + 1] != g_colors.wallColor) || mode == "ghost") { moved = true; position.x = position.x + 1; } } } // Movement West --------------------------------------------------------- if (facing == "west") { // First test to pretect against looking out-of-bounds if ((position.x != 0)) { // Test to see if key is pressed and position west of current is not a wall if ((mazeArray[position.z][position.x - 1] != g_colors.wallColor) || mode == "ghost") { moved = true; position.x = position.x - 1; } } } } if (moved == false) { notMoved += 1; } if (notMoved > 3) { notMoved = 0; mode = "ghost"; cycle = 2; } //die(); mutable enemy = {position, moved, facing, mode, cycle, notMoved}; return md` This block changes enemy position based on player position`; } }31:T1eb7,moveEnemy2 = { let {position, moved, facing, mode, cycle, notMoved} = mutable enemy2; moved = false; let foo = count; while (!mutable gameover || !mutable win) { let n = false; let w = false; let e = false; let s = false; // Test to see if current enemy position is a junction if (isJunc() == true) { let xDiff = position.x - mutable player.position.x; let zDiff = position.z - mutable player.position.z; if (mode == "running") { xDiff *= -1; zDiff *= -1; } // which ever diff value is larger in magnitute, give that priority choice // If x diff is greater if (Math.abs(xDiff) > Math.abs(zDiff)) { // Try to move in x direction // if diff is positive, move west if (xDiff > 0) { if (w == true || mode == "ghost") { facing = "west"; doMove(); } else if (zDiff > 0) { // if west is a wall, try to move in x if (n == true) { facing = "north"; doMove(); } } else if (zDiff < 0) { // if diff is negative, move south if (s == true) { facing = "south"; doMove(); } } } else if (xDiff < 0) { // if diff is negative, move east if (e == true || mode == "ghost") { facing = "east" doMove(); } else if (zDiff > 0) { // if east is a wall, try to move in x if (n == true) { facing = "north"; doMove(); } } else if (zDiff < 0) { // if diff is negative, move south if (s == true) { facing = "south"; doMove(); } } else if (zDiff == 0) { if (n == true && s == true) { let rand = Math.floor(Math.random() * 2); if (rand == 0) { facing = "north"; doMove(); } else { facing = "south"; doMove(); } } else { if (n == true) { facing = "north"; doMove(); } else { facing = "south"; doMove(); } } } } } else { // If z diff is greater // Try to move in z direction // of diff is positive, move north if (zDiff > 0) { if (n == true || mode == "ghost") { facing = "north"; doMove(); } else if (xDiff > 0) { // if north is a wall, try to move in x if (w == true) { facing = "west"; doMove(); } } else if (xDiff < 0) { // if diff is negative, move east if (e == true) { facing = "east" doMove(); } } } else if (zDiff < 0) { // if diff is negative, move south if (s == true || mode == "ghost") { facing = "south"; doMove(); } else if (xDiff > 0) { // if south is a wall, try to move in x if (w == true) { facing = "west"; doMove(); } } else if (xDiff < 0) { // if diff is negative, move east if (e == true) { facing = "east" doMove(); } } else if (xDiff == 0) { if (w == true && e == true) { let rand = Math.floor(Math.random() * 2); if (rand == 0) { facing = "west"; doMove(); } else { facing = "east"; doMove(); } } else { if (w == true) { facing = "west"; doMove(); } else { facing = "east"; doMove(); } } } } } } else { doMove(); } function isJunc() { let sum = 0; // Test for wall if (position.z != 0) { if (mazeArray[position.z - 1][position.x] != g_colors.wallColor || mode == "ghost") { n = true; sum += 1; } } // Test for wall if (position.x != 0) { if (mazeArray[position.z][position.x - 1] != g_colors.wallColor || mode == "ghost") { w = true; sum += 1; } } // Test for wall if (position.x != 18) { if (mazeArray[position.z][position.x + 1] != g_colors.wallColor || mode == "ghost") { e = true; sum += 1; } } // Test for wall if (position.z != 18) { if (mazeArray[position.z + 1][position.x] != g_colors.wallColor || mode == "ghost") { s = true; sum += 1; } } if (sum > 1) { return true; } else { return false; } } function doMove() { cycle -= 1; if (cycle == 0) { if (mode == "ghost") { mode = "chasing"; } } // Movement North --------------------------------------------------------- if (facing == "north") { // First test to pretect against looking out-of-bounds if ((position.z != 0)) { // Test to see if key is pressed and position north of current is not a wall if ((mazeArray[position.z - 1][position.x] != g_colors.wallColor) || mode == "ghost") { moved = true; position.z = position.z - 1; } } } // Movement South --------------------------------------------------------- if (facing == "south") { // First test to pretect against looking out-of-bounds if ((position.z != 18)) { // Test to see if key is pressed and position south of current is not a wall if ((mazeArray[position.z + 1][position.x] != g_colors.wallColor) || mode == "ghost") { moved = true; position.z = position.z + 1; } } } // Movement East --------------------------------------------------------- if (facing == "east") { // First test to pretect against looking out-of-bounds if ((position.x != 18)) { // Test to see if key is pressed and position east of current is not a wall if ((mazeArray[position.z][position.x + 1] != g_colors.wallColor) || mode == "ghost") { moved = true; position.x = position.x + 1; } } } // Movement West --------------------------------------------------------- if (facing == "west") { // First test to pretect against looking out-of-bounds if ((position.x != 0)) { // Test to see if key is pressed and position west of current is not a wall if ((mazeArray[position.z][position.x - 1] != g_colors.wallColor) || mode == "ghost") { moved = true; position.x = position.x - 1; } } } } if (cycle <= 0 && mode == "chasing") { mode = "running"; cycle = 2; } if (cycle <= 0 && mode == "running") { mode = "chasing"; cycle = 18; } if (moved == false) { notMoved += 1; } if (notMoved > 3) { notMoved = 0; mode = "ghost"; cycle = 2; } //die(); mutable enemy2 = {position, moved, facing, mode, cycle, notMoved}; return md` This block changes enemy position based on player position`; } }32:T412,generateCameraMatrices = function(eyePosition, lookAt, fov) { /* ---- Calculating the camera position ---- */ // We know the camera's position. To generate the rest of the view matrix, however, we need to // specify what we're looking at as well as what is our relative "up" vector. const upVector = v3.create(0, 1, 0); // Our camera matrix is generated via the .lookAt function. However, that's not our viewMatrix const cameraMatrix = m4.lookAt(eyePosition, lookAt, upVector); // Invert the camera matrix to create our viewMatrix const viewMatrix = m4.inverse(cameraMatrix); // Now we need to build the projectionMatrix. const cameraFOVRad = deg2rad(fov); const aspect = gl.canvas.width / gl.canvas.height; // Configure as necessary, but I'm not having any trouble with these values. const zNear = 1; const zFar = 1000; /* ---- Generating the projectionMatrix ---- */ const projectionMatrix = m4.perspective(cameraFOVRad, aspect, zNear, zFar) return {view: viewMatrix, projection: projectionMatrix} }33:T871,generatedPlaneObject = { const scale = planeOptions.size / planeOptions.resolution; //const scale = 2; // Prepare our mandatory pieces of information const objectName = "generatedPlaneObj"; const modelMatrix = m4.identity(); // Create our sc object const sc = {}; // Create our points const centerPoint = planeOptions.size / 2 const positions = [] const normals = []; for (let resPointX = 0; resPointX < planeOptions.resolution; ++resPointX) { for (let resPointY = 0; resPointY < planeOptions.resolution; ++resPointY) { // Generate this point const thisPoint = v3.create(resPointX * scale, 0.0, resPointY * scale); // Generate a normal for this point const thisNormal = v3.create(0, 0, 1); positions.push(thisPoint); normals.push(thisNormal); } } const triangles = new Uint16Array(planeOptions.resolution * planeOptions.resolution * 6); for (let ti = 0, vi = 0, y = 0; y < planeOptions.resolution - 1; y++, vi++) { for (let x = 0; x < planeOptions.resolution - 1; x++, ti += 6, vi++) { triangles[ti] = vi; triangles[ti + 3] = triangles[ti + 2] = vi + 1; triangles[ti + 4] = triangles[ti + 1] = vi + planeOptions.resolution; triangles[ti + 5] = vi + planeOptions.resolution + 1; } } // Create the basic array from our fancy arrays. const numPoints = positions.length; let formalPositions = new Float32Array(numPoints * 3); let formalNormals = new Float32Array(numPoints * 3); for (let pointIndex = 0; pointIndex < numPoints; ++pointIndex) { const arrayIndex = pointIndex * 3; const position = positions[pointIndex]; const normal = normals[pointIndex]; formalPositions[arrayIndex] = position[0]; formalPositions[arrayIndex + 1] = position[1]; formalPositions[arrayIndex + 2] = position[2]; formalNormals[arrayIndex] = normal[0]; formalNormals[arrayIndex + 1] = normal[1]; formalNormals[arrayIndex + 2] = normal[2]; } sc.positions = formalPositions; sc.normals = formalNormals; sc.indices = triangles; return [{ name: objectName, modelMatrix: modelMatrix, sc: sc }] }34:T56a,renderScene = (sceneProgramInfo, viewMatrix, projectionMatrix) => { //for (let i = 0; i < imgDim[0]; i++) { //for (let j = 0; j < imgDim[1]; j++) { gl.useProgram(sceneProgramInfo.program); let planeMatrix = m4.translate(m4.identity(), v3.create((9 * 2) + 1, 0, 0)); planeMatrix = m4.translate(planeMatrix, v3.create(0, 0, (9 * 2) + 1)); planeMatrix = m4.translate(planeMatrix, v3.create(0, (-19 * 3) + 1, 0)); planeMatrix = m4.scale(planeMatrix, v3.create(19, 19, 19)); const uniforms = { // Add any required uniform variable name and value pair modelMatrix: planeMatrix, viewMatrix, projectionMatrix, trans: [(1 * 2) + 1, 10, (1 * 2) + 1], tileColor: hex2rgb(mazeArray[1][1]), eyePosition: cameraPosition, lightPosition: lightPos, material: hex2rgb(lightingColors.materialColor), ambient: materialProperties.ambientPercent / 100.0, spec: hex2rgb(lightingColors.specularColor), shading: generalLightSettings.shadingFactor, shine: materialProperties.shine, alpha: 1 }; twgl.setUniforms(sceneProgramInfo, uniforms); sceneBufferInfoArray.forEach((bufferInfo) => { twgl.setBuffersAndAttributes(gl, sceneProgramInfo, bufferInfo); twgl.drawBufferInfo(gl, bufferInfo); }); //} //} }35:T448,renderOcean = (time, deltaTime) => { let planeMatrix = m4.translate(m4.identity(), v3.create(0, -5, 0)); gl.useProgram(waterProgram.program); const uniforms = { viewMatrix: getViewMatrix(camR, deg2rad(camX),deg2rad(camY)), projectionMatrix: getProjectionMatrix(fov_Y, near, far), modelMatrix: planeMatrix, // Center of the ocean, ocean settings centerPoint: center, validRadius: planeClipRadius, backgroundColor: backgroundColor, baseColor: hex2rgb(fragmentColors.base), highlightColor: hex2rgb(fragmentColors.highlight), // Ocean noise settings wave1Settings: v3.create(wave1Settings.amplitude, wave1Settings.frequency, wave1Settings.noiseScaling), wave2Settings: v3.create(wave2Settings.amplitude, wave2Settings.frequency, wave2Settings.noiseScaling), time, deltaTime, shift: [test.x, 0, test.z], scale: test.s }; twgl.setUniforms(waterProgram, uniforms); objectInfoArrays.forEach((bufferInfo) => { twgl.setBuffersAndAttributes(gl, waterProgram, bufferInfo); twgl.drawBufferInfo(gl, bufferInfo); }); }36:T8b7,renderTreasure = (sceneProgramInfo, viewMatrix, projectionMatrix) => { for (let i = 0; i < imgDim[0]; i++) { for (let j = 0; j < imgDim[1]; j++) { // Render if (mazeArray[j][i] == i_colors.coinColor || mazeArray[j][i] == i_colors.treasureColor) { gl.useProgram(sceneProgramInfo.program); let tMatrix = m4.translate(m4.identity(), v3.create((i * 2) + 1, 0, 0)); tMatrix = m4.translate(tMatrix, v3.create(0, 0, (j * 2) + 1)); tMatrix = m4.translate(tMatrix, v3.create(0, 13, 0)); mutable tRot += 0.1 if (mutable tRot > 360) { mutable tRot -= 360; } let a = mutable tRot; let op = 1; let obj = coin; let tColor = i_colors.coinColor; if (mazeArray[j][i] == i_colors.coinColor) { obj = coin; tColor = i_colors.coinColor; tMatrix = m4.scale(tMatrix, v3.create(1.25, 1.25, 1.25)); tMatrix = m4.rotateX(tMatrix, deg2rad(-90), tMatrix); m4.rotateZ(tMatrix, deg2rad(a), tMatrix); op = 1; } if (mazeArray[j][i] == i_colors.treasureColor) { obj = gem; a = -1 * mutable tRot; tColor = i_colors.treasureColor; tMatrix = m4.scale(tMatrix, v3.create(2.25, 2, 2.25)); m4.rotateY(tMatrix, deg2rad(a), tMatrix); op = 0.75; } const uniforms = { // Add any required uniform variable name and value pair modelMatrix: tMatrix, viewMatrix, projectionMatrix, trans: [(i * 2) + 1, 10, (j * 2) + 1], tileColor: hex2rgb(mazeArray[j][i]), eyePosition: cameraPosition, lightPosition: lightPos, material: hex2rgb(lightingColors.materialColor), ambient: materialProperties.ambientPercent / 100.0, spec: hex2rgb(tColor), shading: 0.4, shine: 2.0, alpha: op }; twgl.setUniforms(sceneProgramInfo, uniforms); wallBufferInfoArray(obj).forEach((bufferInfo) => { twgl.setBuffersAndAttributes(gl, sceneProgramInfo, bufferInfo); twgl.drawBufferInfo(gl, bufferInfo); }); } } } }37:T1724,renderWalls = (sceneProgramInfo, viewMatrix, projectionMatrix) => { for (let i = 0; i < imgDim[0]; i++) { for (let j = 0; j < imgDim[1]; j++) { // Render if (mazeArray[j][i] == g_colors.wallColor) { gl.useProgram(sceneProgramInfo.program); let wallMatrix = m4.translate(m4.identity(), v3.create((i * 2) + 1, 0, 0)); wallMatrix = m4.translate(wallMatrix, v3.create(0, 0, (j * 2) + 1)); wallMatrix = m4.translate(wallMatrix, v3.create(0, 10, 0)); let a = 0; // Run six tests to see which wall to use let top = false; let left = false; let right = false; let bottom = false; let sideCount = 0; // First test for each direction // Top if (j != 0) { if (mazeArray[j - 1][i] == g_colors.wallColor) { top = true; sideCount += 1; } } // Left if (i != 0) { if (mazeArray[j][i - 1] == g_colors.wallColor) { left = true; sideCount += 1; } } // Right if (i != 18) { if (mazeArray[j][i + 1] == g_colors.wallColor) { right = true; sideCount += 1; } } // Bottom if (j != 18) { if (mazeArray[j + 1][i] == g_colors.wallColor) { bottom = true; sideCount +=1; } } let obj = wall1; // Now, find out which wall is needed // All four sides (Not present, but would be needed for a different layout) // Three sides if (true) { // Open side facing North if (top == false && right == true && left == true && bottom == true) { obj = wall5; a = -90; } // Open side facing West if (left == false && top == true && right == true && bottom == true) { obj = wall5; a = 0; } // Open side facing East if (right == false && top == true && left == true && bottom == true) { obj = wall5; a = 180; } // Open side facing South if (bottom == false && top == true && left == true && right == true) { obj = wall5; a = 90; } } if (true) { // Two sides parallel // Open sides on North and South if (top == false && bottom == false && left == true && right == true) { obj = wall3; } // Open sides on West and East if (left == false && right == false && top == true && bottom == true) { obj = wall3; a = 90; } // Two sides perpendicular // Open sides on North and East if (top == false && right == false && bottom == true && left == true) { obj = wall4; a = -90; } // Open sides on East and South if (right == false && bottom == false && left == true && top == true) { obj = wall4; a = 180; } // Open sides on South and West if (bottom == false && left == false && top == true && right == true) { obj = wall4; a = 90; } // Open sides on West and North if (left == false && top == false && right == true && bottom == true) { obj = wall4; a = 0; } } // One side if (true) { // Side facing North if (top == true && bottom == false && left == false && right == false) { obj = wall2; a = -90; } // Side facing South if (bottom == true && top == false && left == false && right == false) { obj = wall2; a = 90; } // Side facing East if (right == true && top == false && bottom == false && left == false) { obj = wall2; a = 180; } // Side facing West if (left == true && top == false && right == false && bottom == false) { obj = wall2; a = 0; } } // No sides if (left == false && top == false && right == false && bottom == false) { obj = wall6; } const uniforms = { // Add any required uniform variable name and value pair modelMatrix: m4.rotateY(wallMatrix, deg2rad(a), wallMatrix), viewMatrix, projectionMatrix, trans: [(i * 2) + 1, 10, (j * 2) + 1], tileColor: hex2rgb(mazeArray[j][i]), eyePosition: cameraPosition, lightPosition: lightPos, material: hex2rgb(lightingColors.materialColor), ambient: materialProperties.ambientPercent / 100.0, spec: hex2rgb(g_colors.wallColor), shading: generalLightSettings.shadingFactor, shine: materialProperties.shine }; twgl.setUniforms(sceneProgramInfo, uniforms); wallBufferInfoArray(obj).forEach((bufferInfo) => { twgl.setBuffersAndAttributes(gl, sceneProgramInfo, bufferInfo); twgl.drawBufferInfo(gl, bufferInfo); }); } } } }38:T848,renderPlayer = (sceneProgramInfo, viewMatrix, projectionMatrix) => { gl.useProgram(sceneProgramInfo.program); let playerMatrix = m4.translate(m4.identity(), v3.create((player.position.x * 2) + 1, 0, 0)); playerMatrix = m4.translate(playerMatrix, v3.create(0, 0, (player.position.z * 2) + 1)); playerMatrix = m4.translate(playerMatrix, v3.create(0, 10, 0)); playerMatrix = m4.scale(playerMatrix, v3.create(0.1, 0.1, 0.1)); playerMatrix = m4.rotateX(playerMatrix, deg2rad(-90), playerMatrix); if (mutable player.facing == "north") { // Do not rotate } if (mutable player.facing == "south") { playerMatrix = m4.rotateZ(playerMatrix, deg2rad(180), playerMatrix); } if (mutable player.facing == "east") { playerMatrix = m4.rotateZ(playerMatrix, deg2rad(-90), playerMatrix); } if (mutable player.facing == "west") { playerMatrix = m4.rotateZ(playerMatrix, deg2rad(90), playerMatrix); } let obj = char; let c = choice.custom; if (choice.r == "Red") { c = colorList.one; } else if (choice.r == "Orange") { c = colorList.two; } else if (choice.r == "Yellow") { c = colorList.three; } else if (choice.r == "Green") { c = colorList.four; } else if (choice.r == "Cyan") { c = colorList.five; } else if (choice.r == "Blue") { c = colorList.six; } else if (choice.r == "Purple") { c = colorList.seven; } else { c = choice.custom; } const uniforms = { // Add any required uniform variable name and value pair modelMatrix: playerMatrix, viewMatrix, projectionMatrix, trans: [0, 0, 0], eyePosition: cameraPosition, lightPosition: lightPos, material: hex2rgb(lightingColors.materialColor), ambient: materialProperties.ambientPercent / 100.0, spec: hex2rgb(c), shading: generalLightSettings.shadingFactor, shine: materialProperties.shine }; twgl.setUniforms(sceneProgramInfo, uniforms); wallBufferInfoArray(obj).forEach((bufferInfo) => { twgl.setBuffersAndAttributes(gl, sceneProgramInfo, bufferInfo); twgl.drawBufferInfo(gl, bufferInfo); }); }39:T66c,renderEnemy = (sceneProgramInfo, viewMatrix, projectionMatrix) => { gl.useProgram(sceneProgramInfo.program); let eMatrix = m4.translate(m4.identity(), v3.create((enemy.position.x * 2) + 1, 0, 0)); eMatrix = m4.translate(eMatrix, v3.create(0, 0, (enemy.position.z * 2) + 1)); eMatrix = m4.translate(eMatrix, v3.create(0, 10, 0)); eMatrix = m4.scale(eMatrix, v3.create(0.06, 0.06, 0.06)); eMatrix = m4.rotateX(eMatrix, deg2rad(-90), eMatrix); eMatrix = m4.rotateZ(eMatrix, deg2rad(-90), eMatrix); if (mutable enemy.facing == "north") { // Do not rotate } if (mutable enemy.facing == "south") { eMatrix = m4.rotateZ(eMatrix, deg2rad(180), eMatrix); } if (mutable enemy.facing == "east") { eMatrix = m4.rotateZ(eMatrix, deg2rad(-90), eMatrix); } if (mutable enemy.facing == "west") { eMatrix = m4.rotateZ(eMatrix, deg2rad(90), eMatrix); } let obj = ghost; const uniforms = { // Add any required uniform variable name and value pair modelMatrix: eMatrix, viewMatrix, projectionMatrix, trans: [0, 0, 0], eyePosition: cameraPosition, lightPosition: lightPos, material: hex2rgb(lightingColors.materialColor), ambient: materialProperties.ambientPercent / 100.0, spec: hex2rgb(ghostColors.one), shading: generalLightSettings.shadingFactor, shine: materialProperties.shine, alpha }; twgl.setUniforms(sceneProgramInfo, uniforms); wallBufferInfoArray(obj).forEach((bufferInfo) => { twgl.setBuffersAndAttributes(gl, sceneProgramInfo, bufferInfo); twgl.drawBufferInfo(gl, bufferInfo); if (alpha < 1) gl.disable(gl.BLEND); }); }3a:T673,renderEnemy2 = (sceneProgramInfo, viewMatrix, projectionMatrix) => { gl.useProgram(sceneProgramInfo.program); let eMatrix = m4.translate(m4.identity(), v3.create((enemy2.position.x * 2) + 1, 0, 0)); eMatrix = m4.translate(eMatrix, v3.create(0, 0, (enemy2.position.z * 2) + 1)); eMatrix = m4.translate(eMatrix, v3.create(0, 10, 0)); eMatrix = m4.scale(eMatrix, v3.create(0.06, 0.06, 0.06)); eMatrix = m4.rotateX(eMatrix, deg2rad(-90), eMatrix); eMatrix = m4.rotateZ(eMatrix, deg2rad(-90), eMatrix); if (mutable enemy2.facing == "north") { // Do not rotate } if (mutable enemy2.facing == "south") { eMatrix = m4.rotateZ(eMatrix, deg2rad(180), eMatrix); } if (mutable enemy2.facing == "east") { eMatrix = m4.rotateZ(eMatrix, deg2rad(-90), eMatrix); } if (mutable enemy2.facing == "west") { eMatrix = m4.rotateZ(eMatrix, deg2rad(90), eMatrix); } let obj = ghost; const uniforms = { // Add any required uniform variable name and value pair modelMatrix: eMatrix, viewMatrix, projectionMatrix, trans: [0, 0, 0], eyePosition: cameraPosition, lightPosition: lightPos, material: hex2rgb(lightingColors.materialColor), ambient: materialProperties.ambientPercent / 100.0, spec: hex2rgb(ghostColors.two), shading: generalLightSettings.shadingFactor, shine: materialProperties.shine, alpha }; twgl.setUniforms(sceneProgramInfo, uniforms); wallBufferInfoArray(obj).forEach((bufferInfo) => { twgl.setBuffersAndAttributes(gl, sceneProgramInfo, bufferInfo); twgl.drawBufferInfo(gl, bufferInfo); if (alpha < 1) gl.disable(gl.BLEND); }); }3b:T87b,renderFun = (sceneProgramInfo, viewMatrix, projectionMatrix) => { let numObjects = 11 let one = [-3, 4, 8, 4]; let two = [9, 5, 42, 3]; let three = [42, 6, 8, 4]; let four = [4, -3, -16, 5]; let five = [29, -7, -16, 7]; let six = [19, -7, -20, 29]; let seven = [29, -18, 42, 57]; let eight = [-1, -11, 19, 44]; let nine = [44, -1, 23, 19]; let ten = [31, 10, 38, 2]; let el = [10, 10, 38, 2]; let c = g_colors.wallColor; let obj = tree1; let posList = [one, two, three, four, five, six, seven, eight, nine, ten, el]; for (let i = 0; i < numObjects; i++) { for (let j = 0; j < 4; j+=4) { if (i + 1 <= 5) { c = g_colors.wallColor; obj = tree1; } else if ((i + 1) > 5 && (i + 1) <= 9) { c = g_colors.groundColor; obj = rock; } else if ((i + 1) > 9) { c = g_colors.fenceColor; obj = fence; } let scale = posList[i][j+3]; gl.useProgram(sceneProgramInfo.program); let planeMatrix = m4.translate(m4.identity(), v3.create(posList[i][j], 0, 0)); planeMatrix = m4.translate(planeMatrix, v3.create(0, 0, posList[i][j + 2])); planeMatrix = m4.translate(planeMatrix, v3.create(0, posList[i][j + 1], 0)); planeMatrix = m4.scale(planeMatrix, v3.create(scale, scale, scale)); const uniforms = { // Add any required uniform variable name and value pair modelMatrix: planeMatrix, viewMatrix, projectionMatrix, trans: [(1 * 2) + 1, 10, (1 * 2) + 1], tileColor: hex2rgb(mazeArray[1][1]), eyePosition: cameraPosition, lightPosition: lightPos, material: hex2rgb(lightingColors.materialColor), ambient: materialProperties.ambientPercent / 100.0, spec: hex2rgb(c), shading: generalLightSettings.shadingFactor, shine: materialProperties.shine, alpha: 1 }; twgl.setUniforms(sceneProgramInfo, uniforms); wallBufferInfoArray(obj).forEach((bufferInfo) => { twgl.setBuffersAndAttributes(gl, sceneProgramInfo, bufferInfo); twgl.drawBufferInfo(gl, bufferInfo); }); } } }3c:T8c6,litSceneProgramInfo = { const vs = `#version 300 es precision mediump float; in vec3 position; in vec3 normal; uniform mat4 modelMatrix; uniform mat4 viewMatrix; uniform mat4 projectionMatrix; uniform vec3 trans; out vec3 fragNormal; out vec3 fragPosition; void main () { vec3 shiftPos = position;// + trans; vec4 newPosition = modelMatrix*vec4(shiftPos,1); // Take position before it is given to the camera space // We want the light position to be in the world space fragPosition = newPosition.xyz; gl_Position = projectionMatrix*viewMatrix*modelMatrix*vec4(shiftPos,1); mat4 normalMatrix = transpose(inverse(modelMatrix)); vec3 newNormal = (normalMatrix * vec4(normal, 0)).xyz; fragNormal = normalize((normalMatrix*vec4(normal,0)).xyz); }`; const fs = `#version 300 es precision mediump float; out vec4 outColor; in vec3 fragNormal; in vec3 fragPosition; //uniform vec4 light; //uniform vec4 material; uniform vec3 tileColor; uniform vec3 lightPosition; uniform vec3 eyePosition; uniform vec3 material; uniform float ambient; uniform vec3 spec; uniform float shading; uniform float shine; uniform float alpha; void main() { vec3 L = lightPosition - fragPosition; vec3 V = normalize(eyePosition - fragPosition); vec3 H = normalize(V + L); vec3 colorDueToSpecularReflection = material * pow(clamp(dot(fragNormal, H), 0.0, 1.0), shine); float diffuse = dot(normalize(L), normalize(fragNormal)); vec3 colorDueToDiffuseReflection = spec * clamp(diffuse, 0.0, 1.0); vec3 colorDueToAmbientLightReflection = ambient * spec; vec3 finalColor = colorDueToAmbientLightReflection + (1.0 - shading) * colorDueToDiffuseReflection + shading * colorDueToSpecularReflection; outColor = vec4(finalColor, alpha); }`; errorBlockLit.style.height = "20px"; errorBlockLit.innerHTML = "Lit Program Shader compilation successful"; return twgl.createProgramInfo(gl, [vs, fs], (message) => { errorBlockLit.style.height = "400px"; errorBlockLit.innerHTML = "Scene Program Shader compilation error\n" + message; }); }3d:T1297,waterShaders = { const vertexShader = `#version 300 es in vec3 position; in vec3 normal; uniform mat4 modelMatrix; uniform mat4 viewMatrix; uniform mat4 projectionMatrix; uniform vec3 wave1Settings; uniform vec3 wave2Settings; uniform float time; uniform float deltaTime; uniform vec3 shift; uniform float scale; out vec3 fragNormal; // The normal vector of the fragment - associated with the gl_position out vec3 fragPosition; out float deltaTransform; // Noise vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); } vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } vec3 fade(vec3 t) { return t*t*t*(t*(t*6.0-15.0)+10.0); } float noise(vec3 P) { vec3 i0 = mod289(floor(P)), i1 = mod289(i0 + vec3(1.0)); vec3 f0 = fract(P), f1 = f0 - vec3(1.0), f = fade(f0); vec4 ix = vec4(i0.x, i1.x, i0.x, i1.x), iy = vec4(i0.yy, i1.yy); vec4 iz0 = i0.zzzz, iz1 = i1.zzzz; vec4 ixy = permute(permute(ix) + iy), ixy0 = permute(ixy + iz0), ixy1 = permute(ixy + iz1); vec4 gx0 = ixy0 * (1.0 / 7.0), gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5; vec4 gx1 = ixy1 * (1.0 / 7.0), gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5; gx0 = fract(gx0); gx1 = fract(gx1); vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0), sz0 = step(gz0, vec4(0.0)); vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1), sz1 = step(gz1, vec4(0.0)); gx0 -= sz0 * (step(0.0, gx0) - 0.5); gy0 -= sz0 * (step(0.0, gy0) - 0.5); gx1 -= sz1 * (step(0.0, gx1) - 0.5); gy1 -= sz1 * (step(0.0, gy1) - 0.5); vec3 g0 = vec3(gx0.x,gy0.x,gz0.x), g1 = vec3(gx0.y,gy0.y,gz0.y), g2 = vec3(gx0.z,gy0.z,gz0.z), g3 = vec3(gx0.w,gy0.w,gz0.w), g4 = vec3(gx1.x,gy1.x,gz1.x), g5 = vec3(gx1.y,gy1.y,gz1.y), g6 = vec3(gx1.z,gy1.z,gz1.z), g7 = vec3(gx1.w,gy1.w,gz1.w); vec4 norm0 = taylorInvSqrt(vec4(dot(g0,g0), dot(g2,g2), dot(g1,g1), dot(g3,g3))); vec4 norm1 = taylorInvSqrt(vec4(dot(g4,g4), dot(g6,g6), dot(g5,g5), dot(g7,g7))); g0 *= norm0.x; g2 *= norm0.y; g1 *= norm0.z; g3 *= norm0.w; g4 *= norm1.x; g6 *= norm1.y; g5 *= norm1.z; g7 *= norm1.w; vec4 nz = mix(vec4(dot(g0, vec3(f0.x, f0.y, f0.z)), dot(g1, vec3(f1.x, f0.y, f0.z)), dot(g2, vec3(f0.x, f1.y, f0.z)), dot(g3, vec3(f1.x, f1.y, f0.z))), vec4(dot(g4, vec3(f0.x, f0.y, f1.z)), dot(g5, vec3(f1.x, f0.y, f1.z)), dot(g6, vec3(f0.x, f1.y, f1.z)), dot(g7, vec3(f1.x, f1.y, f1.z))), f.z); return 2.2 * mix(mix(nz.x,nz.z,f.y), mix(nz.y,nz.w,f.y), f.x); } float noise(vec2 P) { return noise(vec3(P, 0.0)); } void main() { vec3 shiftPos = position + shift; vec4 transformedPosition = modelMatrix * vec4(shiftPos, 1); fragPosition = transformedPosition.xyz; deltaTransform = 0.0; deltaTransform += noise(vec2( shiftPos.x / wave1Settings.z + time / wave1Settings.y, shiftPos.z / wave1Settings.z + time / wave1Settings.y )) / wave1Settings.x; deltaTransform += noise(vec2( shiftPos.x / wave2Settings.z + time / wave2Settings.y, shiftPos.z / wave2Settings.z + time / wave2Settings.y )) / wave2Settings.x; deltaTransform *= scale; transformedPosition.y += deltaTransform; vec4 newPosition = projectionMatrix * viewMatrix * transformedPosition; gl_Position = newPosition; fragNormal = normalize(normal); }`; const fragmentShader = `#version 300 es precision mediump float; uniform vec3 centerPoint; uniform float validRadius; uniform vec3 backgroundColor; uniform vec3 baseColor; uniform vec3 highlightColor; in vec3 fragNormal; in vec3 fragPosition; in float deltaTransform; out vec4 outColor; void main() { float alpha = 1.0; alpha = distance(fragPosition, centerPoint) / validRadius; if((pow(fragPosition.x - centerPoint.x, 2.0) + pow(fragPosition.z - centerPoint.z, 2.0)) > pow(validRadius, 2.0)) { alpha = 0.0; } if(alpha <= 0.0) { outColor = vec4(backgroundColor, 1.0); } else { outColor = vec4(mix(mix(baseColor, highlightColor, deltaTransform), backgroundColor, alpha), 1.0); } }`; return [vertexShader, fragmentShader]; }3e:T410,mutable mazeArray = { newgame; const data = imgData.data; const mazeArray = []; let val = 0; for (let i = 0; i < imgDim[0]; i++) { const temp = []; for (let j = 0; j < imgDim[1]; j++) { if (data[val] == 0 && data[val + 1] == 0 && data[val + 2] == 0) { temp[j] = g_colors.wallColor; } else if (data[val] == 255 && data[val + 1] == 0 && data[val + 2] == 0) { temp[j] = p_colors.startColor; } else if (data[val] == 0 && data[val + 1] == 0 && data[val + 2] == 255) { temp[j] = p_colors.endColor; } else if (data[val] == 242 && data[val + 1] == 255 && data[val + 2] == 0) { temp[j] = i_colors.coinColor; } else if (data[val] <= 1 && data[val + 1] == 255 && data[val + 2] == 0) { temp[j] = i_colors.treasureColor; } else if (data[val] == 255 && data[val + 1] == 255 && data[val + 2] == 255){ temp[j] = g_colors.groundColor; } val += 4; } mazeArray[i] = temp; } return mazeArray; }3f:[{"id":"5f6909ca235416ce5e5e11cc675bfcd16e35ed883623bfebf2d04ef11ca7508800f85d811fd22b6a642428826d9217639db461c0629d356485c0cbf4d300d2c9","href":"https://static.observableusercontent.com/files/5f6909ca235416ce5e5e11cc675bfcd16e35ed883623bfebf2d04ef11ca7508800f85d811fd22b6a642428826d9217639db461c0629d356485c0cbf4d300d2c9","name":"maze.png","type":"image/png","lastModified":1695406443610.8,"size":224},{"id":"027aee02471f64621a1b64a4e72abfcd37aaf96c87af319947b948ab6b70bcaa18da66be5418777662605e90683a81603d73c5dda34323e3d452eef92bed4673","href":"https://static.observableusercontent.com/files/027aee02471f64621a1b64a4e72abfcd37aaf96c87af319947b948ab6b70bcaa18da66be5418777662605e90683a81603d73c5dda34323e3d452eef92bed4673","name":"wall6.obj","type":"application/octet-stream","lastModified":1695406443610.8,"size":360},{"id":"0462a2b02ceaae0d0dd2159fbe55015be27d5c325936ee5959f23c1bedd279f98beec0eb756597c1438585d5761dcf985d0146fa36cd2d1e7db2ca7ca9e94569","href":"https://static.observableusercontent.com/files/0462a2b02ceaae0d0dd2159fbe55015be27d5c325936ee5959f23c1bedd279f98beec0eb756597c1438585d5761dcf985d0146fa36cd2d1e7db2ca7ca9e94569","name":"wall1.obj","type":"application/octet-stream","lastModified":1695406443610.8,"size":856},{"id":"662bc06b0ad7769a43d0d6059be380259a4fed3db0fe261626ae7fc0547e81780e9f9c536cb1aecb1fd5ae95a90a1afd8acba77a4cdef3fe7e291b5d5e15df03","href":"https://static.observableusercontent.com/files/662bc06b0ad7769a43d0d6059be380259a4fed3db0fe261626ae7fc0547e81780e9f9c536cb1aecb1fd5ae95a90a1afd8acba77a4cdef3fe7e291b5d5e15df03","name":"wall5Thin.obj","type":"application/octet-stream","lastModified":1695406443610.8,"size":1512},{"id":"a684ebbac66b3d098649c00a192ed5b4951cd7129661f149a7c0d883967c25fcf9dd98545ec228fb8adca207543724a5d07d595e15dbb3169236ae7668aea3b0","href":"https://static.observableusercontent.com/files/a684ebbac66b3d098649c00a192ed5b4951cd7129661f149a7c0d883967c25fcf9dd98545ec228fb8adca207543724a5d07d595e15dbb3169236ae7668aea3b0","name":"wall4Thin.obj","type":"application/octet-stream","lastModified":1695406443610.8,"size":1928},{"id":"620fb74b8608b65cd4b8b0e1ae01b9ecb6e7c3cd05762229bd490b099b310ea04f70fd8c73cbe6c08431fbb8b32397d320405ad01ac3d0135d31d0a1a156847b","href":"https://static.observableusercontent.com/files/620fb74b8608b65cd4b8b0e1ae01b9ecb6e7c3cd05762229bd490b099b310ea04f70fd8c73cbe6c08431fbb8b32397d320405ad01ac3d0135d31d0a1a156847b","name":"Ghost.obj","type":"application/octet-stream","lastModified":1695406443610.8,"size":60920},{"id":"402009d24025e3dedef7a5bb3fede7ea8ddd50537099fe4c0a0a50f83036296d7e59f5a3e45a5cd3482517f634f8e9fc49fe23700ccda41a7c37a6a797dfb3f2","href":"https://static.observableusercontent.com/files/402009d24025e3dedef7a5bb3fede7ea8ddd50537099fe4c0a0a50f83036296d7e59f5a3e45a5cd3482517f634f8e9fc49fe23700ccda41a7c37a6a797dfb3f2","name":"Char.obj","type":"application/octet-stream","lastModified":1695406443610.8,"size":252249},{"id":"5db2f4186d8d51d8b511425949af610d650e810b1aaab30e4407484e13e9e025a8ff1aa693d60358e487b083c9d0c8f5940305f4d22a907545ecf298f6da1646","href":"https://static.observableusercontent.com/files/5db2f4186d8d51d8b511425949af610d650e810b1aaab30e4407484e13e9e025a8ff1aa693d60358e487b083c9d0c8f5940305f4d22a907545ecf298f6da1646","name":"simpleGem.obj","type":"application/octet-stream","lastModified":1695406443610.8,"size":2914},{"id":"79413a81af2fe1b081aba7cec4f611cde6e6510b06463c763be45aa93d8409237749b615d4deba0519bef12530023396f91fc9f536a1caee22900b04da18b9d3","href":"https://static.observableusercontent.com/files/79413a81af2fe1b081aba7cec4f611cde6e6510b06463c763be45aa93d8409237749b615d4deba0519bef12530023396f91fc9f536a1caee22900b04da18b9d3","name":"simpleCoin.obj","type":"application/octet-stream","lastModified":1695406443610.8,"size":16878},{"id":"58684aea0e39106a814394bbda11bb5fc43e3b830000ffd839e21121e3ad56afa77645405bdd9fd11536fb456ae7e944fef6c20e9be0a02036e51e823e3ff3a3","href":"https://static.observableusercontent.com/files/58684aea0e39106a814394bbda11bb5fc43e3b830000ffd839e21121e3ad56afa77645405bdd9fd11536fb456ae7e944fef6c20e9be0a02036e51e823e3ff3a3","name":"wall3Thin.obj","type":"application/octet-stream","lastModified":1695406443610.8,"size":921},{"id":"2130ef4eea69e7933ec3d4e0dbb6759ea84f042ac68220ad5bd5395443b696917f6251664a684a3e51a55e855b91a7c3cb9f221520056d54a2d36961db3d3fbf","href":"https://static.observableusercontent.com/files/2130ef4eea69e7933ec3d4e0dbb6759ea84f042ac68220ad5bd5395443b696917f6251664a684a3e51a55e855b91a7c3cb9f221520056d54a2d36961db3d3fbf","name":"wall2Thin.obj","type":"application/octet-stream","lastModified":1695406443610.8,"size":1536},{"id":"6fff179ddbc2d6cbed976fc6495c9d42f3cc7ee2a909dc276d0233e21cddf4920f8db9fbeba7d8366b84e776c112e77964e8d28cbaf3fbc64629028d2fe4e2a9","href":"https://static.observableusercontent.com/files/6fff179ddbc2d6cbed976fc6495c9d42f3cc7ee2a909dc276d0233e21cddf4920f8db9fbeba7d8366b84e776c112e77964e8d28cbaf3fbc64629028d2fe4e2a9","name":"base.obj","type":"application/octet-stream","lastModified":1695406443610.8,"size":4797},{"id":"c1f86899374c9ed606b7fe647d2bef8e0ab79f74312b1a0c3af3bc5ac9996892759469ea2f081cd21789cdd18544cc650217bf468b541745f89be3325bbba223","href":"https://static.observableusercontent.com/files/c1f86899374c9ed606b7fe647d2bef8e0ab79f74312b1a0c3af3bc5ac9996892759469ea2f081cd21789cdd18544cc650217bf468b541745f89be3325bbba223","name":"tree1.obj","type":"application/octet-stream","lastModified":1695406443610.8,"size":12979},{"id":"da7a0ff1f7b76c81976c04c7fdbad0efcbf14076a3efa8b7878c911af0295410b801a38bd6186d3d34445d7c29bbbb3f0b26fadad61a8609eb48eec34c37f3b8","href":"https://static.observableusercontent.com/files/da7a0ff1f7b76c81976c04c7fdbad0efcbf14076a3efa8b7878c911af0295410b801a38bd6186d3d34445d7c29bbbb3f0b26fadad61a8609eb48eec34c37f3b8","name":"fence.obj","type":"application/octet-stream","lastModified":1695406443610.8,"size":8299},{"id":"c3f4efe183136207b8a191626eb174fa934a35e0174f0fe143d4c3840c817fafc0d65528ed52ef465f05ccff7ad9a826cd1a5833a9241bd1a11573d0a8a77d04","href":"https://static.observableusercontent.com/files/c3f4efe183136207b8a191626eb174fa934a35e0174f0fe143d4c3840c817fafc0d65528ed52ef465f05ccff7ad9a826cd1a5833a9241bd1a11573d0a8a77d04","name":"rock.obj","type":"application/octet-stream","lastModified":1695406443610.8,"size":3764}] 2d:{"id":"1ee37c9bee370935","slug":null,"title":"Final Project: Computer Graphics 2021","thumbnail":"108a658f42e9a43509d9328741a9212a26d6b2eca9432892089833ef8cf45869","access_level":"public","create_time":"$D2023-09-22T18:14:03.610Z","update_time":"$D2023-09-22T18:19:50.185Z","view_time":null,"first_public_time":"$D2023-09-22T18:14:03.610Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"e0b1ecb7f788225c","login":"eslick","name":"Samuel Eslick","avatar_url":"https://avatars-next.observableusercontent.com/c4d8bd4caff08fcb44db98b500570d2fe3627a50dc1327c6921e23cff1af8b1c","tier":"starter_2024"},"version":4777,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2335ea13e23d955d","login":"eslick","name":"Samuel Eslick","avatar_url":"https://avatars-next.observableusercontent.com/c4d8bd4caff08fcb44db98b500570d2fe3627a50dc1327c6921e23cff1af8b1c","tier":null}],"members":[{"type":"individual","id":"2335ea13e23d955d","login":"eslick","name":"Samuel Eslick","avatar_url":"https://avatars-next.observableusercontent.com/c4d8bd4caff08fcb44db98b500570d2fe3627a50dc1327c6921e23cff1af8b1c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Final Project: Computer Graphics 2021","cells":[{"id":0,"value":"# Final Project: Computer Graphics 2021","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2733,"value":"viewof topText = {\n if (mutable gameover == true) {\n return md`#

Game Over

`\n } \n else if (mutable win) {\n return md`#

You Win! Thank you for playing!

`\n }\n else {\n return md`#

Lives: ${lives} Score: ${score} Highest Score: ${highscore}

`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"viewport = {\n\n let start, previousTimeStamp;\n let request = requestAnimationFrame(function tick(time) {\n if(previousTimeStamp === undefined)\n start = time;\n\n const elapsed = time - start;\n previousTimeStamp = time;\n \n draw(time, elapsed);\n request = requestAnimationFrame(tick);\n });\n\n invalidation.then(() => cancelAnimationFrame(request));\n yield gl.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2088,"value":"viewof newgame = button(\"New Game\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4398,"value":"viewof choice = columns({\n r: radio([\"Red\", \"Orange\", \"Yellow\", \"Green\", \"Cyan\", \"Blue\", \"Purple\", \"Custom\"]),\n custom: color({\n value: \"#4c265a\",\n description: \"Custom Color\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4668,"value":"viewof t = columns({\n x: Inputs.range([-128, 128], {\n value: 0,\n label: \"x\",\n step: 1\n }),\n y: Inputs.range([-128, 128], {\n value: 0,\n label: \"y\",\n step: 1\n }),\n z: Inputs.range([-128, 128], {\n value: 0,\n label: \"z\",\n step: 1\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4696,"value":"viewof s = Inputs.range([-128, 128], {\n value: 0,\n label: \"s\",\n step: 1\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4621,"value":"mes = {\n return md` Shader code for the clouds was graciously made available by Thomas Stoeckert! Thank you very much!\nThomas Stoeckert has a demo of this code here: https://observablehq.com/@thomasstoeckert/pirate-ship-test`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4633,"value":"mes2 = {\n return md` Coin and gem models from: https://devilsworkshop.itch.io/low-poly-3d-rpg-item-asset-pack and the tree, rock, and fence models are from: https://brokenvector.itch.io/free-low-poly-pack`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2251,"value":"wheelmove = gl.canvas.onwheel = e => {\n e.preventDefault();\n \n mutable camR += e.deltaY * 0.01;\n\n mutable camR = Math.min(Math.max(1, mutable camR), 60);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"viewof fov_Y = Inputs.range([20, 75], {\n value: 45,\n label: \"Vertical Field of View\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"viewof lightParameters = columns({\n orientation: Inputs.range([-180, 180], {\n value: 0,\n label: \"Light Z-Angle\",\n step: 1\n }),\n distanceFactor: Inputs.range([1, 5], {\n value: 0,\n label: \"Light Distance\",\n step: 0.1\n }),\n lightType: Inputs.radio([\"point\", \"directional\"], {\n value: \"directional\",\n label: \"Light Type\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"viewof materialProperty = columns({\n materialColor: color({ value: \"#7dbf93\", description: \"Material Color\" }),\n diffuseReflectance: Inputs.range([0, 1], {\n value: 0.5,\n step: 0.1,\n label: md`\nDiffuse Reflectance`\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":279,"value":"viewof ground = columns({\n reflect: Inputs.toggle({ label: \"Reflect\", value: true }),\n z_angle: Inputs.range([-180, 0], {\n value: 0,\n label: \"Ground Z Angle\",\n step: 1\n }),\n opacity: Inputs.range([0, 1], {\n value: 0.5,\n step: 0.1,\n label: \"Ground Opacity\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":195,"value":"viewof cam = columns({\n radius: Inputs.range([1, 40], {\n value: 11,\n label: \"Camera Radius\",\n step: 0.01\n }),\n pos: Inputs.radio([\"Corner\", \"Center\"], {\n value: \"Center\",\n label: \"Camera Position\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2091,"value":"viewof mazeIndex = columns({\n row: Inputs.range([0, 18], {\n value: 18,\n label: \"Z Position\",\n step: 1\n }),\n col: Inputs.range([0, 18], {\n value: 9,\n label: \"X Position\",\n step: 1\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2101,"value":"viewof enemyIndex = columns({\n row: Inputs.range([0, 18], {\n value: 0,\n label: \"Z Position\",\n step: 1\n }),\n col: Inputs.range([0, 18], {\n value: 9,\n label: \"X Position\",\n step: 1\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2106,"value":"viewof modelRot = columns({\n player: Inputs.range([-180, 180], {\n value: -90,\n label: \"Player Rotation\",\n step: 1\n }),\n enemy: Inputs.range([-180, 180], {\n value: 90,\n label: \"Enemy Rotation\",\n step: 1\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2176,"value":"gl = {\n const myCanvas = DOM.canvas(width, 720);\n const gl = myCanvas.getContext(\"webgl2\", {stencil: true});\n gl.clearColor(...backgroundColor, 1);\n gl.clear(gl.COLOR_BUFFER_BIT);\n gl.enable(gl.DEPTH_TEST);\n gl.enable(gl.ALPHA_TEST);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3075,"value":"md`### Ocean Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3074,"value":"viewof planeOptions = columns({\n resolution: Inputs.range([1, 256], {label: \"Plane Resolution\", step: 1.0, value: 128}), \n size: Inputs.range([1, 256], {label: \"Plane Size\", step: 1.0, value: 176})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3073,"value":"viewof wave1Settings = columns({\n amplitude: Inputs.range([0, 100], {label: \"Amplitude\", value: 1, width: width / 6, transform: Math.log}), \n frequency: Inputs.range([10, 10000], {label: \"Frequency\", value: 7956, width: width / 6, transform: Math.log}), \n noiseScaling: Inputs.range([0.01, 50.0], {label: \"Noise Scaling\", value: 15, width: width / 6, transform: Math.log})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3072,"value":"viewof wave2Settings = columns({\n amplitude: Inputs.range([1, 100], {label: \"Amplitude\", value: 3.68138908296319, width: width / 6, transform: Math.log}), \n frequency: Inputs.range([10, 10000], {label: \"Frequency\", value: 1277, width: width / 6, transform: Math.log}), \n noiseScaling: Inputs.range([0.01, 10.0], {label: \"Noise Scaling\", value: 7.37278978040492, width: width / 6, transform: Math.log})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3071,"value":"viewof fragmentColors = columns({highlight: color({value: \"#fdd2fe\", title: \"Highlight Color\"}), base: color({value: \"#695b8f\", title: \"Base Color\"})})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3427,"value":"backgroundColor = hex2rgb(fogColor.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3417,"value":"viewof mazeAngle = columns({\n y: Inputs.range([-180, 180], {\n value: 0,\n label: \"Camera Y Angle\",\n step: 1\n }),\n x: Inputs.range([-89, 89], {\n value: -52,\n label: \"Camera X Angle\",\n step: 1\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"viewof cameraAngles = columns({\n y_angle: Inputs.range([-180, 180], {\n value: -70,\n label: \"Camera Y Angle\",\n step: 1\n }),\n x_angle: Inputs.range([-89, 89], {\n value: -52,\n label: \"Camera X Angle\",\n step: 1\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3381,"value":"viewof test = columns({\n x: Inputs.range([-128, 128], {\n value: -69,\n label: \"x\",\n step: 1\n }),\n z: Inputs.range([-128, 128], {\n value: -69,\n label: \"z\",\n step: 1\n }),\n s: Inputs.range([1, 128], {\n value: 2.5,\n label: \"s\",\n step: .1\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3737,"value":"viewof generalLightSettings = columns({\n direction: Inputs.range([0, 180], {label: \"Directional Light Position\", value: 0}),\n shadingFactor: Inputs.range([0, 1.0], {label: \"Shading Factor\", value: 0.217})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3742,"value":"viewof materialProperties = columns({\n shine: Inputs.range([1, 100], {label: \"Shininess\", value: 4.71557473519027}),\n ambientPercent: Inputs.range([0, 100], {label: \"Ambient Light %\", value: 11.70393})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4009,"value":"viewof wall = columns({\n rot: Inputs.range([0, 360], {label: \"Rotation\", value: 0})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":641,"value":"keys","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2109,"value":"mutable score = {\n newgame;\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4605,"value":"mutable win = {\n if (mutable score == 1390) {\n return true;\n } else return false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2112,"value":"highscore = Math.max(this || 0, score)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3648,"value":"mutable lives = {\n newgame;\n return 3;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4175,"value":"mutable tRot = {\n let i = 0;\n newgame;\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3719,"value":"function start() {\n mutable player.position = ({\n x: (imgDim[1] - 1) / 2,\n y: 10,\n z: imgDim[0] - 1,\n });\n mutable enemy.position = ({\n x: (imgDim[1] - 1) / 2,\n y: 10,\n z: 1\n });\n mutable enemy2.position = ({\n x: (imgDim[1] - 1) / 2,\n y: 10,\n z: (imgDim[0] - 1) / 2\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3654,"value":"mutable playerPosition = {\n newgame;\n return ({\n x: (imgDim[1] - 1) / 2,\n y: 10,\n z: imgDim[0] - 1,\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3660,"value":"mutable enemyPosition = {\n newgame;\n return ({\n x: (imgDim[1] - 1) / 2,\n y: 10,\n z: 1\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3666,"value":"mutable enemy2Position = {\n newgame;\n return ({\n x: (imgDim[1] - 1) / 2,\n y: 10,\n z: (imgDim[0] - 1) / 2\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2115,"value":"mutable gameover = {\n newgame;\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1011,"value":"mutable player = ({\n position: mutable playerPosition,\n score: mutable score,\n lives: mutable lives,\n facing: \"south\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1027,"value":"mutable enemy = ({\n position: mutable enemyPosition,\n moved: false,\n facing: \"east\",\n mode: \"chasing\",\n cycle: 2,\n notMoved: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3554,"value":"mutable enemy2 = ({\n position: mutable enemy2Position,\n moved: false,\n facing: \"west\",\n mode: \"chasing\",\n cycle: 2,\n notMoved: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2965,"value":"count = {\n let i = 0;\n while (!gameover) yield Promises.delay(250, i++);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3069,"value":"tickThing = {\n let i = 0;\n while (!gameover) yield Promises.delay(1, i++);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3068,"value":"direction = {\n let foo = tickThing;\n let {position, score, lives, facing} = mutable player;\n \n if (keys.w == true && (mazeArray[position.z - 1][position.x] != g_colors.wallColor)) {\n facing = \"north\";\n }\n\n if (keys.s == true && (mazeArray[position.z + 1][position.x] != g_colors.wallColor)) {\n facing = \"south\";\n }\n\n if (keys.d == true && (mazeArray[position.z][position.x + 1] != g_colors.wallColor)) {\n facing = \"east\";\n }\n\n if (keys.a == true && (mazeArray[position.z][position.x - 1] != g_colors.wallColor)) {\n facing = \"west\";\n }\n \n mutable player = {position, score, lives, facing}\n return md` This block changes player direction`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2076,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3507,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3558,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1509,"value":"function scoreTest() {\n\n if (mutable mazeArray[mutable player.position.z][mutable player.position.x] == i_colors.coinColor) {\n mazeArray[mutable player.position.z][mutable player.position.x] = g_colors.groundColor;\n mutable score += 10;\n }\n if (mutable mazeArray[mutable player.position.z][mutable player.position.x] == i_colors.treasureColor) {\n mutable mazeArray[mutable player.position.z][mutable player.position.x] = g_colors.groundColor;\n mutable score += 50;\n }\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2807,"value":"die = {\n let foo = count;\n if ( ( (mutable player.position.x == mutable enemy.position.x) && \n (mutable player.position.z == mutable enemy.position.z) ) || \n ( (mutable player.position.x == mutable enemy2.position.x) &&\n (mutable player.position.z == mutable enemy2.position.z) ) && !win) \n {\n mutable lives -= 1;\n start();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2139,"value":"function draw(time, elapsed) {\n \n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n renderScene(litSceneProgramInfo, viewMatrix, getProjectionMatrix(fov_Y, near, far, modelDim));\n renderWalls(litSceneProgramInfo, viewMatrix, getProjectionMatrix(fov_Y, near, far));\n renderTreasure(litSceneProgramInfo, viewMatrix, getProjectionMatrix(fov_Y, near, far));\n renderOcean(time, elapsed);\n renderPlayer(litSceneProgramInfo, viewMatrix, getProjectionMatrix(fov_Y, near, far));\n renderEnemy(litSceneProgramInfo, viewMatrix, getProjectionMatrix(fov_Y, near, far));\n renderEnemy2(litSceneProgramInfo, viewMatrix, getProjectionMatrix(fov_Y, near, far));\n renderFun(litSceneProgramInfo, viewMatrix, getProjectionMatrix(fov_Y, near, far));\n\n\n return true;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2190,"value":"mutable camY = cameraAngles.y_angle","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2220,"value":"mutable camX = cameraAngles.x_angle","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2255,"value":"mutable camR = cam.radius","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":637,"value":"viewof keys = keyboard()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4414,"value":"viewof colorList = columns({\n one: color({\n value: \"#ff0000\",\n description: \"Red\"\n }),\n two: color({\n value: \"#ff8000\",\n description: \"Orange\"\n }),\n three: color({\n value: \"#ffff00\",\n description: \"Yellow\"\n }),\n four: color({\n value: \"#00ff00\",\n description: \"Green\"\n }),\n five: color({\n value: \"#00ffff\",\n description: \"Cyan\"\n }),\n six: color({\n value: \"#0000ff\",\n description: \"Blue\"\n }),\n seven: color({\n value: \"#ff00ff\",\n description: \"Purple\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4307,"value":"viewof ghostColors = columns({\n one: color({\n value: \"#a1e2d1\",\n description: \"Ghost One\"\n }),\n two: color({\n value: \"#e3bfbf\", //\"#33933f\",\n description: \"Ghost Two\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":953,"value":"viewof g_colors = columns({\n wallColor: color({\n value: \"#00402f\",\n description: \"Wall Color\"\n }),\n groundColor: color({\n value: \"#c0c0c0\", //\"#33933f\",\n description: \"Ground Color\"\n }),\n fenceColor: color({\n value: \"#5e4f36\",\n description: \"Fence Color\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":951,"value":"viewof p_colors = columns({\n startColor: color({\n value: \"#00ff00\",\n description: \"Start Color\"\n }),\n endColor: color({\n value: \"#0000ff\",\n description: \"End Color\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":969,"value":"viewof i_colors = columns({\n coinColor: color({\n value: \"#ffff00\",\n description: \"Coin Color\"\n }),\n treasureColor: color({\n value: \"#ff0000\",\n description: \"Treasure Color\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3430,"value":"fogColor = color({\n value: \"#fdd2fe\",\n description: \"Fog Color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3735,"value":"viewof lightingColors = columns({\n specularColor: color({value: \"#4e7453\", description: \"Specular Color\"}),\n materialColor: color({value: \"#fdd2fe\", description: \"Material Color\"}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"tileColor = mazeArray[mazeIndex.row][mazeIndex.col];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"viewof unitSize = Inputs.range([1, 75], {\n value: 4,\n label: \"Unit Size\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":464,"value":"mazeCenter = [(((imgDim[0] - 1) / 4 * unitSize) + (unitSize / 4)), 10, (((imgDim[1] - 1) / 4 * unitSize) + (unitSize / 4))];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"//modelObj = teapotObj\nmodelObj = plane","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"near = 0.1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"far = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"canvasWidth = gl.canvas.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"canvasHeight = gl.canvas.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"aspect = canvasWidth / canvasHeight","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":449,"value":"alpha = ground.opacity;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"center = cam.pos==\"Corner\" ? modelDim.center : mazeCenter;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"cameraLookAt = center","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"lightDirection = m4.transformDirection(\n m4.rotationZ(deg2rad(lightParameters.orientation)),\n [0, 1, 0]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"lightPosition = {\n const D = (lightParameters.distanceFactor * modelDim.dia) / 2;\n return v3.add(modelDim.center, v3.mulScalar(lightDirection, D));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3063,"value":"cameraPosition = {\n const cameraPosition = sphericalToCartesian(cameraAngles.y_angle, cameraAngles.y_angle, camR);\n\n // Now that we have our properly rotated camera, we're going to go through and translate it by the\n // model's center (to re-center it)\n const cameraCenterTranslation = m4.translation(oceanDim.center);\n return m4.transformPoint(cameraCenterTranslation, cameraPosition);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3062,"value":"cameraMatrices = generateCameraMatrices(cameraPosition, center, fov_Y)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3061,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3060,"value":"planeClipRadius = planeOptions.size / 2.0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3059,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3297,"value":"oceanDim = computeModelExtent(oceanPlane)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3058,"value":"oceanPlane = generatedPlaneObject","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3057,"value":"objectInfoArrays = createObjectInfoArrays(oceanPlane)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3056,"value":"createObjectInfoArrays = function(object) {\n const inputArrays = [];\n // For each sub-object...\n for (let objectIndex = 0; objectIndex < object.length; ++objectIndex) {\n // Organize the data into an object\n let objectData = {\n position: { numComponents: 3, data: object[objectIndex].sc.positions },\n normal: { numComponents: 3, data: object[objectIndex].sc.normals },\n };\n\n if(object[objectIndex].sc.indices != undefined) {\n objectData.indices = { numComponents: 3, data: object[objectIndex].sc.indices }\n }\n\n if(object[objectIndex].sc.uvs != undefined) {\n objectData.uvs = {numComponents: 2, data: object[objectIndex].sc.uvs}\n }\n\n // And create the buffer data for that\n let bufferData = twgl.createBufferInfoFromArrays(gl, objectData);\n inputArrays.push(bufferData);\n }\n\n return inputArrays;\n // Create the buffer info array\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3055,"value":"sphericalToCartesian = function(angleX, angleY, distance) {\n // Starting Point\n const startingPoint = v3.create(0, 0, 0);\n // Translation\n const translationMatrix = m4.translation([0, 0, distance]);\n \n // Rotate on X\n const rotationXMatrix = m4.rotationX(deg2rad(angleX));\n // Rotate on Y\n const rotationYMatrix = m4.rotationY(deg2rad(angleY));\n \n // Combine our rotation matices\n const transformationMatrix = multiplyMany([translationMatrix, rotationXMatrix, rotationYMatrix]);\n \n // Return our starting point transformed by the rotation values.\n return m4.transformPoint(transformationMatrix, startingPoint);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3054,"value":"multiplyMany = function (matrix_array) {\n let toReturn = m4.identity();\n for (const matrix of matrix_array) {\n toReturn = m4.multiply(matrix, toReturn);\n }\n return toReturn;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3747,"value":"lightPos = sphericalToCartesian(cameraAngles.x_angle, -cameraAngles.y_angle, 45)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3064,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4162,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3478,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4118,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4280,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4315,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4680,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":649,"value":"viewMatrix = getViewMatrix(\n camR,\n deg2rad(mazeAngle.x),\n deg2rad(mazeAngle.y)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"getViewMatrix = (r, x_angle, y_angle) => {\n const gazeDirection = m4.transformDirection(\n m4.multiply(m4.rotationY(y_angle), m4.rotationX(x_angle)),\n [0, 0, 1]\n );\n const eye = v3.add(cameraLookAt, v3.mulScalar(gazeDirection, r*modelDim.dia));\n const cameraMatrix = m4.lookAt(eye, cameraLookAt, [0, 1, 0]);\n return m4.inverse(cameraMatrix);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"getProjectionMatrix = (fov, near, far) => {\n //const aspect = gl.canvas.width / gl.canvas.height;\n return m4.perspective(\n deg2rad(fov),\n aspect,\n near * modelDim.dia,\n far * modelDim.dia\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"getCameraTransformationMatrix = (scale) => {\n const s = modelDim.dia / 8;\n const rotationTransformation = m4.multiply(\n m4.rotationY(deg2rad(cameraAngles.y_angle)),\n m4.rotationX(deg2rad(cameraAngles.x_angle))\n );\n const translationVector = v3.add(\n cameraLookAt,\n v3.mulScalar(\n m4.transformDirection(rotationTransformation, [0, 0, 1]),\n camR * modelDim.dia\n )\n );\n\n return m4.multiply(\n m4.multiply(m4.translation(translationVector), rotationTransformation),\n scale ? m4.scaling([s, s, s]) : m4.identity()\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"baseGroundCenter = [0, 0, 0] //[modelDim.center[0]+modelDim.dia/2, modelDim.center[1], modelDim.center[2]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"groundRotationMatrix = m4.rotationZ(deg2rad(ground.z_angle))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":260,"value":"groundCenter = m4.transformPoint(groundRotationMatrix, baseGroundCenter)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"groundSize = unitSize","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":291,"value":"baseGroundNormal = [0, -1, 0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"groundNormal = m4.transformNormal(groundRotationMatrix, baseGroundNormal)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"## Buffers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":87,"value":"sceneBufferInfoArray = {\n\n const vertexAttributes = modelObj.map((d) => ({\n position: { numComponents: 3, data: d.sc.positions },\n normal: { numComponents: 3, data: d.sc.normals }\n }));\n return vertexAttributes.map((vertexAttributes) =>\n twgl.createBufferInfoFromArrays(gl, vertexAttributes)\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3915,"value":"function wallBufferInfoArray(obj) {\n\n const vertexAttributes = obj.map((d) => ({\n position: { numComponents: 3, data: d.sc.positions },\n normal: { numComponents: 3, data: d.sc.normals }\n }));\n return vertexAttributes.map((vertexAttributes) =>\n twgl.createBufferInfoFromArrays(gl, vertexAttributes)\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"modelDim = computeModelExtent(modelObj)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"lightRayBufferInfo = {\n return twgl.createBufferInfoFromArrays(gl, {\n position: [...lightPosition, ...modelDim.center]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"lightBufferInfo = {\n const sphereVertices = twgl.primitives.createSphereVertices(0.5, 5, 5);\n return twgl.createBufferInfoFromArrays(gl, sphereVertices);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"boxBufferInfo = {\n const boxAttributes = {\n position: [\n -1,\n -1,\n -1,\n\n 1,\n -1,\n -1,\n\n 1,\n 1,\n -1,\n\n -1,\n 1,\n -1,\n\n -1,\n -1,\n 1,\n\n 1,\n -1,\n 1,\n\n 1,\n 1,\n 1,\n\n -1,\n 1,\n 1\n ],\n indices: [\n 0,\n 1,\n 1,\n 2,\n 2,\n 3,\n 3,\n 0,\n 4,\n 5,\n 5,\n 6,\n 6,\n 7,\n 7,\n 4,\n 0,\n 4,\n 1,\n 5,\n 2,\n 6,\n 3,\n 7\n ]\n };\n return twgl.createBufferInfoFromArrays(gl, boxAttributes);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"## Shaders and ProgramInfo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":131,"value":"errorBlockLit = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3052,"value":"errorBlock = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3051,"value":"waterProgram = {\n errorBlock.style.height = \"20px\";\n errorBlock.innerHTML = \"Water Program Shader compilation successful\";\n\n return twgl.createProgramInfo(gl, waterShaders, (message) => {\n errorBlock.style.height = \"400px\";\n errorBlock.innerHTML = \"Water Program Shader compilation error\\n\" + message;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3050,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":314,"value":"## Image Parsing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":321,"value":"img = FileAttachment(\"maze.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":356,"value":"imgData = getImageData(img)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":995,"value":"imgData.data[412]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"imgDim = [imgData.width, imgData.height]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":65,"value":"deg2rad = (deg) => (Math.PI * deg) / 180","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"import { hex2rgb } from \"@spattana/cap-4720-introduction-to-observable\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"twgl = require(\"twgl.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"m4 = twgl.m4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"v3 = twgl.v3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"import {\n computeModelExtent,\n loadModelFromURL\n} from \"fd5b533c21bcd22e\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"import { color, slider, button, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"import { columns } from \"@bcardiff/observable-columns\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"import {getImageData} from \"@ehouais/how-to-get-image-data-from-an-url-or-a-file\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":635,"value":"import {keyboard} from \"@nitaku/keyboard-state\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1413,"value":"TWEEN = require('tween.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2354,"value":"md`## Object Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2340,"value":"plane_url = await FileAttachment(\"base.obj\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2361,"value":"plane = loadModelFromURL(plane_url, \"obj\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3838,"value":"wall1URL = await FileAttachment(\"wall1.obj\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3843,"value":"wall1 = loadModelFromURL(wall1URL, \"obj\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3880,"value":"wall1Dim = computeModelExtent(wall1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3855,"value":"wall2URL = await FileAttachment(\"wall2Thin.obj\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3845,"value":"wall2 = loadModelFromURL(wall2URL, \"obj\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3881,"value":"wall2Dim = computeModelExtent(wall2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3857,"value":"wall3URL = await FileAttachment(\"wall3Thin.obj\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3883,"value":"wall3Dim = computeModelExtent(wall3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3847,"value":"wall3 = loadModelFromURL(wall3URL, \"obj\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3859,"value":"wall4URL = await FileAttachment(\"wall4Thin.obj\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3849,"value":"wall4 = loadModelFromURL(wall4URL, \"obj\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3890,"value":"wall4Dim = computeModelExtent(wall4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3861,"value":"wall5URL = await FileAttachment(\"wall5Thin.obj\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3851,"value":"wall5 = loadModelFromURL(wall5URL, \"obj\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3894,"value":"wall5Dim = computeModelExtent(wall5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3863,"value":"wall6URL = await FileAttachment(\"wall6.obj\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3853,"value":"wall6 = loadModelFromURL(wall6URL, \"obj\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3897,"value":"wall6Dim = computeModelExtent(wall6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4131,"value":"charURL = await FileAttachment(\"Char.obj\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4135,"value":"char = loadModelFromURL(charURL, \"obj\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4140,"value":"coinURL = await FileAttachment(\"simpleCoin.obj\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4141,"value":"coin = loadModelFromURL(coinURL, \"obj\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4149,"value":"ghostURL = await FileAttachment(\"Ghost.obj\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4150,"value":"ghost = loadModelFromURL(ghostURL, \"obj\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4236,"value":"gemURL = await FileAttachment(\"simpleGem.obj\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4237,"value":"gem = loadModelFromURL(gemURL, \"obj\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4672,"value":"tree1URL = await FileAttachment(\"tree1.obj\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4676,"value":"tree1 = loadModelFromURL(tree1URL, \"obj\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4721,"value":"rockURL = await FileAttachment(\"rock.obj\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4723,"value":"rock = loadModelFromURL(rockURL, \"obj\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4739,"value":"fenceURL = await FileAttachment(\"fence.obj\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4741,"value":"fence = loadModelFromURL(fenceURL, \"obj\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"import { teapotObj } from \"@spattana/assignment3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2768,"value":"md`#### Animated Text Code\n\nI'm using some text animation code from
\n\\`https://observablehq.com/@tophtucker/inferring-chart-type-from-autocorrelation-and-other-evils\\`
\nand it seemed like something I could use for the game over message.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2700,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"