// Codetoy (AssemblyScript) - Spider Web (bright center + click to add spiders without overlap) // // Uses codetoy/canvas primitives (fill/rect/circle/polygon/reset) + input + time. // Glow is approximated by drawing multiple thicker quads (polygons) with lower alpha. import { reset, fill, rect, circle, polygon } from "codetoy/canvas" import * as screen from "codetoy/screen" import * as input from "codetoy/input" import * as time from "codetoy/time" // -------------------- Config -------------------- const BG_R: f64 = 5 const BG_G: f64 = 6 const BG_B: f64 = 10 const ANCHORS: i32 = 140 const DRIFT: f64 = 0.18 const LEGS: i32 = 10 const LEG_RANGE: f64 = 260.0 const SEGMENTS: i32 = 14 // lower = less “electric” + faster const JITTER: f64 = 5.8 // lower = less electric const JITTER_SPEED: f64 = 1.7 const FAINT_WEB: bool = true const FAINT_WEB_LINKS_PER_ANCHOR: i32 = 2 const FAINT_WEB_RANGE: f64 = 140.0 // Brighter overall const GLOW_PASSES: i32 = 3 // multiple passes simulate glow const THICK_CORE: f64 = 1.15 const THICK_GLOW1: f64 = 3.5 const THICK_GLOW2: f64 = 6.0 // Center density const CENTER_GLOW_RADIUS: f64 = 160.0 const CENTER_DOTS: i32 = 120 const CENTER_DOTS_RADIUS: f64 = 62.0 // Spiders (multi) const MAX_SPIDERS: i32 = 7 const SPAWN_RADIUS: f64 = 110.0 const MIN_SPIDER_SEP: f64 = 90.0 const SPAWN_ATTEMPTS: i32 = 40 // Colors const A_R: f64 = 95 const A_G: f64 = 210 const A_B: f64 = 255 const B_R: f64 = 230 const B_G: f64 = 130 const B_B: f64 = 255 // -------------------- Small utils -------------------- @inline function clamp(v: f64, a: f64, b: f64): f64 { return v < a ? a : (v > b ? b : v) } @inline function lerp(a: f64, b: f64, t: f64): f64 { return a + (b - a) * t } @inline function dist2(ax: f64, ay: f64, bx: f64, by: f64): f64 { const dx = ax - bx const dy = ay - by return dx * dx + dy * dy } // Deterministic-ish noise hash (0..1) function hash(n: f64): f64 { const s = Math.sin(n) * 43758.5453123 return s - Math.floor(s) } // Returns [-1,1] pseudo-noise function jitter2D(seed: f64, t: f64): f64[] { const n1 = hash(seed + t * 1.7) * 2.0 - 1.0 const n2 = hash(seed * 2.31 + t * 1.3) * 2.0 - 1.0 const out = new Array(2) out[0] = n1 out[1] = n2 return out } // -------------------- State -------------------- class Anchor { x: f64; y: f64 vx: f64; vy: f64 k: f64 } class Spider { x: f64; y: f64 k: f64 follow: f64 leader: bool } let anchors = new Array() let spiders = new Array() function seedAnchors(): void { anchors = new Array(ANCHORS) for (let i: i32 = 0; i < ANCHORS; i++) { const a = new Anchor() a.x = Math.random() * screen.width() a.y = Math.random() * screen.height() a.vx = (Math.random() * 2.0 - 1.0) * DRIFT a.vy = (Math.random() * 2.0 - 1.0) * DRIFT a.k = Math.random() * 9999.0 anchors[i] = a } } function makeSpider(x: f64, y: f64, isLeader: bool): Spider { const s = new Spider() s.x = x; s.y = y s.k = Math.random() * 9999.0 s.follow = isLeader ? 0.14 : 0.11 + Math.random() * 0.06 s.leader = isLeader return s } function isFreeSpot(x: f64, y: f64): bool { const min2 = MIN_SPIDER_SEP * MIN_SPIDER_SEP for (let i: i32 = 0; i < spiders.length; i++) { const s = spiders[i] if (dist2(x, y, s.x, s.y) < min2) return false } return true } function spawnSpiderNear(cx: f64, cy: f64): bool { for (let t: i32 = 0; t < SPAWN_ATTEMPTS; t++) { const ang = Math.random() * (Math.PI * 2.0) const rr = SPAWN_RADIUS * (0.25 + 0.75 * Math.random()) const x = clamp(cx + Math.cos(ang) * rr, 20.0, screen.width() - 20.0) const y = clamp(cy + Math.sin(ang) * rr, 20.0, screen.height() - 20.0) if (isFreeSpot(x, y)) { spiders.push(makeSpider(x, y, false)) return true } } return false } // init seedAnchors() spiders.push(makeSpider(screen.centerX(), screen.centerY(), true)) // click: add spider (no overlap) export function onMouseDown(button: i32): void { if (button != 0) return if (spiders.length >= MAX_SPIDERS) return spawnSpiderNear(input.mouseX(), input.mouseY()) } // -------------------- Drawing primitives -------------------- // Draw a “line segment” as a quad polygon between (x1,y1)->(x2,y2) function quadLine(x1: f64, y1: f64, x2: f64, y2: f64, thickness: f64): void { const dx = x2 - x1 const dy = y2 - y1 const len = Math.sqrt(dx * dx + dy * dy) if (len < 0.0001) return const nx = -dy / len const ny = dx / len const h = thickness * 0.5 const pts = new Array(8) pts[0] = x1 + nx * h; pts[1] = y1 + ny * h pts[2] = x2 + nx * h; pts[3] = y2 + ny * h pts[4] = x2 - nx * h; pts[5] = y2 - ny * h pts[6] = x1 - nx * h; pts[7] = y1 - ny * h polygon(pts) } // Draw a polyline (points array [x0,y0,x1,y1,...]) as consecutive quads function polylineQuads(pts: f64[], thickness: f64): void { const n = pts.length for (let i: i32 = 0; i + 3 < n; i += 2) { quadLine(pts[i], pts[i + 1], pts[i + 2], pts[i + 3], thickness) } } // Color ramp stronger toward the spider center: p=0 at center, p=1 at anchor end function colorAt(p: f64, mixWave: f64): f64[] { // stronger/more saturated near center: // tColor shifts with wave, then intensity fades with p const tColor = 0.5 + 0.5 * Math.sin(mixWave) const r = lerp(A_R, B_R, tColor) const g = lerp(A_G, B_G, tColor) const b = lerp(A_B, B_B, tColor) // Fade brightness outwards const intensity = 1.0 - 0.55 * p const out = new Array(3) out[0] = clamp(r * intensity, 0.0, 255.0) out[1] = clamp(g * intensity, 0.0, 255.0) out[2] = clamp(b * intensity, 0.0, 255.0) return out } // Builds jittered points for a leg, with softer ends and more pronounced center, // but also stronger color near spider (center). function buildLegPoints(x1: f64, y1: f64, x2: f64, y2: f64, t: f64, seed: f64): f64[] { const pts = new Array((SEGMENTS + 1) * 2) for (let i: i32 = 0; i <= SEGMENTS; i++) { const p = (i as f64) / (SEGMENTS as f64) // 0..1 (0=center) const x = lerp(x1, x2, p) const y = lerp(y1, y2, p) // jitter strongest mid-leg, but slightly biased closer to center const mid = Math.sin(Math.PI * p) // 0 ends, 1 middle const bias = lerp(1.15, 0.9, p) // a touch stronger near center const w = mid * bias const n = jitter2D(seed + (i as f64) * 17.13, t * JITTER_SPEED + p * 2.0) pts[i * 2] = x + n[0] * JITTER * w pts[i * 2 + 1] = y + n[1] * JITTER * w } return pts } function drawElectricLeg(x1: f64, y1: f64, x2: f64, y2: f64, t: f64, seed: f64, alpha: f64): void { const pts = buildLegPoints(x1, y1, x2, y2, t, seed) const mixWave = t * 1.0 + seed * 0.01 // “Glow” passes (thicker, lower alpha) // pColor=0 at center (bright), 1 at far end (dimmer) { const col0 = colorAt(0.15, mixWave) fill(col0[0], col0[1], col0[2], 0.10 * alpha) polylineQuads(pts, THICK_GLOW2) } { const col1 = colorAt(0.35, mixWave) fill(col1[0], col1[1], col1[2], 0.14 * alpha) polylineQuads(pts, THICK_GLOW1) } // Core pass (sharper) { const col2 = colorAt(0.08, mixWave) // very “center-ish” to keep it punchy fill(col2[0], col2[1], col2[2], 0.55 * alpha) polylineQuads(pts, THICK_CORE) } // Tiny highlight close to center only (so ends stay soft) { // Draw only first ~35% of segments const cut = ((SEGMENTS as f64) * 0.35) as i32 if (cut >= 2) { const sub = new Array((cut + 1) * 2) for (let i: i32 = 0; i <= cut; i++) { sub[i * 2] = pts[i * 2] sub[i * 2 + 1] = pts[i * 2 + 1] } fill(255, 255, 255, 0.06 * alpha) polylineQuads(sub, 0.9) } } } function drawCenterDensity(s: Spider, t: f64): void { // soft radial glow via multiple circles (cheap-ish) const rings: i32 = 8 for (let i: i32 = rings; i >= 1; i--) { const p = (i as f64) / (rings as f64) const r = CENTER_GLOW_RADIUS * p const col = colorAt(0.05 + 0.25 * (1.0 - p), t * 0.8 + s.k * 0.02) const a = 0.020 * (p * p) // outer rings very faint fill(col[0], col[1], col[2], a) circle(s.x, s.y, r) } // dense dots near center for (let i: i32 = 0; i < CENTER_DOTS; i++) { const k = (i as f64) * 37.13 + s.k const ang = (k * 0.001 + t * 0.7) % (Math.PI * 2.0) const rr = CENTER_DOTS_RADIUS * (0.10 + 0.90 * hash(k + t)) const x = s.x + Math.cos(ang) * rr const y = s.y + Math.sin(ang) * rr const p = rr / CENTER_DOTS_RADIUS // 0..1 const col = colorAt(p, t * 1.1 + k * 0.02) const a = 0.08 + 0.22 * (1.0 - p) fill(col[0], col[1], col[2], a) circle(x, y, 0.85 + 1.55 * (1.0 - p)) } } // nearest K anchors within range (brute force) function nearestAnchors(x: f64, y: f64, k: i32, maxDist: f64): i32[] { const md2 = maxDist * maxDist // store best indices + d2 const bestI = new Array(k) const bestD = new Array(k) for (let i: i32 = 0; i < k; i++) { bestI[i] = -1; bestD[i] = 1e30 } for (let i: i32 = 0; i < anchors.length; i++) { const a = anchors[i] const d = dist2(x, y, a.x, a.y) if (d > md2) continue // find worst slot let w: i32 = 0 for (let j: i32 = 1; j < k; j++) if (bestD[j] > bestD[w]) w = j if (d < bestD[w]) { bestD[w] = d; bestI[w] = i } } // compact (remove -1) let count: i32 = 0 for (let i: i32 = 0; i < k; i++) if (bestI[i] >= 0) count++ const out = new Array(count) let p: i32 = 0 for (let i: i32 = 0; i < k; i++) { const idx = bestI[i] if (idx >= 0) { out[p++] = idx } } return out } function drawFaintWeb(t: f64): void { if (!FAINT_WEB) return // very faint quads between anchor and a couple nearest ones for (let i: i32 = 0; i < anchors.length; i++) { const a = anchors[i] const near = nearestAnchors(a.x, a.y, FAINT_WEB_LINKS_PER_ANCHOR, FAINT_WEB_RANGE) for (let j: i32 = 0; j < near.length; j++) { const b = anchors[near[j]] fill(120, 160, 255, 0.035) quadLine(a.x, a.y, b.x, b.y, 0.8) } } } // -------------------- Frame update -------------------- export function update(): void { const w = screen.width() const h = screen.height() const t = time.elapsedTime() // drift anchors for (let i: i32 = 0; i < anchors.length; i++) { const a = anchors[i] a.x += a.vx a.y += a.vy a.vx += (hash(a.k + t * 0.3) - 0.5) * 0.03 a.vy += (hash(a.k * 2.3 + t * 0.3) - 0.5) * 0.03 a.vx = clamp(a.vx, -DRIFT, DRIFT) a.vy = clamp(a.vy, -DRIFT, DRIFT) if (a.x < 0.0 || a.x > w) a.vx *= -1.0 if (a.y < 0.0 || a.y > h) a.vy *= -1.0 a.x = clamp(a.x, 0.0, w) a.y = clamp(a.y, 0.0, h) } // leader follows mouse; clones orbit around mouse smoothly const mx = input.mouseX() const my = input.mouseY() for (let i: i32 = 0; i < spiders.length; i++) { const s = spiders[i] if (i == 0) { s.x = lerp(s.x, mx, s.follow) s.y = lerp(s.y, my, s.follow) } else { const ang = (s.k * 0.001 + t * 0.35) % (Math.PI * 2.0) const rr = SPAWN_RADIUS * 0.65 const tx = mx + Math.cos(ang) * rr const ty = my + Math.sin(ang) * rr s.x = lerp(s.x, tx, s.follow * 0.75) s.y = lerp(s.y, ty, s.follow * 0.75) } } // soft repulsion so they don't overlap while moving const min2 = MIN_SPIDER_SEP * MIN_SPIDER_SEP for (let i: i32 = 0; i < spiders.length; i++) { for (let j: i32 = i + 1; j < spiders.length; j++) { const a = spiders[i] const b = spiders[j] const dx = b.x - a.x const dy = b.y - a.y const d2 = dx * dx + dy * dy if (d2 > 0.0001 && d2 < min2) { const d = Math.sqrt(d2) const push = (MIN_SPIDER_SEP - d) / MIN_SPIDER_SEP * 0.8 const nx = dx / d const ny = dy / d const wa = a.leader ? 0.2 : 0.5 const wb = b.leader ? 0.2 : 0.5 a.x -= nx * push * wa; a.y -= ny * push * wa b.x += nx * push * wb; b.y += ny * push * wb } } } // draw bg reset() fill(BG_R, BG_G, BG_B, 1.0) rect(0, 0, w, h) // faint web + anchor dots drawFaintWeb(t) for (let i: i32 = 0; i < anchors.length; i++) { const a = anchors[i] const pulse = 0.35 + 0.65 * (0.5 + 0.5 * Math.sin(t * 1.2 + a.k)) fill(190, 210, 255, 0.06 * pulse) circle(a.x, a.y, 1.1) } // spiders: center density + legs for (let si: i32 = 0; si < spiders.length; si++) { const s = spiders[si] drawCenterDensity(s, t) const near = nearestAnchors(s.x, s.y, LEGS, LEG_RANGE) for (let li: i32 = 0; li < near.length; li++) { const a = anchors[near[li]] const d = Math.sqrt(dist2(s.x, s.y, a.x, a.y)) const fade = clamp(1.0 - (d / LEG_RANGE), 0.0, 1.0) const alpha = 0.28 + 0.85 * fade drawElectricLeg(s.x, s.y, a.x, a.y, t, a.k + (li as f64) * 1000.0 + (si as f64) * 9999.0, alpha) } } // subtle vignette via big dark circles (cheap) const vSteps: i32 = 6 for (let i: i32 = 0; i < vSteps; i++) { const p = (i as f64) / (vSteps as f64) fill(0, 0, 0, 0.06 * p) circle(w * 0.5, h * 0.5, Math.max(w, h) * (0.55 + 0.10 * p)) } }