cosmograph 0.1.0

package/src/forces/nodeRepel.js

@@ -0,0 +1,33 @@
+/**
+ * nodeRepel — nodes push each other apart when too close
+ *
+ * radius:   distance threshold in px below which repulsion activates (default 60)
+ * strength: force multiplier (default 0.002) — stronger when nodes are closer
+ *
+ * Note: O(n²) complexity — pairs outside radius are skipped immediately,
+ * keeping it practical for typical particle counts (up to ~500 nodes).
+ */
+export function nodeRepel({ radius = 60, strength = 0.002 } = {}) {
+  return (nodes) => {
+    for (let i = 0; i < nodes.length; i++) {
+      for (let j = i + 1; j < nodes.length; j++) {
+        const a = nodes[i]
+        const b = nodes[j]
+        const dx = a.x - b.x
+        const dy = a.y - b.y
+        const dist = Math.hypot(dx, dy)
+        if (dist >= radius || dist === 0) continue
+
+        const t = (radius - dist) / radius // 1 at center, 0 at edge
+        const f = t * strength / dist
+        const fx = dx * f
+        const fy = dy * f
+
+        a.vx += fx
+        a.vy += fy
+        b.vx -= fx
+        b.vy -= fy
+      }
+    }
+  }
+}

package/src/forces/noise.js

@@ -0,0 +1,64 @@
+/**
+ * noise — organic drifting via 2D Value Noise
+ *
+ * scale:    frequency of the noise field — higher = finer detail (default 0.003)
+ * strength: force magnitude applied per frame (default 0.0008)
+ * speed:    how fast the noise field evolves over time (default 0.0005)
+ *
+ * Internally uses a grid-based Value Noise with bilinear interpolation.
+ * The noise field shifts slowly over time, creating smooth, organic motion.
+ */
+export function noise({ scale = 0.003, strength = 0.0008, speed = 0.0005 } = {}) {
+  // Reproducible pseudo-random values for the noise lattice
+  const GRID = 256
+  const table = new Float32Array(GRID * GRID * 2)
+  for (let i = 0; i < table.length; i++) {
+    // Simple LCG seeded by index for determinism
+    const h = Math.sin(i * 127.1 + 311.7) * 43758.5453
+    table[i] = h - Math.floor(h)
+  }
+
+  const latticeX = (ix, iy) => table[((ix & (GRID - 1)) + (iy & (GRID - 1)) * GRID) * 2]
+  const latticeY = (ix, iy) => table[((ix & (GRID - 1)) + (iy & (GRID - 1)) * GRID) * 2 + 1]
+
+  // Smoothstep for bilinear interpolation weight
+  const smooth = (t) => t * t * (3 - 2 * t)
+
+  const valueNoiseVec = (wx, wy) => {
+    const ix = Math.floor(wx)
+    const iy = Math.floor(wy)
+    const fx = wx - ix
+    const fy = wy - iy
+    const ux = smooth(fx)
+    const uy = smooth(fy)
+
+    const x00 = latticeX(ix,     iy)
+    const x10 = latticeX(ix + 1, iy)
+    const x01 = latticeX(ix,     iy + 1)
+    const x11 = latticeX(ix + 1, iy + 1)
+
+    const y00 = latticeY(ix,     iy)
+    const y10 = latticeY(ix + 1, iy)
+    const y01 = latticeY(ix,     iy + 1)
+    const y11 = latticeY(ix + 1, iy + 1)
+
+    const nx = (x00 + (x10 - x00) * ux + (x01 - x00) * uy + (x11 - x10 - x01 + x00) * ux * uy) * 2 - 1
+    const ny = (y00 + (y10 - y00) * ux + (y01 - y00) * uy + (y11 - y10 - y01 + y00) * ux * uy) * 2 - 1
+
+    return { nx, ny }
+  }
+
+  return (nodes, { time }) => {
+    const offset = time * speed
+
+    for (const node of nodes) {
+      const wx = node.x * scale + offset
+      const wy = node.y * scale + offset
+
+      const { nx, ny } = valueNoiseVec(wx, wy)
+
+      node.vx += nx * strength
+      node.vy += ny * strength
+    }
+  }
+}

package/src/forces/scrollDrift.js

@@ -0,0 +1,58 @@
+/**
+ * scrollDrift — reacts to page scroll
+ *
+ * mode:
+ *   'rotate'   — nodes rotate around viewport center (default)
+ *   'wave'     — vertical wave pushes nodes away from scroll direction
+ *   'scatter'  — nodes scatter outward from viewport center on scroll
+ *   'custom'   — provide your own fn(node, delta, context) => void
+ *
+ * strength: multiplier for the effect intensity (default 1.0)
+ */
+export function scrollDrift({ mode = 'rotate', strength = 1.0, fn } = {}) {
+  let lastScrollY = 0
+
+  return (nodes, context) => {
+    const { scrollY, width, height } = context
+    const delta = scrollY - lastScrollY
+    lastScrollY = scrollY
+    if (delta === 0) return
+
+    if (mode === 'custom' && typeof fn === 'function') {
+      for (const node of nodes) fn(node, delta, context)
+      return
+    }
+
+    const cx = width / 2
+    const cy = height / 2
+
+    for (const node of nodes) {
+      if (mode === 'rotate') {
+        const dx = node.x - cx
+        const dy = node.y - cy
+        const angle = delta * 0.003 * strength
+        const cos = Math.cos(angle)
+        const sin = Math.sin(angle)
+        node.vx += (dx * cos - dy * sin + cx - node.x) * 0.06
+        node.vy += (dx * sin + dy * cos + cy - node.y) * 0.06
+
+      } else if (mode === 'wave') {
+        // Push nodes up/down opposite scroll direction, with horizontal spread based on x position
+        const wave = Math.sin((node.x / width) * Math.PI * 2 + scrollY * 0.01)
+        node.vy -= delta * 0.04 * strength
+        node.vx += wave * Math.abs(delta) * 0.015 * strength
+
+      } else if (mode === 'scatter') {
+        // Nodes scatter outward from canvas center, fall off near edges
+        const dx = node.x - cx
+        const dy = node.y - cy
+        const dist = Math.hypot(dx, dy) || 1
+        const maxDist = Math.hypot(cx, cy)
+        const falloff = Math.max(0, 1 - dist / maxDist)
+        const force = Math.abs(delta) * 0.008 * strength * falloff
+        node.vx += (dx / dist) * force
+        node.vy += (dy / dist) * force
+      }
+    }
+  }
+}

package/src/forces/twinkle.js

@@ -0,0 +1,7 @@
+export function twinkle({ minBrightness = 0.5, variance = 0.5 } = {}) {
+  return (nodes, { time }) => {
+    for (const node of nodes) {
+      node.brightness = minBrightness + variance * ((Math.sin(time * node.twinkleSpeed + node.phase) + 1) / 2)
+    }
+  }
+}

package/src/forces/wind.js

@@ -0,0 +1,27 @@
+/**
+ * wind — applies a constant directional force to all nodes
+ *
+ * angle:    direction in radians (0 = right, Math.PI/2 = down)
+ * strength: base force magnitude (default 0.0005)
+ * gust:     amplitude of sinusoidal strength variation over time (default 0)
+ *           when > 0, produces a gusting effect — actual strength oscillates
+ *           between (strength - gust) and (strength + gust)
+ */
+export function wind({ angle = 0, strength = 0.0005, gust = 0 } = {}) {
+  const cos = Math.cos(angle)
+  const sin = Math.sin(angle)
+
+  return (nodes, { time }) => {
+    const currentStrength = gust > 0
+      ? strength + gust * Math.sin(time * 0.001)
+      : strength
+
+    const fx = cos * currentStrength
+    const fy = sin * currentStrength
+
+    for (const node of nodes) {
+      node.vx += fx
+      node.vy += fy
+    }
+  }
+}

package/src/index.js

@@ -0,0 +1,14 @@
+export { World } from './World.js'
+export { drift } from './forces/drift.js'
+export { dampen } from './forces/dampen.js'
+export { twinkle } from './forces/twinkle.js'
+export { mouseRepel } from './forces/mouseRepel.js'
+export { scrollDrift } from './forces/scrollDrift.js'
+export { gravity } from './forces/gravity.js'
+export { wind } from './forces/wind.js'
+export { nodeRepel } from './forces/nodeRepel.js'
+export { noise } from './forces/noise.js'
+export { attract } from './forces/attract.js'
+export { circle, diamond, star, cross, ring } from './shapes.js'
+export { Node } from './Node.js'
+export { resolveShape } from './shapes.js'

package/src/shapes.js

@@ -0,0 +1,60 @@
+/**
+ * Built-in node shape renderers.
+ * Each function signature: (ctx, x, y, r) => void
+ * ctx is already set up (fillStyle, globalAlpha) — just draw and fill/stroke.
+ */
+
+export const circle = (ctx, x, y, r) => {
+  ctx.beginPath()
+  ctx.arc(x, y, r, 0, Math.PI * 2)
+  ctx.fill()
+}
+
+export const diamond = (ctx, x, y, r) => {
+  ctx.beginPath()
+  ctx.moveTo(x, y - r)
+  ctx.lineTo(x + r, y)
+  ctx.lineTo(x, y + r)
+  ctx.lineTo(x - r, y)
+  ctx.closePath()
+  ctx.fill()
+}
+
+export const star = (ctx, x, y, r, points = 5) => {
+  const inner = r * 0.45
+  ctx.beginPath()
+  for (let i = 0; i < points * 2; i++) {
+    const angle = (i * Math.PI) / points - Math.PI / 2
+    const radius = i % 2 === 0 ? r : inner
+    const px = x + Math.cos(angle) * radius
+    const py = y + Math.sin(angle) * radius
+    i === 0 ? ctx.moveTo(px, py) : ctx.lineTo(px, py)
+  }
+  ctx.closePath()
+  ctx.fill()
+}
+
+export const cross = (ctx, x, y, r) => {
+  const t = r * 0.35
+  ctx.beginPath()
+  ctx.rect(x - t, y - r, t * 2, r * 2)
+  ctx.rect(x - r, y - t, r * 2, t * 2)
+  ctx.fill()
+}
+
+export const ring = (ctx, x, y, r) => {
+  ctx.save()
+  ctx.beginPath()
+  ctx.arc(x, y, r, 0, Math.PI * 2)
+  ctx.lineWidth = r * 0.5
+  ctx.strokeStyle = ctx.fillStyle
+  ctx.stroke()
+  ctx.restore()
+}
+
+/** Resolve a shape option to a render function */
+export function resolveShape(shape) {
+  if (typeof shape === 'function') return shape
+  const map = { circle, diamond, star, cross, ring }
+  return map[shape] ?? circle
+}