P5 повернуть фигуру с помощью математики - PullRequest
Новая
       34

P5 повернуть фигуру с помощью математики

0 голосов
/ 01 августа 2020

Я пытаюсь получить красный и синий кружок, вращающийся в P5, используя некоторые математики. Он состоит из двух полукругов. Как вы можете видеть, два круга в настоящее время вращаются вокруг радиуса 10 пикселей, а не вращаются. Если я изменю радиус на 0, он потеряет эту связь. Я не хочу использовать функцию поворота ... 

let angle = 0; //declare a variable for the initial angle

function setup() {
  createCanvas(400, 400); 
  noStroke(); 
}

function draw() {
  background(255);
  noStroke;  
  angleMode(DEGREES); 
  ellipseMode(CENTER); 

  let posX = 200; //change the x axis
  let posY = 200; //change the y axis
  let reSize = 200; //change the size
  let rotationSpeed = 1; //change the rotation speed

  let radius = 10;
  let x = radius * cos(angle); 
  let y = radius * sin(angle);

  fill('red'); 
  arc(posX+x, posY+y, reSize, reSize, 0, 180); 

  fill('blue');
  arc(posX+x, posY+y, reSize, reSize, 180, 360); 

  angle += rotationSpeed; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>

1 Ответ

1 голос
/ 01 августа 2020 

    let angle = 0; //declare a variable for the initial angle
    let currentAnglePercentage = 0;

    function getCurrentAngle() {
        return map(currentAnglePercentage % 100, 0, 100, 0, 360);
    }

    function setup() {
        createCanvas(400, 400);
        noStroke();
    }

    function draw() {
        currentAnglePercentage++;
        background(255);
        noStroke;
        angleMode(DEGREES);
        ellipseMode(CENTER);

        let posX = 200; //change the x axis
        let posY = 200; //change the y axis
        let reSize = 200; //change the size
        let rotationSpeed = 1; //change the rotation speed

        let radius = 10;
        let x = radius * cos(angle);
        let y = radius * sin(angle);

        const c1a1 = 0 + getCurrentAngle();
        const c1a2 = 180 + getCurrentAngle();

        const c2a1 = 180 + getCurrentAngle();
        const c2a2 = 360 + getCurrentAngle();

        fill('red');
        arc(posX + x, posY + y, reSize, reSize, c1a1, c1a2);

        fill('blue');
        arc(posX + x, posY + y, reSize, reSize, c2a1, c2a2);

        angle += rotationSpeed;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>

вы можете изменить угол, когда рисуете ар c.

...