Lab — Normalize & Map · Creative Technology Knowledge

Futtasd, módosítsd és törd el a példát. A megjelenített kód maga fut a preview-ban.

Ebben a laborban nem a portál React-komponensének forrását látod. A szerkesztőben lévő HTML/CSS/JavaScript ugyanannak a verziózott demónak a forrása, amelyet a Learn oldalon és a CanvasRelayben is használunk.

const input = document.querySelector('#input');
const dot = document.querySelector('.dot');
const rawValue = document.querySelector('#raw');
const normalizedValue = document.querySelector('#normalized');
const sizeValue = document.querySelector('#size');

function update() {
  const raw = Number(input.value);
  const normalized = raw / 1023;
  const size = 32 + normalized * 180;

  dot.style.width = `${size}px`;
  dot.style.height = `${size}px`;

  rawValue.value = String(raw);
  normalizedValue.value = normalized.toFixed(3);
  sizeValue.value = `${Math.round(size)} px`;
}

input.addEventListener('input', update);
update();

Open Sandbox

Challenge

Ne a méretet, hanem a kör vízszintes pozícióját vezéreld.
Fordítsd meg a mappinget: nagy input → kis kör.
Adj hozzá egy második output paramétert, például opacity-t.

Mit kell megérteni?

Nem a pontos szintaxis a lényeg, hanem a rendszer:

slider value → normalize → map → visual parameter

Lab — Normalize & Map

Challenge

Mit kell megérteni?

On this page