Вращающиеся/поворотные группы эллипсов

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 page10 и this page содержат обсуждения по созданию объектов в p5.js, или вы можете просто попробовать выполнить поиск в Google. Here - пример, который использует класс, который знает, как рисовать себя, а затем создает экземпляр этого класса для создания эскиза.

Очистить предыдущие кадры каждый раз, когда draw() называется.

Большинство эскизов называют background() функцией каждый кадр. Это может показаться раздражающим, потому что тогда вам нужно перерисовать все, но для этого нужны структуры данных.

Переделайте все, что вы хотите нарисовать каждый кадр.

Итерации над этими структурами данных и перерисовать вашу сцену. Это может быть так же просто, как итерация по массиву PVectors, или, возможно, вам захочется создать объекты, которые знают, как рисовать себя.

Как я уже сказал, это очень общее, и именно то, что вы делаете, зависит от того, как вы думаете обо всем вышеизложенном. Существует не один лучший способ сделать это, поэтому трудно быть более конкретным.