GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

무지개 그라데이션 9가지 — 캔버스 플라즈마 배경 만들기

· Godrich · 9종 · 13분 읽기

크리에이티브 UI바닐라 JS자동 재생히어로 섹션랜딩 페이지

무지개 그라데이션은 정해둔 색이 아니라 캔버스 픽셀 값을 매 프레임 계산해서 만드는 색이다. 빛아, 넌 원래 색이 없다. 01번은 사인파 세 개를 겹쳐 너에게 색을 입히고, 05번은 두 덩어리가 맞닿는 자리에서 너를 섞으며, 09번은 히어로 화면 전체에 너를 펼쳐 놓는다.

고전 플라즈마 사인파장01 plasma-sine-field-classic 노이즈 색상 흐름02 plasma-noise-hue-flow 포인터 따라오는 색 파동03 plasma-pointer-ripple-distort 방사형 색 폭발04 plasma-radial-hue-burst 메타볼 색 번짐05 plasma-metaball-color-blend 스캔라인 색 어긋남06 plasma-scanline-chroma-shift 그라데이션 띠 계단화07 plasma-gradient-band-posterize 흐름장 입자 드리프트08 plasma-flow-particle-drift 히어로 배경 장면09 plasma-hero-background-scene

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 개는 색을 만드는 입력이 저마다 다르다 — 01·04·06·07은 좌표와 시간만으로, 02·08은 값 노이즈로, 03·05는 포인터 위치로, 09는 01과 05를 한 프레임 안에서 합쳐서 hue 값을 만든다. 모든 계산은 160×100(16,000픽셀) 오프스크린 캔버스 위에서 돌고 화면에 보이는 크기는 drawImage가 확대해 그린다. 아래 코드는 모두 run/417/demo 원본 index.html에서 연속된 줄 그대로 옮겼다.

01사인파 네 겹을 더해 화면 전체 색을 다시 칠하는 고전 플라즈마

화면 전체가 경계 없이 흐르는 무지개 안개처럼 보인다. renderField가 가로·세로·대각·중심 거리 방향으로 사인파 네 개를 만들어 더한 값을 hue로 바꾸고, PLASMA_SINE_FREQ_X가 그중 가로 방향 파의 촘촘함을 정해 안개의 결 굵기를 가른다.

고전 플라즈마 사인파장
새 창에서 열기

01 · 고전 플라즈마 사인파장 — 측정 누적면적 75.243% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

renderFieldhslToRgbPLASMA_SINE_FREQ_X
  function renderField(t) {
    var cx = CALC_W / 2, cy = CALC_H / 2;
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var dx = x - cx, dy = y - cy;
        var v = Math.sin(x * PLASMA_SINE_FREQ_X + t * PLASMA_TIME_SPEED)
              + Math.sin(y * PLASMA_SINE_FREQ_Y - t * PLASMA_TIME_SPEED * 0.8)
              + Math.sin((x + y) * PLASMA_SINE_FREQ_R * 0.7 + t * PLASMA_TIME_SPEED * 1.2)
              + Math.sin(Math.sqrt(dx * dx + dy * dy) * PLASMA_SINE_FREQ_R - t * PLASMA_TIME_SPEED * 1.5);
        var hue = (v / 4) * 180 + 180 + t * PLASMA_TIME_SPEED * 40;
        var rgb = hslToRgb(hue, 0.68, 0.55);
        offBuf[idx] = rgb[0]; offBuf[idx + 1] = rgb[1]; offBuf[idx + 2] = rgb[2]; offBuf[idx + 3] = 255;
        idx += 4;
      }
    }
  }

01 항목은 누적면적 75.2%·강도 평균 62.4·23프레임 중 23프레임에서 움직였다.

02격자 노이즈를 이중선형 보간해 구름처럼 흘리는 색상 흐름

카드 배경처럼 색 얼룩이 구름 모양으로 천천히 흘러가는 것처럼 보인다. valueNoise2D가 격자 난수를 보간해 두 스케일의 노이즈 값을 만들고, PLASMA_NOISE_SCALE이 그 격자 한 칸의 픽셀 크기를 정해 알갱이가 촘촘해질지 성겨질지를 가른다.

노이즈 색상 흐름
새 창에서 열기

02 · 노이즈 색상 흐름 — 측정 누적면적 74.738% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

PLASMA_NOISE_SCALEvalueNoise2DseedRand
  function renderField(t) {
    var tt = t / 1000;
    var ox = tt * PLASMA_FLOW_SPEED, oy = tt * PLASMA_FLOW_SPEED * 0.6;
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var n1 = valueNoise2D(x / PLASMA_NOISE_SCALE + ox, y / PLASMA_NOISE_SCALE * 0.8 + oy);
        var n2 = valueNoise2D(x / PLASMA_NOISE_SCALE * 2.3 - oy, y / PLASMA_NOISE_SCALE * 2.3 + ox);
        var hue = (n1 * 0.7 + n2 * 0.3) * 360 + tt * 30;
        var light = 0.4 + n2 * 0.2;
        var rgb = hslToRgb(hue, 0.6, light);
        offBuf[idx] = rgb[0]; offBuf[idx + 1] = rgb[1]; offBuf[idx + 2] = rgb[2]; offBuf[idx + 3] = 255;
        idx += 4;
      }
    }
  }

02 항목은 누적면적 74.7%·강도 평균 28.7·23프레임 중 23프레임에서 움직였다.

03포인터에서 퍼지는 파동이 좌표를 밀어 색을 일그러뜨리는 리플

포인터를 움직이면 그 자리에서 색 파동이 원처럼 퍼져나가며 화면을 일그러뜨린다. PLASMA_RIPPLE_AMP가 파동이 좌표를 얼마나 밀어내는지 정하고, renderField는 그 밀린 좌표(bx·by)로 hue를 계산해 파동이 지나간 자리의 색만 뒤틀리게 한다.

포인터 따라오는 색 파동
새 창에서 열기

03 · 포인터 따라오는 색 파동 — 측정 누적면적 66.851% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

PLASMA_RIPPLE_AMPvirtualPointerOrbitcalcFromEvent
  function renderField(t) {
    var p = pointerActive ? realPointer : (reduce ? { x: -999, y: -999 } : virtualPointerOrbit(t));
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var dx = x - p.x, dy = y - p.y;
        var dist = Math.sqrt(dx * dx + dy * dy) || 0.0001;
        var wave = Math.sin(dist * PLASMA_RIPPLE_FREQ - t * PLASMA_RIPPLE_SPEED);
        var atten = Math.exp(-dist * PLASMA_RIPPLE_DECAY);
        var disp = wave * atten * PLASMA_RIPPLE_AMP;
        var bx = x + (dx / dist) * disp, by = y + (dy / dist) * disp;
        var hue = bx * 1.6 + by * 1.6;
        var light = 0.48 + wave * atten * 0.16;
        var rgb = hslToRgb(hue, 0.64, light);
        offBuf[idx] = rgb[0]; offBuf[idx + 1] = rgb[1]; offBuf[idx + 2] = rgb[2]; offBuf[idx + 3] = 255;
        idx += 4;
      }
    }
  }

03 항목은 누적면적 66.9%·강도 평균 32.1·23프레임 중 23프레임에서 움직였다.

04중심 거리에 주기를 곱해 고리를 바깥으로 흘려보내는 색 폭발

화면 중심에서 색 고리가 바깥으로 밀려나가며 주기적으로 반복된다. PLASMA_RING_FREQ가 중심으로부터 거리(dist)에 곱해지는 주기를 정해 위상(ringPhase)을 만들고, 이 위상에 360을 곱한 값을 그대로 hue로 쓴다.

방사형 색 폭발
새 창에서 열기

04 · 방사형 색 폭발 — 측정 누적면적 75.385% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

PLASMA_RING_FREQPLASMA_RING_SPEEDrenderField
  function renderField(t) {
    var cx = CALC_W / 2, cy = CALC_H / 2;
    var tt = t / LOOP_MS;
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var dx = x - cx, dy = y - cy;
        var dist = Math.sqrt(dx * dx + dy * dy);
        var ringPhase = dist * PLASMA_RING_FREQ - tt * PLASMA_RING_SPEED;
        var hue = ringPhase * 360;
        var light = 0.4 + 0.2 * Math.sin(ringPhase * Math.PI * 6);
        var rgb = hslToRgb(hue, 0.7, light);
        offBuf[idx] = rgb[0]; offBuf[idx + 1] = rgb[1]; offBuf[idx + 2] = rgb[2]; offBuf[idx + 3] = 255;
        idx += 4;
      }
    }
  }

04 항목은 누적면적 75.4%·강도 평균 60.9·23프레임 중 23프레임에서 움직였다.

05반지름 제곱 가중치로 경계부터 색을 섞는 메타볼 번짐

색이 다른 두 덩어리를 손가락이나 마우스로 옮기면 맞닿는 경계부터 색이 섞인다. PLASMA_BLOB_RADIUS_PX가 메타볼 필드 가중치(R² / (d² + R² × 2))의 반지름이 되고, 이 가중치를 제곱해 날카롭게 만든 값으로 두 덩어리의 rgb를 픽셀마다 가중 평균한다.

메타볼 색 번짐
새 창에서 열기

05 · 메타볼 색 번짐 — 측정 누적면적 60.035% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

PLASMA_BLOB_RADIUS_PXnearestBlobIndexupdateBlobs
  function renderField(t) {
    updateBlobs(t);
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var sw = 0, rr = 0, gg = 0, bb = 0;
        for (var k = 0; k < blobs.length; k += 1) {
          var bo = blobs[k];
          var dx = x - bo.x, dy = y - bo.y;
          var d2 = dx * dx + dy * dy;
          var w = (PLASMA_BLOB_RADIUS_PX * PLASMA_BLOB_RADIUS_PX) / (d2 + PLASMA_BLOB_RADIUS_PX * 2);
          w = w * w;
          sw += w; rr += bo.rgb[0] * w; gg += bo.rgb[1] * w; bb += bo.rgb[2] * w;
        }
        offBuf[idx] = rr / sw; offBuf[idx + 1] = gg / sw; offBuf[idx + 2] = bb / sw; offBuf[idx + 3] = 255;
        idx += 4;
      }
    }
  }

05 항목은 누적면적 60.0%·강도 평균 18.8·23프레임 중 22프레임에서 움직였다.

06가로줄마다 표본 위치를 밀어 브라운관처럼 어긋나는 스캔라인

가로줄마다 색이 살짝 어긋나 옛 브라운관 화면 같은 색 번짐이 보인다. PLASMA_ROW_HUE_STEP이 줄(y)마다 hue를 얼마나 밀어 올릴지, PLASMA_ROW_SHIFT_PX가 표본 좌표(xs)를 얼마나 옆으로 미룰지를 각각 정한다.

스캔라인 색 어긋남
새 창에서 열기

06 · 스캔라인 색 어긋남 — 측정 누적면적 75.342% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

PLASMA_ROW_HUE_STEPPLASMA_ROW_SHIFT_PXrenderField
  function renderField(t) {
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      var rowShift = Math.sin(y * 0.35 + t * PLASMA_ROW_SPEED) * PLASMA_ROW_SHIFT_PX;
      var rowHue = y * PLASMA_ROW_HUE_STEP + t * PLASMA_ROW_SPEED * 30;
      var rowLight = 0.44 + 0.1 * Math.sin(y * 0.6);
      for (var x = 0; x < CALC_W; x += 1) {
        var xs = x + rowShift;
        var hue = rowHue + xs * 1.2;
        var rgb = hslToRgb(hue, 0.7, rowLight);
        offBuf[idx] = rgb[0]; offBuf[idx + 1] = rgb[1]; offBuf[idx + 2] = rgb[2]; offBuf[idx + 3] = 255;
        idx += 4;
      }
    }
  }

06 항목은 누적면적 75.3%·강도 평균 31.6·23프레임 중 23프레임에서 움직였다.

07hue 구간 수를 나눠 부드러운 색을 띠로 끊는 계단화

부드럽게 흐르던 무지개색이 굵은 띠 몇 개로 뚝뚝 끊어져 보인다. posterizeHue가 PLASMA_BAND_COUNT 구간 수만큼 360도를 나눠 원본 hue를 그 구간의 중앙값으로 반올림하고, range 슬라이더로 이 구간 수를 3~24 사이에서 즉시 바꿀 수 있다.

그라데이션 띠 계단화
새 창에서 열기

07 · 그라데이션 띠 계단화 — 측정 누적면적 73.538% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

PLASMA_BAND_COUNTposterizeHuerenderField
  function posterizeHue(raw, bands) {
    var step = 360 / bands;
    return Math.floor(raw / step) * step + step / 2;
  }

  function renderField(t) {
    var diag = t * 0.03;
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var raw = (x * 1.4 + y * 1.1 + diag) % 360;
        var hue = posterizeHue(raw, PLASMA_BAND_COUNT);
        var rgb = hslToRgb(hue, 0.68, 0.5);
        offBuf[idx] = rgb[0]; offBuf[idx + 1] = rgb[1]; offBuf[idx + 2] = rgb[2]; offBuf[idx + 3] = 255;
        idx += 4;
      }
    }
  }

07 항목은 누적면적 73.5%·강도 평균 77.3·23프레임 중 23프레임에서 움직였다.

08흐름장을 따라 입자가 트레일을 남기는 드리프트

작은 입자 수백 개가 보이지 않는 흐름을 따라 떠다니며 지나간 자리에 옅은 색 궤적을 남긴다. PLASMA_PARTICLE_COUNT가 이 입자 수를 정하고, stepSim은 매 프레임을 독립적으로 계산하는 다른 항목과 달리 이전 프레임의 트레일 버퍼를 살짝 페이드시키며 상태를 계속 이어간다.

흐름장 입자 드리프트
새 창에서 열기

08 · 흐름장 입자 드리프트 — 측정 누적면적 30.433% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

PLASMA_PARTICLE_COUNTstepSimvalueNoise2D
  function stepSim(dtMs) {
    octx.fillStyle = 'rgba(12,14,22,' + PLASMA_FADE_ALPHA + ')';
    octx.fillRect(0, 0, CALC_W, CALC_H);
    flowT += dtMs * 0.00035;
    var dtS = dtMs / 1000;
    for (var i = 0; i < particles.length; i += 1) {
      var p = particles[i];
      var ang = valueNoise2D(p.x * PLASMA_FLOW_SCALE + flowT, p.y * PLASMA_FLOW_SCALE) * Math.PI * 4;
      p.x += Math.cos(ang) * PLASMA_SPEED_PX_S * dtS;
      p.y += Math.sin(ang) * PLASMA_SPEED_PX_S * dtS;
      if (p.x < 0) p.x += CALC_W; if (p.x >= CALC_W) p.x -= CALC_W;
      if (p.y < 0) p.y += CALC_H; if (p.y >= CALC_H) p.y -= CALC_H;
      var hue = (ang * 57.3 + p.hueSeed + flowT * 40) % 360;
      octx.fillStyle = hslToRgb(hue, 0.75, 0.58);
      octx.fillRect(p.x - 0.6, p.y - 0.6, 1.6, 1.6);
    }
  }

08 항목은 누적면적 30.4%·강도 평균 64.3·23프레임 중 23프레임에서 움직였다.

0901의 사인 필드와 05의 메타볼을 한 프레임에 합치는 히어로 장면

01의 사인파 네 겹 hue 필드를 바탕색으로 깔고 그 위에 05의 덩어리 두 개를 가중 혼합해, 웹사이트 히어로 섹션 전체를 채우는 한 장면으로 합친다. HERO_BLOB_RADIUS_PX가 이 오버레이 덩어리의 메타볼 반지름을 정해, 값이 클수록 바탕 사인 필드보다 덩어리 색이 더 넓게 두드러진다.

히어로 배경 장면
새 창에서 열기

09 · 히어로 배경 장면 — 측정 누적면적 72.383% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

HERO_BLOB_RADIUS_PXrenderFieldhslToRgb
        var v = Math.sin(x * PLASMA_SINE_FREQ_X + tt) +
          Math.sin(y * PLASMA_SINE_FREQ_Y + tt * 1.3) +
          Math.sin((x + y) * PLASMA_SINE_FREQ_R * 0.5 + tt * 0.7) +
          Math.sin(Math.sqrt((x - 80) * (x - 80) + (y - 50) * (y - 50)) * PLASMA_SINE_FREQ_R - tt);
        var baseHue = (v / 4) * 180 + 200 + tt * 8;
        var baseRgb = hslToRgb(baseHue, 0.55, 0.4);

        var sr = baseRgb[0], sg = baseRgb[1], sb = baseRgb[2], sw = 1;
        for (var k = 0; k < blobs.length; k += 1) {
          var dx = x - bcx[k], dy = y - bcy[k];
          var d2 = dx * dx + dy * dy;
          var R2 = HERO_BLOB_RADIUS_PX * HERO_BLOB_RADIUS_PX;
          var w = R2 / (d2 + R2 * 2);
          w = w * w * 3.2;
          sr += blobs[k].rgb[0] * w;
          sg += blobs[k].rgb[1] * w;
          sb += blobs[k].rgb[2] * w;
          sw += w;
        }

        offBuf[idx] = sr / sw; offBuf[idx + 1] = sg / sw; offBuf[idx + 2] = sb / sw; offBuf[idx + 3] = 255;
        idx += 4;
      }
    }
  }

09 항목은 누적면적 72.4%·강도 평균 28.9·23프레임 중 23프레임에서 움직였다.

노이즈 스케일·메타볼 반지름·입자 개수 — 값 하나가 픽셀 루프를 가르는 세 자리

아홉 계산은 모두 createImageData 로 얻은 버퍼에 hslToRgb로 만든 무지개 그라데이션 rgb 값을 픽셀마다 써넣지만, 그 hue를 만드는 상수는 항목마다 다르다. 02 노이즈 흐름은 PLASMA_NOISE_SCALE(기본 40)이 valueNoise2D가 읽는 격자 한 칸의 픽셀 크기를 정해, 값이 작을수록 알갱이가 촘촘해지고 클수록 구름처럼 성겨진다. 05 메타볼 번짐은 PLASMA_BLOB_RADIUS_PX(기본 60)가 앞서 본 가중치 공식의 반지름이 되어 두 덩어리가 얼마나 가까워야 색이 섞이기 시작하는지를 정하고, 08 입자 드리프트는 PLASMA_PARTICLE_COUNT(기본 80)가 흐름장을 따라 트레일을 남기는 입자 수를 정해 화면이 성긴 선으로 보일지 촘촘한 색 흐름으로 보일지를 가른다.

23번의 프레임 델타로 잰 아홉 패턴의 누적면적과 강도

프레임 24장을 캡처해 이웃 프레임끼리 픽셀 차를 잰 값은 다음과 같다 — 04 방사형 색 폭발이 누적면적 75.4%로 가장 넓게 바뀌고, 08 흐름장 입자 드리프트는 트레일이 화면 대부분을 어두운 배경으로 남겨둬 30.4%로 가장 좁다.

NN 이름 누적면적 % 강도 평균 x/23
01 사인파장 75.2 62.4 23/23
02 노이즈 흐름 74.7 28.7 23/23
03 포인터 리플 66.9 32.1 23/23
04 색 폭발 75.4 60.9 23/23
05 메타볼 번짐 60.0 18.8 22/23
06 스캔라인 75.3 31.6 23/23
07 띠 계단화 73.5 77.3 23/23
08 입자 드리프트 30.4 64.3 23/23
09 히어로 장면 72.4 28.9 23/23

이 아홉 계산을 실제 화면 어디에 놓는가

01 사인파장과 06 스캔라인은 로딩 화면이나 레트로 콘셉트 페이지처럼 계산만으로 움직이는 배경이 필요한 자리에, 02 노이즈 흐름은 카드 배경이나 섹션 구분선처럼 잔잔한 움직임을 원하는 자리에 붙인다. 03 포인터 리플과 05 메타볼 번짐은 사용자 입력에 반응해야 하는 인터랙티브 히어로·포트폴리오 인트로에, 04 색 폭발은 이벤트 배너나 알림 강조처럼 눈에 띄어야 하는 자리에 쓴다. 07 띠 계단화는 포스터형 섹션에, 08 입자 드리프트는 대시보드 배경이나 대기 화면처럼 은은하게 계속 움직여야 하는 자리에 맞는다. 09 히어로 장면은 이 여덟 계산 중 01과 05를 골라 웹사이트 히어로 섹션 전체를 채우는 무지개 그라데이션 배경 화면 하나로 완성한 것이다.

reduce 를 켜도 픽셀 재계산까지는 꺼지지 않는다 — 어디서 깨지는가

prefers-reduced-motion: reduce가 참이면 playing이 꺼지고 is-demo 클래스가 빠져 화면은 정지 프레임처럼 보이지만, 01·02·04·05·06·07·09 일곱 개는 tick의 requestAnimationFrame 호출이 그대로 남아 매 프레임 renderField가 160×100(16,000픽셀) 전체를 다시 계산한다 — 그림은 고정됐는데 계산량은 그대로인 셈이다. 08만 다르다 — reduce 진입 시 stepSim을 70번 미리 돌려 트레일을 채운 뒤 playing을 꺼서 이후 프레임은 present()로 그 정지 화면만 다시 그린다. 03은 포인터가 닿지 않으면 p가 화면 밖 좌표({x:-999, y:-999})로 고정돼 파동 진폭이 사실상 0으로 죽고, hue = bx*1.6 + by*1.6 만 남아 대각선으로 흐르는 밋밋한 무지개 그라데이션 한 장이 보인다. 지금 오프스크린 캔버스가 16,000픽셀이라 이 정도는 가볍지만, CALC_W·CALC_H를 실제 화면 해상도(예: 1920×1080, 200만 픽셀 이상)로 그대로 올리면 픽셀 수가 130배 가까이 뛰어 저사양 기기에서는 한 프레임 계산이 16ms를 넘어 끊길 수 있다. 소스에서 이 값을 직접 바꿔보고 싶다면 29beunjp으로 zip을 열면 아홉 개의 index.html·style.scss 원본이 그대로 들어 있다.

값 세 가지만 바꿔보는 변형

계산식은 그대로 두고 상수 하나만 건드려도 화면에 보이는 무지개 그라데이션의 결이 달라진다.

이름 값 느낌
노이즈 스케일 값 조정 02 PLASMA_NOISE_SCALE 40 → 160 값을 줄이면 노이즈가 촘촘해져 알갱이가 작은 색 얼룩이 되고, 값을 늘리면 노이즈가 성겨져 구름처럼 크고 느린 색 덩어리가 된다.
메타볼 반지름 값 조정 05 PLASMA_BLOB_RADIUS_PX 60 → 200 값을 줄이면 두 덩어리가 아주 가까워져야만 색이 섞이고, 값을 늘리면 멀리 떨어져 있어도 색이 일찍 번져 섞인다.
입자 개수 값 조정 08 PLASMA_PARTICLE_COUNT 80 → 400 값을 줄이면 입자가 듬성듬성해 흐름 선이 성기게 보이고, 값을 늘리면 입자가 빽빽해져 화면 전체가 색으로 가득 찬 흐름처럼 보인다.

정지 프레임·글자 대비·포인터 없는 입력 — 접근성

prefers-reduced-motion이 걸리면 아홉 항목 모두 시간에 따라 값이 바뀌는 애니메이션을 한 프레임에 고정한다. 09 히어로 장면의 캡션 글자는 움직이는 배경 위에 직접 얹지 않고 rgba(255, 247, 230, .85)로 거의 불투명한 알약 배지 위에 올려 배경 hue가 어떻게 바뀌든 글자 대비가 흔들리지 않는다. 07은 <input type="range">에 aria-label이 달려 있어 키보드 화살표만으로 구간 수를 3~24 사이에서 조절할 수 있지만, 03의 포인터 리플과 05의 메타볼 드래그는 지금 pointermove·pointerdown 좌표에만 반응해 키보드로는 파동을 일으키거나 덩어리를 옮길 방법이 없다 — 포인터가 없는 환경에서는 03이 정지된 대각선 그라데이션으로, 05가 처음 배치된 덩어리 위치로 그대로 남는 한계를 남겨둔다.

무지개 그라데이션 배경 화면과 일반 그라데이션은 뭐가 다른가?

CSS linear-gradient로 만든 일반 그라데이션은 지정한 색 정지점 사이를 브라우저가 한 번 보간해 고정된 색 띠를 그린다. 여기 아홉 개는 매 프레임 createImageData 버퍼의 픽셀 하나하나에 사인파·노이즈·거리·메타볼 값을 넣어 hue를 다시 계산하므로, 색이 흐르고 섞이고 어긋나는 움직임 자체가 계산의 결과다. 같은 픽셀 버퍼 계산을 정적인 장면 효과로 확장한 결과는 캔버스 특수효과 9종에서, 입자 좌표를 계산하는 쪽은 캔버스 파티클 엔진 9종에서, 색이 아니라 표면 질감을 계산하는 결과는 CSS 홀로그래픽 포일 효과 9종에서 각각 확인할 수 있다.

픽셀 계산으로 무지개색을 만들 때 자주 나오는 질문

무지개 그라데이션 글씨는 이 캔버스 계산으로 만들 수 있나요?

아홉 개는 배경 픽셀을 채우는 계산이라 글자 모양 자체를 그리지는 않는다. 그런 문구가 필요하면 이 캔버스를 배경으로 두고 그 위에 CSS background-clip: text로 글자를 얹는 쪽이 픽셀 하나하나를 다시 계산하는 것보다 훨씬 가볍다.

160×100 계산을 실제 화면 해상도로 그대로 키워도 느려지지 않나요?

지금은 오프스크린 캔버스가 160×100(16,000픽셀)이라 아홉 함수가 매 프레임 돌아도 가볍고, 화면에 보이는 크기는 ctx.drawImage가 확대해 그릴 뿐 픽셀마다 다시 계산하지 않는다. CALC_W·CALC_H를 실제 화면 해상도로 올리면 픽셀 수가 수십~수백 배로 뛰어 저사양 기기에서는 먼저 이 값을 낮춰 확인하는 편이 안전하다.

02·08처럼 노이즈를 쓰는 항목은 새로고침마다 모양이 달라지나요?

아니다. seedRand(417021)·seedRand(417082)처럼 고정된 숫자를 시드로 넣어 노이즈 격자 값 자체는 새로고침해도 항상 같고, 시간에 따라 달라지는 건 그 격자를 읽는 좌표(오프셋)뿐이라 흐르는 방향과 속도만 움직인다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.