Lab
Lab — Kép → idő → interakció Ugyanaz a vizuális forma három különböző működésben: statikus eredmény, idővezérelt mozgás és élő inputra reagáló rendszer.
Ez a példa az első Multimédia design 1. alkalom egyik alapállítását teszi kipróbálhatóvá: nem ugyanaz egy előre elkészített kép, egy időben futó mozgás és egy olyan rendszer, amelynek eredménye futás közben a bemenettől függ.
const timeDot = document .querySelector ( '.time-dot' ) ;
const interactiveStage = document .querySelector ( '.interactive-stage' ) ;
const pointerDot = document .querySelector ( '.pointer-dot' ) ;
const pointerValue = document .querySelector ( '.pointer-value' ) ;
const mappingState = document .querySelector ( '.mapping-state' ) ;
let inverted = false ;
let showGuides = false ;
let pointerX = 0.5 ;
function animate ( now ) {
const y = Math .sin ( now * 0.0016 ) * 82 ;
timeDot .style .transform = `translateY( ${ y } px)` ;
requestAnimationFrame ( animate ) ;
}
function updatePointer ( ) {
const mapped = inverted ? 1 - pointerX : pointerX ;
const size = 42 + mapped * 136 ;
pointerDot .style .width = ` ${ size } px` ;
pointerDot .style .height = ` ${ size } px` ;
pointerValue .value = `x = ${ pointerX .toFixed ( 2 ) } → size = ${ Math .round ( size ) } ` ;
mappingState .textContent = inverted
? 'Mapping: bal → nagy · jobb → kicsi'
: 'Mapping: bal → kicsi · jobb → nagy' ;
}
interactiveStage .addEventListener ( 'pointermove' , ( event ) => {
const rect = interactiveStage .getBoundingClientRect ( ) ;
pointerX = Math .min ( 1 , Math .max ( 0 , ( event .clientX - rect .left ) / rect .width ) ) ;
updatePointer ( ) ;
} ) ;
window .addEventListener ( 'keydown' , ( event ) => {
if ( event .key .toLowerCase ( ) === 'm' ) {
inverted = !inverted ;
updatePointer ( ) ;
}
if ( event .key .toLowerCase ( ) === 'h' ) {
showGuides = !showGuides ;
interactiveStage .classList .toggle ( 'show-guides' , showGuides ) ;
}
} ) ;
requestAnimationFrame ( animate ) ;
updatePointer ( ) ;
Kép: nincs élő input, ezért a forma nem változik.Mozgókép / idő: az idő folyamatosan új értéket ad a rendszernek.Interakció: az egér vízszintes helyzete válik inputtá, majd egy szabály a kör méretére képezi le.
A jobb oldali panelen mozgasd az egeret. Az M billentyű megfordítja a mappinget, a H megmutatja a segédvonalakat.
KÉP nincs élő input → rögzített paraméterek → állandó kép IDŐVEZÉRELT MOZGÁS idő → hullám / szabály → változó pozíció INTERAKCIÓ egér x → normalize + map → kör mérete
A jobb oldali panelen ne a méretet, hanem a kör x pozícióját vezesd.
A középső panelen változtasd meg a mozgás sebességét.
Találj ki egy második output paramétert, amely ugyanarra az inputra reagál.
A cél nem az, hogy minél több effekt kerüljön a példába, hanem hogy egyértelmű legyen, melyik input melyik szabályon keresztül mit változtat meg.