计算椭圆点的意外结果

Question

我正在尝试从椭圆的中心到边界的随机点绘制一条线。基本上，我的代码是我前段时间做的一些js代码的复制粘贴。我使用的是 canvas 和 vanilla js。

我的代码：

var o;
function setup() {
  createCanvas(500, 500);
  o = ellipseGetRandomPoint(250,250,200,300);
}

function draw() {
  background(220);
  stroke("black");
  fill("#333333");
  ellipse(250,250,300,400);

  stroke("red")
  line(250,250,o.pointX, o.pointY);
  console.log(o);
  fill("#999999");
  stroke(0);
  ellipse(250,250,200,300);
}

function ellipseGetRandomPoint(centerX, centerY, radiusX, radiusY) {
    let o = {};
    r = Math.floor(Math.random()*360);
    pointX = centerX + radiusX * Math.cos(r*Math.PI / 180);
    pointY = centerY + radiusY * Math.sin(r*Math.PI / 180);
    o.pointX = Math.floor(pointX);
    o.pointY = Math.floor(pointY);
    o.r = r;
    return o;
}

问题是直线的一部分在椭圆之外，我真的不知道为什么，因为抛物线的参数方程似乎没问题，而且这个版本非常相似代码正在我的其他 js 程序上运行。

Answer 1

ellipse()的第3、4个参数是椭圆的宽和高，不是半轴

所以 ellipseGetRandomPoint 的参数必须是 150, 200 而不是 200, 300:

~~o = ellipseGetRandomPoint(250,250,200,300);~~

o = ellipseGetRandomPoint(250,250,150,200);

看例子：

var angle = 0;
function setup() {
    createCanvas(500, 500);
}

function draw() {
    let o = ellipseGetRandomPoint(250,250,150,200);
    angle += 1;

    background(220);
    stroke("black");
    fill("#333333");

    ellipse(250,250,300,400);

    stroke("red")
    line(250,250,o.pointX, o.pointY);
    console.log(o);
    fill("#999999");
    stroke(0);
    ellipse(250,250,200,300);
}

function ellipseGetRandomPoint(centerX, centerY, radiusX, radiusY) {
    let o = {};
    r = Math.floor(Math.random()*360);
    r = angle;
    pointX = centerX + radiusX * Math.cos(r*Math.PI / 180);
    pointY = centerY + radiusY * Math.sin(r*Math.PI / 180);
    o.pointX = Math.floor(pointX);
    o.pointY = Math.floor(pointY);
    o.r = r;
    return o;
}

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

计算椭圆点的意外结果

Unexpected result calculating points of an ellipse

javascript

processing

p5.js