具有特定填充百分比的圆-解网

问：

我想创建一个填充到一定百分比的圆圈，如下所示：

还有这个：

我正在使用处理 Java。

我的尝试是使用 arc（） 函数，但是我很难确定应该如何计算和的值：angle1angle2

        percentageRemaining = 0.25;
        angle1 = ????
        angle2 = ????
        noStroke();
        fill(35);
        arc(100, 100, 200, 200, angle1, angle2, CHORD);

到目前为止，我确实尝试了一些修复程序，但没有运气。

加工

嗨，欢迎！第一张图像看起来更简单，没有波浪运动，而秒似乎有两个动画正弦波。关于第一张图片，Sash 的回答很棒（+1）。您需要交换才能让 circleRadius 的 to 以及 for 在 Processing java 中运行，但这是一个很好的开始！如果你真的想要动画正弦波，你可以看看这个答案。您可能需要和let startTimeint startTime; and int circleRadiusfunctionvoidmask()PGraphics

答：

2赞 Sash Sinha 10/23/2023 #1

我的计算机上没有 Processing，所以我尝试使用 editor.p5js.org（Javascript 版本的 Processing）。转换应该很容易：

let startTime;
let circleRadius = 200;

function setup() {
  createCanvas(800, 600);
  startTime = millis();
}

function draw() {
  background(255);

  let elapsedTime = (millis() - startTime) / 500.0;
  let percentage = min(elapsedTime / 10.0, 1);
  let fillHeight = circleRadius * 2 * percentage;

  // Draw blue rectangle fill, from bottom to top
  fill(0, 0, 255);
  noStroke();
  rect(width / 2 - circleRadius, height / 2 + circleRadius - fillHeight, circleRadius * 2, fillHeight);

  // White overlay to mask outside of circle
  fill(255);
  noStroke();
  beginShape();
  for (let angle = 0; angle < TWO_PI; angle += 0.01) {
    let x = width / 2 + circleRadius * cos(angle);
    let y = height / 2 + circleRadius * sin(angle);
    vertex(x, y);
  }
  for (let angle = TWO_PI; angle > 0; angle -= 0.01) {
    let x = width / 2 + (circleRadius + 100) * cos(angle);
    let y = height / 2 + (circleRadius + 100) * sin(angle);
    vertex(x, y);
  }
  endShape(CLOSE);

  // Draw outer circle
  noFill();
  stroke(0);
  strokeWeight(5);
  ellipse(width / 2, height / 2, circleRadius * 2);

  // Draw percentage text
  let textY = height / 2;
  let percentText = nf(percentage * 100, 0, 2) + "%";
  
  fill(textY < height / 2 + circleRadius - fillHeight ? 0 : 255);
  noStroke(); // Remove outline from text
  
  textSize(32);
  textAlign(CENTER, CENTER);
  text(percentText, width / 2, textY);
}

输出：

不完美...但应该是一个合理的开始！

上一个：在加工过程中打印菱形

下一个：如何更正与数字图像处理相关的代码？

具有特定填充百分比的圆

A circle that has a specific percentage amount of fill

评论