Communication Wheel

  • TypeScript
  • ViteJs
  • Html (raw)
  • Css (raw)

I have been commissioned to develop a communication wheel. This wheel will help people to start a conversation. When you click on the wheel, it starts rotating. When it stops at a certain color, there will pop up a question of that category. 

function drawWheel(
  inputData: kaart[],
  gap: number,
  rot: number
) {
  let step = (Math.PI * 2) / inputData.length;

  for (let i = 0; i < inputData.length; i++) {
    drawPart(i * step + rot, (step * i + step) + rot, gap, inputData[i]);
  }
}

function drawPart(from: number, to: number, gap: number, DataPart: kaart) {
  ctx.beginPath();
  ctx.moveTo(centerx + Math.cos(from) * gap, centery + Math.sin(from) * gap);
  ctx.arc(centerx, centery, centerx, from, to);

  ctx.lineTo(centerx + Math.cos(to) * gap, centery + Math.sin(to) * gap);

  ctx.moveTo(centerx + Math.cos(from) * gap, centery + Math.sin(from) * gap);
  ctx.arc(centerx, centery, gap, from, to);

  ctx.fillStyle = DataPart.color;
  ctx.fill("nonzero");
  

  let rotation = (from+to)/2;

  ctx.save();
  ctx.translate(centerx+Math.cos(rotation)*gap*2, centery + Math.sin(rotation)*gap*2)
  ctx.rotate(rotation+Math.PI/2);
  ctx.textAlign = "center";
  ctx.fillStyle = "white";
  ctx.font = '24px Raleway'
  ctx.fillText(DataPart.name, 0,25);
  ctx.restore();
}

This is the code to render the wheel. I use the canvas in 2d mode.

To get the text to line up with the pizza part was the hardest. At first the text moved at its own will or flipped upside down. My text seemed to be possessed but after exorcising the ghosts with sin and cos the ghosts disappeared. 😉