Graphics 旋转/旋转椭圆群_Graphics_Rotation_P5.js

Graphics 旋转/旋转椭圆群

graphics

Graphics 旋转/旋转椭圆群,graphics,rotation,p5.js,Graphics,Rotation,P5.js,我正在做一个项目，我在mouseX和mouseY上使用椭圆、旋转、弧度等创建迷你星系。然而，我希望每个小星系都能左右旋转，这样看起来就像一个在太空中缓慢旋转的星系。不过，我不知道该怎么做，我希望得到一些指导。我是否必须创建一个阵列来保存每个星系的椭圆，然后以某种方式旋转它？我可以简单地为每个椭圆在绘制到屏幕时设置一个rotate（）？谢谢你的帮助 var bgimg; function preload(){ //for (var i = 0; i < planetArray.length

我正在做一个项目，我在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();
  }
}

var-bgimg；
函数预加载（）{
//对于（var i=0；i

如果你尝试将问题缩小到一个小范围，而不是发布完整的草图，你的运气会更好。很难回答一般的“我该怎么做”类型的问题。回答具体的“我尝试了X，预期了Y，但得到了Z”类型的问题要容易得多。也就是说，我将尝试回答一般意义上的问题：

您遇到了问题，因为您只需调用一次

background（）

函数，而不是每帧清除一次，就可以让绘图累积起来。这没有什么错，但它确实使您无法对已绘制的内容应用变换和旋转

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

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

您可以存储一个

PVectors

数组。或者您可以创建一个

Galaxy

类，该类包含允许它自己绘制的变量和函数，您可以从

draw（）

函数调用它。您使用的数据结构完全取决于您自己

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

每次调用
draw（）
时清除前一帧。

大多数草图每一帧都调用

background（）

函数。这可能看起来很烦人，因为你必须重新绘制所有内容，但这就是数据结构的用途

每一帧都要重新绘制所有要绘制的内容。

迭代这些数据结构并重新绘制场景。这可能与迭代一组

PVectors

一样简单，也可能需要创建知道如何绘制自身的对象

正如我所说，这是一个非常笼统的问题，具体的做法取决于你对上述所有问题的看法。没有一种最好的方法可以做到这一点，因此很难更具体地回答问题。

如果你试图将问题缩小到一个小范围，而不是发布完整的草图，你的运气会更好。很难回答笼统的问题“我如何做到这一点”类型的问题。回答具体的“我尝试了X，预期是Y，但得到了Z”类型的问题要容易得多。尽管如此，我将尝试回答一般意义上的问题：