如何使用三角函数 p5js 旋转圆弧？

Question

我想用三角函数创建一个旋转圆弧，没什么特别的，只是让它围绕中心点旋转，就好像它是一个完整的旋转圆圈切成两半。我现在正在做的结果是一个时髦的吃豆人，而我希望它保持半圆形。

let angle = 0;

function setup() {
  createCanvas(500, 500);
  angleMode(DEGREES);
}

function draw() {
  background(200);

  let posX = 250;
  let posY = 250;
  let sizeW = 250;
  let sizeH = 250; 
  let radius = 125 //I don't know what to put as my radius
  let x = radius * cos(angle);
  let y = radius * sin(angle);

  
  fill(0);
  arc(posX, posY , sizeW, sizeH, 270 + x, 90 + y);
 
  angle++;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Answer 1

您不需要任何三角函数，因为 arc() 函数会为您处理。您只需要根据 angle 的当前值使弧的起始和结束角度发生变化。要获得半圆形形状，您需要从 angle 开始顺时针 ~90 度的弧，并从 angle.

逆时针结束 ~90 度的弧

const posX = 250;
const posY = 250;
const sizeW = 250;
const sizeH = 250; 
const radius = 125;

let angle = 0;

function setup() {
  createCanvas(500, 500);
  angleMode(DEGREES);
}

function draw() {
  background(200);

  fill(0);
  arc(posX, posY , sizeW, sizeH, angle + 90, angle - 90);
 
  angle++;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

如何使用三角函数 p5js 旋转圆弧？

How to rotate an arc using trigonomentry p5js?

p5.js