Последовательный способ рисования эллипсиса

Question

Я пытаюсь сделать простую игру в обработке. Холст состоит из двух многоточий, как на следующем изображении:

Это мой код:

var angle = Math.random()*360;
var diff = 1;
var region = {};
var first = true;
var o;
centerX = 250; centerY = 250; radiusX = 150; radiusY = 200;
var score = 0;

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

function draw() {

    o = ellipseGetPoint(250,250,150,200,angle);
    angle += diff;
    background(220);
    stroke("black");
    fill("#333333");
    ellipse(250,250,300,400);
    stroke("white")
    drawRegion(250,250,150,200);

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

    textSize(50);
    text(str(score), 20, 490);
    fill(0, 102, 153);
}

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

function drawRegion(centerX, centerY, radiusX, radiusY) {
  if (first) {
    first = false;
    region = ellipseGetPoint(centerX, centerY, radiusX, radiusY, Math.random()*360);
  }
  let currentX = region.pointX;
  let currentY = region.pointY;
  let t = 1;
  for (let i = 0; i < 1000; i++) {
      line(250,250, currentX, currentY);
      currentX = centerX + radiusX * Math.cos(t*region.angle*Math.PI / 180)
      currentY = centerY + radiusY * Math.sin(t*region.angle*Math.PI / 180)
      t+=0.00015;
  } 
}

function keyPressed() {
  if (key  == " ") {
    diff*=-1;
  }

  let x = Math.floor(o.pointX);
  let y = Math.floor(o.pointY);
  let t = 1;
  for (let i = 0; i < 1000; i++) {
      currentX = centerX + radiusX * Math.cos(t*region.angle*Math.PI / 180)
      currentY = centerY + radiusY * Math.sin(t*region.angle*Math.PI / 180)
      t+=0.00015;
    if (Math.floor(currentX) == x) {
      first = true
      }
  }
  if (first) ++score;
  else --score;
  if (diff > 0 && diff < 3) diff += 0.1;
  else if (diff > -3) diff -= 0.1;
}

Проблема Я сталкиваюсь с тем, что, делая белую область, я получаю область разного размера в зависимости от того, где она появляется. Я сделал это, получив случайную точку, добавив небольшое смещение и нарисовав это 1000 раз. Я знаю, что это не очень хороший способ сделать это, но я не знаю, как создать этот регион. Есть ли способ сделать это?

Answer 1

Может быть, вы ищете arc?

void draw() {
  arc(50, 50, 80, 80, 0, QUARTER_PI, PIE);
}

Вот документация для получения более подробной информации. Я думаю, вам это понравится.

Answer 2

Используйте arc(), чтобы нарисовать эллиптический сегмент ar c.
Вычислите начальный и конечный угол в ellipseGetPoint и нарисуйте ar c:

function drawRegion(centerX, centerY, radiusX, radiusY) {
    if (first) {
        first = false;
        region = ellipseGetPoint(centerX, centerY, radiusX, radiusY, Math.random()*360);
    }

    let t = 1;
    let start = t*region.angle*Math.PI / 180;
    t+= 0.15;
    let end = t*region.angle*Math.PI / 180;

    arc(centerX, centerY, radiusX*2, radiusY*2, start, end)
}

Обратите внимание, вы должны установить цвет fill, прежде чем рисовать ар c:

stroke("white")
drawRegion(250,250,150,200);

См. Пример:

var angle = Math.random()*360;
var diff = 1;
var region = {};
var first = true;
var o;
centerX = 250; centerY = 250; radiusX = 150; radiusY = 200;
var score = 0;

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

function draw() {

    o = ellipseGetPoint(250,250,150,200,angle);
    angle += diff;
    background(220);
    stroke("black");
    fill("#333333");
    ellipse(250,250,300,400);
    fill("white")
    stroke("white")
    drawRegion(250,250,150,200);

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

    textSize(50);
    text(str(score), 20, 490);
    fill(0, 102, 153);
}

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

function drawRegion(centerX, centerY, radiusX, radiusY) {
    if (first) {
        first = false;
        region = ellipseGetPoint(centerX, centerY, radiusX, radiusY, Math.random()*360);
    }

    let t = 1;
    let start = t*region.angle*Math.PI / 180;
    t+= 0.15;
    let end = t*region.angle*Math.PI / 180;
    
    arc(centerX, centerY, radiusX*2, radiusY*2, start, end)
}

function keyPressed() {
  if (key  == " ") {
    diff*=-1;
  }

  let x = Math.floor(o.pointX);
  let y = Math.floor(o.pointY);
  let t = 1;
  for (let i = 0; i < 1000; i++) {
      currentX = centerX + radiusX * Math.cos(t*region.angle*Math.PI / 180)
      currentY = centerY + radiusY * Math.sin(t*region.angle*Math.PI / 180)
      t+=0.00015;
    if (Math.floor(currentX) == x) {
      first = true
      }
  }
  if (first) ++score;
  else --score;
  if (diff > 0 && diff < 3) diff += 0.1;
  else if (diff > -3) diff -= 0.1;
}

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