Rotating/Turning Groups of Ellipses - graphics

Question

I'm working on a project where I create mini galaxies using ellipses, rotate, radians, etc. on mouseX and mouseY. However, I'd love it if each mini galaxy could rotate left or right, so that it looks like a galaxy turning slowly in space. Not sure how I'd do this, though, and would love some guidance. Do I have to create an array that holds the ellipses for each galaxy, and then somehow rotate that? Can I simply set a rotate() for each individual ellipse as it draws to the screen? Thanks for any help!
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

You'll have better luck with your questions if you try to narrow them down to an MCVE instead of posting your full sketch. It's hard to answer general "how do I do this" type questions. It's much easier to answer specific "I tried X, expected Y, but got Z instead" type question. That being said, I'll try to answer in a general sense:
You're having trouble because of the fact that you're letting your drawing accumulate by only calling the background() function once instead of clearing it every frame. There's nothing wrong with this, but it does make it impossible to apply transforms and rotations to stuff you've already drawn.
Like I said in your other question, most Processing sketches do this:
Store everything you need to draw in a data structure.
You might store an array of PVectors. Or you might create a Galaxy class that contains variables and functions that allow it to draw itself, which you call from your draw() function. The data structure you use is entirely up to you.
This page and this page contain discussions on creating objects in p5.js, or you might just try a google search. Here is an example that uses a class that knows how to draw itself, and then creates an instance of that class to create a sketch.
Clear previous frames every time draw() is called.
Most sketches call the background() function every frame. That might seem annoying because then you have to redraw everything, but that's what the data structures are for.
Redraw everything you want to be drawn every frame.
Iterate over those data structures and redraw your scene. This might be as simple as iterating over an array of PVectors, or maybe you'll want to create objects that know how to draw themselves.
Like I said, this is very general, and exactly what you do depends on how you think about all of the above. There isn't a single best way to do this, so it's hard to be more specific.