diff --git a/index.html b/index.html index d0452fd..11f546d 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ - + diff --git a/pixelShader.js b/pixelShader.js index d0955b7..d6e01f3 100644 --- a/pixelShader.js +++ b/pixelShader.js @@ -30,7 +30,7 @@ if (!gl) { //add gui let obj = { pixelSize: 5, - colorPalette: "underwater", + colorPalette: "vampire", }; let gui = new dat.gui.GUI( { autoPlace: false } ); @@ -48,7 +48,7 @@ obj['uploadVideo'] = function () { gui.add(obj, 'uploadVideo').name('Upload Video'); gui.add(obj, "pixelSize").min(1).max(32).step(1).name('Pixel Size'); -gui.add(obj, "colorPalette", ["field","underwater","forest","flame","dusk","grayscale"]); +gui.add(obj, "colorPalette", ["field","underwater","forest","flame","dusk","grayscale","vampire"]); obj['pausePlay'] = function () { toggleAnimationPlay(); @@ -141,7 +141,19 @@ const palettes = { [0.778, 0.778, 0.778], [0.889, 0.889, 0.889], [1.000, 1.000, 1.000] // White - ] + ], + vampire: [ + [0.059, 0.063, 0.082], // Deep dark background + [0.118, 0.125, 0.157], // Dark blue-gray + [0.196, 0.208, 0.255], // Light blue highlights + [0.157, 0.165, 0.196], // Medium blue-gray + [0.392, 0.059, 0.078], // Dark red + [0.784, 0.118, 0.157], // Medium red + [0.902, 0.235, 0.196], // Bright red + [1.000, 0.392, 0.275], // Orange-red glow + [1.000, 0.627, 0.431], // Light orange highlight + [1.000, 0.824, 0.667] // Pale orange glow + ], }; // Helper function to generate shader color definitions @@ -241,7 +253,7 @@ const fragmentShaderSource = ` dist = distance(color, c4_7); if(dist < minDist) { minDist = dist; closestColor = c4_7; } dist = distance(color, c4_8); if(dist < minDist) { minDist = dist; closestColor = c4_8; } dist = distance(color, c4_9); if(dist < minDist) { minDist = dist; closestColor = c4_9; } - } else { + } else if (paletteChoice == 5) { // Grayscale palette dist = distance(color, c5_0); if(dist < minDist) { minDist = dist; closestColor = c5_0; } dist = distance(color, c5_1); if(dist < minDist) { minDist = dist; closestColor = c5_1; } @@ -253,6 +265,18 @@ const fragmentShaderSource = ` dist = distance(color, c5_7); if(dist < minDist) { minDist = dist; closestColor = c5_7; } dist = distance(color, c5_8); if(dist < minDist) { minDist = dist; closestColor = c5_8; } dist = distance(color, c5_9); if(dist < minDist) { minDist = dist; closestColor = c5_9; } + } else { + // Vampire palette + dist = distance(color, c6_0); if(dist < minDist) { minDist = dist; closestColor = c6_0; } + dist = distance(color, c6_1); if(dist < minDist) { minDist = dist; closestColor = c6_1; } + dist = distance(color, c6_2); if(dist < minDist) { minDist = dist; closestColor = c6_2; } + dist = distance(color, c6_3); if(dist < minDist) { minDist = dist; closestColor = c6_3; } + dist = distance(color, c6_4); if(dist < minDist) { minDist = dist; closestColor = c6_4; } + dist = distance(color, c6_5); if(dist < minDist) { minDist = dist; closestColor = c6_5; } + dist = distance(color, c6_6); if(dist < minDist) { minDist = dist; closestColor = c6_6; } + dist = distance(color, c6_7); if(dist < minDist) { minDist = dist; closestColor = c6_7; } + dist = distance(color, c6_8); if(dist < minDist) { minDist = dist; closestColor = c6_8; } + dist = distance(color, c6_9); if(dist < minDist) { minDist = dist; closestColor = c6_9; } } return closestColor; @@ -418,6 +442,7 @@ function drawScene(){ case 'flame': paletteValue = 3; break; case 'dusk': paletteValue = 4; break; case 'grayscale': paletteValue = 5; break; + case 'vampire': paletteValue = 6; break; default: paletteValue = 0; } gl.uniform1i(paletteChoiceLocation, paletteValue);