Mirko Bassani: Spin

Mirko Bassani

Spin is a system-based visualization widget that translates real-time hardware activity into rotational motion.
Each triangle represents a specific metric (CPU, RAM, Battery, Uptime, Mouse input).
The rotation speed of each element is directly mapped to the corresponding data value, producing a clear, continuous representation of the system’s current load and responsiveness.

The composition operates on a single 2D canvas using XOR blending, where overlapping shapes cancel each other out, visually expressing the tension between concurrent processes.
Through this mechanism, Spin provides a perceptual overview of the system’s state — faster rotations indicate higher activity or stress, while slower motion reflects stability or idle states.

GitHub repository

Drawing with XOR: where the triangles overlap, their fill cancels out (creating transparency).
The canvas is cleared on every frame, then the compositing mode is reset to avoid affecting subsequent drawings.

function drawTrianglesXOR(angles, {cx,cy,size,color}={}){
  ctx.clearRect(0,0,xorCanvas.width,xorCanvas.height);
  ctx.fillStyle = color ?? '#000';
  for (let i=0;i<angles.length;i++){
    ctx.globalCompositeOperation = 'xor';
    drawEquilateralTriangle(ctx, cx??innerWidth/2, cy??innerHeight/2, size??Math.min(innerWidth,innerHeight), angles[i]);
  }
  ctx.globalCompositeOperation = 'source-over';
}