Breakdowns

  • 17genuary26New
  • 07bandsNew
  • 05slate
  • 10gravity
  • 05warp
  • 05abiogenic
  • 10cascade
  • 08shift
  • 07formation
  • 02mesh
  • 08imaginary
  • 06arcs
  • 05dawnFree
  • 05eidolon
  • 09flareFree
  • 29genuary2025
Unlock the Collection ↵

Explore detailed breakdowns of every sketch.

    genuary2617

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    bands7

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    slate5

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    gravity10

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    warp5

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    abiogenic5

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    cascade10

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    shift8

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    formation7

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    mesh2

    • Loading...
    • Loading...

    imaginary8

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    arcs6

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    dawn5

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    eidolon5

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    flare9

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    genuary202529

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
Sketches138Writing27

Fragments

Learn creative coding with shaders. For design engineers, creative coders and shader artists: techniques, tools, deep dives. Powered by ThreeJS and TSL.

Loading...

2025 Phobon

phobon.io↗Shadercraft↗

Pages

Home↗Techniques↗Utilities↗Breakdowns↗Sketches↗Writing↗

Contact

X @thenoumenon↗hey@fragments.supply↗OKAY DEV @phobon↗
All rights reserved.
sketches/genuary26-1.webp

Genuary 1

One color, one shape.

New
sketches/genuary26-2.webp

Genuary 2

The 12 Principles of Animation.

New
sketches/genuary26-3.webp

Genuary 3

Genuary 3: Fibonacci Forever.

New
sketches/genuary26-4.webp

Genuary 4

Genuary 4: Lowres. An image or graphic with low resolution, where details are simplified or pixelated. Selective pixellation applied to high-luminosity areas creating contrast between detailed and pixelated regions.

New
sketches/genuary26-5.webp

Genuary 5

Genuary 5: Write "Genuary". Avoid using a font.

New
sketches/genuary26-6.webp

Genuary 6

Genuary 6: Lights on/off. Make something that changes when you switch on or off the digital lights.

New
sketches/genuary26-7.webp

Genuary 7

Genuary 7: Boolean algebra. Get inspired by Boolean algebra, in any way.

New
sketches/genuary26-8.webp

Genuary 8

Genuary 8: A City. Make a generative metropolis.

New
sketches/genuary26-10.webp

Genuary 10

Genuary 10: Polar Coordinates

New
sketches/genuary26-12.webp

Genuary 12

Genuary 12: Boxes only.

New
sketches/genuary26-13.webp

Genuary 13

Genuary 13: Self portrait.

New
sketches/genuary26-14.webp

Genuary 14

Genuary 14: Everything fits perfectly.

New
sketches/genuary26-17.webp

Genuary 17

Genuary 17: Wallpaper group. There are only 17 ways to cover a plane with a repeating pattern — choose your favourite.

New
sketches/genuary26-19.webp

Genuary 19

Genuary 19: 16x16.

New
sketches/genuary26-20.webp

Genuary 20

Genuary 20: One line. An artwork that is made of a single line only.

New
sketches/genuary26-21.webp

Genuary 21

Genuary 21: Bauhaus Poster. Create a poster design inspired by the German art school Bauhaus.

New
sketches/genuary26-23.webp

Genuary 23

Genuary 23: Transparency. Explore the concept of transparency.

New
sketches/bands-1.webp

Bands 1

Banded patterns with complex distortion effects.

New
sketches/bands-2.webp

Bands 2

Banded patterns with complex distortion effects.

New
sketches/bands-3.webp

Bands 3

Banded patterns with complex distortion effects.

New
sketches/bands-4.webp

Bands 4

Banded patterns with complex distortion effects.

New
sketches/bands-5.webp

Bands 5

Banded patterns with complex distortion effects.

New
sketches/bands-6.webp

Bands 6

Banded patterns with complex distortion effects.

New
sketches/bands-7.webp

Bands 7

Banded patterns with complex distortion effects.

New
sketches/slate-1.webp

Slate 1

Layered noise study with procedural textures. Organic palettes created through multiple noise functions generating natural variations.

sketches/slate-2.webp

Slate 2

Layered noise study with procedural textures. Organic palettes created through multiple noise functions generating natural variations.

sketches/slate-3.webp

Slate 3

Layered noise study with procedural textures. Organic palettes created through multiple noise functions generating natural variations.

sketches/slate-4.webp

Slate 4

Layered noise study with procedural textures. Organic palettes created through multiple noise functions generating natural variations.

sketches/slate-5.webp

Slate 5

Layered noise study with procedural textures. Organic palettes created through multiple noise functions generating natural variations.

sketches/gravity-1.webp

Gravity 1

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

sketches/gravity-2.webp

Gravity 2

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

sketches/gravity-3.webp

Gravity 3

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

sketches/gravity-4.webp

Gravity 4

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

sketches/gravity-5.webp

Gravity 5

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

sketches/gravity-6.webp

Gravity 6

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

sketches/gravity-7.webp

Gravity 7

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

sketches/gravity-8.webp

Gravity 8

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

sketches/gravity-9.webp

Gravity 9

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

sketches/gravity-10.webp

Gravity 10

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

sketches/warp-1.webp

Warp 1

Domain warping with layered noise distorting coordinate space. Fluid organic patterns and psychedelic effects.

sketches/warp-2.webp

Warp 2

Domain warping with layered noise distorting coordinate space. Fluid organic patterns and psychedelic effects.

sketches/warp-3.webp

Warp 3

Domain warping with layered noise distorting coordinate space. Fluid organic patterns and psychedelic effects.

sketches/warp-4.webp

Warp 4

Spiralized fractals with domain warping. Twisted recursive structures creating hypnotic compositions through geometric distortion.

sketches/warp-5.webp

Warp 5

Domain warping with layered noise distorting coordinate space. Fluid organic patterns and psychedelic effects.

sketches/abiogenic-1.webp

Abiogenic 1

Raymarched organic forms exploring deformation and metamorphosis. Fluid transformations in 3D shader space creating dynamic shapes.

sketches/abiogenic-2.webp

Abiogenic 2

Raymarched organic forms exploring deformation and metamorphosis. Fluid transformations in 3D shader space creating dynamic shapes.

sketches/abiogenic-3.webp

Abiogenic 3

Raymarched organic forms exploring deformation and metamorphosis. Fluid transformations in 3D shader space creating dynamic shapes.

sketches/abiogenic-4.webp

Abiogenic 4

Raymarched organic forms exploring deformation and metamorphosis. Fluid transformations in 3D shader space creating dynamic shapes.

sketches/abiogenic-5.webp

Abiogenic 5

Raymarched organic forms exploring deformation and metamorphosis. Fluid transformations in 3D shader space creating dynamic shapes.

sketches/cascade-1.webp

Cascade 1

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

sketches/cascade-2.webp

Cascade 2

Spiralized fractal with twisted geometric recursion. Hypnotic rotational symmetry through iteration creating mesmerizing visual flow.

sketches/cascade-3.webp

Cascade 3

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

sketches/cascade-4.webp

Cascade 4

Kaleidoscopic fractal using shearing matrices. Domain warping creates skewed symmetrical patterns through geometric transformation.

sketches/cascade-5.webp

Cascade 5

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

sketches/cascade-6.webp

Cascade 6

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

sketches/cascade-7.webp

Cascade 7

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

sketches/cascade-8.webp

Cascade 8

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

sketches/cascade-9.webp

Cascade 9

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

sketches/cascade-10.webp

Cascade 10

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

sketches/shift-1.webp

Shift 1

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

sketches/shift-2.webp

Shift 2

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

sketches/shift-3.webp

Shift 3

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

sketches/shift-4.webp

Shift 4

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

sketches/shift-5.webp

Shift 5

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

sketches/shift-6.webp

Shift 6

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

sketches/shift-7.webp

Shift 7

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

sketches/shift-8.webp

Shift 8

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

sketches/formation-fundament.webp

Fundament

Flow field particle system using WebGPU compute shaders. Trigonometric functions create emergent motion through mathematical forces.

sketches/formation-cellular.webp

Cellular

Flow field particle system using WebGPU compute shaders. Trigonometric functions create emergent motion through mathematical forces.

sketches/formation-network.webp

Network

Flow field particle system using WebGPU compute shaders. Trigonometric functions create emergent motion through mathematical forces.

sketches/formation-spiral.webp

Spiral

Flow field particle system using WebGPU compute shaders. Trigonometric functions create emergent motion through mathematical forces.

sketches/formation-monde.webp

Monde

Flow field particle system using WebGPU compute shaders. Trigonometric functions create emergent motion through mathematical forces.

sketches/formation-concentric.webp

Concentric

Flow field particle system using WebGPU compute shaders. Trigonometric functions create emergent motion through mathematical forces.

sketches/formation-flow.webp

Flow

Flow field particle system using WebGPU compute shaders. Trigonometric functions create emergent motion through mathematical forces.

sketches/mesh-7.webp

Mesh 7

Custom mesh gradient with multi-point color interpolation. Smooth organic blending in shaders creating fluid color transitions.

sketches/mesh-8.webp

Mesh 8

Custom mesh gradient with multi-point color interpolation. Smooth organic blending in shaders creating fluid color transitions.

sketches/imaginary-1.webp

Imaginary 1

Visualizing imaginary numbers through gradients. Complex math mapped to color, creating organic patterns through mathematical beauty.

sketches/imaginary-2.webp

Imaginary 2

Visualizing imaginary numbers through gradients. Complex math mapped to color, creating organic patterns through mathematical beauty.

sketches/imaginary-3.webp

Imaginary 3

Visualizing imaginary numbers through gradients. Complex math mapped to color, creating organic patterns through mathematical beauty.

sketches/imaginary-4.webp

Imaginary 4

Visualizing imaginary numbers through gradients. Complex math mapped to color, creating organic patterns through mathematical beauty.

sketches/imaginary-5.webp

Imaginary 5

Visualizing imaginary numbers through gradients. Complex math mapped to color, creating organic patterns through mathematical beauty.

sketches/imaginary-6.webp

Imaginary 6

Visualizing imaginary numbers through gradients. Complex math mapped to color, creating organic patterns through mathematical beauty.

sketches/imaginary-7.webp

Imaginary 7

Fully randomized imaginary number visualization. Complex math creates unique gradient patterns every render through procedural generation.

sketches/imaginary-8.webp

Imaginary 8

Fully randomized imaginary number visualization. Generative complex number patterns with unique outcomes through mathematical exploration.

sketches/arcs-1.webp

Arcs 1

Simple shapes and gradients inspired by Alex Cristache. Arc SDFs with soft color fills creating elegant minimalist compositions.

sketches/arcs-2.webp

Arcs 2

Simple shapes and gradients inspired by Alex Cristache. Arc SDFs with soft color fills creating elegant minimalist compositions.

sketches/arcs-3.webp

Arcs 3

Simple shapes and gradients inspired by Alex Cristache. Arc SDFs with soft color fills creating elegant minimalist compositions.

sketches/arcs-4.webp

Arcs 4

Simple shapes and gradients inspired by Alex Cristache. Arc SDFs with soft color fills creating elegant minimalist compositions.

sketches/arcs-5.webp

Arcs 5

Simple shapes and gradients inspired by Alex Cristache. Arc SDFs with soft color fills creating elegant minimalist compositions.

sketches/arcs-6.webp

Arcs 6

Simple shapes and gradients inspired by Alex Cristache. Arc SDFs with soft color fills creating elegant minimalist compositions.

sketches/dawn-1.webp

Dawn 1

Gradient study inspired by Rik Oostenbroek. Soft color transitions creating dawn-like luminous atmospheres through smooth blending.

Free
sketches/dawn-2.webp

Dawn 2

Gradient study inspired by Rik Oostenbroek. Soft color transitions creating dawn-like luminous atmospheres through smooth blending.

sketches/dawn-3.webp

Dawn 3

Gradient study inspired by Rik Oostenbroek. Soft color transitions creating dawn-like luminous atmospheres through smooth blending.

sketches/dawn-4.webp

Dawn 4

Gradient study inspired by Rik Oostenbroek. Soft color transitions creating dawn-like luminous atmospheres through smooth blending.

sketches/dawn-5.webp

Dawn 5

Gradient study inspired by Rik Oostenbroek. Soft color transitions creating dawn-like luminous atmospheres through smooth blending.

sketches/eidolon-1.webp

Eidolon 1

Rotating geometric shapes with procedural gradients. Animated transformations and cosine color palettes creating dynamic compositions.

sketches/eidolon-2.webp

Eidolon 2

Rotating geometric shapes with procedural gradients. Animated transformations and cosine color palettes creating dynamic compositions.

sketches/eidolon-3.webp

Eidolon 3

Rotating geometric shapes with procedural gradients. Animated transformations and cosine color palettes creating dynamic compositions.

sketches/eidolon-4.webp

Eidolon 4

Rotating geometric shapes with procedural gradients. Animated transformations and cosine color palettes creating dynamic compositions.

sketches/eidolon-5.webp

Eidolon 5

Rotating geometric shapes with procedural gradients. Animated transformations and cosine color palettes creating dynamic compositions.

sketches/flare-1.webp

Flare 1

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

Free
sketches/flare-2.webp

Flare 2

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

sketches/flare-3.webp

Flare 3

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

sketches/flare-4.webp

Flare 4

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

sketches/flare-5.webp

Flare 5

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

sketches/flare-6.webp

Flare 6

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

sketches/flare-7.webp

Flare 7

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

sketches/flare-8.webp

Flare 8

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

sketches/flare-9.webp

Flare 9

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

sketches/genuary-1.webp

Genuary 1

Genuary 2025 prompt: horizontal or vertical lines only. Minimalist geometric composition study exploring linear patterns.

sketches/genuary-2.webp

Genuary 2

Genuary 2025 prompt: layers upon layers upon layers. Depth and transparency study in shaders creating visual complexity.

sketches/genuary-3.webp

Genuary 3

Genuary 2025 prompt: exactly 42 lines of code. Constraint-based fractal shader study demonstrating minimal implementation.

sketches/genuary-4.webp

Genuary 4

Genuary 2025 prompt: black on black. Monochrome study exploring texture and depth through subtle contrast variations.

sketches/genuary-5.webp

Genuary 5

Genuary 2025 prompt: isometric art with no vanishing points. Parallel projection shader study creating dimensional illusions.

sketches/genuary-6.webp

Genuary 6

Genuary 2025 prompt: landscape using only primitive shapes. SDF-based minimalist scene construction with geometric forms.

sketches/genuary-8.webp

Genuary 8

Genuary 2025 prompt: draw one million of something. GPU particle system rendering study exploring massive scale visualization.

sketches/genuary-9.webp

Genuary 9

Genuary 2025 prompt: textile patterns from public transport seating. Repetitive fractal pattern study inspired by urban design.

sketches/genuary-10.webp

Genuary 10

Genuary 2025 prompt: only use TAU in your code. Mathematical constraint exploring circular patterns through constant usage.

sketches/genuary-11.webp

Genuary 11

Genuary 2025 prompt: impossible day. Optical illusions and paradoxical geometry in shaders creating mind-bending visuals.

sketches/genuary-12.webp

Genuary 12

Genuary 2025 prompt: subdivision. Recursive space partitioning creating fractal-like patterns through iterative division.

sketches/genuary-13.webp

Genuary 13

Genuary 2025 prompt: triangles and nothing else. Complex patterns built from triangle SDFs demonstrating geometric versatility.

sketches/genuary-14.webp

Genuary 14

Genuary 2025 prompt: pure black and white, no gray. High-contrast raymarching study exploring binary visual aesthetics.

sketches/genuary-15.webp

Genuary 15

Genuary 2025 prompt: design a rug. Symmetrical pattern study with traditional textile motifs rendered procedurally.

sketches/genuary-16.webp

Genuary 16

Genuary 2025 prompt: generative palette. Procedural colors using cosine functions and fractals creating dynamic harmonies.

sketches/genuary-17.webp

Genuary 17

Genuary 2025 prompt: what happens if pi=4? Warped geometry and impossible circular shapes through mathematical distortion.

sketches/genuary-18.webp

Genuary 18

Genuary 2025 prompt: what does wind look like? Abstract motion study visualizing invisible forces through particle dynamics.

sketches/genuary-19.webp

Genuary 19

Genuary 2025 prompt: Op art. Visual illusions through geometric patterns and high contrast creating perceptual effects.

sketches/genuary-20.webp

Genuary 20

Genuary 2025 prompt: generative architecture. Procedural buildings using domain repetition and SDFs creating urban landscapes.

sketches/genuary-22.webp

Genuary 22

Genuary 2025 prompt: gradients only. Pure color blending with cosine palettes, no shapes creating smooth transitions.

sketches/genuary-23.webp

Genuary 23

Genuary 2025 prompt: inspired by brutalism. Raw geometric forms and stark minimalism in raymarching architectural style.

sketches/genuary-24.webp

Genuary 24

A #genuary2025 sketch. Geometric art - pick either a circle, rectangle, or triangle and use only that geometric shape.

sketches/genuary-25.webp

Genuary 25

Genuary 2025 prompt: one line that may or may not intersect itself. Continuous path creating complex forms through curves.

sketches/genuary-26.webp

Genuary 26

Genuary 2025 prompt: symmetry. Reflective balance and mirroring through fractal transformations creating harmonious patterns.

sketches/genuary-27.webp

Genuary 27

Genuary 2025 prompt: no randomness, noise, or trig. Extreme constraint pattern study using only deterministic functions.

sketches/genuary-28.webp

Genuary 28

Genuary 2025 prompt: infinite scroll. Seamless tiling fractal with endless looping creating continuous visual flow.

sketches/genuary-29.webp

Genuary 29

Genuary 2025 prompt: grid-based graphic design. Modular system with domain repetition creating structured compositions.

sketches/genuary-30.webp

Genuary 30

Genuary 2025 prompt: abstract map. Stylized cartography through geometric abstraction and noise creating terrain visuals.

sketches/genuary-31.webp

Genuary 31

Genuary 2025 prompt: pixel sorting. Algorithmic pixel reorganization creating glitch aesthetics through data manipulation.

Be the first to know what's next