Verschieben eines Objekts auf einem Pfad mit p5.js

Question

Ich versuche, einen Code zu schreiben, der simuliert, was in this video in einem HTML-Zeichenbereich passiert.

Mein Code unterscheidet sich dadurch, dass die Radien der beiden Kreise bei jedem Laden oder Aktualisieren der Seite zufällig generiert werden. Ich brauche die "Planeten", um mit der gleichen Geschwindigkeit entlang der Umfänge ihrer jeweiligen Kreise zu reisen.

Ich benutze die p5.js, um auf die Leinwand zu zeichnen. Gibt es in p5.js etwas, das ein Objekt nach einem Pfad zeichnet, in meinem Fall einen Pfad, der ein Kreis ist?

Ich habe die Referenzen durchgesehen und bin auf Vektoren gestoßen, aber ich verstehe nicht ganz, was sie tun.

Mein Code so weit:

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)); 

} 

Das Problem mit der letzten Zeile ist, dass es evenly spaces lines schafft, nicht das Muster, das in dem Video erstellt wird.

Answer 1

Wenn sich die zwei Planeten mit dem gleichen Winkelinkrement bewegen, behalten sie immer eine Beziehung bei, die eine gleichmäßig beabstandete Linie zwischen ihnen verursacht.

Damit eine zwischen ihnen verbundene Linie das Zentrum durchqueren kann, müssen sie unterschiedliche inkrementelle Werte haben. Sie müssten zwei verschiedene Winkelwerte sowie Schritt (oder Geschwindigkeit) pro Winkel beibehalten.

Für das Beispiel im Video ist das Geschwindigkeitsverhältnis 1: 2,247 basierend auf einer realen Beziehung zwischen der Erde und dem Tages-Verhältnis der Venus um die Sonne. Da sie sich in der Geschwindigkeit unterscheiden, wird sich die Linie zwischen ihnen jetzt kreuzen und das Pentagramm-ish-Muster erzeugen.

Ich weiß nicht P5.js, also habe ich unten ein einfaches JavaScript-Beispiel hinzugefügt, das als Pseudocode betrachtet werden kann, falls P5 eine Voraussetzung ist. Von diesem können Sie sehen, wie Sie die zwei Positionen mit variablen Geschwindigkeiten berechnen.

Beispiel

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>