Перемещение объекта по пути с использованием p5.js

Question

Я пытаюсь написать код, который имитирует то, что происходит в this video в холсте HTML.

Мой код отличается тем, что каждый раз, когда страница загружается или обновляется, радиусы двух окружностей генерируются случайным образом. Мне нужно, чтобы «планеты» двигались с одинаковой скоростью вдоль окружностей их соответствующих кругов.

Я использую p5.js для рисования на холсте. Есть ли что-то в p5.js, которое рисует объект по пути, в моем случае - путь, который представляет собой круг?

Я просмотрел ссылки и наткнулся на векторы, но я не совсем понимаю, что они делают.

Мой код до сих пор:

var w = window.innerWidth; 
var h = window.innerHeight; 
var r1, r1; 
var d; 
var x1, x2, y1, y2; 
var angle = Math.PI/4; 

function setup() { 
    // canvas setup 
    createCanvas(w, h); 
    background(255); 
    angleMode(RADIANS); 

    // randomly generated radiuses 
    r1 = Math.floor(Math.random() * (h/2-300)) + 300; 
    r2 = Math.floor(Math.random() * (200-100)) + 100; 

    // drawing the two ellipses 
    ellipseMode(CENTER); 
    noFill(); 
    ellipse(w/2, h/2, r1*2, r1*2); 
    ellipse(w/2, h/2, r2*2, r2*2); 

} 

function draw() { 

    // points on the circles 
    x1 = (r1 * (Math.cos(angle))) + (w/2); 
    y1 = (h/2) - (r1 * (Math.sin(angle))); 
    x2 = (r2 * (Math.cos(angle))) + (w/2); 
    y2 = (h/2) - (r2 * (Math.sin(angle))); 

    // drawing two circles at those points 
    ellipseMode(CENTER); 
    noStroke(); 
    fill('rgb(140, 140, 140)'); 
    ellipse(x1, y1, 20, 20); 
    ellipse(x2, y2, 20, 20); 

    // randomly generated color for the line 
    var r = random(0, 255); 
    var g = random(0, 255); 
    var b = random(0, 255); 
    stroke(r, g, b); 
    strokeWeight(1); 
    // drawing the line that connects the two points 
    line(x1, y1, x2, y2); 

    // animation???? 
    angle = angle + (10 * (Math.PI/180)); 

} 

Проблема с последней строки в том, что она создает evenly spaces lines, а не шаблон, который создается в видео.

Answer 1

Если две планеты движутся с одинаковым приращением угла, они всегда будут сохранять взаимосвязь, вызывая между ними равномерно разнесенную линию.

Для того, чтобы линия, связанная между ними, пересекала центр, они должны иметь разные инкрементные значения. Вам нужно будет поддерживать два разных значения угла, а также шаг (или скорость) на угол.

Для примера в видеоролике соотношение скоростей составляет 1: 2.247 на основе отношения реального мира между землей и отношением дня к Солнцу вокруг Солнца. Поскольку они отличаются скоростью, линия между ними теперь пересекает и создает шаблон пентаграммы.

Я не знаю P5.js, поэтому я добавил простой пример JavaScript, ниже которого можно считать псевдокод в случае, если требуется P5. Из этого вы сможете увидеть, как рассчитать две позиции с переменной скоростью.

Пример

var ctx = c.getContext("2d"), 
 
    ratio = 2.247,      // earth:venus ratio 1:2.247 
 
    angle1 = 0,       // planet 1 current angle 
 
    angle2 = 0,       // planet 2 current angle 
 
    dlt = 0.05,       // angle step (speed) 
 
    radius1 = 150,      // radius path for planet 1 
 
    radius2 = 100,      // radius path for planet 2 
 
    cx = c.width*0.5,      // center canvas 
 
    cy = c.height*0.5, 
 
    t = 503;        // abort animation per # of frames 
 

 
ctx.strokeStyle = "rgba(0,120,255,0.5)"; 
 

 
(function loop() { 
 
    var x1, y1, x2, y2; 
 
    x1 = cx + Math.cos(angle1) * radius1; // current (x,y) for planet 1 
 
    y1 = cy + Math.sin(angle1) * radius1; 
 
    x2 = cx + Math.cos(angle2) * radius2; // current (x,y) for planet 2 
 
    y2 = cy + Math.sin(angle2) * radius2; 
 
    
 
    ctx.beginPath();      // draw line 
 
    ctx.moveTo(x1, y1); 
 
    ctx.lineTo(x2, y2); 
 
    ctx.stroke(); 
 
    
 
    angle1 += dlt;       // increase angle planet 1 
 
    angle2 += dlt * ratio;     // increase angle planet 2 per ratio 
 

 
    if (t--) requestAnimationFrame(loop) 
 
})()

<canvas id=c height=300></canvas>