https://specialprocedures.github.io/Recent content in Patara on Welcome to PataraHugoen-usSun, 28 Sep 2014 00:00:00 +0000https://specialprocedures.github.io/docs/patara/qalaki/Sun, 28 Sep 2014 00:00:00 +0000https://specialprocedures.github.io/docs/patara/qalaki/<div class="gallery-wrapper-gallery-images-patara-qalaki"> <div class="gallery gallery-gallery-images-patara-qalaki"><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1762%20%28Edited%29.webp" alt="Gallery image 0" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1762.webp" alt="Gallery image 1" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1769%20%28Edited%29.webp" alt="Gallery image 2" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1769.webp" alt="Gallery image 3" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1775.webp" alt="Gallery image 4" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1784.webp" alt="Gallery image 5" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1797%20%28Edited%29.webp" alt="Gallery image 6" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1797.webp" alt="Gallery image 7" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1816%20%28Edited%29.webp" alt="Gallery image 8" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1816.webp" alt="Gallery image 9" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1827.webp" alt="Gallery image 10" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1833%20%28Edited%29.webp" alt="Gallery image 11" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1833.webp" alt="Gallery image 12" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1845.webp" alt="Gallery image 13" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1848%20%28Edited%29.webp" alt="Gallery image 14" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/qalaki/IMG_1848.webp" alt="Gallery image 15" loading="lazy" data-gallery-id="gallery-images-patara-qalaki"> </div></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const gallery = document.querySelector('.gallery-gallery-images-patara-qalaki'); const images = gallery.querySelectorAll('img[data-gallery-id="gallery-images-patara-qalaki"]'); let loadedCount = 0; let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.gallery-item'); let glitchInterval = null; let glitchTimeout = null; let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); glitchTimeout = setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); if (img.complete) { checkAndLayout(); } else { img.addEventListener('load', checkAndLayout); } }); function checkAndLayout() { loadedCount++; if (loadedCount === images.length) { layoutGallery(); } } function layoutGallery() { const items = Array.from(gallery.querySelectorAll('.gallery-item')); const processedIndices = new Set(); items.forEach((item, index) => { if (processedIndices.has(index)) return; const img = item.querySelector('img'); const aspectRatio = img.naturalWidth / img.naturalHeight; const isPortrait = aspectRatio < 1; if (isPortrait) { item.classList.add('portrait'); if (index + 1 < items.length && !processedIndices.has(index + 1)) { const nextItem = items[index + 1]; const nextImg = nextItem.querySelector('img'); const nextAspectRatio = nextImg.naturalWidth / nextImg.naturalHeight; const nextIsPortrait = nextAspectRatio < 1; if (nextIsPortrait) { item.classList.add('portrait-paired'); nextItem.classList.add('portrait'); nextItem.classList.add('portrait-paired'); processedIndices.add(index + 1); } else { item.classList.add('portrait-lead'); if (index + 2 < items.length) { nextItem.classList.add('horizontal-paired'); items[index + 2].classList.add('horizontal-paired'); processedIndices.add(index + 1); processedIndices.add(index + 2); } } } } else { item.classList.add('horizontal'); } }); } }); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .gallery-gallery-images-patara-qalaki { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 100%; margin: 0; padding: 0; } .gallery-gallery-images-patara-qalaki .gallery-item { width: 100%; display: flex; cursor: zoom-in; overflow: hidden; } .gallery-gallery-images-patara-qalaki .gallery-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease; } .gallery-gallery-images-patara-qalaki .gallery-item.horizontal { grid-column: 1 / -1; } .gallery-gallery-images-patara-qalaki .gallery-item.portrait-paired { grid-column: auto; } .gallery-gallery-images-patara-qalaki .gallery-item.portrait-lead { grid-column: 1; grid-row: span 2; } .gallery-gallery-images-patara-qalaki .gallery-item.portrait-lead img { height: 100%; width: 100%; object-fit: cover; } .gallery-gallery-images-patara-qalaki .gallery-item.horizontal-paired { grid-column: 2; grid-row: span 1; } .gallery-gallery-images-patara-qalaki .gallery-item.portrait:not(.portrait-lead):not(.horizontal-paired):not(.portrait-paired) { grid-column: auto; } @media (max-width: 768px) { .gallery-gallery-images-patara-qalaki { grid-template-columns: 1fr; } .gallery-gallery-images-patara-qalaki .gallery-item { grid-column: 1 !important; grid-row: span 1 !important; } .gallery-gallery-images-patara-qalaki .gallery-item.portrait-lead img { height: auto; object-fit: contain; } } </style>https://specialprocedures.github.io/docs/patara/ubnebi/Sun, 28 Sep 2014 00:00:00 +0000https://specialprocedures.github.io/docs/patara/ubnebi/<div class="gallery-wrapper-gallery-images-patara-ubnebi"> <div class="gallery gallery-gallery-images-patara-ubnebi"><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/ubnebi/IMG_1689%20%28Edited%29.webp" alt="Gallery image 0" loading="lazy" data-gallery-id="gallery-images-patara-ubnebi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/ubnebi/IMG_1689.webp" alt="Gallery image 1" loading="lazy" data-gallery-id="gallery-images-patara-ubnebi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/ubnebi/IMG_1694.webp" alt="Gallery image 2" loading="lazy" data-gallery-id="gallery-images-patara-ubnebi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/ubnebi/IMG_1697.webp" alt="Gallery image 3" loading="lazy" data-gallery-id="gallery-images-patara-ubnebi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/ubnebi/IMG_1706.webp" alt="Gallery image 4" loading="lazy" data-gallery-id="gallery-images-patara-ubnebi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/ubnebi/IMG_1717_01%20%28Edited%29.webp" alt="Gallery image 5" loading="lazy" data-gallery-id="gallery-images-patara-ubnebi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/ubnebi/IMG_1717_01.webp" alt="Gallery image 6" loading="lazy" data-gallery-id="gallery-images-patara-ubnebi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/ubnebi/IMG_1736.webp" alt="Gallery image 7" loading="lazy" data-gallery-id="gallery-images-patara-ubnebi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/ubnebi/IMG_1741%20%28Edited%29.webp" alt="Gallery image 8" loading="lazy" data-gallery-id="gallery-images-patara-ubnebi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/ubnebi/IMG_1741.webp" alt="Gallery image 9" loading="lazy" data-gallery-id="gallery-images-patara-ubnebi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/ubnebi/IMG_17412.webp" alt="Gallery image 10" loading="lazy" data-gallery-id="gallery-images-patara-ubnebi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/ubnebi/IMG_1744.webp" alt="Gallery image 11" loading="lazy" data-gallery-id="gallery-images-patara-ubnebi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/ubnebi/IMG_1753%20%28Edited%29.webp" alt="Gallery image 12" loading="lazy" data-gallery-id="gallery-images-patara-ubnebi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/ubnebi/IMG_1753.webp" alt="Gallery image 13" loading="lazy" data-gallery-id="gallery-images-patara-ubnebi"> </div></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const gallery = document.querySelector('.gallery-gallery-images-patara-ubnebi'); const images = gallery.querySelectorAll('img[data-gallery-id="gallery-images-patara-ubnebi"]'); let loadedCount = 0; let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.gallery-item'); let glitchInterval = null; let glitchTimeout = null; let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); glitchTimeout = setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); if (img.complete) { checkAndLayout(); } else { img.addEventListener('load', checkAndLayout); } }); function checkAndLayout() { loadedCount++; if (loadedCount === images.length) { layoutGallery(); } } function layoutGallery() { const items = Array.from(gallery.querySelectorAll('.gallery-item')); const processedIndices = new Set(); items.forEach((item, index) => { if (processedIndices.has(index)) return; const img = item.querySelector('img'); const aspectRatio = img.naturalWidth / img.naturalHeight; const isPortrait = aspectRatio < 1; if (isPortrait) { item.classList.add('portrait'); if (index + 1 < items.length && !processedIndices.has(index + 1)) { const nextItem = items[index + 1]; const nextImg = nextItem.querySelector('img'); const nextAspectRatio = nextImg.naturalWidth / nextImg.naturalHeight; const nextIsPortrait = nextAspectRatio < 1; if (nextIsPortrait) { item.classList.add('portrait-paired'); nextItem.classList.add('portrait'); nextItem.classList.add('portrait-paired'); processedIndices.add(index + 1); } else { item.classList.add('portrait-lead'); if (index + 2 < items.length) { nextItem.classList.add('horizontal-paired'); items[index + 2].classList.add('horizontal-paired'); processedIndices.add(index + 1); processedIndices.add(index + 2); } } } } else { item.classList.add('horizontal'); } }); } }); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .gallery-gallery-images-patara-ubnebi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 100%; margin: 0; padding: 0; } .gallery-gallery-images-patara-ubnebi .gallery-item { width: 100%; display: flex; cursor: zoom-in; overflow: hidden; } .gallery-gallery-images-patara-ubnebi .gallery-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease; } .gallery-gallery-images-patara-ubnebi .gallery-item.horizontal { grid-column: 1 / -1; } .gallery-gallery-images-patara-ubnebi .gallery-item.portrait-paired { grid-column: auto; } .gallery-gallery-images-patara-ubnebi .gallery-item.portrait-lead { grid-column: 1; grid-row: span 2; } .gallery-gallery-images-patara-ubnebi .gallery-item.portrait-lead img { height: 100%; width: 100%; object-fit: cover; } .gallery-gallery-images-patara-ubnebi .gallery-item.horizontal-paired { grid-column: 2; grid-row: span 1; } .gallery-gallery-images-patara-ubnebi .gallery-item.portrait:not(.portrait-lead):not(.horizontal-paired):not(.portrait-paired) { grid-column: auto; } @media (max-width: 768px) { .gallery-gallery-images-patara-ubnebi { grid-template-columns: 1fr; } .gallery-gallery-images-patara-ubnebi .gallery-item { grid-column: 1 !important; grid-row: span 1 !important; } .gallery-gallery-images-patara-ubnebi .gallery-item.portrait-lead img { height: auto; object-fit: contain; } } </style>https://specialprocedures.github.io/docs/ai/trip/Mon, 01 Jan 0001 00:00:00 +0000https://specialprocedures.github.io/docs/ai/trip/<!-- <div style="width: 50vw; margin: 0 auto;"> --> <h1 id="stable-diffusion-15">Stable Diffusion 1.5<a class="anchor" href="#stable-diffusion-15">#</a></h1> <p>I grabbed a bunch of quotes from science fiction authors, and dumped them as prompts into Stable Diffusion 1.5.</p> <h2 id="william-gibson">William Gibson<a class="anchor" href="#william-gibson">#</a></h2> <blockquote class='book-hint '> <p><em>Cyberspace. A consensual hallucination experienced daily by billions of legitimate operators, in every nation, by children being taught mathematical concepts&hellip; A graphic representation of data abstracted from banks of every computer in the human system. Unthinkable complexity. Lines of light ranged in the nonspace of the mind, clusters and constellations of data. Like city lights, receding&hellip;</em></p>https://specialprocedures.github.io/docs/about/Mon, 01 Jan 0001 00:00:00 +0000https://specialprocedures.github.io/docs/about/<div class="text-container"> <p>Blue Night City infrastructure Chinese spacial ganja. Fiberglass blue mimetic jockey dub electronic aiming trodes feral fiberglass pyrolitic cutting-edge reflecting hardcore pyrolitic. Bosozoku scan hypnagogic neon fieldstrip silver neon.</p> <p>Socket Chiba Helsinki scan samurai black quartz-halogen trace SAS cutting-edge arcology cyberspace Ninsei. Unfolding virus microchannel factory clientele mimetic socket biological flat-out isotropic multinational virus synthetic zaibatsu. Trace socket virus trodes zaibatsu bedslab Ninsei hoverport arcology pay phone Tokyo chrome.</p> <p>Flatline silver feral Harajuku Harajuku feral SAS jack in samurai. Intrusion laser-scrawled Chatsubo aiming crack Shinjuku fiberglass vatgrown.</p>https://specialprocedures.github.io/docs/patara/qatsi/Sun, 28 Sep 2014 00:00:00 +0000https://specialprocedures.github.io/docs/patara/qatsi/<div class="gallery-wrapper-gallery-images-patara-katsi"> <div class="gallery gallery-gallery-images-patara-katsi"><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/katsi/IMG_1856%20%28Edited%29.webp" alt="Gallery image 0" loading="lazy" data-gallery-id="gallery-images-patara-katsi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/katsi/IMG_1856.webp" alt="Gallery image 1" loading="lazy" data-gallery-id="gallery-images-patara-katsi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/katsi/IMG_1858%20%28Edited%29.webp" alt="Gallery image 2" loading="lazy" data-gallery-id="gallery-images-patara-katsi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/katsi/IMG_1858.webp" alt="Gallery image 3" loading="lazy" data-gallery-id="gallery-images-patara-katsi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/katsi/IMG_1860%20%28Edited%29.webp" alt="Gallery image 4" loading="lazy" data-gallery-id="gallery-images-patara-katsi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/katsi/IMG_1860.webp" alt="Gallery image 5" loading="lazy" data-gallery-id="gallery-images-patara-katsi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/katsi/IMG_1865%20%28Edited%29.webp" alt="Gallery image 6" loading="lazy" data-gallery-id="gallery-images-patara-katsi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/katsi/IMG_1865.webp" alt="Gallery image 7" loading="lazy" data-gallery-id="gallery-images-patara-katsi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/katsi/IMG_1870%20%28Edited%29.webp" alt="Gallery image 8" loading="lazy" data-gallery-id="gallery-images-patara-katsi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/katsi/IMG_1870.webp" alt="Gallery image 9" loading="lazy" data-gallery-id="gallery-images-patara-katsi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/katsi/IMG_1873%20%28Edited%29.webp" alt="Gallery image 10" loading="lazy" data-gallery-id="gallery-images-patara-katsi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/katsi/IMG_1873.webp" alt="Gallery image 11" loading="lazy" data-gallery-id="gallery-images-patara-katsi"> </div><div class="gallery-item"> <img src="https://specialprocedures.github.io/images/patara/katsi/IMG_1878.webp" alt="Gallery image 12" loading="lazy" data-gallery-id="gallery-images-patara-katsi"> </div></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const gallery = document.querySelector('.gallery-gallery-images-patara-katsi'); const images = gallery.querySelectorAll('img[data-gallery-id="gallery-images-patara-katsi"]'); let loadedCount = 0; let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.gallery-item'); let glitchInterval = null; let glitchTimeout = null; let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); glitchTimeout = setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); if (img.complete) { checkAndLayout(); } else { img.addEventListener('load', checkAndLayout); } }); function checkAndLayout() { loadedCount++; if (loadedCount === images.length) { layoutGallery(); } } function layoutGallery() { const items = Array.from(gallery.querySelectorAll('.gallery-item')); const processedIndices = new Set(); items.forEach((item, index) => { if (processedIndices.has(index)) return; const img = item.querySelector('img'); const aspectRatio = img.naturalWidth / img.naturalHeight; const isPortrait = aspectRatio < 1; if (isPortrait) { item.classList.add('portrait'); if (index + 1 < items.length && !processedIndices.has(index + 1)) { const nextItem = items[index + 1]; const nextImg = nextItem.querySelector('img'); const nextAspectRatio = nextImg.naturalWidth / nextImg.naturalHeight; const nextIsPortrait = nextAspectRatio < 1; if (nextIsPortrait) { item.classList.add('portrait-paired'); nextItem.classList.add('portrait'); nextItem.classList.add('portrait-paired'); processedIndices.add(index + 1); } else { item.classList.add('portrait-lead'); if (index + 2 < items.length) { nextItem.classList.add('horizontal-paired'); items[index + 2].classList.add('horizontal-paired'); processedIndices.add(index + 1); processedIndices.add(index + 2); } } } } else { item.classList.add('horizontal'); } }); } }); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .gallery-gallery-images-patara-katsi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 100%; margin: 0; padding: 0; } .gallery-gallery-images-patara-katsi .gallery-item { width: 100%; display: flex; cursor: zoom-in; overflow: hidden; } .gallery-gallery-images-patara-katsi .gallery-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease; } .gallery-gallery-images-patara-katsi .gallery-item.horizontal { grid-column: 1 / -1; } .gallery-gallery-images-patara-katsi .gallery-item.portrait-paired { grid-column: auto; } .gallery-gallery-images-patara-katsi .gallery-item.portrait-lead { grid-column: 1; grid-row: span 2; } .gallery-gallery-images-patara-katsi .gallery-item.portrait-lead img { height: 100%; width: 100%; object-fit: cover; } .gallery-gallery-images-patara-katsi .gallery-item.horizontal-paired { grid-column: 2; grid-row: span 1; } .gallery-gallery-images-patara-katsi .gallery-item.portrait:not(.portrait-lead):not(.horizontal-paired):not(.portrait-paired) { grid-column: auto; } @media (max-width: 768px) { .gallery-gallery-images-patara-katsi { grid-template-columns: 1fr; } .gallery-gallery-images-patara-katsi .gallery-item { grid-column: 1 !important; grid-row: span 1 !important; } .gallery-gallery-images-patara-katsi .gallery-item.portrait-lead img { height: auto; object-fit: contain; } } </style>https://specialprocedures.github.io/docs/ai/ai/Sun, 28 Sep 2014 00:00:00 +0000https://specialprocedures.github.io/docs/ai/ai/<h1 id="stable-diffusion-xl">Stable Diffusion XL<a class="anchor" href="#stable-diffusion-xl">#</a></h1> <h2 id="skulls">Skulls<a class="anchor" href="#skulls">#</a></h2> <div class="square-grid-grid-images-patara-ai-skull" data-aspect="square"><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/skull/skull-anime-0.webp" alt="Image 0" loading="lazy" data-grid-id="grid-images-patara-ai-skull"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/skull/skull-anime-1.webp" alt="Image 1" loading="lazy" data-grid-id="grid-images-patara-ai-skull"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/skull/skull-anime-2.webp" alt="Image 2" loading="lazy" data-grid-id="grid-images-patara-ai-skull"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/skull/skull-cartoon-0.webp" alt="Image 3" loading="lazy" data-grid-id="grid-images-patara-ai-skull"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/skull/skull-cartoon-1.webp" alt="Image 4" loading="lazy" data-grid-id="grid-images-patara-ai-skull"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/skull/skull-cartoon-2.webp" alt="Image 5" loading="lazy" data-grid-id="grid-images-patara-ai-skull"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/skull/skull-street_art-0.webp" alt="Image 6" loading="lazy" data-grid-id="grid-images-patara-ai-skull"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/skull/skull-street_art-1.webp" alt="Image 7" loading="lazy" data-grid-id="grid-images-patara-ai-skull"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/skull/skull-street_art-2.webp" alt="Image 8" loading="lazy" data-grid-id="grid-images-patara-ai-skull"> </div></div> <script> (function() { const grid = document.querySelector('.square-grid-grid-images-patara-ai-skull'); const images = grid.querySelectorAll('img[data-grid-id="grid-images-patara-ai-skull"]'); let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.grid-item'); let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; const glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); }); })(); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .square-grid-grid-images-patara-ai-skull { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 2rem; } .square-grid-grid-images-patara-ai-skull[data-aspect="square"] .grid-item { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; background: #f0f0f0; cursor: zoom-in; } .square-grid-grid-images-patara-ai-skull[data-aspect="square"] .grid-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.05s ease, transform 0.05s ease; } .square-grid-grid-images-patara-ai-skull[data-aspect="original"] .grid-item { width: 100%; overflow: hidden; cursor: zoom-in; } .square-grid-grid-images-patara-ai-skull[data-aspect="original"] .grid-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease, transform 0.05s ease; } @media (max-width: 768px) { .square-grid-grid-images-patara-ai-skull { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .square-grid-grid-images-patara-ai-skull { grid-template-columns: 1fr; } } </style> <h2 id="robots">Robots<a class="anchor" href="#robots">#</a></h2> <h3 id="mecha">Mecha<a class="anchor" href="#mecha">#</a></h3> <div class="square-grid-grid-images-patara-ai-mecha" data-aspect="square"><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mecha/mecha-anime-0.webp" alt="Image 0" loading="lazy" data-grid-id="grid-images-patara-ai-mecha"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mecha/mecha-anime-1.webp" alt="Image 1" loading="lazy" data-grid-id="grid-images-patara-ai-mecha"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mecha/mecha-anime-2.webp" alt="Image 2" loading="lazy" data-grid-id="grid-images-patara-ai-mecha"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mecha/mecha-cartoon-0.webp" alt="Image 3" loading="lazy" data-grid-id="grid-images-patara-ai-mecha"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mecha/mecha-cartoon-1.webp" alt="Image 4" loading="lazy" data-grid-id="grid-images-patara-ai-mecha"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mecha/mecha-cartoon-2.webp" alt="Image 5" loading="lazy" data-grid-id="grid-images-patara-ai-mecha"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mecha/mecha-street_art-0.webp" alt="Image 6" loading="lazy" data-grid-id="grid-images-patara-ai-mecha"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mecha/mecha-street_art-1.webp" alt="Image 7" loading="lazy" data-grid-id="grid-images-patara-ai-mecha"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mecha/mecha-street_art-2.webp" alt="Image 8" loading="lazy" data-grid-id="grid-images-patara-ai-mecha"> </div></div> <script> (function() { const grid = document.querySelector('.square-grid-grid-images-patara-ai-mecha'); const images = grid.querySelectorAll('img[data-grid-id="grid-images-patara-ai-mecha"]'); let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.grid-item'); let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; const glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); }); })(); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .square-grid-grid-images-patara-ai-mecha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 2rem; } .square-grid-grid-images-patara-ai-mecha[data-aspect="square"] .grid-item { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; background: #f0f0f0; cursor: zoom-in; } .square-grid-grid-images-patara-ai-mecha[data-aspect="square"] .grid-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.05s ease, transform 0.05s ease; } .square-grid-grid-images-patara-ai-mecha[data-aspect="original"] .grid-item { width: 100%; overflow: hidden; cursor: zoom-in; } .square-grid-grid-images-patara-ai-mecha[data-aspect="original"] .grid-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease, transform 0.05s ease; } @media (max-width: 768px) { .square-grid-grid-images-patara-ai-mecha { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .square-grid-grid-images-patara-ai-mecha { grid-template-columns: 1fr; } } </style> <h3 id="robots-1">Robots<a class="anchor" href="#robots-1">#</a></h3> <div class="square-grid-grid-images-patara-ai-robot" data-aspect="square"><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/robot/robot-anime-0.webp" alt="Image 0" loading="lazy" data-grid-id="grid-images-patara-ai-robot"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/robot/robot-anime-1.webp" alt="Image 1" loading="lazy" data-grid-id="grid-images-patara-ai-robot"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/robot/robot-anime-2.webp" alt="Image 2" loading="lazy" data-grid-id="grid-images-patara-ai-robot"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/robot/robot-cartoon-0.webp" alt="Image 3" loading="lazy" data-grid-id="grid-images-patara-ai-robot"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/robot/robot-cartoon-1.webp" alt="Image 4" loading="lazy" data-grid-id="grid-images-patara-ai-robot"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/robot/robot-cartoon-2.webp" alt="Image 5" loading="lazy" data-grid-id="grid-images-patara-ai-robot"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/robot/robot-street_art-0.webp" alt="Image 6" loading="lazy" data-grid-id="grid-images-patara-ai-robot"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/robot/robot-street_art-1.webp" alt="Image 7" loading="lazy" data-grid-id="grid-images-patara-ai-robot"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/robot/robot-street_art-2.webp" alt="Image 8" loading="lazy" data-grid-id="grid-images-patara-ai-robot"> </div></div> <script> (function() { const grid = document.querySelector('.square-grid-grid-images-patara-ai-robot'); const images = grid.querySelectorAll('img[data-grid-id="grid-images-patara-ai-robot"]'); let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.grid-item'); let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; const glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); }); })(); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .square-grid-grid-images-patara-ai-robot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 2rem; } .square-grid-grid-images-patara-ai-robot[data-aspect="square"] .grid-item { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; background: #f0f0f0; cursor: zoom-in; } .square-grid-grid-images-patara-ai-robot[data-aspect="square"] .grid-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.05s ease, transform 0.05s ease; } .square-grid-grid-images-patara-ai-robot[data-aspect="original"] .grid-item { width: 100%; overflow: hidden; cursor: zoom-in; } .square-grid-grid-images-patara-ai-robot[data-aspect="original"] .grid-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease, transform 0.05s ease; } @media (max-width: 768px) { .square-grid-grid-images-patara-ai-robot { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .square-grid-grid-images-patara-ai-robot { grid-template-columns: 1fr; } } </style> <h2 id="people">People<a class="anchor" href="#people">#</a></h2> <h3 id="womans-face">Woman&rsquo;s face<a class="anchor" href="#womans-face">#</a></h3> <div class="square-grid-grid-images-patara-ai-womans-face" data-aspect="square"><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/womans_face/woman%27s_face-anime-0.webp" alt="Image 0" loading="lazy" data-grid-id="grid-images-patara-ai-womans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/womans_face/woman%27s_face-anime-1.webp" alt="Image 1" loading="lazy" data-grid-id="grid-images-patara-ai-womans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/womans_face/woman%27s_face-anime-2.webp" alt="Image 2" loading="lazy" data-grid-id="grid-images-patara-ai-womans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/womans_face/woman%27s_face-cartoon-0.webp" alt="Image 3" loading="lazy" data-grid-id="grid-images-patara-ai-womans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/womans_face/woman%27s_face-cartoon-1.webp" alt="Image 4" loading="lazy" data-grid-id="grid-images-patara-ai-womans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/womans_face/woman%27s_face-cartoon-2.webp" alt="Image 5" loading="lazy" data-grid-id="grid-images-patara-ai-womans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/womans_face/woman%27s_face-street_art-0.webp" alt="Image 6" loading="lazy" data-grid-id="grid-images-patara-ai-womans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/womans_face/woman%27s_face-street_art-1.webp" alt="Image 7" loading="lazy" data-grid-id="grid-images-patara-ai-womans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/womans_face/woman%27s_face-street_art-2.webp" alt="Image 8" loading="lazy" data-grid-id="grid-images-patara-ai-womans-face"> </div></div> <script> (function() { const grid = document.querySelector('.square-grid-grid-images-patara-ai-womans-face'); const images = grid.querySelectorAll('img[data-grid-id="grid-images-patara-ai-womans-face"]'); let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.grid-item'); let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; const glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); }); })(); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .square-grid-grid-images-patara-ai-womans-face { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 2rem; } .square-grid-grid-images-patara-ai-womans-face[data-aspect="square"] .grid-item { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; background: #f0f0f0; cursor: zoom-in; } .square-grid-grid-images-patara-ai-womans-face[data-aspect="square"] .grid-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.05s ease, transform 0.05s ease; } .square-grid-grid-images-patara-ai-womans-face[data-aspect="original"] .grid-item { width: 100%; overflow: hidden; cursor: zoom-in; } .square-grid-grid-images-patara-ai-womans-face[data-aspect="original"] .grid-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease, transform 0.05s ease; } @media (max-width: 768px) { .square-grid-grid-images-patara-ai-womans-face { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .square-grid-grid-images-patara-ai-womans-face { grid-template-columns: 1fr; } } </style> <h3 id="mans-face">Man&rsquo;s face<a class="anchor" href="#mans-face">#</a></h3> <div class="square-grid-grid-images-patara-ai-mans-face" data-aspect="square"><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mans_face/man%27s_face-anime-0.webp" alt="Image 0" loading="lazy" data-grid-id="grid-images-patara-ai-mans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mans_face/man%27s_face-anime-1.webp" alt="Image 1" loading="lazy" data-grid-id="grid-images-patara-ai-mans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mans_face/man%27s_face-anime-2.webp" alt="Image 2" loading="lazy" data-grid-id="grid-images-patara-ai-mans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mans_face/man%27s_face-cartoon-0.webp" alt="Image 3" loading="lazy" data-grid-id="grid-images-patara-ai-mans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mans_face/man%27s_face-cartoon-1.webp" alt="Image 4" loading="lazy" data-grid-id="grid-images-patara-ai-mans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mans_face/man%27s_face-cartoon-2.webp" alt="Image 5" loading="lazy" data-grid-id="grid-images-patara-ai-mans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mans_face/man%27s_face-street_art-0.webp" alt="Image 6" loading="lazy" data-grid-id="grid-images-patara-ai-mans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mans_face/man%27s_face-street_art-1.webp" alt="Image 7" loading="lazy" data-grid-id="grid-images-patara-ai-mans-face"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/mans_face/man%27s_face-street_art-2.webp" alt="Image 8" loading="lazy" data-grid-id="grid-images-patara-ai-mans-face"> </div></div> <script> (function() { const grid = document.querySelector('.square-grid-grid-images-patara-ai-mans-face'); const images = grid.querySelectorAll('img[data-grid-id="grid-images-patara-ai-mans-face"]'); let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.grid-item'); let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; const glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); }); })(); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .square-grid-grid-images-patara-ai-mans-face { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 2rem; } .square-grid-grid-images-patara-ai-mans-face[data-aspect="square"] .grid-item { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; background: #f0f0f0; cursor: zoom-in; } .square-grid-grid-images-patara-ai-mans-face[data-aspect="square"] .grid-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.05s ease, transform 0.05s ease; } .square-grid-grid-images-patara-ai-mans-face[data-aspect="original"] .grid-item { width: 100%; overflow: hidden; cursor: zoom-in; } .square-grid-grid-images-patara-ai-mans-face[data-aspect="original"] .grid-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease, transform 0.05s ease; } @media (max-width: 768px) { .square-grid-grid-images-patara-ai-mans-face { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .square-grid-grid-images-patara-ai-mans-face { grid-template-columns: 1fr; } } </style> <h3 id="protestors">Protestors<a class="anchor" href="#protestors">#</a></h3> <div class="square-grid-grid-images-patara-ai-protestors" data-aspect="square"><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/protestors/protestors-anime-0.webp" alt="Image 0" loading="lazy" data-grid-id="grid-images-patara-ai-protestors"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/protestors/protestors-anime-1.webp" alt="Image 1" loading="lazy" data-grid-id="grid-images-patara-ai-protestors"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/protestors/protestors-anime-2.webp" alt="Image 2" loading="lazy" data-grid-id="grid-images-patara-ai-protestors"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/protestors/protestors-cartoon-0.webp" alt="Image 3" loading="lazy" data-grid-id="grid-images-patara-ai-protestors"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/protestors/protestors-cartoon-1.webp" alt="Image 4" loading="lazy" data-grid-id="grid-images-patara-ai-protestors"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/protestors/protestors-cartoon-2.webp" alt="Image 5" loading="lazy" data-grid-id="grid-images-patara-ai-protestors"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/protestors/protestors-street_art-0.webp" alt="Image 6" loading="lazy" data-grid-id="grid-images-patara-ai-protestors"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/protestors/protestors-street_art-1.webp" alt="Image 7" loading="lazy" data-grid-id="grid-images-patara-ai-protestors"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/protestors/protestors-street_art-2.webp" alt="Image 8" loading="lazy" data-grid-id="grid-images-patara-ai-protestors"> </div></div> <script> (function() { const grid = document.querySelector('.square-grid-grid-images-patara-ai-protestors'); const images = grid.querySelectorAll('img[data-grid-id="grid-images-patara-ai-protestors"]'); let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.grid-item'); let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; const glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); }); })(); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .square-grid-grid-images-patara-ai-protestors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 2rem; } .square-grid-grid-images-patara-ai-protestors[data-aspect="square"] .grid-item { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; background: #f0f0f0; cursor: zoom-in; } .square-grid-grid-images-patara-ai-protestors[data-aspect="square"] .grid-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.05s ease, transform 0.05s ease; } .square-grid-grid-images-patara-ai-protestors[data-aspect="original"] .grid-item { width: 100%; overflow: hidden; cursor: zoom-in; } .square-grid-grid-images-patara-ai-protestors[data-aspect="original"] .grid-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease, transform 0.05s ease; } @media (max-width: 768px) { .square-grid-grid-images-patara-ai-protestors { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .square-grid-grid-images-patara-ai-protestors { grid-template-columns: 1fr; } } </style> <h3 id="police-violence">Police Violence<a class="anchor" href="#police-violence">#</a></h3> <div class="square-grid-grid-images-patara-ai-police-violence" data-aspect="square"><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/police_violence/police_violence-anime-0.webp" alt="Image 0" loading="lazy" data-grid-id="grid-images-patara-ai-police-violence"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/police_violence/police_violence-anime-1.webp" alt="Image 1" loading="lazy" data-grid-id="grid-images-patara-ai-police-violence"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/police_violence/police_violence-anime-2.webp" alt="Image 2" loading="lazy" data-grid-id="grid-images-patara-ai-police-violence"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/police_violence/police_violence-cartoon-0.webp" alt="Image 3" loading="lazy" data-grid-id="grid-images-patara-ai-police-violence"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/police_violence/police_violence-cartoon-1.webp" alt="Image 4" loading="lazy" data-grid-id="grid-images-patara-ai-police-violence"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/police_violence/police_violence-cartoon-2.webp" alt="Image 5" loading="lazy" data-grid-id="grid-images-patara-ai-police-violence"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/police_violence/police_violence-street_art-0.webp" alt="Image 6" loading="lazy" data-grid-id="grid-images-patara-ai-police-violence"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/police_violence/police_violence-street_art-1.webp" alt="Image 7" loading="lazy" data-grid-id="grid-images-patara-ai-police-violence"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/police_violence/police_violence-street_art-2.webp" alt="Image 8" loading="lazy" data-grid-id="grid-images-patara-ai-police-violence"> </div></div> <script> (function() { const grid = document.querySelector('.square-grid-grid-images-patara-ai-police-violence'); const images = grid.querySelectorAll('img[data-grid-id="grid-images-patara-ai-police-violence"]'); let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.grid-item'); let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; const glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); }); })(); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .square-grid-grid-images-patara-ai-police-violence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 2rem; } .square-grid-grid-images-patara-ai-police-violence[data-aspect="square"] .grid-item { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; background: #f0f0f0; cursor: zoom-in; } .square-grid-grid-images-patara-ai-police-violence[data-aspect="square"] .grid-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.05s ease, transform 0.05s ease; } .square-grid-grid-images-patara-ai-police-violence[data-aspect="original"] .grid-item { width: 100%; overflow: hidden; cursor: zoom-in; } .square-grid-grid-images-patara-ai-police-violence[data-aspect="original"] .grid-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease, transform 0.05s ease; } @media (max-width: 768px) { .square-grid-grid-images-patara-ai-police-violence { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .square-grid-grid-images-patara-ai-police-violence { grid-template-columns: 1fr; } } </style> <h3 id="pig-cop">Pig Cop<a class="anchor" href="#pig-cop">#</a></h3> <div class="square-grid-grid-images-patara-ai-cop-pig" data-aspect="square"><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/cop_pig/cop_pig-anime-0.webp" alt="Image 0" loading="lazy" data-grid-id="grid-images-patara-ai-cop-pig"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/cop_pig/cop_pig-anime-1.webp" alt="Image 1" loading="lazy" data-grid-id="grid-images-patara-ai-cop-pig"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/cop_pig/cop_pig-anime-2.webp" alt="Image 2" loading="lazy" data-grid-id="grid-images-patara-ai-cop-pig"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/cop_pig/cop_pig-cartoon-0.webp" alt="Image 3" loading="lazy" data-grid-id="grid-images-patara-ai-cop-pig"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/cop_pig/cop_pig-cartoon-1.webp" alt="Image 4" loading="lazy" data-grid-id="grid-images-patara-ai-cop-pig"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/cop_pig/cop_pig-cartoon-2.webp" alt="Image 5" loading="lazy" data-grid-id="grid-images-patara-ai-cop-pig"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/cop_pig/cop_pig-street_art-0.webp" alt="Image 6" loading="lazy" data-grid-id="grid-images-patara-ai-cop-pig"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/cop_pig/cop_pig-street_art-1.webp" alt="Image 7" loading="lazy" data-grid-id="grid-images-patara-ai-cop-pig"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/cop_pig/cop_pig-street_art-2.webp" alt="Image 8" loading="lazy" data-grid-id="grid-images-patara-ai-cop-pig"> </div></div> <script> (function() { const grid = document.querySelector('.square-grid-grid-images-patara-ai-cop-pig'); const images = grid.querySelectorAll('img[data-grid-id="grid-images-patara-ai-cop-pig"]'); let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.grid-item'); let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; const glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); }); })(); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .square-grid-grid-images-patara-ai-cop-pig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 2rem; } .square-grid-grid-images-patara-ai-cop-pig[data-aspect="square"] .grid-item { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; background: #f0f0f0; cursor: zoom-in; } .square-grid-grid-images-patara-ai-cop-pig[data-aspect="square"] .grid-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.05s ease, transform 0.05s ease; } .square-grid-grid-images-patara-ai-cop-pig[data-aspect="original"] .grid-item { width: 100%; overflow: hidden; cursor: zoom-in; } .square-grid-grid-images-patara-ai-cop-pig[data-aspect="original"] .grid-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease, transform 0.05s ease; } @media (max-width: 768px) { .square-grid-grid-images-patara-ai-cop-pig { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .square-grid-grid-images-patara-ai-cop-pig { grid-template-columns: 1fr; } } </style> <h3 id="rapper">Rapper<a class="anchor" href="#rapper">#</a></h3> <div class="square-grid-grid-images-patara-ai-rapper" data-aspect="square"><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/rapper/rapper-anime-0.webp" alt="Image 0" loading="lazy" data-grid-id="grid-images-patara-ai-rapper"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/rapper/rapper-anime-1.webp" alt="Image 1" loading="lazy" data-grid-id="grid-images-patara-ai-rapper"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/rapper/rapper-anime-2.webp" alt="Image 2" loading="lazy" data-grid-id="grid-images-patara-ai-rapper"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/rapper/rapper-cartoon-0.webp" alt="Image 3" loading="lazy" data-grid-id="grid-images-patara-ai-rapper"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/rapper/rapper-cartoon-1.webp" alt="Image 4" loading="lazy" data-grid-id="grid-images-patara-ai-rapper"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/rapper/rapper-cartoon-2.webp" alt="Image 5" loading="lazy" data-grid-id="grid-images-patara-ai-rapper"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/rapper/rapper-street_art-0.webp" alt="Image 6" loading="lazy" data-grid-id="grid-images-patara-ai-rapper"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/rapper/rapper-street_art-1.webp" alt="Image 7" loading="lazy" data-grid-id="grid-images-patara-ai-rapper"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/rapper/rapper-street_art-2.webp" alt="Image 8" loading="lazy" data-grid-id="grid-images-patara-ai-rapper"> </div></div> <script> (function() { const grid = document.querySelector('.square-grid-grid-images-patara-ai-rapper'); const images = grid.querySelectorAll('img[data-grid-id="grid-images-patara-ai-rapper"]'); let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.grid-item'); let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; const glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); }); })(); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .square-grid-grid-images-patara-ai-rapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 2rem; } .square-grid-grid-images-patara-ai-rapper[data-aspect="square"] .grid-item { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; background: #f0f0f0; cursor: zoom-in; } .square-grid-grid-images-patara-ai-rapper[data-aspect="square"] .grid-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.05s ease, transform 0.05s ease; } .square-grid-grid-images-patara-ai-rapper[data-aspect="original"] .grid-item { width: 100%; overflow: hidden; cursor: zoom-in; } .square-grid-grid-images-patara-ai-rapper[data-aspect="original"] .grid-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease, transform 0.05s ease; } @media (max-width: 768px) { .square-grid-grid-images-patara-ai-rapper { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .square-grid-grid-images-patara-ai-rapper { grid-template-columns: 1fr; } } </style> <h3 id="hacker">Hacker<a class="anchor" href="#hacker">#</a></h3> <div class="square-grid-grid-images-patara-ai-hacker" data-aspect="square"><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/hacker/hacker-anime-0.webp" alt="Image 0" loading="lazy" data-grid-id="grid-images-patara-ai-hacker"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/hacker/hacker-anime-1.webp" alt="Image 1" loading="lazy" data-grid-id="grid-images-patara-ai-hacker"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/hacker/hacker-anime-2.webp" alt="Image 2" loading="lazy" data-grid-id="grid-images-patara-ai-hacker"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/hacker/hacker-cartoon-0.webp" alt="Image 3" loading="lazy" data-grid-id="grid-images-patara-ai-hacker"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/hacker/hacker-cartoon-1.webp" alt="Image 4" loading="lazy" data-grid-id="grid-images-patara-ai-hacker"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/hacker/hacker-cartoon-2.webp" alt="Image 5" loading="lazy" data-grid-id="grid-images-patara-ai-hacker"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/hacker/hacker-street_art-0.webp" alt="Image 6" loading="lazy" data-grid-id="grid-images-patara-ai-hacker"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/hacker/hacker-street_art-1.webp" alt="Image 7" loading="lazy" data-grid-id="grid-images-patara-ai-hacker"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/hacker/hacker-street_art-2.webp" alt="Image 8" loading="lazy" data-grid-id="grid-images-patara-ai-hacker"> </div></div> <script> (function() { const grid = document.querySelector('.square-grid-grid-images-patara-ai-hacker'); const images = grid.querySelectorAll('img[data-grid-id="grid-images-patara-ai-hacker"]'); let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.grid-item'); let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; const glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); }); })(); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .square-grid-grid-images-patara-ai-hacker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 2rem; } .square-grid-grid-images-patara-ai-hacker[data-aspect="square"] .grid-item { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; background: #f0f0f0; cursor: zoom-in; } .square-grid-grid-images-patara-ai-hacker[data-aspect="square"] .grid-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.05s ease, transform 0.05s ease; } .square-grid-grid-images-patara-ai-hacker[data-aspect="original"] .grid-item { width: 100%; overflow: hidden; cursor: zoom-in; } .square-grid-grid-images-patara-ai-hacker[data-aspect="original"] .grid-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease, transform 0.05s ease; } @media (max-width: 768px) { .square-grid-grid-images-patara-ai-hacker { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .square-grid-grid-images-patara-ai-hacker { grid-template-columns: 1fr; } } </style> <h3 id="ninja">Ninja<a class="anchor" href="#ninja">#</a></h3> <div class="square-grid-grid-images-patara-ai-ninja" data-aspect="square"><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/ninja/ninja-anime-0.webp" alt="Image 0" loading="lazy" data-grid-id="grid-images-patara-ai-ninja"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/ninja/ninja-anime-1.webp" alt="Image 1" loading="lazy" data-grid-id="grid-images-patara-ai-ninja"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/ninja/ninja-anime-2.webp" alt="Image 2" loading="lazy" data-grid-id="grid-images-patara-ai-ninja"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/ninja/ninja-cartoon-0.webp" alt="Image 3" loading="lazy" data-grid-id="grid-images-patara-ai-ninja"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/ninja/ninja-cartoon-1.webp" alt="Image 4" loading="lazy" data-grid-id="grid-images-patara-ai-ninja"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/ninja/ninja-cartoon-2.webp" alt="Image 5" loading="lazy" data-grid-id="grid-images-patara-ai-ninja"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/ninja/ninja-street_art-0.webp" alt="Image 6" loading="lazy" data-grid-id="grid-images-patara-ai-ninja"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/ninja/ninja-street_art-1.webp" alt="Image 7" loading="lazy" data-grid-id="grid-images-patara-ai-ninja"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/ninja/ninja-street_art-2.webp" alt="Image 8" loading="lazy" data-grid-id="grid-images-patara-ai-ninja"> </div></div> <script> (function() { const grid = document.querySelector('.square-grid-grid-images-patara-ai-ninja'); const images = grid.querySelectorAll('img[data-grid-id="grid-images-patara-ai-ninja"]'); let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.grid-item'); let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; const glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); }); })(); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .square-grid-grid-images-patara-ai-ninja { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 2rem; } .square-grid-grid-images-patara-ai-ninja[data-aspect="square"] .grid-item { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; background: #f0f0f0; cursor: zoom-in; } .square-grid-grid-images-patara-ai-ninja[data-aspect="square"] .grid-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.05s ease, transform 0.05s ease; } .square-grid-grid-images-patara-ai-ninja[data-aspect="original"] .grid-item { width: 100%; overflow: hidden; cursor: zoom-in; } .square-grid-grid-images-patara-ai-ninja[data-aspect="original"] .grid-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease, transform 0.05s ease; } @media (max-width: 768px) { .square-grid-grid-images-patara-ai-ninja { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .square-grid-grid-images-patara-ai-ninja { grid-template-columns: 1fr; } } </style> <h2 id="dragons">Dragons<a class="anchor" href="#dragons">#</a></h2> <h3 id="dragon">Dragon<a class="anchor" href="#dragon">#</a></h3> <div class="square-grid-grid-images-patara-ai-dragon" data-aspect="square"><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/dragon/dragon-anime-0.webp" alt="Image 0" loading="lazy" data-grid-id="grid-images-patara-ai-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/dragon/dragon-anime-1.webp" alt="Image 1" loading="lazy" data-grid-id="grid-images-patara-ai-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/dragon/dragon-anime-2.webp" alt="Image 2" loading="lazy" data-grid-id="grid-images-patara-ai-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/dragon/dragon-cartoon-0.webp" alt="Image 3" loading="lazy" data-grid-id="grid-images-patara-ai-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/dragon/dragon-cartoon-1.webp" alt="Image 4" loading="lazy" data-grid-id="grid-images-patara-ai-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/dragon/dragon-cartoon-2.webp" alt="Image 5" loading="lazy" data-grid-id="grid-images-patara-ai-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/dragon/dragon-street_art-0.webp" alt="Image 6" loading="lazy" data-grid-id="grid-images-patara-ai-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/dragon/dragon-street_art-1.webp" alt="Image 7" loading="lazy" data-grid-id="grid-images-patara-ai-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/dragon/dragon-street_art-2.webp" alt="Image 8" loading="lazy" data-grid-id="grid-images-patara-ai-dragon"> </div></div> <script> (function() { const grid = document.querySelector('.square-grid-grid-images-patara-ai-dragon'); const images = grid.querySelectorAll('img[data-grid-id="grid-images-patara-ai-dragon"]'); let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.grid-item'); let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; const glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); }); })(); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .square-grid-grid-images-patara-ai-dragon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 2rem; } .square-grid-grid-images-patara-ai-dragon[data-aspect="square"] .grid-item { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; background: #f0f0f0; cursor: zoom-in; } .square-grid-grid-images-patara-ai-dragon[data-aspect="square"] .grid-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.05s ease, transform 0.05s ease; } .square-grid-grid-images-patara-ai-dragon[data-aspect="original"] .grid-item { width: 100%; overflow: hidden; cursor: zoom-in; } .square-grid-grid-images-patara-ai-dragon[data-aspect="original"] .grid-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease, transform 0.05s ease; } @media (max-width: 768px) { .square-grid-grid-images-patara-ai-dragon { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .square-grid-grid-images-patara-ai-dragon { grid-template-columns: 1fr; } } </style> <h3 id="chinese-dragon">Chinese Dragon<a class="anchor" href="#chinese-dragon">#</a></h3> <div class="square-grid-grid-images-patara-ai-chinese-dragon" data-aspect="square"><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/chinese_dragon/chinese_dragon-anime-0.webp" alt="Image 0" loading="lazy" data-grid-id="grid-images-patara-ai-chinese-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/chinese_dragon/chinese_dragon-anime-1.webp" alt="Image 1" loading="lazy" data-grid-id="grid-images-patara-ai-chinese-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/chinese_dragon/chinese_dragon-anime-2.webp" alt="Image 2" loading="lazy" data-grid-id="grid-images-patara-ai-chinese-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/chinese_dragon/chinese_dragon-cartoon-0.webp" alt="Image 3" loading="lazy" data-grid-id="grid-images-patara-ai-chinese-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/chinese_dragon/chinese_dragon-cartoon-1.webp" alt="Image 4" loading="lazy" data-grid-id="grid-images-patara-ai-chinese-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/chinese_dragon/chinese_dragon-cartoon-2.webp" alt="Image 5" loading="lazy" data-grid-id="grid-images-patara-ai-chinese-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/chinese_dragon/chinese_dragon-street_art-0.webp" alt="Image 6" loading="lazy" data-grid-id="grid-images-patara-ai-chinese-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/chinese_dragon/chinese_dragon-street_art-1.webp" alt="Image 7" loading="lazy" data-grid-id="grid-images-patara-ai-chinese-dragon"> </div><div class="grid-item"> <img src="https://specialprocedures.github.io/images/patara/ai/chinese_dragon/chinese_dragon-street_art-2.webp" alt="Image 8" loading="lazy" data-grid-id="grid-images-patara-ai-chinese-dragon"> </div></div> <script> (function() { const grid = document.querySelector('.square-grid-grid-images-patara-ai-chinese-dragon'); const images = grid.querySelectorAll('img[data-grid-id="grid-images-patara-ai-chinese-dragon"]'); let overlay = document.querySelector('.gallery-fullscreen-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.className = 'gallery-fullscreen-overlay'; overlay.innerHTML = '<span class="fullscreen-close">&times;</span><img src="" alt="Fullscreen image">'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { overlay.classList.remove('active'); document.body.style.overflow = ''; }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) { overlay.classList.remove('active'); document.body.style.overflow = ''; } }); } const filters = { saturate: { units: '', probability: 0.2, min: 1, max: 10 }, 'hue-rotate': { units: 'deg', probability: 1, min: 0, max: 360 }, invert: { units: '', probability: 0.033, min: 1, max: 1 }, contrast: { units: '', probability: 0.1, min: 1, max: 10 }, brightness: { units: '%', probability: 0.05, min: 25, max: 75 } }; function generateGlitchFilter() { let filterStr = ''; for (const [name, props] of Object.entries(filters)) { if (Math.random() < props.probability) { const value = Math.random() * (props.max - props.min) + props.min; filterStr += ` ${name}(${value}${props.units})`; } } return filterStr.trim() || 'none'; } function generateGlitchTransform() { const tx = Math.random() * 10 - 5; const ty = Math.random() * 10 - 5; const scale = Math.random() * 0.05 + 1.02; return `translate(${tx}px, ${ty}px) scale(${scale})`; } images.forEach(img => { const item = img.closest('.grid-item'); let isAnimating = false; img.addEventListener('click', function(e) { e.stopPropagation(); if (isAnimating) return; isAnimating = true; const imgSrc = this.src; const glitchInterval = setInterval(() => { if (Math.random() < 0.666) { img.style.filter = generateGlitchFilter(); img.style.transform = generateGlitchTransform(); } }, 50); setTimeout(() => { clearInterval(glitchInterval); img.style.filter = ''; img.style.transform = ''; isAnimating = false; const overlayImg = overlay.querySelector('img'); overlayImg.src = imgSrc; overlay.classList.add('active'); document.body.style.overflow = 'hidden'; }, 200); }); }); })(); </script> <style> .gallery-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gallery-fullscreen-overlay.active { opacity: 1; visibility: visible; } .gallery-fullscreen-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .gallery-fullscreen-overlay .fullscreen-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .gallery-fullscreen-overlay .fullscreen-close:hover { color: #ccc; } .square-grid-grid-images-patara-ai-chinese-dragon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 2rem; } .square-grid-grid-images-patara-ai-chinese-dragon[data-aspect="square"] .grid-item { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; background: #f0f0f0; cursor: zoom-in; } .square-grid-grid-images-patara-ai-chinese-dragon[data-aspect="square"] .grid-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.05s ease, transform 0.05s ease; } .square-grid-grid-images-patara-ai-chinese-dragon[data-aspect="original"] .grid-item { width: 100%; overflow: hidden; cursor: zoom-in; } .square-grid-grid-images-patara-ai-chinese-dragon[data-aspect="original"] .grid-item img { width: 100%; height: auto; display: block; transition: filter 0.05s ease, transform 0.05s ease; } @media (max-width: 768px) { .square-grid-grid-images-patara-ai-chinese-dragon { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .square-grid-grid-images-patara-ai-chinese-dragon { grid-template-columns: 1fr; } } </style>