픽셀 던지기

Pixel Throw

포인터가 지나가면 밝기나 색에 따라 픽셀이 튕겨 나갔다가 돌아옵니다.

다른 이름: PixelThrowpixel displacementpixel scatter

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

React

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요.
import { Shader, ImageTexture, PixelThrow } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <PixelThrow />
    </Shader>
  )
}

Vue

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<!-- /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요. -->
<script setup lang="ts">
import { Shader, ImageTexture, PixelThrow } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/still.jpg"/>
    <PixelThrow/>
  </Shader>
</template>

Svelte

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<!-- /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요. -->
<script>
  import { Shader, ImageTexture, PixelThrow } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/still.jpg" />
  <PixelThrow />
</Shader>

Solid

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요.
import { Shader, ImageTexture, PixelThrow } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <PixelThrow />
    </Shader>
  )
}

JavaScript

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
import { createShader } from 'shaders/js'

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

속성(props) · `PixelThrow`

값을 바꾸면 위 데모와 코드 탭에 바로 반영됩니다. 설명은 라이브러리 레지스트리의 영어 원문(MIT)입니다.

이름	값	기본값	범위·선택지	설명(원문)
`throwKey`Throw By		luminance	luminance · darkness · red · green · blue	Which pixel value decides how far a pixel is thrown
`strength`Strength	0.25	0.25	0 – 1 (step 0.01)	Maximum distance pixels can be thrown
`keyInfluence`Key Influence	0.8	0.8	0 – 1 (step 0.01)	How much the chosen value modulates throw distance (0 = all pixels thrown equally, 1 = only high-value pixels move)
`radius`Radius	0.2	0.2	0.02 – 0.6 (step 0.01)	Size of the cursor's throw brush
`friction`Friction	0.3	0.3	0 – 1 (step 0.01)	How quickly thrown pixels settle back to their origin (0 = float almost forever, 1 = snap back fast)
`momentum`Momentum	0.5	0.5	0 – 1 (step 0.01)	How much the thrown flow keeps drifting and swirling after the cursor passes (fluidity)
`edges`Edges		stretch	stretch · transparent · mirror · wrap	How to handle pixels thrown beyond the canvas edges

모든 컴포넌트 공통: blendMode · opacity · visible · maskSource/maskType · boundingBox · id

포인터가 지나간 자리에 픽셀이 밀려나고, 밝기나 색에 따라 서로 다른 거리로 흩어진 뒤 돌아온다. 물 위를 손으로 쓸어 파문을 만들듯 이미지 조각이 흐름을 따라 움직인다.

`throwKey`는 이동 거리를 결정하는 기준(기본값 `luminance`), `strength`는 최대 이동량(기본값 0.25, 범위 0–1), `radius`는 브러시 크기(기본값 0.2, 범위 0.02–0.6)다. `friction`은 원래 자리로 돌아가는 속도(기본값 0.3, 범위 0–1), `momentum`은 포인터가 지난 뒤 흐름이 이어지는 정도(기본값 0.5, 범위 0–1)를 조절한다.

효과 레이어라 아래에 픽셀을 이동시킬 이미지가 있어야 한다. 명암이 있는 사진과 쓰면 흩어짐이 분명하고, 작은 글자나 선을 입력으로 쓰면 원래 형태를 읽기 어려워질 수 있다.

언제 쓰나

사진에 포인터 반응형 흩어짐을 더할 때, 짧은 인터랙티브 전환을 만들 때, 질감 있는 히어로 이미지에 좋다. 읽어야 할 문구나 얇은 선을 보존해야 할 때는 피한다.

속성(props) · PixelThrow

함께 보기

픽셀 정렬Pixel Sort

변위 맵Displacement Map

커서 잔물결Cursor Ripples

유리 파편 효과Shatter

언제 쓰나

속성(props) · `PixelThrow`