From 4082219525a0446de2a6128f428846e229bc250d Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Thu, 7 Mar 2024 14:46:36 +0100 Subject: [PATCH 1/2] fix(css): Make example a little more accessible (#261) --- web-workers/simple-shared-worker/style.css | 22 ++----------- web-workers/simple-web-worker/style.css | 38 +++++++--------------- 2 files changed, 15 insertions(+), 45 deletions(-) diff --git a/web-workers/simple-shared-worker/style.css b/web-workers/simple-shared-worker/style.css index 343ad8aa..b7d5d5f3 100644 --- a/web-workers/simple-shared-worker/style.css +++ b/web-workers/simple-shared-worker/style.css @@ -1,17 +1,8 @@ html { - background-color: #7d2663; + background-color: rgb(230, 230, 230); font-family: sans-serif; } -h1 { - margin: 0; - font-size: 15vw; - letter-spacing: -0.2rem; - position: absolute; - top: 0; - z-index: -1; -} - p { margin: 0 0 1rem 0; } @@ -20,15 +11,8 @@ p { padding: 4vw; width: 75%; margin: 3vw auto; - background-color: rgba(255, 255, 255, 0.7); - border: 5px solid black; - opacity: 0.3; - transition: 1s all; -} - -.controls:hover, -.controls:focus { - opacity: 1; + border: 2px solid; + border-radius: 6px; } .controls label, diff --git a/web-workers/simple-web-worker/style.css b/web-workers/simple-web-worker/style.css index 1e522576..b7d5d5f3 100644 --- a/web-workers/simple-web-worker/style.css +++ b/web-workers/simple-web-worker/style.css @@ -1,40 +1,26 @@ html { - background-color: #7D2663; - font-family: sans-serif; -} - -h1 { - margin: 0; - font-size: 20vmin; - letter-spacing: -0.2rem; - position: absolute; - top: 0; - z-index: -1; + background-color: rgb(230, 230, 230); + font-family: sans-serif; } p { - margin: 0; + margin: 0 0 1rem 0; } .controls { - padding: 4vw; - width: 75%; - margin: 10vw auto; - background-color: rgba(255,255,255,0.7); - border: 5px solid black; - opacity: 0.3; - transition: 1s all; + padding: 4vw; + width: 75%; + margin: 3vw auto; + border: 2px solid; + border-radius: 6px; } -.controls:hover, .controls:focus { - opacity: 1; -} - -.controls label, .controls p, .controls input { - font-size: 3vw; +.controls label, +.controls p, +.controls input { + font-size: 3vw; } .controls div { padding-bottom: 1rem; } - From 50234c815ba1bd98c88ece28145fc5b3042fd71f Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Thu, 7 Mar 2024 16:26:59 +0100 Subject: [PATCH 2/2] chore: remove unused tutorial files (#262) --- .../tutorial/tetrahedron/index.html | 15 - .../tutorial/tetrahedron/webgl-demo.js | 440 ------------------ 2 files changed, 455 deletions(-) delete mode 100644 webgl-examples/tutorial/tetrahedron/index.html delete mode 100644 webgl-examples/tutorial/tetrahedron/webgl-demo.js diff --git a/webgl-examples/tutorial/tetrahedron/index.html b/webgl-examples/tutorial/tetrahedron/index.html deleted file mode 100644 index 6074a84f..00000000 --- a/webgl-examples/tutorial/tetrahedron/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - WebGL Demo - - - - - - - - - - diff --git a/webgl-examples/tutorial/tetrahedron/webgl-demo.js b/webgl-examples/tutorial/tetrahedron/webgl-demo.js deleted file mode 100644 index c07f4543..00000000 --- a/webgl-examples/tutorial/tetrahedron/webgl-demo.js +++ /dev/null @@ -1,440 +0,0 @@ -var tetrahedronRotation = 0.0; - -main(); - -// -// Start here -// -function main() { - const canvas = document.querySelector("#glcanvas"); - const gl = - canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); - - // If we don't have a GL context, give up now - - if (!gl) { - alert( - "Unable to initialize WebGL. Your browser or machine may not support it." - ); - return; - } - - // Vertex shader program - - const vsSource = ` - attribute vec4 aVertexPosition; - attribute vec4 aVertexColor; - - uniform mat4 uModelViewMatrix; - uniform mat4 uProjectionMatrix; - - varying lowp vec4 vColor; - - void main(void) { - gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition; - vColor = aVertexColor; - } - `; - - // Fragment shader program - - const fsSource = ` - varying lowp vec4 vColor; - - void main(void) { - gl_FragColor = vColor; - } - `; - - // Initialize a shader program; this is where all the lighting - // for the vertices and so forth is established. - const shaderProgram = initShaderProgram(gl, vsSource, fsSource); - - // Collect all the info needed to use the shader program. - // Look up which attributes our shader program is using - // for aVertexPosition, aVevrtexColor and also - // look up uniform locations. - const programInfo = { - program: shaderProgram, - attribLocations: { - vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"), - vertexColor: gl.getAttribLocation(shaderProgram, "aVertexColor"), - }, - uniformLocations: { - projectionMatrix: gl.getUniformLocation( - shaderProgram, - "uProjectionMatrix" - ), - modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"), - }, - }; - - // Here's where we call the routine that builds all the - // objects we'll be drawing. - const buffers = initBuffers(gl); - - var then = 0; - - // Draw the scene repeatedly - function render(now) { - now *= 0.001; // convert to seconds - const deltaTime = now - then; - then = now; - - drawScene(gl, programInfo, buffers, deltaTime); - - requestAnimationFrame(render); - } - - requestAnimationFrame(render); -} - -// -// initBuffers -// -// Initialize the buffers we'll need. For this demo, we just -// have one object -- a simple three-dimensional tetrahedron. -// -function initBuffers(gl) { - // Create a buffer for the tetrahedron's vertex positions. - - const positionBuffer = gl.createBuffer(); - - // Select the positionBuffer as the one to apply buffer - // operations to from here out. - - gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); - - // Now create an array of positions for the tetrahedron. - // A equilateral triangle is needed ( well 4 of them ) - // Point `O` is where the height is projected - // The tetrahedron is rotated around point `M` - // Height from vertex `A` to the edge `BC` is `H` - // The edge of the tetrahedron is 2 units long - // |AH| = 1.7320508075688772935274463415059 - // The median and a height AH divides itself by - // the other medians into 1x and 2x ( one part and two parts ) - // |AH|/3 = 0.57735026918962576450914878050197 - // Find the tetrahedron height by argument sine (