Linear Regression Playground

Interactive playground for experimenting with linear regression algorithms.

About

This sketch demonstrates three different approaches to linear regression:

1. Simple Trick: Basic gradient descent approach
2. Square Trick: Least squares method with squared error
3. Absolute Trick: Robust regression using absolute error

Click and drag to add data points, then experiment with different algorithms to see how they fit lines to your data.

Controls

• Mouse: Click to add data points, drag to create multiple points
• Keyboard:
  • 1 - Simple Trick algorithm
  • 2 - Square Trick algorithm
  • 3 - Absolute Trick algorithm
  • r - Reset data points
  • space - Toggle algorithm animation

Technical Details

• Canvas size: 400x400 pixels
• Libraries: p5.js v1.11.2, p5.sound v0.3.14
• Features: Interactive data points, algorithm visualization, real-time line fitting
• Performance: Any notes about framerate or optimization

Development

Local Development

1. Clone this repository
2. Open index.html in a web browser
3. Or serve with a local server: python -m http.server 8000

File Structure

├── index.html          # Main HTML file with responsive design
├── sketch.js           # p5.js sketch code  
├── style.css           # CSS with dark mode support
├── values.yaml         # Sketch metadata and GitOps configuration
├── libraries/          # p5.js library files
└── GitOps files        # Chart.yaml, templates/

GitOps Deployment

This template uses a simplified ConfigMap-based approach for automatic deployment to the Goldentooth Kubernetes cluster.

Quick Setup

1. Edit values.yaml with your sketch details:

   sketch:
     name: "my-amazing-sketch"
     title: "My Amazing Sketch" 
     description: "A beautiful p5.js creation"
     author: "Your Name"
     repository: "https://github.com/goldentooth/my-amazing-sketch.git"

2. Add gitops-repo topic to your GitHub repository

3. Push to main branch → Automatic deployment!

How It Works

1. ArgoCD detects repositories with gitops-repo topic
2. ConfigMap created containing sketch registration data
3. p5js-sketches controller watches for new ConfigMaps
4. Sync job created to clone your repository to Ceph storage
5. Sketch goes live at https://p5js-sketches.services.k8s.goldentooth.net/<name>/

Monitor Deployment

# Check ConfigMap created
kubectl get configmaps -n p5js-sketches -l p5js-sketch/registration=true

# Watch sync jobs
kubectl get jobs -n p5js-sketches -l p5js-sketch/component=sync

# Check controller logs  
kubectl logs -n p5js-sketches deployment/p5js-sketches -c sketch-controller

Troubleshooting

• Sync fails: Check repository access and ensure index.html and sketch.js exist
• Not discovered: Verify gitops-repo topic is added to repository
• Files not appearing: Check controller logs and verify Ceph storage connectivity

Architecture Benefits

Zero Code Duplication

• All sync logic centralized in p5js-sketches controller
• Template repositories only contain simple ConfigMap creation
• No complex job manifests duplicated across sketches

Simplified Template

• Single ConfigMap template vs 5+ complex manifests
• Easier to understand and maintain
• Consistent behavior across all sketches

Better Observability

• All sync operations in single namespace
• Centralized logging and monitoring
• Single controller to debug

Author

Goldentooth Project
Part of the Goldentooth cluster p5.js sketch collection

License

MIT License - Feel free to use and modify