Added UI and painted pendulum in different colors

src/app/pages/algorithms/conway-gol/conway-gol.component.html

@@ -35,8 +35,8 @@
         }
         <p>{{ 'SORTING.EXECUTION_TIME' | translate }}: {{ executionTime }} ms</p>
       </div>
-      <div class="grid-size">
+      <div class="input-container">
-        <mat-form-field appearance="outline" class="grid-field">
+        <mat-form-field appearance="outline" class="input-field">
           <mat-label>{{ 'ALGORITHM.GRID_HEIGHT' | translate }}</mat-label>
           <input
             matInput
@@ -47,7 +47,7 @@
             (ngModelChange)="pauseGame(); genericGridComponent.gridRows = gridRows; genericGridComponent.applyGridSize()"
           />
         </mat-form-field>
-        <mat-form-field appearance="outline" class="grid-field">
+        <mat-form-field appearance="outline" class="input-field">
           <mat-label>{{ 'ALGORITHM.GRID_WIDTH' | translate }}</mat-label>
           <input
             matInput
@@ -58,7 +58,7 @@
             (ngModelChange)="pauseGame(); genericGridComponent.gridCols = gridCols; genericGridComponent.applyGridSize()"
           />
         </mat-form-field>
-          <mat-form-field appearance="outline" class="grid-field">
+          <mat-form-field appearance="outline" class="input-field">
             <mat-label>{{ 'GOL.SPEED' | translate }}</mat-label>
             <input
               matInput

src/app/pages/algorithms/pathfinding/pathfinding.component.html

@@ -26,8 +26,8 @@
         </mat-button-toggle-group>
       </div>
       <div class="controls-panel">
-        <div class="grid-size">
+        <div class="input-container">
-          <mat-form-field appearance="outline" class="grid-field">
+          <mat-form-field appearance="outline" class="input-field">
             <mat-label>{{ 'ALGORITHM.GRID_HEIGHT' | translate }}</mat-label>
                       <input
                         matInput
@@ -38,7 +38,7 @@
                         (ngModelChange)="genericGridComponent.gridRows = gridRows; genericGridComponent.applyGridSize()"
                       />          </mat-form-field>
 
-          <mat-form-field appearance="outline" class="grid-field">
+          <mat-form-field appearance="outline" class="input-field">
             <mat-label>{{ 'ALGORITHM.GRID_WIDTH' | translate }}</mat-label>
                       <input
                         matInput

src/app/pages/algorithms/pendulum/pendulum.component.html

@@ -1,8 +1,38 @@
 <mat-card class="container">
   <mat-card-header>
-    <mat-card-title>Ich bin ein Pendel - blub</mat-card-title>
+    <mat-card-title>{{ 'PENDULUM.TITLE' | translate }}</mat-card-title>
   </mat-card-header>
   <mat-card-content>
+    <div class="controls-container">
+      <div style="display: flex; align-items: center; gap: 10px;">
+          <p style="white-space: nowrap">{{ 'PENDULUM.TRAIL_DECAY_TIME' | translate }}</p>
+          <ngx-slider [(value)]="simParams.trailDecay" [options]="trailDecayOptions" ></ngx-slider>
+          <p style="white-space: nowrap">{{ 'PENDULUM.ATTRACTION' | translate }}</p>
+          <ngx-slider [(value)]="simParams.g" [options]="gravityOptions" ></ngx-slider>
+      </div>
+      <div style="display: flex; align-items: center; gap: 10px;">
+        <p style="white-space: nowrap">{{ 'PENDULUM.L1_LENGTH' | translate }}</p>
+        <ngx-slider [(value)]="simParams.l1" [options]="lengthOptions" ></ngx-slider>
+        <p style="white-space: nowrap">{{ 'PENDULUM.L2_LENGTH' | translate }}</p>
+        <ngx-slider [(value)]="simParams.l2" [options]="lengthOptions" ></ngx-slider>
+      </div>
+      <div style="display: flex; align-items: center; gap: 10px;">
+        <p style="white-space: nowrap">{{ 'PENDULUM.M1_MASS' | translate }}</p>
+        <ngx-slider [(value)]="simParams.m1" [options]="massOptions" ></ngx-slider>
+        <p style="white-space: nowrap">{{ 'PENDULUM.M2_MASS' | translate }}</p>
+        <ngx-slider [(value)]="simParams.m2" [options]="massOptions" ></ngx-slider>
+      </div>
+      <div style="display: flex; align-items: center; gap: 10px;">
+          <p style="white-space: nowrap">{{ 'PENDULUM.DAMPING' | translate }}</p>
+          <ngx-slider [(value)]="simParams.damping" [options]="dampingOptions" ></ngx-slider>
+      </div>
+      <div class="legend">
+        <span><span class="legend-color L1"></span> L1</span>
+        <span><span class="legend-color L2"></span> L2</span>
+        <span><span class="legend-color M1"></span> M1</span>
+        <span><span class="legend-color M2"></span> M2</span>
+      </div>
+    </div>
     <app-babylon-canvas
       [config]="renderConfig"
       (sceneReady)="onSceneReady($event)"

src/app/pages/algorithms/pendulum/pendulum.component.ts

@@ -3,6 +3,10 @@ import {BabylonCanvas, RenderConfig, SceneEventData} from '../../../shared/rende
 import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
 import {ComputeShader, ShaderLanguage, StorageBuffer} from '@babylonjs/core';
 import {PENDULUM_FRAGMENT_SHADER_WGSL, PENDULUM_PHYSIC_COMPUTE_SHADER_WGSL, PENDULUM_RENDER_COMPUTE_SHADER_WGSL, PENDULUM_VERTEX_SHADER_WGSL} from './pendulum.shader';
+import {FormsModule} from '@angular/forms';
+import {NgxSliderModule, Options} from '@angular-slider/ngx-slider';
+import {DEFAULT_DAMPING, DEFAULT_G, DEFAULT_L1_LENGTH, DEFAULT_M1_MASS, DEFAULT_L2_LENGTH, DEFAULT_M2_MASS, DEFAULT_TRAIL_DECAY, MAX_DAMPING, MAX_G, MAX_LENGTH, MAX_MASS, MAX_TRAIL_DECAY, MIN_DAMPING, MIN_G, MIN_LENGTH, MIN_MASS, MIN_TRAIL_DECAY} from './pendulum.model';
+import {TranslatePipe} from '@ngx-translate/core';
 
 @Component({
   selector: 'app-pendulum',
@@ -12,6 +16,9 @@ import {PENDULUM_FRAGMENT_SHADER_WGSL, PENDULUM_PHYSIC_COMPUTE_SHADER_WGSL, PEND
     MatCardContent,
     MatCardHeader,
     MatCardTitle,
+    FormsModule,
+    NgxSliderModule,
+    TranslatePipe,
   ],
   templateUrl: './pendulum.component.html',
   styleUrl: './pendulum.component.scss',
@@ -29,17 +36,67 @@ export class PendulumComponent {
     uniformBufferNames: []
   };
 
+  trailDecayOptions: Options = {
+    floor: MIN_TRAIL_DECAY,
+    ceil: MAX_TRAIL_DECAY,
+    logScale: false,
+    step: 0.001,
+    showTicks: false,
+    hideLimitLabels: false,
+    hidePointerLabels: false
+  };
+
+  gravityOptions: Options = {
+    floor: MIN_G,
+    ceil: MAX_G,
+    logScale: false,
+    step: 0.01,
+    showTicks: false,
+    hideLimitLabels: false,
+    hidePointerLabels: false
+  };
+
+  dampingOptions: Options = {
+    floor: MAX_DAMPING,
+    ceil: MIN_DAMPING,
+    logScale: false,
+    step: 0.001,
+    showTicks: false,
+    hideLimitLabels: false,
+    hidePointerLabels: false
+  };
+
+  lengthOptions: Options = {
+    floor: MIN_LENGTH,
+    ceil: MAX_LENGTH,
+    logScale: false,
+    step: 0.1,
+    showTicks: false,
+    hideLimitLabels: false,
+    hidePointerLabels: false
+  };
+
+  massOptions: Options = {
+    floor: MIN_MASS,
+    ceil: MAX_MASS,
+    logScale: false,
+    step: 0.1,
+    showTicks: false,
+    hideLimitLabels: false,
+    hidePointerLabels: false
+  };
+
   // Central management of physics parameters
-  private readonly simParams = {
+  readonly simParams = {
     time: 0,
     dt: 0.015,
-    g: 9.81,
+    g: DEFAULT_G,
-    m1: 2.0,
+    m1: DEFAULT_M1_MASS,
-    m2: 1.0,
+    m2: DEFAULT_M2_MASS,
-    l1: 1.5,
+    l1: DEFAULT_L1_LENGTH,
-    l2: 1.2,
+    l2: DEFAULT_L2_LENGTH,
-    damping: 0.999,
+    damping: DEFAULT_DAMPING,
-    trailDecay: 0.98
+    trailDecay: DEFAULT_TRAIL_DECAY
   };
 
   onSceneReady(event: SceneEventData) {

src/app/pages/algorithms/pendulum/pendulum.model.ts

@@ -0,0 +1,21 @@
+export const DEFAULT_G = 9.81;
+export const MIN_G = 2;
+export const MAX_G = 15;
+
+export const DEFAULT_DAMPING = 0.999;
+export const MIN_DAMPING = 1;
+export const MAX_DAMPING = 0.7;
+
+export const DEFAULT_TRAIL_DECAY = 0.96;
+export const MIN_TRAIL_DECAY = 0.2;
+export const MAX_TRAIL_DECAY = 0.9999;
+
+export const DEFAULT_L1_LENGTH = 1.5;
+export const DEFAULT_L2_LENGTH = 1.2;
+export const MIN_LENGTH = 0.2;
+export const MAX_LENGTH = 3;
+
+export const DEFAULT_M1_MASS = 2;
+export const DEFAULT_M2_MASS = 1;
+export const MIN_MASS = 0.1;
+export const MAX_MASS = 5;

src/app/pages/algorithms/pendulum/pendulum.shader.ts

@@ -62,27 +62,47 @@ export const PENDULUM_FRAGMENT_SHADER_WGSL = SHARED_STRUCTS + `
       let index = y * width + x;
 
       // --- THE MAGIC DECODING ---
-      let rawVal = pixelBuffer[index];
+      var val = pixelBuffer[index];
-      var trailVal = rawVal;
+      var isLine1 = false;
-      var isLine = false;
+      var isLine2 = false;
 
-      // Check if the +10.0 flag is present (meaning this pixel is currently a line)
+      // 1. Check for overlays (Lines)
-      if (trailVal >= 10.0) {
+      if (val >= 20.0) {
-          isLine = true;
+          isLine2 = true;
-          trailVal = trailVal - 10.0; // Remove flag to get the true trail value underneath
+          val = val - 20.0;
+      } else if (val >= 10.0) {
+          isLine1 = true;
+          val = val - 10.0;
       }
 
-      let bgColor = vec3<f32>(0.1, 0.1, 0.15);
+      // 2. Check which trail it is
-      let massColor = vec3<f32>(1.0, 1.0, 1.0);
+      var isTrail2 = false;
-      let lineColor = vec3<f32>(0.5, 0.5, 0.5);
+      if (val >= 2.0) {
+          isTrail2 = true;
+          val = val - 2.0;
+      }
+
+      // 3. What remains is purely the fading intensity (0.0 to 1.0)
+      let trailIntensity = val;
+
+      // --- COLORS ---
+      let bgColor    = vec3<f32>(0.1, 0.1, 0.15);
+      let mass1Color = vec3<f32>(1.0, 0.0, 0.0); // Red
+      let mass2Color = vec3<f32>(0.0, 1.0, 0.0); // Green
+      let line1Color = vec3<f32>(1.0, 1.0, 0.0); // Yellow
+      let line2Color = vec3<f32>(1.0, 0.0, 1.0); // Magenta
+
+      var massColor = mass1Color;
+      if (isTrail2) {
+          massColor = mass2Color;
+      }
 
       // Calculate background blending with the trail
-      var finalColor = mix(bgColor, massColor, clamp(trailVal, 0.0, 1.0));
+      var finalColor = mix(bgColor, massColor, clamp(trailIntensity, 0.0, 1.0));
 
-      // Overwrite with the grey line if necessary
+      // Overwrite with the line colors if necessary
-      if (isLine) {
+      if (isLine1) { finalColor = line1Color; }
-          finalColor = lineColor;
+      if (isLine2) { finalColor = line2Color; }
-      }
 
       fragmentOutputs.color = vec4<f32>(finalColor, 1.0);
       return fragmentOutputs;
@@ -152,17 +172,24 @@ export const PENDULUM_RENDER_COMPUTE_SHADER_WGSL = SHARED_STRUCTS + `
         let aspect = p.width / p.height;
         let uv_corr = vec2<f32>(uv.x * aspect, uv.y);
 
-        // --- TRAIL EXTRACT & DECAY ---
+        // --- 1. EXTRACT & DECAY OLD MEMORY ---
-        let oldRaw = pixelBuffer[index];
+        var memory = pixelBuffer[index];
-        var oldTrail = oldRaw;
 
-        // If the pixel was a line last frame, remove the +10 flag to get the trail memory
+        // Strip line overlays from the previous frame
-        if (oldTrail >= 10.0) {
+        if (memory >= 20.0) { memory = memory - 20.0; }
-            oldTrail = oldTrail - 10.0;
+        else if (memory >= 10.0) { memory = memory - 10.0; }
+
+        // Check if the memory belongs to Trail 2
+        var isTrail2 = false;
+        if (memory >= 2.0) {
+            isTrail2 = true;
+            memory = memory - 2.0;
         }
-        var newVal = oldTrail * p.trailDecay;
 
-        // Pendulum geometry
+        // Apply decay to the pure intensity
+        memory = memory * p.trailDecay;
+
+        // --- 2. CALCULATE GEOMETRY ---
         let origin = vec2<f32>(0.5 * aspect, 0.3);
         let displayScale = 0.15;
 
@@ -174,18 +201,34 @@ export const PENDULUM_RENDER_COMPUTE_SHADER_WGSL = SHARED_STRUCTS + `
         let dMass1 = length(uv_corr - p1);
         let dMass2 = length(uv_corr - p2);
 
-        let isLine = (dLine1 < 0.002 || dLine2 < 0.002);
+        // --- 3. SMART LAYERING ---
-        let isMass = (dMass1 < 0.01 || dMass2 < 0.01);
+        var baseVal = 0.0;
 
-        // --- SMART LAYERING ---
+        // Base Layer (Masses & Trails)
-        if (isMass) {
+        if (dMass1 < 0.02) {
-            newVal = 1.0;
+            baseVal = 1.0; // Mass 1 = 1.0 (Trail 1 Max)
-        } else if (isLine) {
+        } else if (dMass2 < 0.02) {
-            // Lines are marked with +10.0 to tell the fragment shader to paint them grey,
+            baseVal = 3.0; // Mass 2 = 2.0 (Flag) + 1.0 (Trail 2 Max)
-            // WITHOUT overwriting the fading trail memory underneath!
+        } else {
-            newVal = newVal + 10.0;
+            // Write fading memory back
+            if (isTrail2) {
+                baseVal = memory + 2.0;
+            } else {
+                baseVal = memory;
+            }
         }
 
-        pixelBuffer[index] = newVal;
+        // Overlay Layer (Lines)
+        var overlay = 0.0;
+        // Don't draw lines over the masses (Clean Z-Index)
+        if (dMass1 < 0.02 || dMass2 < 0.02) {
+            overlay = 0.0;
+        } else if (dLine1 < 0.003) {
+            overlay = 10.0;
+        } else if (dLine2 < 0.003) {
+            overlay = 20.0;
+        }
+
+        pixelBuffer[index] = baseVal + overlay;
     }
 `;

src/assets/i18n/de.json

@@ -415,6 +415,16 @@
       "DISCLAIMER_4": "Licht & Schatten: Um die Tiefe sichtbar zu machen, werden Lichtreflexionen und Schatten (Ambient Occlusion) basierend auf der Krümmung der Formel simuliert."
     }
   },
+  "PENDULUM": {
+    "TITLE": "Doppel-Pendel",
+    "TRAIL_DECAY_TIME": "Spurlänge",
+    "DAMPING": "Dämpfung",
+    "ATTRACTION": "Anziehungskraft",
+    "L1_LENGTH": "Länge L1",
+    "L2_LENGTH": "Länge L2",
+    "M1_MASS": "Masse M1",
+    "M2_MASS": "Masse M2"
+  },
   "ALGORITHM": {
     "TITLE": "Algorithmen",
     "PATHFINDING": {

src/assets/i18n/en.json

@@ -414,6 +414,16 @@
       "DISCLAIMER_4": "Light & Shadow: To visualize depth, light reflections and shadows (Ambient Occlusion) are simulated based on the curvature of the formula."
     }
   },
+  "PENDULUM": {
+    "TITLE": "Double pendulum",
+    "TRAIL_DECAY_TIME": "Trail length",
+    "DAMPING": "Damping",
+    "ATTRACTION": "Attraction",
+    "L1_LENGTH": "Length L1",
+    "L2_LENGTH": "Length L2",
+    "M1_MASS": "Mass M1",
+    "M2_MASS": "Mass M2"
+  },
   "ALGORITHM": {
     "TITLE": "Algorithms",
     "PATHFINDING": {

src/styles.scss

@@ -262,13 +262,13 @@ a {
   }
 }
 
-.grid-size {
+.input-container {
   display: flex;
   gap: 0.75rem;
   align-items: center;
   flex-wrap: wrap;
 
-  .grid-field {
+  .input-field {
     width: 150px;
   }
 }
@@ -301,6 +301,10 @@ canvas {
     &.path { background-color: gold; }
     &.empty { background-color: lightgray; }
     &.alive { background-color: black; }
+    &.L1 { background-color: yellow; }
+    &.L2 { background-color: magenta; }
+    &.M1 { background-color: red; }
+    &.M2 { background-color: green; }
   }
 }
 
@@ -339,4 +343,4 @@ canvas {
       background-color: #4caf50; /* Green for sorted */
     }
   }
-}
+}