create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/generative-art/src/scene.test.ts

@@ -0,0 +1,103 @@
+import { Option } from 'effect'
+import { click, expect, given, label, role, scene, text } from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { Slider } from '@foldkit/ui'
+
+import {
+  FLOW_STRENGTH_MAX,
+  FLOW_STRENGTH_MIN,
+  FLOW_STRENGTH_STEP,
+  INITIAL_FLOW_STRENGTH,
+  INITIAL_NOISE_SCALE,
+  NOISE_SCALE_MAX_DIVISOR,
+  NOISE_SCALE_MIN_DIVISOR,
+  NOISE_SCALE_STEP,
+} from './constant'
+import { type Model, type Particle } from './model'
+import { update } from './update'
+import { view } from './view'
+
+const initialModel: Model = {
+  particles: [],
+  nextId: 0,
+  elapsedSeconds: 0,
+  maybeMousePosition: Option.none(),
+  isRunning: true,
+  flowStrength: INITIAL_FLOW_STRENGTH,
+  flowStrengthSlider: Slider.init({
+    id: 'flow-strength-slider',
+    min: FLOW_STRENGTH_MIN,
+    max: FLOW_STRENGTH_MAX,
+    step: FLOW_STRENGTH_STEP,
+  }),
+  noiseScale: INITIAL_NOISE_SCALE,
+  noiseScaleSlider: Slider.init({
+    id: 'noise-scale-slider',
+    min: NOISE_SCALE_MIN_DIVISOR,
+    max: NOISE_SCALE_MAX_DIVISOR,
+    step: NOISE_SCALE_STEP,
+  }),
+}
+
+const makeParticle = (id: number, x: number, y: number): Particle => ({
+  id,
+  trail: [{ x, y }],
+  baseHue: 200,
+  hueDriftPerSecond: 10,
+  ageMs: 0,
+  lifespanMs: 5000,
+  speed: 100,
+  bornAtSeconds: 0,
+  initialAngle: Option.none(),
+  initialSpeedScale: 1,
+})
+
+const modelWithParticles = (count: number): Model => ({
+  ...initialModel,
+  particles: Array.from({ length: count }, (_, index) =>
+    makeParticle(index, 100 + index * 5, 100),
+  ),
+  nextId: count,
+})
+
+describe('view', () => {
+  test('initial view shows Pause and Reset buttons and a zero particle counter', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      expect(role('button', { name: 'Pause' })).toExist(),
+      expect(role('button', { name: 'Reset' })).toExist(),
+      expect(text('0 particles')).toExist(),
+    )
+  })
+
+  test('clicking Pause swaps the toggle to Play', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      click(role('button', { name: 'Pause' })),
+      expect(role('button', { name: 'Play' })).toExist(),
+      expect(role('button', { name: 'Pause' })).not.toExist(),
+    )
+  })
+
+  test('clicking Reset empties the particles list', () => {
+    scene(
+      { update, view },
+      given(modelWithParticles(8)),
+      expect(text('8 particles')).toExist(),
+      click(role('button', { name: 'Reset' })),
+      expect(text('0 particles')).toExist(),
+    )
+  })
+
+  test('Turbulence and Noise scale sliders are present and labeled', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      expect(label('Turbulence')).toExist(),
+      expect(label('Noise scale')).toExist(),
+    )
+  })
+})

package/dist/templates/examples/generative-art/src/story.test.ts

@@ -0,0 +1,203 @@
+import { Array, Option } from 'effect'
+import { Command, given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import { Slider } from '@foldkit/ui'
+
+import { GenerateAmbientParticle } from './command'
+import {
+  DELTA_SECONDS_CAP,
+  FLOW_STRENGTH_MAX,
+  FLOW_STRENGTH_MIN,
+  FLOW_STRENGTH_STEP,
+  INITIAL_FLOW_STRENGTH,
+  INITIAL_NOISE_SCALE,
+  NOISE_SCALE_MAX_DIVISOR,
+  NOISE_SCALE_MIN_DIVISOR,
+  NOISE_SCALE_STEP,
+  SPAWN_PER_FRAME_MAX,
+} from './constant'
+import { Message } from './message'
+import { type Model, type Particle } from './model'
+import { update } from './update'
+
+const initialModel: Model = {
+  particles: [],
+  nextId: 0,
+  elapsedSeconds: 0,
+  maybeMousePosition: Option.none(),
+  isRunning: true,
+  flowStrength: INITIAL_FLOW_STRENGTH,
+  flowStrengthSlider: Slider.init({
+    id: 'flow-strength-slider',
+    min: FLOW_STRENGTH_MIN,
+    max: FLOW_STRENGTH_MAX,
+    step: FLOW_STRENGTH_STEP,
+  }),
+  noiseScale: INITIAL_NOISE_SCALE,
+  noiseScaleSlider: Slider.init({
+    id: 'noise-scale-slider',
+    min: NOISE_SCALE_MIN_DIVISOR,
+    max: NOISE_SCALE_MAX_DIVISOR,
+    step: NOISE_SCALE_STEP,
+  }),
+}
+
+const makeParticle = (id: number, x: number, y: number): Particle => ({
+  id,
+  trail: [{ x, y }],
+  baseHue: 200,
+  hueDriftPerSecond: 10,
+  ageMs: 0,
+  lifespanMs: 5000,
+  speed: 100,
+  bornAtSeconds: 0,
+  initialAngle: Option.none(),
+  initialSpeedScale: 1,
+})
+
+describe('update', () => {
+  test('ClickedTogglePlay flips isRunning', () => {
+    story(
+      update,
+      given(initialModel),
+      message(Message.ClickedTogglePlay()),
+      model(model => {
+        expect(model.isRunning).toBe(false)
+      }),
+      message(Message.ClickedTogglePlay()),
+      model(model => {
+        expect(model.isRunning).toBe(true)
+      }),
+    )
+  })
+
+  test('ClickedReset clears particles and the mouse position', () => {
+    story(
+      update,
+      given({
+        ...initialModel,
+        particles: [makeParticle(0, 100, 100), makeParticle(1, 200, 200)],
+        maybeMousePosition: Option.some({ x: 300, y: 300 }),
+      }),
+      message(Message.ClickedReset()),
+      model(model => {
+        expect(model.particles).toHaveLength(0)
+        expect(Option.isNone(model.maybeMousePosition)).toBe(true)
+      }),
+    )
+  })
+
+  test('MovedPointer sets maybeMousePosition to the new coordinates', () => {
+    story(
+      update,
+      given(initialModel),
+      message(Message.MovedPointer({ x: 250, y: 175 })),
+      model(model => {
+        expect(Option.getOrThrow(model.maybeMousePosition)).toEqual({
+          x: 250,
+          y: 175,
+        })
+      }),
+    )
+  })
+
+  test('CompletedGenerateAmbientParticle appends a particle and increments nextId', () => {
+    story(
+      update,
+      given(initialModel),
+      message(
+        Message.CompletedGenerateAmbientParticle({
+          x: 50,
+          y: 75,
+          baseHue: 120,
+          hueDriftPerSecond: 5,
+          lifespanMs: 6000,
+          speed: 90,
+          initialAngle: Option.none(),
+          initialSpeedScale: 1,
+        }),
+      ),
+      model(model => {
+        expect(model.particles).toHaveLength(1)
+        const particle = Option.getOrThrow(Array.head(model.particles))
+        expect(particle.trail).toEqual([{ x: 50, y: 75 }])
+        expect(particle.baseHue).toBe(120)
+        expect(model.nextId).toBe(1)
+      }),
+    )
+  })
+
+  test('TickedFrame advances existing particles, ages them, and dispatches ambient spawn Commands that append new particles', () => {
+    const startingParticles = [makeParticle(0, 200, 200)]
+    const startingParticleCount = startingParticles.length
+
+    story(
+      update,
+      given({
+        ...initialModel,
+        particles: startingParticles,
+        nextId: startingParticleCount,
+      }),
+      message(Message.TickedFrame({ deltaTimeMs: 16 })),
+      model(model => {
+        expect(model.elapsedSeconds).toBeGreaterThan(0)
+        expect(model.elapsedSeconds).toBeLessThanOrEqual(DELTA_SECONDS_CAP)
+        const advanced = Option.getOrThrow(Array.head(model.particles))
+        expect(advanced.trail.length).toBe(2)
+        expect(advanced.ageMs).toBeGreaterThan(0)
+        expect(model.particles).toHaveLength(startingParticleCount)
+      }),
+      Command.resolveAll(
+        ...Array.makeBy(
+          SPAWN_PER_FRAME_MAX,
+          () =>
+            [
+              GenerateAmbientParticle,
+              Message.CompletedGenerateAmbientParticle({
+                x: 50,
+                y: 50,
+                baseHue: 0,
+                hueDriftPerSecond: 0,
+                lifespanMs: 5000,
+                speed: 100,
+                initialAngle: Option.none(),
+                initialSpeedScale: 1,
+              }),
+            ] as const,
+        ),
+      ),
+      model(model => {
+        expect(model.particles).toHaveLength(
+          startingParticleCount + SPAWN_PER_FRAME_MAX,
+        )
+        expect(model.nextId).toBe(startingParticleCount + SPAWN_PER_FRAME_MAX)
+      }),
+    )
+  })
+
+  test('CompletedGenerateBurstParticle appends a particle with its initial angle preserved', () => {
+    story(
+      update,
+      given(initialModel),
+      message(
+        Message.CompletedGenerateBurstParticle({
+          x: 100,
+          y: 100,
+          baseHue: 200,
+          hueDriftPerSecond: 0,
+          lifespanMs: 4000,
+          speed: 120,
+          initialAngle: Option.some(1.5),
+          initialSpeedScale: 1.8,
+        }),
+      ),
+      model(model => {
+        expect(model.particles).toHaveLength(1)
+        const particle = Option.getOrThrow(Array.head(model.particles))
+        expect(Option.getOrThrow(particle.initialAngle)).toBe(1.5)
+        expect(particle.initialSpeedScale).toBe(1.8)
+      }),
+    )
+  })
+})

package/dist/templates/examples/generative-art/src/styles.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

package/dist/templates/examples/generative-art/src/subscription.ts

@@ -0,0 +1,35 @@
+import { Subscription } from 'foldkit'
+
+import { Slider } from '@foldkit/ui'
+
+import { Message } from './message'
+import type { Model } from './model'
+
+const flowStrengthSliderSubscriptions = Subscription.lift({
+  flowStrengthSliderPointer: Slider.subscriptions.dragPointer,
+  flowStrengthSliderEscape: Slider.subscriptions.dragEscape,
+})<Model, Message>({
+  toChildModel: model => model.flowStrengthSlider,
+  toParentMessage: message => Message.GotFlowStrengthSliderMessage({ message }),
+})
+
+const noiseScaleSliderSubscriptions = Subscription.lift({
+  noiseScaleSliderPointer: Slider.subscriptions.dragPointer,
+  noiseScaleSliderEscape: Slider.subscriptions.dragEscape,
+})<Model, Message>({
+  toChildModel: model => model.noiseScaleSlider,
+  toParentMessage: message => Message.GotNoiseScaleSliderMessage({ message }),
+})
+
+const frameSubscription = Subscription.make<Model, Message>()(_entry => ({
+  frame: Subscription.animationFrame({
+    isActive: model => model.isRunning,
+    toMessage: deltaTimeMs => Message.TickedFrame({ deltaTimeMs }),
+  }),
+}))
+
+export const subscriptions = Subscription.aggregate<Model, Message>()(
+  frameSubscription,
+  flowStrengthSliderSubscriptions,
+  noiseScaleSliderSubscriptions,
+)

package/dist/templates/examples/generative-art/src/update.ts

@@ -0,0 +1,319 @@
+import { Array, Match as M, Number, Option, Result } from 'effect'
+import { Command, Update } from 'foldkit'
+import { evo } from 'foldkit/struct'
+
+import { Slider } from '@foldkit/ui'
+
+import { GenerateAmbientParticle, GenerateBurstParticle } from './command'
+import {
+  BURST_BOOST_DURATION_MS,
+  BURST_HUE_ANCHOR_DRIFT_DEG_PER_SECOND,
+  BURST_PARTICLE_COUNT,
+  CANVAS_HEIGHT,
+  CANVAS_WIDTH,
+  DELTA_SECONDS_CAP,
+  FLOW_LACUNARITY,
+  FLOW_OCTAVES,
+  FLOW_PERSISTENCE,
+  HALF_PI,
+  HUE_MAX,
+  MOUSE_INFLUENCE_RADIUS,
+  MOUSE_RADIAL_BIAS,
+  MOUSE_VORTEX_WEIGHT,
+  MS_PER_SECOND,
+  NOISE_DRIFT_X,
+  NOISE_DRIFT_Y,
+  NOISE_SPATIAL_SCALE,
+  NOISE_TIME_SCALE,
+  SETTLE_BAND_PX,
+  SPAWN_PER_FRAME_MAX,
+  TARGET_PARTICLE_COUNT,
+  TRAIL_LENGTH,
+  TWO_PI,
+} from './constant'
+import { Message } from './message'
+import { Model, Particle, Point } from './model'
+import { fractalNoise } from './noise'
+
+type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+
+const computeFieldAngle = (
+  point: Point,
+  elapsedSeconds: number,
+  flowStrength: number,
+  noiseScaleMultiplier: number,
+): number => {
+  const effectiveScale = NOISE_SPATIAL_SCALE * noiseScaleMultiplier
+  const noiseX = (point.x + elapsedSeconds * NOISE_DRIFT_X) * effectiveScale
+  const noiseY = (point.y + elapsedSeconds * NOISE_DRIFT_Y) * effectiveScale
+  const noise = fractalNoise(
+    noiseX + elapsedSeconds * NOISE_TIME_SCALE,
+    noiseY,
+    FLOW_OCTAVES,
+    FLOW_PERSISTENCE,
+    FLOW_LACUNARITY,
+  )
+  return noise * TWO_PI * flowStrength
+}
+
+const blendAnglesByVector = (a: number, b: number, t: number): number => {
+  const ax = Math.cos(a)
+  const ay = Math.sin(a)
+  const bx = Math.cos(b)
+  const by = Math.sin(b)
+  const cx = ax + (bx - ax) * t
+  const cy = ay + (by - ay) * t
+  return Math.atan2(cy, cx)
+}
+
+const applyMouseInfluence = (
+  baseAngle: number,
+  point: Point,
+  maybeMousePosition: Option.Option<Point>,
+): number =>
+  Option.match(maybeMousePosition, {
+    onNone: () => baseAngle,
+    onSome: mouse => {
+      const dx = point.x - mouse.x
+      const dy = point.y - mouse.y
+      const distance = Math.hypot(dx, dy)
+      if (distance > MOUSE_INFLUENCE_RADIUS) {
+        return baseAngle
+      }
+      const proximity = 1 - distance / MOUSE_INFLUENCE_RADIUS
+      const strength = proximity * MOUSE_VORTEX_WEIGHT
+      const tangentialAngle = Math.atan2(dy, dx) + HALF_PI
+      const radialAngle = Math.atan2(dy, dx)
+      const swirl = blendAnglesByVector(
+        tangentialAngle,
+        radialAngle,
+        MOUSE_RADIAL_BIAS,
+      )
+      return blendAnglesByVector(baseAngle, swirl, strength)
+    },
+  })
+
+const boostFactor = (ageMs: number): number =>
+  Math.max(0, 1 - ageMs / BURST_BOOST_DURATION_MS)
+
+const blendWithInitialAngle = (
+  particle: Particle,
+  fieldAngle: number,
+): number =>
+  Option.match(particle.initialAngle, {
+    onNone: () => fieldAngle,
+    onSome: initialAngle => {
+      const fieldWeight = 1 - boostFactor(particle.ageMs)
+      return blendAnglesByVector(initialAngle, fieldAngle, fieldWeight)
+    },
+  })
+
+const computeSpeed = (particle: Particle): number => {
+  const boost = boostFactor(particle.ageMs)
+  const scale = 1 + (particle.initialSpeedScale - 1) * boost
+  return particle.speed * scale
+}
+
+const isOutsideCanvas = (point: Point): boolean =>
+  point.x < -SETTLE_BAND_PX ||
+  point.x > CANVAS_WIDTH + SETTLE_BAND_PX ||
+  point.y < -SETTLE_BAND_PX ||
+  point.y > CANVAS_HEIGHT + SETTLE_BAND_PX
+
+const advanceParticle =
+  (
+    deltaSeconds: number,
+    elapsedSeconds: number,
+    flowStrength: number,
+    noiseScaleMultiplier: number,
+    maybeMousePosition: Option.Option<Point>,
+  ) =>
+  (particle: Particle): Result.Result<Particle, void> =>
+    Option.match(Array.last(particle.trail), {
+      onNone: () => Result.failVoid,
+      onSome: currentPosition => {
+        const fieldAngle = computeFieldAngle(
+          currentPosition,
+          elapsedSeconds,
+          flowStrength,
+          noiseScaleMultiplier,
+        )
+        const angleWithMouse = applyMouseInfluence(
+          fieldAngle,
+          currentPosition,
+          maybeMousePosition,
+        )
+        const angle = blendWithInitialAngle(particle, angleWithMouse)
+        const speed = computeSpeed(particle)
+        const nextX = currentPosition.x + Math.cos(angle) * speed * deltaSeconds
+        const nextY = currentPosition.y + Math.sin(angle) * speed * deltaSeconds
+        const nextPosition: Point = { x: nextX, y: nextY }
+        const nextAgeMs = particle.ageMs + deltaSeconds * MS_PER_SECOND
+        if (nextAgeMs >= particle.lifespanMs || isOutsideCanvas(nextPosition)) {
+          return Result.failVoid
+        }
+        const appendedTrail = Array.append(particle.trail, nextPosition)
+        const trimmedTrail = Array.takeRight(appendedTrail, TRAIL_LENGTH)
+        return Result.succeed(
+          evo(particle, {
+            trail: () => trimmedTrail,
+            ageMs: () => nextAgeMs,
+          }),
+        )
+      },
+    })
+
+const cappedDeltaSeconds = (deltaTimeMs: number): number =>
+  Math.min(deltaTimeMs / MS_PER_SECOND, DELTA_SECONDS_CAP)
+
+const computeBurstHueAnchor = (elapsedSeconds: number): number =>
+  (((elapsedSeconds * BURST_HUE_ANCHOR_DRIFT_DEG_PER_SECOND) % HUE_MAX) +
+    HUE_MAX) %
+  HUE_MAX
+
+const burstAngleAt = (index: number): number =>
+  (index / BURST_PARTICLE_COUNT) * TWO_PI
+
+const spawnBurstParticles = (
+  x: number,
+  y: number,
+  hueAnchor: number,
+): ReadonlyArray<Command.Command<Message>> =>
+  Array.makeBy(BURST_PARTICLE_COUNT, index =>
+    GenerateBurstParticle({
+      x,
+      y,
+      angle: burstAngleAt(index),
+      hueAnchor,
+    }),
+  )
+
+const spawnAmbientParticles = (
+  particleCount: number,
+): ReadonlyArray<Command.Command<Message>> => {
+  const missing = TARGET_PARTICLE_COUNT - particleCount
+  const clamped = Math.max(0, Math.min(missing, SPAWN_PER_FRAME_MAX))
+  return Array.makeBy(clamped, () => GenerateAmbientParticle())
+}
+
+const appendGeneratedParticle =
+  (model: Model) =>
+  (
+    generatedParticle:
+      | typeof Message.CompletedGenerateAmbientParticle.Type
+      | typeof Message.CompletedGenerateBurstParticle.Type,
+  ): UpdateReturn => {
+    const newParticle: Particle = {
+      id: model.nextId,
+      trail: [{ x: generatedParticle.x, y: generatedParticle.y }],
+      baseHue: generatedParticle.baseHue,
+      hueDriftPerSecond: generatedParticle.hueDriftPerSecond,
+      ageMs: 0,
+      lifespanMs: generatedParticle.lifespanMs,
+      speed: generatedParticle.speed,
+      bornAtSeconds: model.elapsedSeconds,
+      initialAngle: generatedParticle.initialAngle,
+      initialSpeedScale: generatedParticle.initialSpeedScale,
+    }
+    return [
+      evo(model, {
+        particles: Array.append(newParticle),
+        nextId: Number.increment,
+      }),
+      [],
+    ]
+  }
+
+const foldFlowStrengthSliderOutMessage = M.type<Slider.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    ChangedValue:
+      ({ value }) =>
+      model => [evo(model, { flowStrength: () => value }), []],
+  }),
+)
+
+const foldFlowStrengthSlider = Update.foldChild({
+  update: Slider.update,
+  read: (model: Model) => Option.some(model.flowStrengthSlider),
+  write: (model, nextFlowStrengthSlider) =>
+    evo(model, { flowStrengthSlider: () => nextFlowStrengthSlider }),
+  toParentMessage: message => Message.GotFlowStrengthSliderMessage({ message }),
+  foldOutMessage: foldFlowStrengthSliderOutMessage,
+})
+
+const foldNoiseScaleSliderOutMessage = M.type<Slider.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    ChangedValue:
+      ({ value }) =>
+      model => [evo(model, { noiseScale: () => value }), []],
+  }),
+)
+
+const foldNoiseScaleSlider = Update.foldChild({
+  update: Slider.update,
+  read: (model: Model) => Option.some(model.noiseScaleSlider),
+  write: (model, nextNoiseScaleSlider) =>
+    evo(model, { noiseScaleSlider: () => nextNoiseScaleSlider }),
+  toParentMessage: message => Message.GotNoiseScaleSliderMessage({ message }),
+  foldOutMessage: foldNoiseScaleSliderOutMessage,
+})
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    TickedFrame: ({ deltaTimeMs }) => {
+      const deltaSeconds = cappedDeltaSeconds(deltaTimeMs)
+      const nextElapsedSeconds = model.elapsedSeconds + deltaSeconds
+      const advancedParticles = Array.filterMap(
+        model.particles,
+        advanceParticle(
+          deltaSeconds,
+          nextElapsedSeconds,
+          model.flowStrength,
+          model.noiseScale,
+          model.maybeMousePosition,
+        ),
+      )
+      const nextModel = evo(model, {
+        particles: () => advancedParticles,
+        elapsedSeconds: () => nextElapsedSeconds,
+      })
+      return [nextModel, spawnAmbientParticles(advancedParticles.length)]
+    },
+
+    CompletedGenerateAmbientParticle: appendGeneratedParticle(model),
+
+    CompletedGenerateBurstParticle: appendGeneratedParticle(model),
+
+    PressedCanvas: ({ x, y }) => [
+      model,
+      spawnBurstParticles(x, y, computeBurstHueAnchor(model.elapsedSeconds)),
+    ],
+
+    MovedPointer: ({ x, y }) => [
+      evo(model, {
+        maybeMousePosition: () => Option.some(Point.make({ x, y })),
+      }),
+      [],
+    ],
+
+    ClickedTogglePlay: () => [
+      evo(model, { isRunning: running => !running }),
+      [],
+    ],
+
+    ClickedReset: () => [
+      evo(model, {
+        particles: () => [],
+        maybeMousePosition: () => Option.none(),
+      }),
+      [],
+    ],
+
+    GotFlowStrengthSliderMessage: ({ message }) =>
+      foldFlowStrengthSlider(model, message),
+
+    GotNoiseScaleSliderMessage: ({ message }) =>
+      foldNoiseScaleSlider(model, message),
+  })