chords = { document.head.innerHTML+=styling; const width=1200; const height=1200; var canvas=DOM.canvas(width, height); var ctx=canvas.getContext('2d'); const fadeInTime=250.0; // Time (ms) for linear ramp to full focus const fadeOutTime=125.0; // Time (ms) for (1/e) exponential decay fade out var previousnearestecv=-3; var mystery=true; // Flags whether we're in "mystery mode" (on startup and mouse-out) var mysteryFade=1.0; // For fade of mystery "look" const mysteryFadeTime=500.0; // Background will fade linearly var animating=true; // Flags whether there's anything for animation to actually do, otherwise the canvas can be left as is. let frame; // Precompute label centres var ecvxys=[]; for (var i=0;i1.0/1024.0) stillAnimating=true; mysteryFade=Math.max(0.0,mysteryFade-dt/mysteryFadeTime); } // Draw the background ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, width, height); ctx.globalAlpha=mysteryFade; ctx.fillStyle = "#51477d"; // Purple colour from style guide (actually for Ozone) ctx.fillRect(0, 0, width, height); // Draw faint lines for all the possible connections, whether active or not // Do this first so that these never overdraw the primary lines ctx.strokeStyle='#eeeeee'; ctx.globalAlpha=0.2+0.8*mysteryFade; ctx.lineWidth=1; ctx.shadowOffsetX=0; ctx.shadowOffsetY=0; ctx.shadowBlur=mysteryFade; ctx.shadowColor = '#eeeeee' for (var i=0;i0) { if (ecvattns[i]<1.0) stillAnimating=true; ecvattns[i]=Math.min(1.0,ecvattns[i]+dt/fadeInTime); } else { if (ecvattns[i]>1.0/1024.0) stillAnimating=true; ecvattns[i]*=Math.exp(-dt/fadeOutTime); } } // And for the links // Ramp up links from primary to secondary tagged ECVs for (var i=0;i0) { if (ecvlinkattns[i][j]<1.0) stillAnimating=true; ecvlinkattns[i][j]=Math.min(1.0,ecvlinkattns[i][j]+dt/fadeInTime); } else { if (ecvlinkattns[i][j]>1.0/1024.0) stillAnimating=true; ecvlinkattns[i][j]*=Math.exp(-dt/fadeOutTime); } } }; // Now draw arcs according to their attention level for (var i=0;i1.0/256.0) { var gradient = ctx.createLinearGradient(x0,y0,x1,y1); gradient.addColorStop(0,groupcolours[ecvs[i].group]); gradient.addColorStop(1,groupcolours[ecvs[t].group]); ctx.globalAlpha=ecvlinkattns[i][j]; ctx.strokeStyle=gradient; ctx.lineWidth=2; ctx.beginPath(); ctx.moveTo(x0,y0); ctx.quadraticCurveTo(width*0.5,height*0.5,x1,y1); ctx.stroke(); // Draw an arrowhead but only on relevant links if (nearestecv == i ) { ctx.globalAlpha=ecvlinkattns[i][j]*ecvlinkattns[i][j]; ctx.fillStyle=groupcolours[ecvs[t].group]; var dx=x1-width*0.5; var dy=y1-height*0.5; var d=Math.sqrt(dx*dx+dy*dy); dx/=d;dy/=d; var h=4.0; // Arrowhead size ctx.beginPath(); ctx.moveTo(x1+1.5*h*dx,y1+1.5*h*dy); ctx.lineTo(x1-h*dy,y1+h*dx); ctx.lineTo(x1+h*dy,y1-h*dx); ctx.fill(); } } } ctx.globalAlpha=1.0; } // Draw labels if (!mystery) { for (var i=0;i=0) { if ('about' in ecvs[nearestecv]) elem.innerHTML=ecvs[nearestecv].about; else elem.innerHTML=ecvs[nearestecv].name; } else { elem.textContent=""; elem = document.getElementById("mystery"); elem.style.visibility='visible'; } previousnearestecv=nearestecv; } } } invalidation.then(() => cancelAnimationFrame(frame)); return canvas; }