195.1 million views

In the Summer of 2019, I applied for a GIPHY artist’s account. GIPHY “is an American online database and search engine that allows users to search for and share animated GIF files.” (Wikipedia). A … Lees Meer

Nereda 2: a Hydromancy

Nereda 2: a HydromancyHD, colour/audio, 06’30”, 2024Produced with the support of EU Creative Europe, HKU Utrecht (The Netherlands), Hydromedia.org. Audio recorded at the HDSR waste water treatment plant at Overvecht (NL). Nereda … Lees Meer

ⓘ @ The Plot

ⓘ Information panel (print on dibond mounted on wood, QR code, 118 x 71cm) in custom weathering steel frame, 2024 (panel 2), 2022-2023 (panel1) Permanent installation at The Plot (Lierop, NL). Steel … Lees Meer

// script.js document.addEventListener("DOMContentLoaded", function() { // Check if the body has the specific page class if (document.body.classList.contains('page-id-400605')) { const container = document.getElementById("container"); // Function to create and position images function createImage(src) { const img = document.createElement("img"); img.src = src; img.classList.add("image"); // Set random width and rotation const randomWidth = Math.random() * (150 - 50) + 50; // Random width between 50px and 150px const randomRotation = Math.random() * 30 - 15; // Random rotation between -15deg and 15deg img.style.width = `${randomWidth}px`; img.style.transform = `rotate(${randomRotation}deg)`; // Random position within the container img.style.top = Math.random() * (container.clientHeight - randomWidth) + 'px'; img.style.left = Math.random() * (container.clientWidth - randomWidth) + 'px'; img.draggable = true; // Event listeners for dragging img.addEventListener("dragstart", function(e) { e.dataTransfer.setData("text/plain", null); // For Firefox compatibility img.style.transition = 'none'; // Disable transition during drag }); img.addEventListener("dragend", function() { img.style.transition = 'transform 0.1s'; // Re-enable transition after drag }); img.addEventListener("drag", function(e) { const x = e.clientX - container.getBoundingClientRect().left - randomWidth / 2; // Adjust for image width const y = e.clientY - container.getBoundingClientRect().top - randomWidth / 2; // Adjust for image height img.style.transform = `translate(${x}px, ${y}px) rotate(${randomRotation}deg)`; // Keep rotation }); container.appendChild(img); } // Load images from a specified folder const imageFolder = 'https://yourwebsite.com/path/to/your/images/'; // Update with your image folder path let i = 1; // Initialize the counter while (true) { // Infinite loop to keep trying to load images const imageUrl = `${imageFolder}image${i}.jpg`; // Adjust this to match your image naming convention const img = new Image(); img.src = imageUrl; // Check if the image exists before creating it img.onload = function() { createImage(imageUrl); }; img.onerror = function() { console.log(`Image ${imageUrl} does not exist. Stopping further attempts.`); break; // Stop loading more images if one doesn't exist }; i++; // Increment the counter } } });