first commit

2025-02-09 20:08:41 +00:00 · 2025-02-09 20:08:41 +00:00 · bdbb9f81e0
commit bdbb9f81e0
4 changed files with 125 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+.make.*
--- a/index.html
+++ b/index.html
@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>A thing made by CLP</title>
+    <link rel="stylesheet" href="style.css">
+    <script type="module" src="script.js"></script>
+  </head>
+  <body>
+    <main>
+    <svg viewBox="-1 -1 2 2">
+      <line class="axis" x1="-1" x2="1" y1="0" y2="0"></line>
+      <line class="axis" y1="-1" y2="1" x1="0" x2="0"></line>
+    </svg>
+    </main>
+  </body>
+</html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,95 @@
+const svg = document.querySelector('svg');
+
+const d = ([x,y]) => {
+  const u = -0.3;
+  const s = -0.2;
+  const t = 0.1;
+  return [0.1-y*u+x*s, x*u+y*s + Math.sin(x*5)*t];
+}
+
+let all_points = [];
+
+let num_path = 1;
+
+function sqdist([x1,y1], [x2,y2]) {
+  return (x2-x1)**2 + (y2-y1)**2;
+}
+
+function element(name,attr,content) {
+    const e = document.createElementNS('http://www.w3.org/2000/svg',name);
+    if(attr) {
+        Object.entries(attr).forEach(([k,v])=>e.setAttribute(k,v));
+    }
+    if(content!==undefined) {
+        e.textContent = content;
+    }
+    return e;
+}
+
+function trace_path(pos, fn, h, steps) {
+  num_path += 1;
+  h = h || 0.01;
+  steps = steps || 1000;
+  const points = [];
+  for(let i=0;i<steps; i++) {
+    let [x,y] = pos;
+    let [dx,dy] = fn(pos);
+    if(is_occupied(pos, num_path)) {
+      break;
+    }
+    occupy(pos, num_path);
+    points.push(pos);
+    
+    pos = [x+dx*h, y+dy*h];
+  }
+  return points;
+}
+
+function plot_path(pos, fn, h, steps) {
+  const points = trace_path(pos, fn, h, steps);
+  if(points.length < 5) {
+    return [];
+  }
+  const path = element('path', {d: `M ${points[0][0]} ${points[0][1]} ` + points.map(([x,y]) => `L ${x} ${y}`).join(' ')});
+  svg.append(path);
+  all_points = all_points.concat(points);
+  return points;
+}
+
+const occupied = [];
+
+const bucket_size = 200;
+function bucket_position([x,y]) {
+  const ix = Math.floor((x+2)/4*bucket_size);
+  const iy = Math.floor((y+2)/4*bucket_size);
+  return iy*bucket_size + ix;
+}
+
+function is_occupied(pos, n) {
+  const r = occupied[bucket_position(pos)];
+  return r && r!=n;
+}
+
+function occupy(pos, n) {
+  const i = bucket_position(pos);
+  occupied[i] = n;
+  const x = (i % bucket_size)/bucket_size;
+  const y = ((i - x) / bucket_size)/bucket_size;
+  console.log(pos, x,y);
+  const dot = element('circle', {r:1.5/bucket_size, fill: `hsl(${n*20}, 70%, 50%)`, cx: (x*4-2), cy: y*4-2, 'fill-opacity': 0.1});
+  svg.append(dot);
+}
+
+function randrange(a,b) {
+  return (b-a)*Math.random() + a;
+}
+
+for(let i=0;i<400; i++) {
+  const r = Math.sqrt(Math.random())*1.5;
+  const an = randrange(0, 2*Math.PI);
+  const pos = [r*Math.cos(an), r*Math.sin(an)];
+  plot_path(pos, d)
+}
+
+window.bucket_position = bucket_position;
+console.log(occupied);
--- a/style.css
+++ b/style.css
@ -0,0 +1,11 @@
+path {
+  fill: none;
+  stroke: black;
+  stroke-width: 0.01;
+  stroke-opacity: 0.5;
+}
+
+line.axis {
+  fill: none;
+  stroke-width: 0.01;
+}