{"id":936,"date":"2025-08-10T11:30:04","date_gmt":"2025-08-10T11:30:04","guid":{"rendered":"https:\/\/llumdigital.com\/?page_id=936"},"modified":"2025-08-10T12:04:36","modified_gmt":"2025-08-10T12:04:36","slug":"terrain-de-jeu","status":"publish","type":"page","link":"https:\/\/llumdigital.com\/fr\/terrain-de-jeu\/","title":{"rendered":"PLAYGROUND"},"content":{"rendered":"

[et_pb_section fb_built=\u00bb1″ _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb width=\u00bb100%\u00bb max_width=\u00bb100%\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_code _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]Flow-Field Visualizer (Fullscreen + Audio)<\/title><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] --> :root { --bg:#07090c; --fg:#cfe8ff; }<!-- [et_pb_line_break_holder] --> html,body { margin:0; height:100%; background:var(--bg); color:var(--fg); font-family:system-ui; }<!-- [et_pb_line_break_holder] --> body,canvas { touch-action:none; -webkit-user-select:none; user-select:none; }<!-- [et_pb_line_break_holder] --> canvas { display:block; width:100vw; height:100vh; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> .ui {<!-- [et_pb_line_break_holder] --> position:fixed; left:12px; top:12px; display:flex; gap:8px; flex-wrap:wrap;<!-- [et_pb_line_break_holder] --> background:rgba(0,0,0,.55); backdrop-filter:blur(6px);<!-- [et_pb_line_break_holder] --> border:1px solid #1f2a38; color:var(--fg); border-radius:10px;<!-- [et_pb_line_break_holder] --> padding:8px; font-size:12px; z-index:20;<!-- [et_pb_line_break_holder] --> transition:opacity .35s, transform .35s;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .ui.hidden { opacity:0; pointer-events:none; transform:translateY(-20px); }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> .arrow {<!-- [et_pb_line_break_holder] --> position:fixed; left:10px; top:10px; width:20px; height:20px;<!-- [et_pb_line_break_holder] --> background:rgba(0,0,0,.65); color:var(--fg); border-radius:50%;<!-- [et_pb_line_break_holder] --> display:flex; align-items:center; justify-content:center;<!-- [et_pb_line_break_holder] --> font-size:14px; z-index:30; transition:opacity .25s;<!-- [et_pb_line_break_holder] --> opacity:0; pointer-events:none; \/* default hidden *\/<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .arrow.visible { opacity:.9; pointer-events:auto; cursor:pointer; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> .brand { position:fixed; right:12px; bottom:12px; opacity:.7; font-size:12px; pointer-events:none; z-index:5; }<!-- [et_pb_line_break_holder] --> button { cursor:pointer; }<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><\/head><!-- [et_pb_line_break_holder] --><body><!-- [et_pb_line_break_holder] --><canvas id=\"c\"><\/canvas><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"arrow\" id=\"arrow\">\u25bc<\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"ui\" id=\"controls\"><!-- [et_pb_line_break_holder] --> <button id=\"randomize\">Randomize<\/button><!-- [et_pb_line_break_holder] --> <button id=\"clear\">Clear<\/button><!-- [et_pb_line_break_holder] --> <button id=\"fs\">\u26f6 Fullscreen (F)<\/button><!-- [et_pb_line_break_holder] --> <button id=\"mic\">\ud83c\udfa4 Mic<\/button><!-- [et_pb_line_break_holder] --> <label>Particles <input id=\"count\" type=\"range\" min=\"500\" max=\"15000\" value=\"6000\"><\/label><!-- [et_pb_line_break_holder] --> <label>Trail <input id=\"trail\" type=\"range\" min=\"0\" max=\"0.25\" step=\"0.005\" value=\"0.05\"><\/label><!-- [et_pb_line_break_holder] --> <label>Speed <input id=\"speed\" type=\"range\" min=\"0.2\" max=\"4\" step=\"0.1\" value=\"1.2\"><\/label><!-- [et_pb_line_break_holder] --> <label>Scale <input id=\"scale\" type=\"range\" min=\"0.001\" max=\"0.02\" step=\"0.001\" value=\"0.008\"><\/label><!-- [et_pb_line_break_holder] --> <label>Color<!-- [et_pb_line_break_holder] --> <select id=\"palette\"><!-- [et_pb_line_break_holder] --><option value=\"neon\">Neon<\/option><!-- [et_pb_line_break_holder] --><option value=\"sunset\">Sunset<\/option><!-- [et_pb_line_break_holder] --><option value=\"ice\">Ice<\/option><!-- [et_pb_line_break_holder] --><option value=\"mono\">Mono<\/option><!-- [et_pb_line_break_holder] --> <\/select><!-- [et_pb_line_break_holder] --> <\/label><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"brand\">Mouse \/ 1-finger attract \u2022 2-finger repel \u2022 Wheel = intensity \u2022 Double-tap = pause<\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->(() => {<!-- [et_pb_line_break_holder] --> const canvas = document.getElementById('c');<!-- [et_pb_line_break_holder] --> const ctx = canvas.getContext('2d', { alpha:false });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> let W=0,H=0; const DPR=Math.min(devicePixelRatio||1,2);<!-- [et_pb_line_break_holder] --> let sliderN=6000, N=0, cap=10000;<!-- [et_pb_line_break_holder] --> const parts=[];<!-- [et_pb_line_break_holder] --> const opts={ trail:0.05, baseSpeed:1.2, scale:0.008, attract:1, palette:'neon', hueShift:0 };<!-- [et_pb_line_break_holder] --> let paused=false;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> \/\/ ----- Audio (mic) -----<!-- [et_pb_line_break_holder] --> let audioCtx=null, analyser=null, dataArr=null, bass=0;<!-- [et_pb_line_break_holder] --> async function enableMic(){<!-- [et_pb_line_break_holder] --> try{<!-- [et_pb_line_break_holder] --> audioCtx = new (window.AudioContext||window.webkitAudioContext)();<!-- [et_pb_line_break_holder] --> const stream = await navigator.mediaDevices.getUserMedia({audio:true});<!-- [et_pb_line_break_holder] --> const src = audioCtx.createMediaStreamSource(stream);<!-- [et_pb_line_break_holder] --> analyser = audioCtx.createAnalyser(); analyser.fftSize=1024; src.connect(analyser);<!-- [et_pb_line_break_holder] --> dataArr = new Uint8Array(analyser.frequencyBinCount);<!-- [et_pb_line_break_holder] --> document.getElementById('mic').textContent = '\ud83c\udfa4 Mic \u2713';<!-- [et_pb_line_break_holder] --> }catch(e){ alert('Mic error: '+e.message); }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> function readBass(){<!-- [et_pb_line_break_holder] --> if(!analyser) return 0;<!-- [et_pb_line_break_holder] --> analyser.getByteFrequencyData(dataArr);<!-- [et_pb_line_break_holder] --> let s=0; for(let i=1;i<14;i++) s+=dataArr[i];<!-- [et_pb_line_break_holder] --> return s\/(13*255);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> \/\/ ----- Resize -----<!-- [et_pb_line_break_holder] --> function resize(){<!-- [et_pb_line_break_holder] --> W=innerWidth; H=innerHeight;<!-- [et_pb_line_break_holder] --> canvas.width=W*DPR; canvas.height=H*DPR;<!-- [et_pb_line_break_holder] --> canvas.style.width=W+'px'; canvas.style.height=H+'px';<!-- [et_pb_line_break_holder] --> ctx.setTransform(DPR,0,0,DPR,0,0);<!-- [et_pb_line_break_holder] --> ctx.fillStyle='#07090c'; ctx.fillRect(0,0,W,H);<!-- [et_pb_line_break_holder] --> cap=Math.floor((W*H)\/1.5);<!-- [et_pb_line_break_holder] --> clamp();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> function clamp(){<!-- [et_pb_line_break_holder] --> const target=Math.min(sliderN, Math.max(500, Math.floor(cap\/DPR)));<!-- [et_pb_line_break_holder] --> if(target>N){ for(let i=N;i<target;i++) parts[i]=spawn(); }<!-- [et_pb_line_break_holder] --> else parts.length=target;<!-- [et_pb_line_break_holder] --> N=target;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> function spawn(){ return {x:Math.random()*W,y:Math.random()*H,vx:0,vy:0,life:(Math.random()*200+200)|0}; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> \/\/ ----- Noise -----<!-- [et_pb_line_break_holder] --> const lerp=(a,b,t)=>a+(b-a)*t;<!-- [et_pb_line_break_holder] --> const hash=(x,y)=>Math.sin((x*127.1+y*311.7))*43758.5453%1;<!-- [et_pb_line_break_holder] --> function noise2(x,y){<!-- [et_pb_line_break_holder] --> const xi=x|0, yi=y|0, xf=x-xi, yf=y-yi;<!-- [et_pb_line_break_holder] --> const u=xf*xf*(3-2*xf), v=yf*yf*(3-2*yf);<!-- [et_pb_line_break_holder] --> return lerp(lerp(hash(xi,yi),hash(xi+1,yi),u), lerp(hash(xi,yi+1),hash(xi+1,yi+1),u), v);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> function colorFor(i){<!-- [et_pb_line_break_holder] --> const t=(i\/N+opts.hueShift)%1;<!-- [et_pb_line_break_holder] --> switch(opts.palette){<!-- [et_pb_line_break_holder] --> case 'mono': return `rgba(225,240,255,0.7)`;<!-- [et_pb_line_break_holder] --> case 'ice': return `hsl(${200+80*t},80%,${60+20*Math.sin(t*6.28)}%)`;<!-- [et_pb_line_break_holder] --> case 'sunset': return `hsl(${20+60*t},90%,${55+25*Math.sin(t*6.28)}%)`;<!-- [et_pb_line_break_holder] --> default: return `hsl(${180+160*t},100%,60%)`;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> \/\/ ----- Input -----<!-- [et_pb_line_break_holder] --> const pointer={x:W\/2,y:H\/2,down:false,lastTap:0};<!-- [et_pb_line_break_holder] --> addEventListener('mousemove',e=>{pointer.x=e.clientX;pointer.y=e.clientY;fsPeek(e);},{passive:true});<!-- [et_pb_line_break_holder] --> addEventListener('mousedown',()=>pointer.down=true);<!-- [et_pb_line_break_holder] --> addEventListener('mouseup',()=>pointer.down=false);<!-- [et_pb_line_break_holder] --> addEventListener('wheel',e=>{opts.attract=Math.max(-3,Math.min(3,opts.attract+(e.deltaY>0?-0.2:0.2)));fsPeek(e);},{passive:true});<!-- [et_pb_line_break_holder] --> function setFromTouch(t){ const r=canvas.getBoundingClientRect(); pointer.x=t.clientX-r.left; pointer.y=t.clientY-r.top; }<!-- [et_pb_line_break_holder] --> canvas.addEventListener('touchstart',e=>{<!-- [et_pb_line_break_holder] --> setFromTouch(e.touches[0]); pointer.down=true;<!-- [et_pb_line_break_holder] --> const now=performance.now(); if(now-pointer.lastTap<300) paused=!paused; pointer.lastTap=now;<!-- [et_pb_line_break_holder] --> if(e.touches.length>=2) opts.attract=-Math.abs(opts.attract||1);<!-- [et_pb_line_break_holder] --> fsPeek(); e.preventDefault();<!-- [et_pb_line_break_holder] --> },{passive:false});<!-- [et_pb_line_break_holder] --> canvas.addEventListener('touchmove',e=>{ setFromTouch(e.touches[0]); if(e.touches.length>=2) opts.attract=-Math.abs(opts.attract||1); e.preventDefault();},{passive:false});<!-- [et_pb_line_break_holder] --> canvas.addEventListener('touchend',e=>{ if(e.touches.length===0) pointer.down=false; if(e.touches.length<=1 && opts.attract<0) opts.attract=Math.abs(opts.attract); e.preventDefault();},{passive:false});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> \/\/ ----- UI -----<!-- [et_pb_line_break_holder] --> const $=s=>document.querySelector(s);<!-- [et_pb_line_break_holder] --> $('#count').oninput=e=>{sliderN=+e.target.value;clamp();};<!-- [et_pb_line_break_holder] --> $('#trail').oninput=e=>opts.trail=+e.target.value;<!-- [et_pb_line_break_holder] --> $('#speed').oninput=e=>opts.baseSpeed=+e.target.value;<!-- [et_pb_line_break_holder] --> $('#scale').oninput=e=>opts.scale=+e.target.value;<!-- [et_pb_line_break_holder] --> $('#palette').onchange=e=>opts.palette=e.target.value;<!-- [et_pb_line_break_holder] --> $('#clear').onclick=()=>{ctx.fillStyle='#07090c';ctx.fillRect(0,0,W,H);};<!-- [et_pb_line_break_holder] --> $('#randomize').onclick=()=>{opts.hueShift=Math.random();opts.scale=0.004+Math.random()*0.012;opts.baseSpeed=0.6+Math.random()*2.2;};<!-- [et_pb_line_break_holder] --> $('#fs').onclick=()=> isFS()? exitFS(): goFS();<!-- [et_pb_line_break_holder] --> $('#mic').onclick=enableMic;<!-- [et_pb_line_break_holder] --> function isFS(){ return document.fullscreenElement; }<!-- [et_pb_line_break_holder] --> function goFS(){ document.documentElement.requestFullscreen?.(); }<!-- [et_pb_line_break_holder] --> function exitFS(){ document.exitFullscreen?.(); }<!-- [et_pb_line_break_holder] --> addEventListener('keydown',e=>{ if(e.key==='f'||e.key==='F') isFS()?exitFS():goFS(); if(e.code==='Space') paused=!paused; });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> \/\/ ----- FS controls auto-hide -----<!-- [et_pb_line_break_holder] --> const controls=$('#controls'); const arrow=$('#arrow');<!-- [et_pb_line_break_holder] --> let hideTimer=null, arrowTimer=null;<!-- [et_pb_line_break_holder] --> function hideControls(){ controls.classList.add('hidden'); }<!-- [et_pb_line_break_holder] --> function showControls(){ controls.classList.remove('hidden'); }<!-- [et_pb_line_break_holder] --> function showArrow(){ arrow.classList.add('visible'); clearTimeout(arrowTimer); arrowTimer=setTimeout(()=>arrow.classList.remove('visible'),1500); }<!-- [et_pb_line_break_holder] --> function fsEnter(){ hideControls(); showArrow(); }<!-- [et_pb_line_break_holder] --> function fsExit(){ showControls(); arrow.classList.remove('visible'); }<!-- [et_pb_line_break_holder] --> document.addEventListener('fullscreenchange', ()=> isFS()? fsEnter(): fsExit());<!-- [et_pb_line_break_holder] --> arrow.addEventListener('click', ()=>{<!-- [et_pb_line_break_holder] --> showControls();<!-- [et_pb_line_break_holder] --> \/\/ auto-hide after a moment<!-- [et_pb_line_break_holder] --> clearTimeout(hideTimer);<!-- [et_pb_line_break_holder] --> hideTimer=setTimeout(()=>{ if(isFS()) hideControls(); }, 2500);<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> \/\/ reveal arrow when pointer near top-left in fullscreen<!-- [et_pb_line_break_holder] --> function fsPeek(e){<!-- [et_pb_line_break_holder] --> if(!isFS()) return;<!-- [et_pb_line_break_holder] --> const x = (e?.clientX ?? pointer.x), y=(e?.clientY ?? pointer.y);<!-- [et_pb_line_break_holder] --> if(x<80 && y<60) showArrow();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> \/\/ ----- Loop -----<!-- [et_pb_line_break_holder] --> let t=0, sx=Math.random()*1000, sy=Math.random()*1000;<!-- [et_pb_line_break_holder] --> let last=performance.now(), slow=0;<!-- [et_pb_line_break_holder] --> resize(); init();<!-- [et_pb_line_break_holder] --> addEventListener('resize', resize);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function init(){ parts.length=0; N=0; clamp(); for(let i=0;i<N;i++) parts[i]=spawn(); }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function step(now=performance.now()){<!-- [et_pb_line_break_holder] --> const dt=Math.min(33, now-last); last=now;<!-- [et_pb_line_break_holder] --> if(!paused){<!-- [et_pb_line_break_holder] --> ctx.fillStyle=`rgba(7,9,12,${opts.trail})`; ctx.fillRect(0,0,W,H);<!-- [et_pb_line_break_holder] --> if(dt>28) slow++; else slow=Math.max(0,slow-1);<!-- [et_pb_line_break_holder] --> if(slow>8 && N>1000){ sliderN=Math.floor(sliderN*0.9); clamp(); slow=0; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> bass=readBass();<!-- [et_pb_line_break_holder] --> const speed=opts.baseSpeed*(1+bass*1.5), scale=opts.scale;<!-- [et_pb_line_break_holder] --> opts.hueShift=(opts.hueShift + bass*0.002)%1;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> ctx.globalCompositeOperation='lighter';<!-- [et_pb_line_break_holder] --> for(let i=0;i<N;i++){<!-- [et_pb_line_break_holder] --> const p=parts[i];<!-- [et_pb_line_break_holder] --> const nx=(p.x*scale + sx + t*0.0003);<!-- [et_pb_line_break_holder] --> const ny=(p.y*scale + sy + t*0.00035);<!-- [et_pb_line_break_holder] --> const a=noise2(nx,ny)*Math.PI*2;<!-- [et_pb_line_break_holder] --> p.vx+=Math.cos(a)*0.3; p.vy+=Math.sin(a)*0.3;<!-- [et_pb_line_break_holder] --> const dx=pointer.x-p.x, dy=pointer.y-p.y, d2=Math.max(dx*dx+dy*dy,60);<!-- [et_pb_line_break_holder] --> const m=(pointer.down?1.8:1)*opts.attract\/d2*1200;<!-- [et_pb_line_break_holder] --> p.vx+=dx*m; p.vy+=dy*m;<!-- [et_pb_line_break_holder] --> const ox=p.x, oy=p.y;<!-- [et_pb_line_break_holder] --> p.x+=p.vx*speed*0.02; p.y+=p.vy*speed*0.02;<!-- [et_pb_line_break_holder] --> if(p.x<0) p.x+=W; else if(p.x>W) p.x-=W;<!-- [et_pb_line_break_holder] --> if(p.y<0) p.y+=H; else if(p.y>H) p.y-=H;<!-- [et_pb_line_break_holder] --> p.vx*=0.985; p.vy*=0.985;<!-- [et_pb_line_break_holder] --> ctx.strokeStyle=colorFor(i); ctx.beginPath(); ctx.moveTo(ox,oy); ctx.lineTo(p.x,p.y); ctx.stroke();<!-- [et_pb_line_break_holder] --> if(--p.life<=0) parts[i]=spawn();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> ctx.globalCompositeOperation='source-over';<!-- [et_pb_line_break_holder] --> t++;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> requestAnimationFrame(step);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> requestAnimationFrame(step);<!-- [et_pb_line_break_holder] -->})();<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] --><\/body><!-- [et_pb_line_break_holder] --><\/html><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-936","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/llumdigital.com\/fr\/wp-json\/wp\/v2\/pages\/936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/llumdigital.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/llumdigital.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/llumdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/llumdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=936"}],"version-history":[{"count":0,"href":"https:\/\/llumdigital.com\/fr\/wp-json\/wp\/v2\/pages\/936\/revisions"}],"wp:attachment":[{"href":"https:\/\/llumdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}