p5.jsを使用してパス上のオブジェクトを移動する

Question

私は、this videoで起こっていることをHTMLキャンバスで模倣したコードを書こうとしています。

私のコードは、ページがロードされるかリフレッシュされるたびに、2つの円の半径がランダムに生成される点が異なります。私は "惑星"がそれぞれのサークルの円周に沿って同じ速度で移動する必要があります。

私はキャンバスに描画するためにp5.jsを使用しています。 p5.j​​sにはパスに応じてオブジェクトを描画するものがありますか？私の場合は円のパスですか？

私は参考文献を見て、ベクトルに出くわしましたが、彼らが何をしているのかよくわかりません。これまで

マイコード：最後の行と

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

2つの惑星が同じ角度の増分で動くと、それらの間に均等に間隔を置いた線が生じる関係が常に維持されます。

それらの間に接続された線が中央を横切るためには、異なる増分値を持たなければなりません。角度ごとに2つの異なる角度値とステップ（または速度）を維持する必要があります。

この例では、地球と金星の太陽の日の比率との実際の関係に基づいて、速度比は1：2.247です。彼らは速度が異なるので、それらの間の線は今交差して五芒星パターンを生み出します。

私はP5.jsを知らないので、P5が必要な場合には疑似コードと見なすことができるプレーンJavaScriptの例を追加しました。これから、可変速度で2つのポジションを計算する方法を見ることができます。

例

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>