Fardeen

Hi, I'm Fardeen. Welcome to my craft playground. This is a space where I build interactive UI prototypes, experiment with physics-based animations, and showcase creative frontend techniques using native APIs.

Click to apply real-world gravity to all elements on the page!

Physics

Real-time dynamic simulations using spring-mass systems, velocity integration, and custom friction coefficients.

Attractor Mesh Sandbox

01 / CANVAS PHYSICS
0.92
0.025
140px

How it works

An elastic grid of points simulated on a HTML5 Canvas. Moving the pointer creates a localized magnetic repulsion force. Every node is bound to its origin by a Hookean spring force, solved iteratively with friction damping to simulate a fluid, organic fabric deformation.

Mathematics & Trigonometry

Using trigonometric functions, vector rotations, and coordinate space mappings to build interactive controllers and orbit tracings.

Tactile Rotary Dial

02 / SVG TRIGONOMETRY
0%
Focus State

How it works

An interactive dial mapping circular drag gestures to parameters. Triggers trigonometric angle calculations with Math.atan2 to rotationally transform the knob and update the dashoffset of the active SVG ring, which directly binds to a CSS blur filter.

Fourier Orbit Spirograph

03 / ORBITAL TRIGONOMETRY
3
4

How it works

Simulates epicycles (circles orbiting other circles) using chained sine and cosine functions. The final pen coordinates are tracked in a trail array to render glowing curves. Demonstrates trigonometric vectors and phase offsets in drawing complex orbital mathematics.

Graphics & Interpolation

Real-time coordinate tracking and radial weight blends to generate smooth background mesh gradients.

Fluid Gradient Mesh Editor

04 / INTERACTIVE MESH
Copied to clipboard!

How it works

Drag the colored anchors to reshape the radial gradient mesh dynamically. The background generates a CSS mesh by overlaying multiple CSS radial-gradients with opacity blending. Click "Copy CSS" to retrieve the output code.

Drawing Sandbox

Real-time physics vector engine resolving collisions between free-form drawing strokes and dynamic particles.

Draw-to-Physics Sandbox

05 / LINE COLLISION MATH
Click and drag to draw platforms. Watch spheres roll and bounce!
Total Platforms: 0

How it works

Draw platforms directly on the stage. Emits continuous physical spheres that interact with your custom paths. Solves vector projections, closest-point distance calculations, and elastic velocity reflections (using vector normals and restitution).