{"id":55,"date":"2024-12-11T15:56:01","date_gmt":"2024-12-11T14:56:01","guid":{"rendered":"http:\/\/basil-ell.de\/about\/?page_id=55"},"modified":"2025-02-18T09:09:10","modified_gmt":"2025-02-18T08:09:10","slug":"art","status":"publish","type":"page","link":"http:\/\/basil-ell.de\/about\/art\/","title":{"rendered":"art"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">interactive results of programming<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><small>(try mouse-over\/swiping and clicking\/touching)<\/small><\/p>\n\n\n\n<style>\n.scrollable-div {\n    overflow: auto;\n    touch-action: pan-x pan-y;\n}\n<\/style>\n<div id=\"sizer\" style=\"width: 100%;\"><\/div>\n<div id=\"lisjsjkjkf\" style=\"width: 500px; height:500px;\" class=\"scrollable-div\"><\/div>\n<script language=\"JavaScript\">\n\nconst createImage = (x, y, size, parent) => {\n    const img = document.createElement('img');\n    img.src = 'http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/t4.png'; \n    img.style[\"position\"] = \"absolute\";\n    img.style[\"left\"] = x + \"px\";\n    img.style[\"top\"] = y + \"px\";\n    img.style[\"width\"] = size + \"px\";\n    img.style[\"height\"] = size + \"px\";\n\n    const images = [\n        'http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/t4.png',\n        'http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/t3.png',\n        'http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/t2.png',\n        'http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/t1.png'\n    ];\n\n    img.addEventListener('click', (e) => {\n        e.stopPropagation();\n        splitImage(img, size);\n    });\n\n    img.addEventListener('mouseover', () => {\n        const currentIndex = images.indexOf(img.src);\n        const nextIndex = (currentIndex + 1) % images.length;\n        img.src = images[nextIndex];\n    });\n\n    let touchStartX = 0;\n    let touchEndX = 0;\n\n    img.addEventListener('touchstart', (event) => {\n        touchStartX = event.changedTouches[0].screenX;\n    });\n\n    img.addEventListener('touchend', (event) => {\n        touchEndX = event.changedTouches[0].screenX;\n        handleSwipe();\n    });\n\n    function handleSwipe() {\n        if (touchEndX < touchStartX) { \/\/ swipe left\n            const currentIndex = images.indexOf(img.src);\n            const nextIndex = (currentIndex + 1) % images.length;\n            img.src = images[nextIndex];\n        } else if (touchEndX > touchStartX) { \/\/ swipe right\n            const currentIndex = images.indexOf(img.src);\n            const nextIndex = (currentIndex + 1) % images.length;\n            img.src = images[nextIndex];\n        }\n    }\n\n    document.body.appendChild(img);\n};\n\nconst splitImage = (img, size) => {\n    const parent = img.parentElement;\n    const rect = img.getBoundingClientRect();\n\n    parent.removeChild(img);\n\n    const newSize = size \/ 2;\n    createImage(rect.left + window.scrollX, rect.top + window.scrollY, newSize, parent);\n    createImage(rect.left + window.scrollX + newSize, rect.top + window.scrollY, newSize, parent);\n    createImage(rect.left + window.scrollX, rect.top + + window.scrollY + newSize, newSize, parent);\n    createImage(rect.left + window.scrollX + newSize, rect.top + window.scrollY + newSize, newSize, parent);\n};\n\nconst initialize = () => {\n\n    var size = 0.5 * document.getElementById('sizer').offsetWidth;\n    document.getElementById('lisjsjkjkf').style[\"width\"] = size;\n    document.getElementById('lisjsjkjkf').style[\"height\"] = size;\n \n    const container = document.getElementById('lisjsjkjkf');\n   \n    \/\/const containerWidth = container.offsetWidth;\n    const containerRect = container.getBoundingClientRect();\n\n    createImage(containerRect.left + window.scrollX, containerRect.top + window.scrollY, size, container);\n};\n\nwindow.onload = initialize;\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\">results of programming and interaction<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"373\" src=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/3-4-6-1024x373.png\" alt=\"\" class=\"wp-image-56\" srcset=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/3-4-6-1024x373.png 1024w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/3-4-6-300x109.png 300w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/3-4-6-768x279.png 768w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/3-4-6-1536x559.png 1536w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/3-4-6.png 1539w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"373\" src=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/4-5-6-1024x373.png\" alt=\"\" class=\"wp-image-57\" srcset=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/4-5-6-1024x373.png 1024w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/4-5-6-300x109.png 300w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/4-5-6-768x280.png 768w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/4-5-6-1536x559.png 1536w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/4-5-6.png 1538w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">results of programmed animation<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"399\" src=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/0018red-1024x399.png\" alt=\"\" class=\"wp-image-58\" srcset=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/0018red-1024x399.png 1024w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/0018red-300x117.png 300w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/0018red-768x299.png 768w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/0018red-1536x598.png 1536w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/0018red-2048x798.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">results of photography<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/IMG_5022red-1024x1024.jpg\" alt=\"\" class=\"wp-image-60\" srcset=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/IMG_5022red-1024x1024.jpg 1024w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/IMG_5022red-300x300.jpg 300w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/IMG_5022red-150x150.jpg 150w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/IMG_5022red-768x768.jpg 768w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/IMG_5022red-1536x1536.jpg 1536w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/IMG_5022red.jpg 2001w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">results of combinatorial generation<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/1598845845_trimmed2-1024x1024.png\" alt=\"\" class=\"wp-image-463\" srcset=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/1598845845_trimmed2-1024x1024.png 1024w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/1598845845_trimmed2-300x300.png 300w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/1598845845_trimmed2-150x150.png 150w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/1598845845_trimmed2-768x768.png 768w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/1598845845_trimmed2-1536x1536.png 1536w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/1598845845_trimmed2-2048x2048.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1008\" height=\"1024\" src=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/1583706170-1008x1024.png\" alt=\"\" class=\"wp-image-176\" srcset=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/1583706170-1008x1024.png 1008w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/1583706170-295x300.png 295w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/1583706170-768x780.png 768w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/1583706170-1512x1536.png 1512w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/1583706170-2015x2048.png 2015w\" sizes=\"auto, (max-width: 1008px) 100vw, 1008px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1008\" height=\"1024\" src=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/1583708622-1008x1024.png\" alt=\"\" class=\"wp-image-177\" srcset=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/1583708622-1008x1024.png 1008w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/1583708622-295x300.png 295w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/1583708622-768x780.png 768w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/1583708622-1512x1536.png 1512w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/1583708622-2015x2048.png 2015w\" sizes=\"auto, (max-width: 1008px) 100vw, 1008px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">paintings, no computers<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"953\" height=\"1024\" src=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/d2-953x1024.jpeg\" alt=\"\" class=\"wp-image-64\" srcset=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/d2-953x1024.jpeg 953w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/d2-279x300.jpeg 279w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/d2-768x825.jpeg 768w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2024\/12\/d2.jpeg 1229w\" sizes=\"auto, (max-width: 953px) 100vw, 953px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"857\" height=\"1024\" src=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/d3-857x1024.jpeg\" alt=\"\" class=\"wp-image-471\" srcset=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/d3-857x1024.jpeg 857w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/d3-251x300.jpeg 251w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/d3-768x917.jpeg 768w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/d3-1286x1536.jpeg 1286w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/d3.jpeg 1653w\" sizes=\"auto, (max-width: 857px) 100vw, 857px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/d4-1024x1024.jpg\" alt=\"\" class=\"wp-image-473\" srcset=\"http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/d4-1024x1024.jpg 1024w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/d4-300x300.jpg 300w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/d4-150x150.jpg 150w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/d4-768x768.jpg 768w, http:\/\/basil-ell.de\/about\/wp-content\/uploads\/2025\/02\/d4.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>interactive results of programming (try mouse-over\/swiping and clicking\/touching) results of programming and interaction results of programmed animation results of photography results of combinatorial generation paintings, no computers<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-55","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/basil-ell.de\/about\/wp-json\/wp\/v2\/pages\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/basil-ell.de\/about\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/basil-ell.de\/about\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/basil-ell.de\/about\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/basil-ell.de\/about\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":10,"href":"http:\/\/basil-ell.de\/about\/wp-json\/wp\/v2\/pages\/55\/revisions"}],"predecessor-version":[{"id":480,"href":"http:\/\/basil-ell.de\/about\/wp-json\/wp\/v2\/pages\/55\/revisions\/480"}],"wp:attachment":[{"href":"http:\/\/basil-ell.de\/about\/wp-json\/wp\/v2\/media?parent=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}