Shader Atlas
한국어
≈ Distortions

Polar Coordinates

극좌표 변환

The rectangular image is remapped into a space described by angle and distance from a center.

Also known as: PolarCoordinatesPolar mapping

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, ImageTexture, PolarCoordinates } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/poster.jpg" />
      <PolarCoordinates />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script setup lang="ts">
import { Shader, ImageTexture, PolarCoordinates } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/poster.jpg"/>
    <PolarCoordinates/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script>
  import { Shader, ImageTexture, PolarCoordinates } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/poster.jpg" />
  <PolarCoordinates />
</Shader>
Solid
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, ImageTexture, PolarCoordinates } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/poster.jpg" />
      <PolarCoordinates />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/poster.jpg',
      },
    },
    {
      type: 'PolarCoordinates',
    }
  ]
}, { disableTelemetry: true })

Props · PolarCoordinates

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
centerCenter
x0.5y0.5
{"x":0.5,"y":0.5}x, y: 0 – 1The center point for polar coordinate conversion
wrapWrap10 – 2 (step 0.1)Controls how much of the angular range to use (1 = full 360°, 0.5 = 180°)
radiusRadius10 – 2 (step 0.1)Controls how much of the radius range to use (affects the radial mapping)
intensityIntensity10 – 1 (step 0.1)Blends between original UVs (0) and polar coordinates (1)
edgesEdgestransparentstretch · transparent · mirror · wrapHow to handle edges when distortion pushes content out of bounds

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Rectangular Coordinates직교좌표 변환

Polar-space content is remapped into a rectangular, axis-aligned frame.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Kaleidoscope만화경

Radial mirror segments repeat the input into a kaleidoscope pattern.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Conic Gradient원뿔형 그라디언트

Colors sweep in a full circle around a center point, like a color wheel.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Perspective원근 변형

A flat image tilts in 3D, with perspective changing the apparent size of its near and far sides.

Like rolling a flat map around a center, the image is rearranged by angle and distance from a point.

`center` sets the reference point. `wrap` changes the angular span and `radius` changes the radial mapping; lower `intensity` keeps more of the original coordinates, while higher values make the polar remapping stronger.

Apply it above an input layer. `RectangularCoordinates` performs the complementary conversion, so the two can be combined. Straight edges and copy can bend into arcs, making this a poor fit when a flat interface must stay unchanged.

When to use

Use it for circular tunnels, radial backgrounds, and turning flat imagery into circular motion. Avoid it when tables or interfaces must retain straight alignment.

Open as page ↗