Szabó Konrád Tamás - Escher kutyus

Inspitráció: Escher csempéi A sík különböző síkidomokkal való kitöltése már azókortól kezdődően foglalkoztatta a geometriával foglalkozótudósokat. Ezen a területen a mai napig születnek új eredmények, legújabb áttörés 1973-ban történt Roger Penrose nem periodikus csempéivel. Ezen természettudományos tudás gyakorlatba történő átültetését a holland M. C. Escher dolgozta ki. Az ő módszere szerint ha a van egy szabályos elemekkel történő térkitöltésünk, akkor a megfelelő transzformációkkal úgy tudjuk ezeket deformálni, hogy azok továbbra is csempeszerűen kitöltsék a teret. Ennek a játéknak nagyon izgalmas matematikai háttere van, mely a gyakorlatban azt jelenti, hogy rengeteg féle különböző metódus mentén lehet Escher csempéket létrehozni. Jelen pályázatra beadott kutyust formáló csempeháló négyes fürtökben ismétlődik, viszont a fürtön belül egyes elemek azonosak. :root{ --maxw: clamp(400px, 95vw, 1800px); --peek: clamp(32px, 8vw, 120px); --sep: clamp(6px, 1.4vw, 16px); --btn: clamp(42px, 4.5vw, 64px); --ui-bg: rgba(255,255,255,.96); --ui-fg: #111; --ui-bd: #b9c2c9; --shadow: 0 2px 12px rgba(0,0,0,.15); --shadow-hover: 0 8px 24px rgba(0,0,0,.18); } /* SLIDER */ .slider{ position: relative; max-width: var(--maxw); margin: 26px auto; padding: 0 20px; user-select: none; } .viewport{ position: relative; overflow: hidden; padding: 0 var(--peek); border-radius: 12px; background: #fff; box-shadow: var(--shadow); } .track{ display: flex; gap: var(--sep); will-change: transform; transition: transform .5s ease; } .slide{ position: relative; min-width: calc(100% - (var(--peek) * 2) - var(--sep)); height: 500px; /* desktop magasság */ border-radius: 10px; overflow: hidden; filter: grayscale(.9) brightness(.85); transition: filter .25s ease, transform .2s ease, box-shadow .2s ease; box-shadow: var(--shadow); } .slide.is-active{ filter: none; } .slide:hover{ transform: translateY(-2px) scale(1.015); box-shadow: var(--shadow-hover); } .slide img{ width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .counter{ position: absolute; left: calc(20px + 10px); bottom: 12px; padding: 4px 8px; font: 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color: #111; background: var(--ui-bg); border: 1px solid var(--ui-bd); border-radius: 8px; box-shadow: var(--shadow); z-index: 3; pointer-events: none; } .nav{ position: absolute; top: 50%; transform: translateY(-50%); width: var(--btn); height: var(--btn); display: grid; place-items: center; border: 1px solid var(--ui-bd); border-radius: 10px; background: var(--ui-bg); color: var(--ui-fg); cursor: pointer; box-shadow: var(--shadow); transition: transform .12s ease, background .2s ease; z-index: 4; } .nav:hover{ transform: translateY(-50%) scale(1.03); } .nav:active{ transform: translateY(-50%) scale(0.98); } .nav:focus-visible{ outline: 2px solid #005a8d; outline-offset: 2px; } .nav svg{ width: 22px; height: 22px; } .nav.prev{ left: calc(20px + 8px); } .nav.next{ right: calc(20px + 8px); } .viewport.dragging .track{ transition: none; cursor: grabbing; } @media (max-width: 520px){ :root{ --peek: clamp(16px, 8vw, 42px); --sep: clamp(6px, 1.8vw, 10px); } .slide{ height: 360px; } /* mobil magasság */ } @media (prefers-reduced-motion: reduce){ .track{ transition: none !important; } .slide{ transition: none !important; } } /* LIGHTBOX (kép nagyítás) */ .lightbox { position: fixed; inset: 0; display: none; place-items: center; background: rgba(0,0,0,.85); z-index: 9999; } .lightbox.open { display: grid; } .lightbox__img { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.4); user-select: none; } .lightbox__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); background: rgba(30,30,30,.35); border-radius: 12px; color: #fff; cursor: pointer; } .lightbox__btn svg { width: 26px; height: 26px; } .lightbox__prev { left: 24px; } .lightbox__next { right: 24px; } .lightbox__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); background: rgba(30,30,30,.35); border-radius: 12px; color: #fff; cursor: pointer; } @media (max-width: 520px){ .lightbox__btn{ width: 46px; height: 46px; } .lightbox__btn svg{ width: 22px; height: 22px; } } 1 / 5 /* ===== SLIDER JS ===== */ (function(){ const viewport = document.getElementById('viewport'); const track = document.getElementById('track'); const btnPrev = document.getElementById('btnPrev'); const btnNext = document.getElementById('btnNext'); const counter = document.getElementById('counter'); const reals = Array.from(track.querySelectorAll('.slide[data-real]')); const N = reals.length; const prefix = reals.map(s => s.cloneNode(true)); const suffix = reals.map(s => s.cloneNode(true)); prefix.reverse().forEach(s => track.insertBefore(s, track.firstChild)); suffix.forEach(s => track.appendChild(s)); let slides = Array.from(track.children); let index = N; // első valódi dia let dragging = false; let startX = 0, currentX = 0; const padLeft = () => parseFloat(getComputedStyle(viewport).paddingLeft) || 0; const slideW = () => slides[N].getBoundingClientRect().width; const gap = () => parseFloat(getComputedStyle(track).gap) || 0; const stepSize = () => slideW() + gap(); const baseOffset = () => padLeft() + gap()/2; function applyTransform(noAnim=false){ if(noAnim) track.style.transition = 'none'; const offset = baseOffset() - index * stepSize(); track.style.transform = `translateX(${offset}px)`; if(noAnim) requestAnimationFrame(()=> track.style.transition = ''); } function updateActive(){ slides.forEach(el => el.classList.remove('is-active')); slides[index]?.classList.add('is-active'); const realIdx = ((index - N) % N + N) % N; counter.textContent = `${realIdx + 1} / ${N}`; } function setIndex(i, noAnim=false){ index = i; applyTransform(noAnim); updateActive(); } function next(){ if(index === 2*N - 1){ setIndex(N - 1, true); requestAnimationFrame(()=> setIndex(N, false)); } else setIndex(index + 1); } function prev(){ if(index === N){ setIndex(2*N, true); requestAnimationFrame(()=> setIndex(2*N - 1, false)); } else setIndex(index - 1); } track.addEventListener('transitionend', ()=>{ if(index >= N*2) setIndex(index - N, true); else if(index { if(e.key === 'ArrowRight') next(); if(e.key === 'ArrowLeft') prev(); }); function onStart(x){ dragging = true; startX = currentX = x; viewport.classList.add('dragging'); } function onMove(x){ if(!dragging) return; currentX = x; const dx = currentX - startX; const base = baseOffset() - index * stepSize(); track.style.transform = `translateX(${base + dx}px)`; } function onEnd(){ if(!dragging) return; dragging = false; viewport.classList.remove('dragging'); const dx = currentX - startX; const threshold = viewport.clientWidth * 0.15; if(dx > threshold) prev(); else if(dx onStart(e.clientX)); window.addEventListener('pointermove', e => onMove(e.clientX)); window.addEventListener('pointerup', onEnd); viewport.addEventListener('touchstart', e => onStart(e.touches[0].clientX), {passive:true}); viewport.addEventListener('touchmove', e => onMove(e.touches[0].clientX), {passive:true}); viewport.addEventListener('touchend', onEnd); window.addEventListener('resize', ()=> applyTransform(true)); setIndex(N, true); })(); /* ===== LIGHTBOX JS ===== */ (function(){ const galleries = Array.from(document.querySelectorAll('.slider')); if(!galleries.length) return; const lb = document.getElementById('lightbox'); const lbImg = document.getElementById('lightboxImg'); const btnPrev = document.getElementById('lbPrev'); const btnNext = document.getElementById('lbNext'); const btnClose = document.getElementById('lbClose'); let currentList = []; let idx = 0; function openLightbox(list, startIndex){ currentList = list; idx = startIndex; updateImg(); lb.classList.add('open'); lb.setAttribute('aria-hidden', 'false'); } function closeLightbox(){ lb.classList.remove('open'); lb.setAttribute('aria-hidden', 'true'); } function updateImg(){ const el = currentList[idx]; const src = el.dataset.full || el.src; lbImg.src = src; lbImg.alt = el.alt || ''; } function prev(){ idx = (idx - 1 + currentList.length) % currentList.length; updateImg(); } function next(){ idx = (idx + 1) % currentList.length; updateImg(); } galleries.forEach(slider=>{ const images = Array.from(slider.querySelectorAll('.slide img')); images.forEach((img, i)=>{ img.style.cursor = 'zoom-in'; img.addEventListener('click', ()=> openLightbox(images, i), {passive:true}); }); }); btnPrev.addEventListener('click', prev); btnNext.addEventListener('click', next); btnClose.addEventListener('click', closeLightbox); lb.addEventListener('click', (e)=> { if(e.target === lb) closeLightbox(); }); document.addEventListener('keydown', (e)=>{ if(!lb.classList.contains('open')) return; if(e.key === 'Escape') closeLightbox(); if(e.key === 'ArrowLeft') prev(); if(e.key === 'ArrowRight') next(); }); let startX = 0, moving = false; lb.addEventListener('touchstart', e=>{ moving=true; startX = e.touches[0].clientX; }, {passive:true}); lb.addEventListener('touchmove', e=>{ if(!moving) return; const dx = e.touches[0].clientX - startX; if(Math.abs(dx) > 50){ moving = false; dx > 0 ? prev() : next(); } }, {passive:true}); lb.addEventListener('touchend', ()=> moving=false); })();