旋转/旋转椭圆组

Question

我正在进行一个项目，在mouseX和mouseY上使用椭圆、旋转、弧度等创建迷你星系。然而，我希望每个迷你星系都能向左或向右旋转，这样它看起来就像一个在太空中缓慢旋转的星系。不过，我不确定我会怎么做，我希望得到一些指导。我必须创建一个数组来保存每个星系的椭圆，然后以某种方式旋转它吗？我可以简单地为每个绘制到屏幕上的椭圆设置一个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，而不是发布你的完整草图，你会更好地处理你的问题。很难回答一般的"我该怎么做"类型的问题。回答特定的"我试过X，预期是Y，但得到了Z"类型的问题要容易得多。话虽如此，我将尝试从一般意义上回答：

您遇到了麻烦，因为您只调用background()函数一次，而不是每帧都清除它，从而使图形积累。这并没有错，但它确实使您无法将变换和旋转应用于已经绘制的内容。

就像我在你的另一个问题中所说的，大多数加工草图都是这样做的：

将需要绘制的所有内容存储在数据结构中

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

本页和本页包含关于在p5.js中创建对象的讨论，或者您可以尝试谷歌搜索。下面是一个例子，它使用一个知道如何绘制自己的类，然后创建该类的实例来创建草图。

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

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

在每帧中重新绘制您想要绘制的所有内容

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

正如我所说，这是非常普遍的，你到底做什么取决于你对以上所有事情的看法。没有一个最好的方法可以做到这一点，所以很难更具体。