{"id":1007,"date":"2026-08-06T12:12:22","date_gmt":"2026-08-06T10:12:22","guid":{"rendered":"https:\/\/iconoclaste.net\/blog\/?p=1007"},"modified":"2026-08-07T05:04:16","modified_gmt":"2026-08-07T03:04:16","slug":"bioborg-mars-2009","status":"publish","type":"post","link":"https:\/\/iconoclaste.net\/blog\/2026\/08\/06\/bioborg-mars-2009\/","title":{"rendered":"bioborg \/\/ MARS 2005"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Voici la page d&rsquo;accueil de fuzzout.net de mars 2005.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div id=\"iconoclaste-bioborg\">\n  <img fetchpriority=\"high\" id=\"bioborg-img\"\n       src=\"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/bioborg_a1.jpg\"\n       width=\"720\"\n       height=\"254\"\n       loading=\"eager\"\n       decoding=\"async\">\n  <audio id=\"bioborg-audio\"\n         src=\"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/batdecoeur.mp3\"\n         preload=\"auto\"\n         loop\n         playsinline><\/audio>\n<\/div>\n\n<style>\n#iconoclaste-bioborg{position:relative;max-width:720px;width:100%;margin:0 auto 1.5em;line-height:0;background:#000;border:1px solid #000;text-align:center;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}\n#iconoclaste-bioborg img{display:block;width:100%;height:auto;vertical-align:top}\n#iconoclaste-bioborg audio{display:none}\n#iconoclaste-bioborg.phase-a,#iconoclaste-bioborg.phase-b,#iconoclaste-bioborg.phase-c,#iconoclaste-bioborg.phase-d{cursor:pointer}\n#iconoclaste-bioborg.phase-e{cursor:default}\n<\/style>\n\n<script>\n(function(){\n\"use strict\";\nif(window.__iconoclasteBioborgInit)return;\nwindow.__iconoclasteBioborgInit=true;\n\nvar B=\"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/bioborg_\";\nvar A1=B+\"a1.jpg\",A2=B+\"a2.jpg\",A3=B+\"a3.jpg\";\nvar B1=B+\"b1.jpg\",B2=B+\"b2.jpg\",B3=B+\"b3.jpg\";\nvar C1=B+\"c1.jpg\",C2=B+\"c2.jpg\",C3=B+\"c3.jpg\",C4=B+\"c4.jpg\",C5=B+\"c5.jpg\",C6=B+\"c6.jpg\",C7=B+\"c7.jpg\";\nvar D1=B+\"d1.jpg\",D2=B+\"d2.jpg\",D3=B+\"d3.jpg\",D4=B+\"d4.jpg\",D5=B+\"d5.jpg\",D6=B+\"d6.jpg\",D7=B+\"d7.jpg\",D8=B+\"d8.jpg\",D9=B+\"d9.jpg\";\nvar E1=B+\"e1.jpg\",E2=B+\"e2.jpg\",E3=B+\"e3.jpg\",E4=B+\"e4.jpg\",E5=B+\"e5.jpg\",E6=B+\"e6.jpg\",E7=B+\"e7.jpg\";\n\nvar S=40,timer=null,cur=A1,phase=\"preload\",audio=null,wantAudio=false;\n\nfunction clearT(){if(timer){clearTimeout(timer);timer=null}}\nfunction frame(img,src){img.src=src;cur=src}\nfunction cls(c,n){c.classList.remove(\"phase-a\",\"phase-b\",\"phase-c\",\"phase-d\",\"phase-e\");c.classList.add(\"phase-\"+n)}\n\nfunction playAudio(){\n  if(!audio||!wantAudio)return;\n  audio.muted=false;\n  audio.volume=1;\n  if(audio.paused){\n    var p=audio.play();\n    if(p&&p.catch)p.catch(function(){});\n  }\n}\nfunction stopAudio(){\n  wantAudio=false;\n  if(!audio)return;\n  audio.pause();\n  try{audio.currentTime=0}catch(e){}\n}\n\nfunction init(){\n  var c=document.getElementById(\"iconoclaste-bioborg\");\n  var img=document.getElementById(\"bioborg-img\");\n  audio=document.getElementById(\"bioborg-audio\");\n  if(!c||!img)return;\n  try{if(audio)audio.load()}catch(e){}\n\n  var srcs=[A1,A2,A3,B1,B2,B3,C1,C2,C3,C4,C5,C6,C7,D1,D2,D3,D4,D5,D6,D7,D8,D9,E1,E2,E3,E4,E5,E6,E7];\n  var n=0;\n  srcs.forEach(function(s){\n    var p=new Image();\n    p.onload=p.onerror=function(){if(++n===srcs.length)startA(c,img)};\n    p.src=s;\n  });\n\n  c.addEventListener(\"mouseenter\",function(){\n    if(phase===\"a-loop\"||phase===\"a-intro\"){\n      wantAudio=true;\n      playAudio();\n    }\n  });\n  c.addEventListener(\"touchstart\",function(){\n    if(phase===\"a-loop\"||phase===\"a-intro\"){\n      wantAudio=true;\n      playAudio();\n    }\n  },{passive:true});\n\n  c.addEventListener(\"click\",function(){\n    if(phase===\"a-loop\"&&(cur===A2||cur===A3)){clearT();stopAudio();startB(c,img)}\n    else if(phase===\"b-loop\"&&(cur===B2||cur===B3)){clearT();startC(c,img)}\n    else if(phase===\"c-loop\"&&(cur===C5||cur===C6||cur===C7)){clearT();startD(c,img)}\n    else if(phase===\"d-loop\"&&(cur===D8||cur===D9)){clearT();startE(c,img)}\n  });\n}\n\nfunction startA(c,img){\n  phase=\"a-intro\";cls(c,\"a\");\n  timer=setTimeout(function(){\n    frame(img,A2);\n    timer=setTimeout(function(){\n      frame(img,A3);\n      timer=setTimeout(function(){loopA(img)},S);\n    },S);\n  },S);\n}\nfunction loopA(img){\n  phase=\"a-loop\";\n  var t=true;\n  (function l(){\n    frame(img,t?A2:A3);t=!t;\n    if(wantAudio&&audio&&audio.paused)playAudio();\n    timer=setTimeout(l,S);\n  })();\n}\n\nfunction startB(c,img){\n  phase=\"b-intro\";cls(c,\"b\");\n  frame(img,B1);\n  timer=setTimeout(function(){\n    frame(img,B2);\n    timer=setTimeout(function(){\n      frame(img,B3);\n      timer=setTimeout(function(){loopB(c,img)},S);\n    },S);\n  },S);\n}\nfunction loopB(c,img){\n  phase=\"b-loop\";cls(c,\"b\");\n  var t=true;\n  (function l(){frame(img,t?B2:B3);t=!t;timer=setTimeout(l,S)})();\n}\n\nfunction startC(c,img){\n  phase=\"c-intro\";cls(c,\"c\");\n  var seq=[C1,C2,C3,C4,C5,C6,C7],i=0;\n  (function n(){\n    if(i<seq.length){frame(img,seq[i++]);timer=setTimeout(n,S)}\n    else loopC(img);\n  })();\n}\nfunction loopC(img){\n  phase=\"c-loop\";\n  var f=[C5,C6,C7],i=0;\n  (function l(){frame(img,f[i]);i=(i+1)%3;timer=setTimeout(l,S)})();\n}\n\nfunction startD(c,img){\n  phase=\"d-intro\";cls(c,\"d\");\n  var seq=[D1,D2,D3,D4,D5,D6,D7,D8,D9],i=0;\n  (function n(){\n    if(i<seq.length){frame(img,seq[i++]);timer=setTimeout(n,S)}\n    else loopD(img);\n  })();\n}\nfunction loopD(img){\n  phase=\"d-loop\";\n  var t=true;\n  (function l(){frame(img,t?D8:D9);t=!t;timer=setTimeout(l,S)})();\n}\n\nfunction startE(c,img){\n  phase=\"e-intro\";cls(c,\"e\");\n  var seq=[E1,E2,E3,E4,E5,E6,E7],i=0;\n  (function n(){\n    if(i<seq.length){frame(img,seq[i++]);timer=setTimeout(n,S)}\n    else loopB(c,img);\n  })();\n}\n\nif(document.readyState===\"loading\")document.addEventListener(\"DOMContentLoaded\",init);\nelse init();\n})();\n<\/script>\n\n\n\n<div style=\"height:75px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">A l'\u00e9poque Adobe <mark style=\"background-color:#ff33ff\" class=\"has-inline-color has-white-color\">flash<\/mark>, permettait des animations fluides, imbriqu\u00e9es et assez complexes en actionscript. Cette transcription javascript rapide et facile op\u00e9r\u00e9e ici ne rend pas vraiment honneur \u00e0 la date mentionn\u00e9e ci-dessus o\u00f9 le webdesign en \u00e9tait \u00e0 ses heures les plus prestigieuses, mais donne une id\u00e9e de ce qu'\u00e9tait les <mark style=\"background-color:#ff33ff\" class=\"has-inline-color has-white-color\">ovnis graphiques<\/mark> que je faisais \u00e0 l'\u00e9poque.<br>Des trucs \u00e9tranges, furieux et compl\u00e8tement inutiles!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voici la page d&rsquo;accueil de fuzzout.net de mars 2005.<\/p>\n","protected":false},"author":1,"featured_media":1053,"comment_status":"closed","ping_status":"open","sticky":false,"template":"single-full-width.php","format":"standard","meta":{"footnotes":""},"categories":[269,31],"tags":[281,283,280,282],"class_list":["post-1007","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-experiences","category-fuzzout","tag-accueil","tag-androide","tag-inutile","tag-robot"],"_links":{"self":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/comments?post=1007"}],"version-history":[{"count":25,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1007\/revisions"}],"predecessor-version":[{"id":1088,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1007\/revisions\/1088"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/media\/1053"}],"wp:attachment":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/media?parent=1007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/categories?post=1007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/tags?post=1007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}