p5js-円形にカラーを配置してキープレスで分割数を変更

sample.js

import * as p5 from 'p5';
let s = (sk) => {
  const radius = 300;//円の大きさ
  let segmentCount = 45;//デフォルト分割数

  sk.setup = () => {
    sk.createCanvas(800, 800);
    sk.noStroke();
  }

  sk.draw = () => {
    const width = sk.width;
    const height = sk.height;
    
    sk.colorMode(sk.HSB, 360, width, height);
    const angleStep = 360 / segmentCount;
    
    sk.beginShape(sk.TRIANGLE_FAN);
    sk.vertex(width / 2 , height / 2);

    for (let angle = 0; angle <= 360; angle += angleStep) {
      const vx = width / 2 + sk.cos(sk.radians(angle)) * radius;
      const vy = height / 2 + sk.sin(sk.radians(angle)) * radius;
      sk.vertex(vx, vy);
      
      sk.fill(angle, sk.pmouseX, sk.pmouseY);
    }

    sk.endShape();
  }

  sk.keyPressed = (event) => {
    switch (event.key) {
      case '1':
        segmentCount = 360;
        break;
      case '2':
        segmentCount = 45;
        break;
      case '3':
        segmentCount = 24;
        break;
      case '4':
        segmentCount = 12;
        break;
      case '5':
        segmentCount = 6;
        break;
    }
  }
  
}
const P5 = new p5(s);