P5.js Funktion (funktional) invertieren?

Hey, ich bin aktuell in der Schule dabei, ein JavaScript zu schreiben (in P5)

Dabei habe ich aus Beispielaufgaben den Code gezogen, habe aber keine Ahnung, wie ich die Funktion vom Viereck invertieren kann, also sodass es von der rechten oberen Kante zur Linken geht, und dann zurückbounced.

Hier der Code als Referenz:

fill('skyblue'); 
  stroke('royalblue'); 
  strokeWeight(8); 
  ellipse(140 + sin(frameCount/10) * 160, 100 + sin(frameCount/10) * 100, 50, 50);  


  fill('tan'); 
  stroke('sienna'); 
  strokeWeight(8); 
  rect(140 + sin(frameCount/10) * 100, 160 + sin(frameCount/10) * 100, 50, 50);  

Answer 1

[gnuman79]

Um das Rechteck in P5.js zu invertieren, musst du die y-Koordinate jedes Punktes spiegeln, sodass es von der rechten oberen Ecke zur linken Ecke geht und zurückprallt. Hier ist eine Möglichkeit, dies zu erreichen:

fill('tan'); 
stroke('sienna'); 
strokeWeight(8); 
let x = 140 + sin(frameCount/10) * 100;
let y = height - (160 + sin(frameCount/10) * 100); // Spiegele y-Koordinate
rect(x, y, 50, 50);

In diesem Code wird die y-Koordinate jedes Punktes des Rechtecks umgekehrt, indem "height" (die Höhe des Canvas) von der berechneten y-Koordinate subtrahiert wird. Dadurch wird das Rechteck auf den Kopf gestellt und scheint von der rechten oberen Ecke zur linken Ecke und zurück zu springen.

Hinweis: Wenn dein Canvas eine andere Größe hat als das Standard-Canvas in P5.js (100x100), musst du möglicherweise die Berechnungen anpassen, damit das Rechteck ordnungsgemäß invertiert wird.