{"id":1956,"date":"2025-10-15T08:40:48","date_gmt":"2025-10-15T06:40:48","guid":{"rendered":"https:\/\/steve.one\/?p=1956"},"modified":"2026-05-24T23:11:37","modified_gmt":"2026-05-24T21:11:37","slug":"test","status":"publish","type":"post","link":"https:\/\/steve.one\/?p=1956","title":{"rendered":"About a Mouse"},"content":{"rendered":"<h1>About a Mouse<\/h1>\n<div>Vom Pixel zum Prozess <br \/> Die algorithmische Reanimation einer digitalen Figur<br \/><\/br><br \/>\n<\/p>\n<p style=\"font-size: 14px;\">Ausgangspunkt der Arbeit ist eine statische, reduzierte Pixelmaus \u2014 ein digitales Objekt ohne Eigenbewegung, aufgebaut aus klar definierten Quadraten innerhalb eines orthogonalen Rasters. Durch schrittweise Eingriffe in den Code wird dieses starre Zeichen transformiert: Das urspr\u00fcnglich unbewegliche Pixel-Icon wird in ein prozedurales System \u00fcberf\u00fchrt und beginnt, sich innerhalb eines generativen Wireframe-Meshs zu verformen.<br \/>\n<br \/><\/br><br \/>\nDie Arbeit nutzt ein deformiertes Grid beziehungsweise ein animiertes Mesh, dessen Bewegung \u00fcber Perlin Noise erzeugt wird \u2014 ein Verfahren aus der Computergrafik zur Simulation organischer Dynamiken. Dadurch entsteht eine kontinuierlich oszillierende Oberfl\u00e4che zwischen Ordnung und Instabilit\u00e4t. Die Maus bleibt formal bestehen, wird jedoch gleichzeitig durch die Bewegung des Systems permanent destabilisiert und neu berechnet.<br \/>\n<br \/><\/br><br \/>\nEntscheidend ist dabei nicht nur die Animation selbst, sondern der Prozess der sukzessiven \u00dcbersetzung: von der statischen Vorlage \u00fcber die Zerlegung in Rasterinformationen bis hin zur algorithmischen Reorganisation durch Code. Das Bild wird nicht einfach animiert, sondern in eine zeitbasierte Struktur \u00fcberf\u00fchrt. Die Pixel werden zu Datenpunkten eines lebendigen Systems.<br \/>\n<br \/><\/br><br \/>\nDie Arbeit bewegt sich damit zwischen generativer Kunst, fr\u00fcher CGI-\u00c4sthetik und digitaler Skulptur. Digitale Artefakte, Simulation und Popkultur verschmelzen zu einer Bildsprache, die gleichzeitig technisch und organisch wirkt. Die reduzierte Formsprache der Maus bleibt dabei bewusst roh und niedrig aufgel\u00f6st \u2014 wie ein Relikt fr\u00fcher Bildschirmkulturen, das innerhalb eines fluiden digitalen Raums reaktiviert wird.<br \/>\n<br \/><\/br><br \/>\nDie eigentliche Transformation liegt somit weniger im Motiv als im Verhalten des Motivs: Aus einem statischen Symbol wird ein performativer Zustand. Die Maus existiert nicht mehr als festes Bild, sondern als kontinuierliche Berechnung.<\/p>\n<p><\/br>&#10024;<\/p>\n<p style=\"font-size: 18px;\">Heute erwecken wir Analoges durch Code zum Leben.<br \/>\nMorgen wird KI vielleicht Dinge erschaffen, die wir nicht mehr von Leben unterscheiden k\u00f6nnen.<br \/>\nVielleicht besteht die Aufgabe der Kunst darin, genau diesen Moment zu beobachten.<\/p>\n<\/p>\n<\/div>\n<div>\n<div id=\"terrain-holder-16\"><\/div>\n<p><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/1.4.2\/p5.min.js\"><\/script><\/p>\n<p><script><\/p>\n<p>(function(){<\/p>\n<p>new p5(function(p){<\/p>\n<p>  \/\/ EXAKT 16 x 16<\/p>\n<p>  const gridCount = 16;<\/p>\n<p>  \/\/ QUADRATGR\u00d6SSE<\/p>\n<p>  const scl = 40;<\/p>\n<p>  \/\/ GESAMTFL\u00c4CHE<\/p>\n<p>  const size = gridCount * scl;<\/p>\n<p>  let terrain = [];<\/p>\n<p>  let flying = 0;<\/p>\n<p>  p.setup = function(){<\/p>\n<p>    let canvasSize = Math.min(\n      window.innerWidth,\n      900\n    );<\/p>\n<p>    let canvas = p.createCanvas(\n      canvasSize,\n      canvasSize,\n      p.WEBGL\n    );<\/p>\n<p>    canvas.parent(\n      \"terrain-holder-16\"\n    );<\/p>\n<p>    \/\/ ARRAY<\/p>\n<p>    for(let x = 0; x < gridCount; x++){\n\n      terrain[x] = [];\n\n      for(let y = 0; y < gridCount; y++){\n\n        terrain[x][y] = 0;\n\n      }\n\n    }\n\n    p.pixelDensity(2);\n\n    p.noFill();\n\n  };\n\n  p.draw = function(){\n\n    \/\/ ST\u00c4RKERE BEWEGUNG\n\n    flying -= 0.03;\n\n    let yoff = flying;\n\n    for(let y = 0; y < gridCount; y++){\n\n      let xoff = 0;\n\n      for(let x = 0; x < gridCount; x++){\n\n        terrain[x][y] = p.map(\n\n          p.noise(\n            xoff,\n            yoff\n          ),\n\n          0,\n          1,\n\n          -120,\n          120\n\n        );\n\n        xoff += 0.12;\n\n      }\n\n      yoff += 0.12;\n\n    }\n\n    \/\/ BACKGROUND\n\n    p.background(0);\n\n    \/\/ LINIEN\n\n    p.stroke(255);\n\n    p.strokeWeight(2.2);\n\n    \/\/ ZENTRIERUNG\n\n    p.translate(\n      -size \/ 2,\n      -size \/ 2\n    );\n\n    \/\/ TERRAIN\n\n    for(let y = 0; y < gridCount - 1; y++){\n\n      p.beginShape(p.TRIANGLE_STRIP);\n\n      for(let x = 0; x < gridCount; x++){\n\n        p.vertex(\n          x * scl,\n          y * scl,\n          terrain[x][y]\n        );\n\n        p.vertex(\n          x * scl,\n          (y + 1) * scl,\n          terrain[x][y + 1]\n        );\n\n      }\n\n      p.endShape();\n\n    }\n\n  };\n\n  p.windowResized = function(){\n\n    let s = Math.min(\n      window.innerWidth,\n      900\n    );\n\n    p.resizeCanvas(s,s);\n\n  };\n\n});\n\n})();\n\n<\/script><\/p>\n<style>\n<p>#terrain-holder-16{<\/p>\n<p>  width:100%;<\/p>\n<p>  background:black;<\/p>\n<p>  display:flex;\n  justify-content:center;\n  align-items:center;<\/p>\n<p>  overflow:hidden;<\/p>\n<p>}<\/p>\n<p>#terrain-holder-16 canvas{<\/p>\n<p>  display:block;<\/p>\n<p>  width:100% !important;\n  height:auto !important;<\/p>\n<p>  aspect-ratio:1\/1;<\/p>\n<p>}<\/p>\n<\/style>\n<\/div>\n<hr>\n<div>\n<div id=\"terrain-holder\"><\/div>\n<p><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/1.4.2\/p5.min.js\"><\/script><\/p>\n<p><script><\/p>\n<p>new p5(function(p){<\/p>\n<p>  let img;<\/p>\n<p>  const imgUrl =\n  \"https:\/\/steve.one\/wp-content\/uploads\/2026\/05\/Black_Mouse_Pattern-2-scaled.jpg\";<\/p>\n<p>  const size = 900;<\/p>\n<p>  const lineSpacing = 14;\n  const waveHeight = 18;<\/p>\n<p>  let t = 0;<\/p>\n<p>  p.preload = function(){<\/p>\n<p>    img = p.loadImage(imgUrl);<\/p>\n<p>  };<\/p>\n<p>  p.setup = function(){<\/p>\n<p>    let s = Math.min(\n      window.innerWidth,\n      window.innerHeight\n    );<\/p>\n<p>    let canvas = p.createCanvas(s, s);<\/p>\n<p>    canvas.parent(\"terrain-holder\");<\/p>\n<p>    img.resize(size, size);<\/p>\n<p>    img.loadPixels();<\/p>\n<p>    p.noFill();<\/p>\n<p>  };<\/p>\n<p>  p.draw = function(){<\/p>\n<p>    p.background(0);<\/p>\n<p>    p.translate(\n      p.width\/2 - size\/2,\n      p.height\/2 - size\/2\n    );<\/p>\n<p>    p.stroke(255);\n    p.strokeWeight(4);<\/p>\n<p>    \/\/ WELLENLINIEN<\/p>\n<p>    for(let y = 0; y < size; y += lineSpacing){\n\n      p.beginShape();\n\n      for(let x = 0; x < size; x += 4){\n\n        \/\/ WELLENBEWEGUNG\n\n        let wave =\n          p.sin(x * 0.02 + t + y * 0.03)\n          * waveHeight;\n\n        \/\/ BILDPIXEL LESEN\n\n        let ix = Math.floor(x);\n        let iy = Math.floor(y);\n\n        let index =\n          (ix + iy * img.width) * 4;\n\n        let brightness =\n          img.pixels[index];\n\n        \/\/ MAUS ALS AUSSCHNITT\n\n        \/\/ WEISS = LINIE SICHTBAR\n        \/\/ SCHWARZ = L\u00dcCKE\n\n        if(brightness > 127){<\/p>\n<p>          p.vertex(\n            x,\n            y + wave\n          );<\/p>\n<p>        } else {<\/p>\n<p>          p.endShape();<\/p>\n<p>          p.beginShape();<\/p>\n<p>        }<\/p>\n<p>      }<\/p>\n<p>      p.endShape();<\/p>\n<p>    }<\/p>\n<p>    t += 0.04;<\/p>\n<p>  };<\/p>\n<p>  p.windowResized = function(){<\/p>\n<p>    let s = Math.min(\n      window.innerWidth,\n      window.innerHeight\n    );<\/p>\n<p>    p.resizeCanvas(s, s);<\/p>\n<p>  };<\/p>\n<p>});<\/p>\n<p><\/script><\/p>\n<style>\n<p>#terrain-holder{<\/p>\n<p>  width:100%;\n  background:#000;<\/p>\n<p>  display:flex;\n  justify-content:center;\n  align-items:center;<\/p>\n<p>  overflow:hidden;<\/p>\n<p>}<\/p>\n<p>#terrain-holder canvas{<\/p>\n<p>  display:block;\n  width:100% !important;\n  height:auto !important;\n  aspect-ratio:1\/1;<\/p>\n<p>}<\/p>\n<\/style>\n<\/div>\n<hr>\n<div>\n<div id=\"terrain-holder-cgpt6\"><\/div>\n<p><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/1.4.2\/p5.min.js\"><\/script><\/p>\n<p><script><\/p>\n<p>(function(){<\/p>\n<p>new p5(function(p){<\/p>\n<p>  let img;<\/p>\n<p>  const imgUrl =\n  \"https:\/\/steve.one\/wp-content\/uploads\/2026\/05\/Space_Mouse_CGPT6.jpg\";<\/p>\n<p>  const size = 820;<\/p>\n<p>  const spacing = 7;\n  const waveHeight = 12;<\/p>\n<p>  let time = 0;<\/p>\n<p>  p.preload = function(){<\/p>\n<p>    img = p.loadImage(imgUrl);<\/p>\n<p>  };<\/p>\n<p>  p.setup = function(){<\/p>\n<p>    let s = Math.min(\n      window.innerWidth,\n      window.innerHeight\n    );<\/p>\n<p>    let canvas = p.createCanvas(s, s);<\/p>\n<p>    canvas.parent(\n      \"terrain-holder-cgpt6\"\n    );<\/p>\n<p>    img.resize(size, size);<\/p>\n<p>    p.noFill();<\/p>\n<p>    p.strokeWeight(5);<\/p>\n<p>    p.strokeCap(p.ROUND);<\/p>\n<p>    p.strokeJoin(p.ROUND);<\/p>\n<p>  };<\/p>\n<p>  p.draw = function(){<\/p>\n<p>    p.background(0);<\/p>\n<p>    p.push();<\/p>\n<p>    p.translate(\n      p.width\/2 - size\/2,\n      p.height\/2 - size\/2\n    );<\/p>\n<p>    \/\/ WELLENLINIEN<\/p>\n<p>    for(let y = 0; y < size; y += spacing){\n\n      let drawing = false;\n\n      for(let x = 0; x < size; x += 2){\n\n        \/\/ PIXELFARBE AUSLESEN\n\n        let c = img.get(x,y);\n\n        let r = c[0];\n        let g = c[1];\n        let b = c[2];\n\n        \/\/ SCHWARZ NICHT ZEICHNEN\n\n        let brightness =\n          (r + g + b) \/ 3;\n\n        let visible =\n          brightness > 30;<\/p>\n<p>        \/\/ ORGANISCHE WELLEN<\/p>\n<p>        let wave =<\/p>\n<p>          p.sin(\n            x * 0.02 +\n            time +\n            y * 0.018\n          ) * waveHeight<\/p>\n<p>          +<\/p>\n<p>          p.sin(\n            x * 0.05 +\n            time * 1.3\n          ) * 3;<\/p>\n<p>        if(visible){<\/p>\n<p>          if(!drawing){<\/p>\n<p>            p.beginShape();<\/p>\n<p>            drawing = true;<\/p>\n<p>          }<\/p>\n<p>          \/\/ PIXELFARBEN<\/p>\n<p>          p.stroke(r,g,b);<\/p>\n<p>          p.vertex(\n            x,\n            y + wave\n          );<\/p>\n<p>        } else {<\/p>\n<p>          if(drawing){<\/p>\n<p>            p.endShape();<\/p>\n<p>            drawing = false;<\/p>\n<p>          }<\/p>\n<p>        }<\/p>\n<p>      }<\/p>\n<p>      if(drawing){<\/p>\n<p>        p.endShape();<\/p>\n<p>      }<\/p>\n<p>    }<\/p>\n<p>    p.pop();<\/p>\n<p>    time += 0.04;<\/p>\n<p>  };<\/p>\n<p>  p.windowResized = function(){<\/p>\n<p>    let s = Math.min(\n      window.innerWidth,\n      window.innerHeight\n    );<\/p>\n<p>    p.resizeCanvas(s, s);<\/p>\n<p>  };<\/p>\n<p>});<\/p>\n<p>})();<\/p>\n<p><\/script><\/p>\n<style>\n<p>#terrain-holder-cgpt6{<\/p>\n<p>  width:100%;<\/p>\n<p>  background:#000;<\/p>\n<p>  display:flex;\n  justify-content:center;\n  align-items:center;<\/p>\n<p>  overflow:hidden;<\/p>\n<p>}<\/p>\n<p>#terrain-holder-cgpt6 canvas{<\/p>\n<p>  display:block;<\/p>\n<p>  width:100% !important;\n  height:auto !important;<\/p>\n<p>  aspect-ratio:1\/1;<\/p>\n<p>}<\/p>\n<\/style>\n<\/div>\n<p><!--more--><br \/>\n<!-- {\"type\":\"layout\",\"children\":[{\"type\":\"section\",\"props\":{\"animation\":\"slide-bottom-small\",\"header_transparent_noplaceholder\":false,\"image_position\":\"center-center\",\"padding_bottom\":\"none\",\"padding_top\":\"large\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"About a Mouse\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"medium\",\"margin_top\":\"medium\",\"text_align\":\"center\",\"title_element\":\"h1\",\"title_style\":\"heading-medium\"}},{\"type\":\"text\",\"props\":{\"block_align\":\"center\",\"column_breakpoint\":\"m\",\"content\":\"Vom Pixel zum Prozess <br \/> Die algorithmische Reanimation einer digitalen Figur<br \/><\/br>\\n<br \/>\n\n<p style=\\\"font-size: 14px;\\\">Ausgangspunkt der Arbeit ist eine statische, reduzierte Pixelmaus \u2014 ein digitales Objekt ohne Eigenbewegung, aufgebaut aus klar definierten Quadraten innerhalb eines orthogonalen Rasters. Durch schrittweise Eingriffe in den Code wird dieses starre Zeichen transformiert: Das urspr\u00fcnglich unbewegliche Pixel-Icon wird in ein prozedurales System \u00fcberf\u00fchrt und beginnt, sich innerhalb eines generativen Wireframe-Meshs zu verformen.\\n<br \/><\/br>\\nDie Arbeit nutzt ein deformiertes Grid beziehungsweise ein animiertes Mesh, dessen Bewegung \u00fcber Perlin Noise erzeugt wird \u2014 ein Verfahren aus der Computergrafik zur Simulation organischer Dynamiken. Dadurch entsteht eine kontinuierlich oszillierende Oberfl\u00e4che zwischen Ordnung und Instabilit\u00e4t. Die Maus bleibt formal bestehen, wird jedoch gleichzeitig durch die Bewegung des Systems permanent destabilisiert und neu berechnet.\\n<br \/><\/br>\\nEntscheidend ist dabei nicht nur die Animation selbst, sondern der Prozess der sukzessiven \u00dcbersetzung: von der statischen Vorlage \u00fcber die Zerlegung in Rasterinformationen bis hin zur algorithmischen Reorganisation durch Code. Das Bild wird nicht einfach animiert, sondern in eine zeitbasierte Struktur \u00fcberf\u00fchrt. Die Pixel werden zu Datenpunkten eines lebendigen Systems.\\n<br \/><\/br>\\nDie Arbeit bewegt sich damit zwischen generativer Kunst, fr\u00fcher CGI-\u00c4sthetik und digitaler Skulptur. Digitale Artefakte, Simulation und Popkultur verschmelzen zu einer Bildsprache, die gleichzeitig technisch und organisch wirkt. Die reduzierte Formsprache der Maus bleibt dabei bewusst roh und niedrig aufgel\u00f6st \u2014 wie ein Relikt fr\u00fcher Bildschirmkulturen, das innerhalb eines fluiden digitalen Raums reaktiviert wird.\\n<br \/><\/br>\\nDie eigentliche Transformation liegt somit weniger im Motiv als im Verhalten des Motivs: Aus einem statischen Symbol wird ein performativer Zustand. Die Maus existiert nicht mehr als festes Bild, sondern als kontinuierliche Berechnung.<br \/>\\n<br \/><\/br>&#10024;\\n\n\n<p style=\\\"font-size: 18px;\\\">Heute erwecken wir Analoges durch Code zum Leben.<br \/>\\nMorgen wird KI vielleicht Dinge erschaffen, die wir nicht mehr von Leben unterscheiden k\u00f6nnen.<br \/>\\nVielleicht besteht die Aufgabe der Kunst darin, genau diesen Moment zu beobachten.<\/p>\n\n\\n<\/p>\n\n\\n\",\"margin_bottom\":\"\",\"margin_top\":\"\",\"maxwidth\":\"2xlarge\",\"text_align\":\"center\",\"text_style\":\"large\"}}]}]}],\"name\":\"Hero\",\"modified\":\"2021-08-06T11:26:41.846Z\"},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"\\n\n\n<div id=\\\"terrain-holder-16\\\"><\/div>\n\n\\n\\n<script src=\\\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/1.4.2\/p5.min.js\\\"><\/script>\\n\\n<script>\\n\\n(function(){\\n\\nnew p5(function(p){\\n\\n  \/\/ EXAKT 16 x 16\\n\\n  const gridCount = 16;\\n\\n  \/\/ QUADRATGR\u00d6SSE\\n\\n  const scl = 40;\\n\\n  \/\/ GESAMTFL\u00c4CHE\\n\\n  const size = gridCount * scl;\\n\\n  let terrain = [];\\n\\n  let flying = 0;\\n\\n  p.setup = function(){\\n\\n    let canvasSize = Math.min(\\n      window.innerWidth,\\n      900\\n    );\\n\\n    let canvas = p.createCanvas(\\n      canvasSize,\\n      canvasSize,\\n      p.WEBGL\\n    );\\n\\n    canvas.parent(\\n      \\\"terrain-holder-16\\\"\\n    );\\n\\n    \/\/ ARRAY\\n\\n    for(let x = 0; x < gridCount; x++){\\n\\n      terrain[x] = [];\\n\\n      for(let y = 0; y < gridCount; y++){\\n\\n        terrain[x][y] = 0;\\n\\n      }\\n\\n    }\\n\\n    p.pixelDensity(2);\\n\\n    p.noFill();\\n\\n  };\\n\\n  p.draw = function(){\\n\\n    \/\/ ST\u00c4RKERE BEWEGUNG\\n\\n    flying -= 0.03;\\n\\n    let yoff = flying;\\n\\n    for(let y = 0; y < gridCount; y++){\\n\\n      let xoff = 0;\\n\\n      for(let x = 0; x < gridCount; x++){\\n\\n        terrain[x][y] = p.map(\\n\\n          p.noise(\\n            xoff,\\n            yoff\\n          ),\\n\\n          0,\\n          1,\\n\\n          -120,\\n          120\\n\\n        );\\n\\n        xoff += 0.12;\\n\\n      }\\n\\n      yoff += 0.12;\\n\\n    }\\n\\n    \/\/ BACKGROUND\\n\\n    p.background(0);\\n\\n    \/\/ LINIEN\\n\\n    p.stroke(255);\\n\\n    p.strokeWeight(2.2);\\n\\n    \/\/ ZENTRIERUNG\\n\\n    p.translate(\\n      -size \/ 2,\\n      -size \/ 2\\n    );\\n\\n    \/\/ TERRAIN\\n\\n    for(let y = 0; y < gridCount - 1; y++){\\n\\n      p.beginShape(p.TRIANGLE_STRIP);\\n\\n      for(let x = 0; x < gridCount; x++){\\n\\n        p.vertex(\\n          x * scl,\\n          y * scl,\\n          terrain[x][y]\\n        );\\n\\n        p.vertex(\\n          x * scl,\\n          (y + 1) * scl,\\n          terrain[x][y + 1]\\n        );\\n\\n      }\\n\\n      p.endShape();\\n\\n    }\\n\\n  };\\n\\n  p.windowResized = function(){\\n\\n    let s = Math.min(\\n      window.innerWidth,\\n      900\\n    );\\n\\n    p.resizeCanvas(s,s);\\n\\n  };\\n\\n});\\n\\n})();\\n\\n<\/script>\\n\\n\n\n<style>\\n\\n#terrain-holder-16{\\n\\n  width:100%;\\n\\n  background:black;\\n\\n  display:flex;\\n  justify-content:center;\\n  align-items:center;\\n\\n  overflow:hidden;\\n\\n}\\n\\n#terrain-holder-16 canvas{\\n\\n  display:block;\\n\\n  width:100% !important;\\n  height:auto !important;\\n\\n  aspect-ratio:1\/1;\\n\\n}\\n\\n<\/style>\n\n\"}}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"divider\",\"props\":{\"divider_element\":\"hr\"}}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"\\n\n\n<div id=\\\"terrain-holder\\\"><\/div>\n\n\\n\\n<script src=\\\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/1.4.2\/p5.min.js\\\"><\/script>\\n\\n<script>\\n\\nnew p5(function(p){\\n\\n  let img;\\n\\n  const imgUrl =\\n  \\\"https:\/\/steve.one\/wp-content\/uploads\/2026\/05\/Black_Mouse_Pattern-2-scaled.jpg\\\";\\n\\n  const size = 900;\\n\\n  const lineSpacing = 14;\\n  const waveHeight = 18;\\n\\n  let t = 0;\\n\\n  p.preload = function(){\\n\\n    img = p.loadImage(imgUrl);\\n\\n  };\\n\\n  p.setup = function(){\\n\\n    let s = Math.min(\\n      window.innerWidth,\\n      window.innerHeight\\n    );\\n\\n    let canvas = p.createCanvas(s, s);\\n\\n    canvas.parent(\\\"terrain-holder\\\");\\n\\n    img.resize(size, size);\\n\\n    img.loadPixels();\\n\\n    p.noFill();\\n\\n  };\\n\\n  p.draw = function(){\\n\\n    p.background(0);\\n\\n    p.translate(\\n      p.width\/2 - size\/2,\\n      p.height\/2 - size\/2\\n    );\\n\\n    p.stroke(255);\\n    p.strokeWeight(4);\\n\\n    \/\/ WELLENLINIEN\\n\\n    for(let y = 0; y < size; y += lineSpacing){\\n\\n      p.beginShape();\\n\\n      for(let x = 0; x < size; x += 4){\\n\\n        \/\/ WELLENBEWEGUNG\\n\\n        let wave =\\n          p.sin(x * 0.02 + t + y * 0.03)\\n          * waveHeight;\\n\\n        \/\/ BILDPIXEL LESEN\\n\\n        let ix = Math.floor(x);\\n        let iy = Math.floor(y);\\n\\n        let index =\\n          (ix + iy * img.width) * 4;\\n\\n        let brightness =\\n          img.pixels[index];\\n\\n        \/\/ MAUS ALS AUSSCHNITT\\n\\n        \/\/ WEISS = LINIE SICHTBAR\\n        \/\/ SCHWARZ = L\u00dcCKE\\n\\n        if(brightness > 127){\\n\\n          p.vertex(\\n            x,\\n            y + wave\\n          );\\n\\n        } else {\\n\\n          p.endShape();\\n\\n          p.beginShape();\\n\\n        }\\n\\n      }\\n\\n      p.endShape();\\n\\n    }\\n\\n    t += 0.04;\\n\\n  };\\n\\n  p.windowResized = function(){\\n\\n    let s = Math.min(\\n      window.innerWidth,\\n      window.innerHeight\\n    );\\n\\n    p.resizeCanvas(s, s);\\n\\n  };\\n\\n});\\n\\n<\/script>\\n\\n\n\n<style>\\n\\n#terrain-holder{\\n\\n  width:100%;\\n  background:#000;\\n\\n  display:flex;\\n  justify-content:center;\\n  align-items:center;\\n\\n  overflow:hidden;\\n\\n}\\n\\n#terrain-holder canvas{\\n\\n  display:block;\\n  width:100% !important;\\n  height:auto !important;\\n  aspect-ratio:1\/1;\\n\\n}\\n\\n<\/style>\n\n\"}}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"divider\",\"props\":{\"divider_element\":\"hr\"}}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"\\n\n\n<div id=\\\"terrain-holder-01\\\"><\/div>\n\n\\n\\n<script src=\\\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/1.4.2\/p5.min.js\\\"><\/script>\\n\\n<script>\\n\\n(function(){\\n\\nnew p5(function(p){\\n\\n  let img;\\n\\n  const imgUrl =\\n  \\\"https:\/\/steve.one\/wp-content\/uploads\/2026\/05\/Black_Mouse_Pattern-4-scaled.jpg\\\";\\n\\n  const size = 900;\\n\\n  const lineSpacing = 16;\\n  const waveHeight = 20;\\n\\n  let t = 0;\\n\\n  p.preload = function(){\\n\\n    img = p.loadImage(imgUrl);\\n\\n  };\\n\\n  p.setup = function(){\\n\\n    let s = Math.min(\\n      window.innerWidth,\\n      window.innerHeight\\n    );\\n\\n    let canvas = p.createCanvas(s, s);\\n\\n    canvas.parent(\\\"terrain-holder-01\\\");\\n\\n    img.resize(size, size);\\n\\n    img.loadPixels();\\n\\n    p.noFill();\\n\\n    p.stroke(255);\\n\\n    p.strokeWeight(3);\\n\\n  };\\n\\n  p.draw = function(){\\n\\n    p.background(0);\\n\\n    p.translate(\\n      p.width\/2 - size\/2,\\n      p.height\/2 - size\/2\\n    );\\n\\n    for(let y = 0; y < size; y += lineSpacing){\\n\\n      p.beginShape();\\n\\n      for(let x = 0; x < size; x += 4){\\n\\n        let wave =\\n\\n          p.sin(x * 0.018 + t + y * 0.025)\\n          * waveHeight\\n\\n          +\\n\\n          p.sin(x * 0.04 + t * 1.5)\\n          * 6;\\n\\n        let ix = Math.floor(x);\\n        let iy = Math.floor(y);\\n\\n        let index =\\n          (ix + iy * img.width) * 4;\\n\\n        let brightness =\\n          img.pixels[index];\\n\\n        if(brightness > 120){\\n\\n          p.vertex(\\n            x,\\n            y + wave\\n          );\\n\\n        } else {\\n\\n          p.endShape();\\n\\n          p.beginShape();\\n\\n        }\\n\\n      }\\n\\n      p.endShape();\\n\\n    }\\n\\n    t += 0.045;\\n\\n  };\\n\\n  p.windowResized = function(){\\n\\n    let s = Math.min(\\n      window.innerWidth,\\n      window.innerHeight\\n    );\\n\\n    p.resizeCanvas(s, s);\\n\\n  };\\n\\n});\\n\\n})();\\n\\n<\/script>\\n\\n\n\n<style>\\n\\n#terrain-holder-01{\\n\\n  width:100%;\\n  background:#000;\\n\\n  display:flex;\\n  justify-content:center;\\n  align-items:center;\\n\\n  overflow:hidden;\\n\\n}\\n\\n#terrain-holder-01 canvas{\\n\\n  display:block;\\n\\n  width:100% !important;\\n  height:auto !important;\\n\\n  aspect-ratio:1\/1;\\n\\n}\\n\\n<\/style>\n\n\",\"status\":\"disabled\"}}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"\\n\n\n<div id=\\\"terrain-holder-space-black\\\"><\/div>\n\n\\n\\n<script src=\\\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/1.4.2\/p5.min.js\\\"><\/script>\\n\\n<script>\\n\\n(function(){\\n\\nnew p5(function(p){\\n\\n  let img;\\n\\n  const imgUrl =\\n  \\\"https:\/\/steve.one\/wp-content\/uploads\/2026\/05\/Space_Mouse_CGPT3.jpg\\\";\\n\\n  const size = 820;\\n\\n  const spacing = 9;\\n  const waveHeight = 18;\\n\\n  let t = 0;\\n\\n  p.preload = function(){\\n\\n    img = p.loadImage(imgUrl);\\n\\n  };\\n\\n  p.setup = function(){\\n\\n    let s = Math.min(\\n      window.innerWidth,\\n      window.innerHeight\\n    );\\n\\n    let canvas = p.createCanvas(s, s);\\n\\n    canvas.parent(\\n      \\\"terrain-holder-space-black\\\"\\n    );\\n\\n    img.resize(size, size);\\n\\n    p.noFill();\\n\\n    p.strokeWeight(4);\\n\\n    p.strokeCap(p.ROUND);\\n\\n  };\\n\\n  p.draw = function(){\\n\\n    p.background(0);\\n\\n    p.push();\\n\\n    p.translate(\\n      p.width\/2 - size\/2,\\n      p.height\/2 - size\/2\\n    );\\n\\n    \/\/ HORIZONTALE WELLEN\\n\\n    for(let y = 0; y < size; y += spacing){\\n\\n      let drawing = false;\\n\\n      for(let x = 0; x < size; x += 3){\\n\\n        \/\/ PIXELFARBE AUS BILD\\n\\n        let c = img.get(x,y);\\n\\n        let r = c[0];\\n        let g = c[1];\\n        let b = c[2];\\n\\n        \/\/ SCHWARZE BEREICHE NICHT ZEICHNEN\\n\\n        let brightness =\\n          (r + g + b) \/ 3;\\n\\n        let visible =\\n          brightness > 25;\\n\\n        \/\/ WELLENFORM\\n\\n        let wave =\\n\\n          p.sin(\\n            x * 0.02 +\\n            t +\\n            y * 0.025\\n          ) * waveHeight\\n\\n          +\\n\\n          p.sin(\\n            x * 0.045 +\\n            t * 1.5\\n          ) * 4;\\n\\n        if(visible){\\n\\n          \/\/ NEUE LINIE STARTEN\\n\\n          if(!drawing){\\n\\n            p.beginShape();\\n\\n            drawing = true;\\n\\n          }\\n\\n          \/\/ ORIGINALE FARBEN\\n\\n          p.stroke(r,g,b);\\n\\n          p.vertex(\\n            x,\\n            y + wave\\n          );\\n\\n        } else {\\n\\n          \/\/ LINIE BEENDEN\\n\\n          if(drawing){\\n\\n            p.endShape();\\n\\n            drawing = false;\\n\\n          }\\n\\n        }\\n\\n      }\\n\\n      if(drawing){\\n\\n        p.endShape();\\n\\n      }\\n\\n    }\\n\\n    p.pop();\\n\\n    t += 0.045;\\n\\n  };\\n\\n  p.windowResized = function(){\\n\\n    let s = Math.min(\\n      window.innerWidth,\\n      window.innerHeight\\n    );\\n\\n    p.resizeCanvas(s, s);\\n\\n  };\\n\\n});\\n\\n})();\\n\\n<\/script>\\n\\n\n\n<style>\\n\\n#terrain-holder-space-black{\\n\\n  width:100%;\\n\\n  background:#000;\\n\\n  display:flex;\\n  justify-content:center;\\n  align-items:center;\\n\\n  overflow:hidden;\\n\\n}\\n\\n#terrain-holder-space-black canvas{\\n\\n  display:block;\\n\\n  width:100% !important;\\n  height:auto !important;\\n\\n  aspect-ratio:1\/1;\\n\\n}\\n\\n<\/style>\n\n\",\"status\":\"disabled\"}}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"\\n\n\n<div id=\\\"terrain-holder-cgpt6\\\"><\/div>\n\n\\n\\n<script src=\\\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/1.4.2\/p5.min.js\\\"><\/script>\\n\\n<script>\\n\\n(function(){\\n\\nnew p5(function(p){\\n\\n  let img;\\n\\n  const imgUrl =\\n  \\\"https:\/\/steve.one\/wp-content\/uploads\/2026\/05\/Space_Mouse_CGPT6.jpg\\\";\\n\\n  const size = 820;\\n\\n  const spacing = 7;\\n  const waveHeight = 12;\\n\\n  let time = 0;\\n\\n  p.preload = function(){\\n\\n    img = p.loadImage(imgUrl);\\n\\n  };\\n\\n  p.setup = function(){\\n\\n    let s = Math.min(\\n      window.innerWidth,\\n      window.innerHeight\\n    );\\n\\n    let canvas = p.createCanvas(s, s);\\n\\n    canvas.parent(\\n      \\\"terrain-holder-cgpt6\\\"\\n    );\\n\\n    img.resize(size, size);\\n\\n    p.noFill();\\n\\n    p.strokeWeight(5);\\n\\n    p.strokeCap(p.ROUND);\\n\\n    p.strokeJoin(p.ROUND);\\n\\n  };\\n\\n  p.draw = function(){\\n\\n    p.background(0);\\n\\n    p.push();\\n\\n    p.translate(\\n      p.width\/2 - size\/2,\\n      p.height\/2 - size\/2\\n    );\\n\\n    \/\/ WELLENLINIEN\\n\\n    for(let y = 0; y < size; y += spacing){\\n\\n      let drawing = false;\\n\\n      for(let x = 0; x < size; x += 2){\\n\\n        \/\/ PIXELFARBE AUSLESEN\\n\\n        let c = img.get(x,y);\\n\\n        let r = c[0];\\n        let g = c[1];\\n        let b = c[2];\\n\\n        \/\/ SCHWARZ NICHT ZEICHNEN\\n\\n        let brightness =\\n          (r + g + b) \/ 3;\\n\\n        let visible =\\n          brightness > 30;\\n\\n        \/\/ ORGANISCHE WELLEN\\n\\n        let wave =\\n\\n          p.sin(\\n            x * 0.02 +\\n            time +\\n            y * 0.018\\n          ) * waveHeight\\n\\n          +\\n\\n          p.sin(\\n            x * 0.05 +\\n            time * 1.3\\n          ) * 3;\\n\\n        if(visible){\\n\\n          if(!drawing){\\n\\n            p.beginShape();\\n\\n            drawing = true;\\n\\n          }\\n\\n          \/\/ PIXELFARBEN\\n\\n          p.stroke(r,g,b);\\n\\n          p.vertex(\\n            x,\\n            y + wave\\n          );\\n\\n        } else {\\n\\n          if(drawing){\\n\\n            p.endShape();\\n\\n            drawing = false;\\n\\n          }\\n\\n        }\\n\\n      }\\n\\n      if(drawing){\\n\\n        p.endShape();\\n\\n      }\\n\\n    }\\n\\n    p.pop();\\n\\n    time += 0.04;\\n\\n  };\\n\\n  p.windowResized = function(){\\n\\n    let s = Math.min(\\n      window.innerWidth,\\n      window.innerHeight\\n    );\\n\\n    p.resizeCanvas(s, s);\\n\\n  };\\n\\n});\\n\\n})();\\n\\n<\/script>\\n\\n\n\n<style>\\n\\n#terrain-holder-cgpt6{\\n\\n  width:100%;\\n\\n  background:#000;\\n\\n  display:flex;\\n  justify-content:center;\\n  align-items:center;\\n\\n  overflow:hidden;\\n\\n}\\n\\n#terrain-holder-cgpt6 canvas{\\n\\n  display:block;\\n\\n  width:100% !important;\\n  height:auto !important;\\n\\n  aspect-ratio:1\/1;\\n\\n}\\n\\n<\/style>\n\n\"}}]}]}]}],\"version\":\"5.0.34\"} --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>About a Mouse Vom Pixel zum Prozess Die algorithmische Reanimation einer digitalen Figur Ausgangspunkt der Arbeit ist eine statische, reduzierte Pixelmaus \u2014 ein digitales Objekt ohne Eigenbewegung, aufgebaut aus klar definierten Quadraten innerhalb eines orthogonalen Rasters. Durch schrittweise Eingriffe in den Code wird dieses starre Zeichen transformiert: Das urspr\u00fcnglich unbewegliche Pixel-Icon wird in ein prozedurales [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1956","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/steve.one\/index.php?rest_route=\/wp\/v2\/posts\/1956","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/steve.one\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/steve.one\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/steve.one\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/steve.one\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1956"}],"version-history":[{"count":32,"href":"https:\/\/steve.one\/index.php?rest_route=\/wp\/v2\/posts\/1956\/revisions"}],"predecessor-version":[{"id":2770,"href":"https:\/\/steve.one\/index.php?rest_route=\/wp\/v2\/posts\/1956\/revisions\/2770"}],"wp:attachment":[{"href":"https:\/\/steve.one\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/steve.one\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/steve.one\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}