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()函数而不是每帧都清除它来让你的绘图累积。这没有什么不对，但它确实无法将变换和旋转应用到你已经绘制过的东西上。

就像我在your other question中所说的那样，大多数处理草图都是这样做的：

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

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

This page和this page包含有关在p5.js中创建对象的讨论，或者您可能只是尝试使用Google搜索。 Here是一个使用知道如何绘制自身的类的示例，然后创建该类的实例以创建草图。

每次调用draw()时都会清除上一帧。

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

重绘每一帧你想要绘制的所有内容。

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

就像我说的那样，这是非常笼统的，你所做的完全取决于你对上述所有方面的看法。没有一种最好的方法可以做到这一点，所以很难更具体。

旋转/转动椭圆组

1 个答案: