Rotating/Turning 椭圆组

Question

我正在做一个项目，在 mouseX 和 mouseY 上使用椭圆、旋转、弧度等创建迷你星系。但是，如果每个迷你星系都可以左右旋转，我会喜欢它，这样它看起来就像一个在 space 中缓慢转动的星系。不过，我不确定我会怎么做，并且希望得到一些指导。我是否必须创建一个数组来保存每个星系的椭圆，然后以某种方式旋转它？我可以简单地为绘制到屏幕上的每个椭圆设置一个 rotate() 吗？感谢您的帮助！

var bgimg;

function preload(){
//for (var i = 0; i < planetArray.length; i++) {
bgimg = loadImage('Assets/galaxy_background.jpg');
}

function setup(){
  createCanvas(1301, 822);
  background(bgimg, 100);
  //background(25,25,22);

}
function draw() {
  //background(0);
  fill(255);
  noStroke();
  textSize(19);
  text("Create mini-galaxies by holding your mouse in a location. Move to create another.", 20, 40);
  star()
  //function mousepressed(){
}
  function star(){
  //angle = map(mouseX, 0,width, 0,360);
  //rotate(radians(angle*100));  
  noStroke();
  //translate(width/2, height/2);
  translate(mouseX,mouseY);
  fill(0);
  rotate(radians(frameCount%360)); //rotates output of ellipses
  rotate(radians(1000*frameCount%360));
  for(var i =0; i < 20; i++){
    push();
    noStroke();
    tint(255, 127); 
    fill(random(230),5,random(210),random(230));
   // fill(random(125),random(250),random(100));
    ellipse(10*frameCount % (width/20),0,5,5);
    rotate(radians(mouseX, mouseY));
    //image(stars, 10*frameCount % (width/2),0,10,10)
    //image((10*frameCount % (width/2),0,10,10)
    //
    pop();
  }
}

Answer 1

如果您尝试将问题缩小到 MCVE 而不是张贴您的完整草图，您的问题会更好。很难回答一般 "how do I do this" 类型的问题。回答特定 "I tried X, expected Y, but got Z instead" 类型的问题要容易得多。话虽这么说，我将尝试从一般意义上回答：

您之所以遇到麻烦，是因为您只调用了一次 background() 函数，而不是每帧都清除它，从而让绘图不断累积。这没有任何问题，但它确实无法对您已经绘制的东西应用变换和旋转。

正如我在中所说，大多数 Processing 草图都是这样做的：

将绘制所需的一切存储在数据结构中。

您可以存储 PVectors 的数组。或者您可以创建一个 Galaxy class，其中包含允许它自行绘制的变量和函数，您可以从 draw() 函数中调用它。您使用的数据结构完全取决于您。

This page and this page contain discussions on creating objects in p5.js, or you might just try a google search. Here 是一个示例，它使用知道如何绘制自身的 class，然后创建该 class 的实例来创建草图。

每次调用draw()时清除之前的帧。

大多数草图每帧调用 background() 函数。这可能看起来很烦人，因为你必须重新绘制所有内容，但这就是数据结构的用途。

每帧重画你想画的一切。

迭代这些数据结构并重绘场景。这可能就像遍历 PVectors 数组一样简单，或者您可能想要创建知道如何绘制自身的对象。

就像我说的，这是很笼统的，具体要做什么取决于您对以上所有内容的看法。没有一个最好的方法来做到这一点，所以很难更具体。

Rotating/Turning 椭圆组

Rotating/Turning Groups of Ellipses

graphics

rotation

p5.js