Theta Nil's Site

Posts

Tempor est exercitation ad qui pariatur quis adipisicing aliquip nisi ea consequat ipsum occaecat. Nostrud consequat ullamco laboris fugiat esse esse adipisicing velit laborum ipsum incididunt ut enim. Dolor pariatur nulla quis fugiat dolore excepteur. Aliquip ad quis aliqua enim do consequat.

Triangle-Circle Intersection Detection with Curved Motion

This post demonstrates real-time intersection detection between a moving triangle and a moving circle, with automatic marking of intersection points as the shapes follow curved paths.

Intersection Demos:

1.0x

Triangle-Circle Intersection Detection

Intersection Algorithm:

1. Line-Circle Intersection

function lineCircleIntersection(lineStart, lineEnd, circleCenter, radius) {
    // Convert to quadratic equation: at² + bt + c = 0
    const dx = lineEnd.x - lineStart.x;
    const dy = lineEnd.y - lineStart.y;
    const fx = lineStart.x - circleCenter.x;
    const fy = lineStart.y - circleCenter.y;
    
    const a = dx * dx + dy * dy;
    const b = 2 * (fx * dx + fy * dy);
    const c = (fx * fx + fy * fy) - radius * radius;
    
    const discriminant = b * b - 4 * a * c;
    // Returns intersection points on triangle edges
}

2. Point-in-Triangle Test

function pointInTriangle(point, triangle) {
    // Barycentric coordinate system
    // Tests if circle center is inside triangle
    const u = (dot11 * dot02 - dot01 * dot12) * invDenom;
    const v = (dot00 * dot12 - dot01 * dot02) * invDenom;
    return (u >= 0) && (v >= 0) && (u + v <= 1);
}

Motion Paths:

Triangle Path (Large Circle - Clockwise)

// Large circular orbit - triangle moves clockwise
const x = centerX + Math.cos(time) * 180;
const y = centerY + Math.sin(time) * 180;
const rotation = time + Math.PI / 2; // Points in movement direction

Circle Path (Small Circle - Counter-clockwise)

// Smaller, faster circular orbit - circle moves counter-clockwise
const x = centerX + Math.cos(-time * 1.5) * 120;
const y = centerY + Math.sin(-time * 1.5) * 120;
// Opposite direction and 1.5x speed creates regular intersections

Intersection Visualization:

Detection Features:

Real-time Processing

Visual Feedback

// Current intersections: pulsing animation
const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
animate.setAttribute('attributeName', 'r');
animate.setAttribute('values', '8;12;8');

// Persistent intersections: fade over time
const opacity = Math.max(0.1, 1 - age / 10);

Interactive Controls:

Mathematical Precision:

Geometric Algorithms

This demonstrates advanced geometric intersection detection with real-time visualization, combining mathematical precision with interactive feedback systems!

Line Intersection Detection and Splitting

This post demonstrates efficient line intersection detection using SVG-optimized techniques, with automatic circle placement and visual line splitting effects.

Intersection Demos:

SVG Optimization Techniques

1. Bounding Box Pre-filtering

function bboxIntersect(bbox1, bbox2) {
    return !(bbox1.x + bbox1.width < bbox2.x || 
             bbox2.x + bbox2.width < bbox1.x || 
             bbox1.y + bbox1.height < bbox2.y || 
             bbox2.y + bbox2.height < bbox1.y);
}

// Quick elimination before expensive intersection math
if (bboxIntersect(line1.getBBox(), line2.getBBox())) {
    // Only then do precise intersection calculation
}

2. SVG Coordinate Extraction

function getLineFromElement(line) {
    return {
        x1: parseFloat(line.getAttribute('x1')),
        y1: parseFloat(line.getAttribute('y1')),
        x2: parseFloat(line.getAttribute('x2')),
        y2: parseFloat(line.getAttribute('y2'))
    };
}

3. Visual Line Splitting

function getLineSplitSegments(line, intersections) {
    // Creates visual gaps at intersection points
    // More efficient than creating separate path elements
    const segments = [];
    intersections.forEach(intersection => {
        // Add gap around intersection point
        const gapSize = 0.02; // 2% of line length
        // Split line into segments with gaps
    });
    return segments;
}

4. Efficient Intersection Algorithm

function lineIntersection(line1, line2) {
    // Parametric line intersection
    // Returns null for parallel lines (early exit)
    // Checks if intersection is within line segments
    // Returns intersection point with parameter values
}

Performance Features

Optimization Strategies:

  1. Bounding Box Testing: Quick elimination of non-intersecting line pairs
  2. SVG Native Coordinates: Direct attribute access without transformations
  3. Parametric Intersection: Mathematical precision with early exits
  4. Visual Effects: Line splitting and gap rendering
  5. Real-time Updates: Efficient redraw strategies

Interactive Features:

SVG-Specific Benefits:

This system demonstrates how SVG’s built-in features can optimize geometric calculations and provide smooth interactive experiences!

SVG Shape Example

SVG Shape Display

Here’s an example of displaying SVG shapes directly in a Hugo markdown post.

Inline SVG Example

You can embed SVG directly in your markdown:

SVG Shapes

Styled SVG with CSS

You can also style SVG elements with CSS:

SVG with Normalized Coordinates

This post demonstrates how to generate SVG content with JavaScript using normalized coordinates (-1 to 1) similar to fragment shaders.

Key Concepts

Normalized Coordinates

// Convert screen position to normalized coordinates (-1 to 1)
const nx = (i / resolution) * 2 - 1;
const ny = (j / resolution) * 2 - 1;

// Convert normalized coordinates back to SVG coordinates
function normToSvg(nx, ny, width, height) {
    const x = (nx + 1) * width * 0.5;
    const y = (-ny + 1) * height * 0.5; // Flip Y for SVG
    return { x, y };
}

Fragment Shader-like Functions

function fragmentShader(nx, ny, time) {
    const dist = length(nx, ny);
    const angle = Math.atan2(ny, nx);
    
    const rings = sin(dist * 10 - time * 2) * 0.5 + 0.5;
    const spiral = sin(angle * 8 + dist * 20 - time * 3) * 0.5 + 0.5;
    
    return { r: rings, g: spiral, b: 0.8 };
}

Performance Considerations

Advanced Techniques

  1. Use viewBox: Define custom coordinate systems
  2. Float Precision: JavaScript numbers are 64-bit floats, perfect for shader-like calculations
  3. Color Spaces: Convert between HSL, RGB, and normalized color values
  4. Time-based Animation: Use timestamps for consistent animation speed
  5. Interactive: Add mouse/touch events for interactive experiences

This approach gives you the flexibility of fragment shaders with the scalability and styling capabilities of SVG!

Wireframe Box Animation

This post demonstrates a 3D wireframe cube animation using JavaScript-generated SVG with normalized coordinates and matrix transformations.

Animated Wireframes:

Technical Features

3D Mathematics

Wireframe Rendering

Animation Types

  1. Single Box: Classic rotating wireframe cube
  2. Multiple Boxes: Several cubes with different scales and positions
  3. Tunnel Effect: Infinite tunnel of rotating wireframes

Coordinate System

// 3D cube vertices in normalized coordinates (-1 to 1)
const cubeVertices = [
    [-1, -1,  1], [ 1, -1,  1], [ 1,  1,  1], [-1,  1,  1], // Front
    [-1, -1, -1], [ 1, -1, -1], [ 1,  1, -1], [-1,  1, -1]  // Back
];

// Transform to screen space
function transformPoint(matrix, x, y, z) {
    const w = matrix[12] * x + matrix[13] * y + matrix[14] * z + matrix[15];
    return {
        x: (matrix[0] * x + matrix[1] * y + matrix[2] * z + matrix[3]) / w,
        y: (matrix[4] * x + matrix[5] * y + matrix[6] * z + matrix[7]) / w
    };
}

Performance Optimizations

This wireframe system demonstrates how to build a complete 3D rendering pipeline using just SVG and JavaScript, with normalized coordinates providing a clean mathematical foundation!

Distributed Monolith Pipeline Analysis: Improvements and Refinements

Executive Summary

This analysis examines the proposed distributed monolith pipeline architecture with 47 component repositories feeding into a central integration repository. After reviewing the current design and evaluating GitHub’s merge queue capabilities, several key improvements and refinements are identified to enhance velocity, reliability, and operational efficiency.

Current Architecture Analysis

Strengths

Current Limitations

GitHub Merge Queue Integration Opportunities

Native GitHub Features Available

Based on GitHub’s merge queue documentation, several features directly address current limitations:

Distributed Monolith Pipeline

Overview

This proposal outlines the release pipeline for a distributed monolith system using Bazel as the build system. The architecture consists of component repositories that feed into an integration repository, which maintains the manifest and orchestrates releases.

System Architecture

graph TB
    subgraph "Component Repositories"
        C1[Component A<br/>Independent versioning]
        C2[Component B<br/>Independent versioning]
        C3[Component C<br/>Independent versioning]
        Cn[Component N<br/>Independent versioning]
    end
    
    subgraph "Integration Repository"
        IR[Integration Repo<br/>Root modules & configuration]
        M[Manifest<br/>Pinned versions]
        IT[Integration Testing<br/>Hardware tests]
    end
    
    subgraph "Release Artifacts"
        CD[Consolidated Distribution<br/>Tagged release]
    end
    
    C1 --> IR
    C2 --> IR
    C3 --> IR
    Cn --> IR
    
    IR --> M
    IR --> IT
    IT --> M
    M --> CD

Release Pipeline Stages

The pipeline consists of 5 distinct stages:

Accursed

design

Midgaard Static Site Recreation

Recreating the classic MUD city of Midgaard as a Hugo static site, where each room is a markdown file with YAML frontmatter containing spatial and descriptive data.

Room Structure

Each room will be a markdown file with the following YAML frontmatter:

---
title: "Temple Square"
room_id: "temple_square"
coordinates: [0, 0, 0]  # x, y, z
short_description: "the Temple Square"
exits:
  north: "temple_entrance"
  south: "market_square" 
  east: "eastern_avenue"
  west: "western_road"
  up: null
  down: null
npcs:
  - name: "a temple guard"
    description: "A stern-looking guard watches over the square"
items:
  - "a marble fountain"
  - "stone benches"
ambiance:
  - "The sound of flowing water echoes from the fountain"
  - "Pilgrims move quietly through the square"
lighting: "bright"
weather_affected: true
---

You stand in the heart of Midgaard's Temple Square. A magnificent marble fountain 
dominates the center, its crystalline waters catching the light. Stone benches 
line the square's perimeter, offering rest to weary travelers. To the north, 
the grand temple rises majestically, while bustling market sounds drift from the south.

Directory Structure

content/
  midgaard/
    _index.md           # Main city overview
    temple/
      square.md         # Temple Square (0,0,0)
      entrance.md       # Temple Entrance (0,1,0)
      altar.md          # Main Altar (0,2,0)
    market/
      square.md         # Market Square (0,-1,0)
      fountain.md       # Market Fountain (0,-2,0)
      stalls/
        weapon_shop.md  # Weapon Shop (-1,-1,0)
        armor_shop.md   # Armor Shop (1,-1,0)
    residential/
      main_street.md    # Main Street
      inn.md           # The Midgaard Inn
      tavern.md        # Local Tavern
    outskirts/
      gates/
        north.md       # North Gate
        south.md       # South Gate
        east.md        # East Gate  
        west.md        # West Gate

Content Generation Strategy

  1. Core Locations: Start with ~20 essential Midgaard locations (temple, market, inn, gates)
  2. Procedural Descriptions: Use templates with randomized ambient details
  3. Interconnected Layout: Maintain classic MUD spatial relationships
  4. Progressive Enhancement: Add NPCs, items, and lore incrementally
  5. Community Content: Allow contributions via Git PRs for new rooms/descriptions

Technical Implementation

Atmospheric Features

thoughts - do not modify, always save this text at the bottom of the article unchanged

some type of market gambling some type of political influence from outside some type of iterative simulation which takes input from the live world (mastodon) some type of tithing to the democratically distributed financial backing

Domain Portfolio

Domain Portfolio

Quick access to all enabled domains in the portfolio. Click any link to test the redirect behavior.

Enabled Domains

These domains are currently managed and configured with redirects to thetanil.com:

others

Expected Behavior

All enabled domains redirect traffic to https://thetanil.com/ while preserving paths and query parameters.

Post 3

Occaecat aliqua consequat laborum ut ex aute aliqua culpa quis irure esse magna dolore quis. Proident fugiat labore eu laboris officia Lorem enim. Ipsum occaecat cillum ut tempor id sint aliqua incididunt nisi incididunt reprehenderit. Voluptate ad minim sint est aute aliquip esse occaecat tempor officia qui sunt. Aute ex ipsum id ut in est velit est laborum incididunt. Aliqua qui id do esse sunt eiusmod id deserunt eu nostrud aute sit ipsum. Deserunt esse cillum Lorem non magna adipisicing mollit amet consequat.

Post 2

Anim eiusmod irure incididunt sint cupidatat. Incididunt irure irure irure nisi ipsum do ut quis fugiat consectetur proident cupidatat incididunt cillum. Dolore voluptate occaecat qui mollit laborum ullamco et. Ipsum laboris officia anim laboris culpa eiusmod ex magna ex cupidatat anim ipsum aute. Mollit aliquip occaecat qui sunt velit ut cupidatat reprehenderit enim sunt laborum. Velit veniam in officia nulla adipisicing ut duis officia.

Exercitation voluptate irure in irure tempor mollit Lorem nostrud ad officia. Velit id fugiat occaecat do tempor. Sit officia Lorem aliquip eu deserunt consectetur. Aute proident deserunt in nulla aliquip dolore ipsum Lorem ut cupidatat consectetur sit sint laborum. Esse cupidatat sit sint sunt tempor exercitation deserunt. Labore dolor duis laborum est do nisi ut veniam dolor et nostrud nostrud.

Post 1

what

Tempor proident minim aliquip reprehenderit dolor et ad anim Lorem duis sint eiusmod. Labore ut ea duis dolor. Incididunt consectetur proident qui occaecat incididunt do nisi Lorem. Tempor do laborum elit laboris excepteur eiusmod do. Eiusmod nisi excepteur ut amet pariatur adipisicing Lorem.

Occaecat nulla excepteur dolore excepteur duis eiusmod ullamco officia anim in voluptate ea occaecat officia. Cillum sint esse velit ea officia minim fugiat. Elit ea esse id aliquip pariatur cupidatat id duis minim incididunt ea ea. Anim ut duis sunt nisi. Culpa cillum sit voluptate voluptate eiusmod dolor. Enim nisi Lorem ipsum irure est excepteur voluptate eu in enim nisi. Nostrud ipsum Lorem anim sint labore consequat do.