add: fractal colors

Author: Destructor-Ben

TODO.md

@@ -1,10 +1,14 @@
 # To Do List
 
-Add iCloud Icons extension and TrackMySpa to projects list?
+Redo styling
+Remove julia code from homepage, perhaps bake the animation
+Actually make it interesting
+Use catpuccin colours
+
+Move various projects into their own repos
+
 ASMR sound generator
 Julia
-Calculator
-Games
 
 - Make the mobile version better
 - Make page transitions

src/lib/julia/julia-config.ts

@@ -14,10 +14,13 @@ export const defaultConfig: Config = {
   maxIterations: 100,
   radius: 4,
 
-  fractalColorR: 180,
-  fractalColorG: 111,
-  fractalColorB: 214,
+  // TODO: rename to falloff colour
+  fractalColorR: 180 / 255,
+  fractalColorG: 111 / 255,
+  fractalColorB: 214 / 255,
   fractalColorA: 1,
+  fractalColorStrength: 255,
+
   backgroundColorR: 0,
   backgroundColorG: 0,
   backgroundColorB: 0,
@@ -69,6 +72,8 @@ export interface Config {
   fractalColorG: number;
   fractalColorB: number;
   fractalColorA: number;
+  fractalColorStrength: number;
+
   backgroundColorR: number;
   backgroundColorG: number;
   backgroundColorB: number;

src/lib/julia/julia-renderer.ts

@@ -162,6 +162,11 @@ export default class JuliaRenderer {
     );
 
     // Color
+    this.uniformLocations.fractalColorStrength = gl.getUniformLocation(
+      this.program,
+      "uFractalColorStrength",
+    );
+
     this.uniformLocations.fractalColor = gl.getUniformLocation(
       this.program,
       "uFractalColor",
@@ -265,6 +270,7 @@ export default class JuliaRenderer {
     const config = this.config;
 
     // Update color settings
+    gl.uniform1f(uniforms.fractalColorStrength, config.fractalColorStrength);
     gl.uniform4f(uniforms.fractalColor, config.fractalColorR, config.fractalColorG, config.fractalColorB, config.fractalColorA);
     gl.uniform4f(uniforms.backgroundColor, config.backgroundColorR, config.backgroundColorG, config.backgroundColorB, config.backgroundColorA);
 

src/lib/julia/shaders/frag.glsl

@@ -3,6 +3,7 @@ precision highp float;
 
 {{uniforms}}
 
+uniform float uFractalColorStrength;
 uniform vec4 uFractalColor;
 uniform vec4 uBackgroundColor;
 
@@ -52,5 +53,5 @@ void main() {
     }
 
     // Calculate final color
-    FragColor = mix(uBackgroundColor, uFractalColor, vec4(pixelValue));
+    FragColor = mix(uBackgroundColor, uFractalColor * uFractalColorStrength, vec4(pixelValue));
 }

src/lib/style/variables.css

@@ -5,7 +5,7 @@
   --font: -apple-system, BlinkMacSystemFont, "Poppins", sans-serif;
   --font-heading: "Consolas", monospace;
 
-  /* Colours */
+  /* Colors */
   --col-text: #f1f1f1;
   --col-heading: white;
   --col-bg: #0a0a16;

src/routes/+page.svelte

@@ -13,7 +13,7 @@
 
   // TODO: clean up the animation itself
   // Either just make a cool animation or make it shape into my pfp
-  // Use these colours
+  // Use these colors
   /*
   --col-rainbow-1: #df406f;
   --col-rainbow-2: #fbda34;

src/routes/projects/julia/+page.svelte

@@ -375,6 +375,29 @@
             <NumberInput bind:value={config.radius} min={1} max={1000} step={0.01}>
               Escape Radius - How far a point must travel to be considered part of the set
             </NumberInput>
+
+            <h2>Falloff</h2>
+
+            <h2>Falloff Color</h2>
+            <NumberInput bind:value={config.fractalColorR} min={0} max={1} step={0.01}>R</NumberInput>
+            <NumberInput bind:value={config.fractalColorG} min={0} max={1} step={0.01}>G</NumberInput>
+            <NumberInput bind:value={config.fractalColorB} min={0} max={1} step={0.01}>B</NumberInput>
+            <NumberInput bind:value={config.fractalColorA} min={0} max={1} step={0.01}>A</NumberInput>
+            <NumberInput bind:value={config.fractalColorStrength} min={0} max={1000} step={0.01}>Strength (allows blowing out)</NumberInput>
+
+            <h2>Background Color</h2>
+            <NumberInput bind:value={config.backgroundColorR} min={0} max={1} step={0.01}>R</NumberInput>
+            <NumberInput bind:value={config.backgroundColorG} min={0} max={1} step={0.01}>G</NumberInput>
+            <NumberInput bind:value={config.backgroundColorB} min={0} max={1} step={0.01}>B</NumberInput>
+            <NumberInput bind:value={config.backgroundColorA} min={0} max={1} step={0.01}>A</NumberInput>
+
+            <h2>Set Color</h2>
+            <ToggleInput bind:value={config.useSetColorOverValue}>Whether to use the color provided below for pixels in the set, or to pretend that pixels in the set have the value provided below.</ToggleInput>
+            <NumberInput bind:value={config.setValue} min={0} max={1} step={0.01}>The value of pixels in the set</NumberInput>
+            <NumberInput bind:value={config.setColorR} min={0} max={1} step={0.01}>R</NumberInput>
+            <NumberInput bind:value={config.setColorG} min={0} max={1} step={0.01}>G</NumberInput>
+            <NumberInput bind:value={config.setColorB} min={0} max={1} step={0.01}>B</NumberInput>
+            <NumberInput bind:value={config.setColorA} min={0} max={1} step={0.01}>A</NumberInput>
           </div>
         </div>
       {/if}