• That looks great! One thing I'd say is maybe rather than using images, you could just draw the individual zones as polygons. There's no function built in but it's easy enough to do. For instance:

    const R = Bangle.appRect, CX = R.x+R.w/2, CY = R.y+R.h/2, CR = (R.h/2)-8;
    
    g.drawSlice = function(pa, pb, size) {
      pa = (pa+0.05)*Math.PI/8;
      pb = (pb-0.05)*Math.PI/8;
      let a = (pb-pa)/6.01;
      let poly = [CX,CY], ir = CR-size;
      for (let r = pa; r <= pb; r += a) {
        poly.unshift(
          CX + ir * Math.sin(r),
          CY - ir * Math.cos(r)
        );
        poly.push(
          CX + CR * Math.sin(r),
          CY - CR * Math.cos(r)
        );
      }
      return this.fillPoly(poly);
    }
    
    g.clear();
    
    // top 2 big slices
    g.setColor(E.HSBtoRGB(0,1,1,16)).drawSli­ce(0,2, 10);
    g.setColor(E.HSBtoRGB(0.9,1,1,16)).drawS­lice(14,16, 10);
    // other slices
    for (var i=2;i<14;i++) {
      g.setColor(E.HSBtoRGB(i/16,1,1,16)).draw­Slice(i,i+1, 10+Math.pow(Math.random(),4)*20);
    

    It'd likely be faster, would save a bunch of memory, and is a bit more flexible too as you can choose exactly how big and what color each slice is.


    1 Attachment

    • ex_zones.png
About

Avatar for Gordon @Gordon started