Двигаться по дуге в p5js - PullRequest
Новая
       25

Двигаться по дуге в p5js

0 голосов
/ 24 сентября 2018

У меня так много проблем с исправлением этой части моего кода.Я создаю интерактивную картинку в P5js.Часть картины - солнце.Я хочу, чтобы солнце двигалось по экрану по дуге, когда мышь движется вперед и назад по экрану.Вот так:

diagram

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

В частности, я могу заставить что-то двигаться по кругу, но я не совсем понимаю, как изменить центральную точку указанного круга.Вот код моего солнечного объекта, а также ссылка на Sketch по открытой обработке, где вы можете увидеть его в действии и поиграть с кодом: 

function Sun(x,y,w,h,c1,c2){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.c1 = c1;
    this.c2 = c2;

    this.center = createVector(width/2,height/2);
    this.pos = createVector(this.x,this.y);
    var dx = this.center.x - this.pos.x;
    var dy = this.center.y - this.pos.y;
    var initAngle = atan2(dx,dy);
    this.angle =  initAngle;
    this.constant = height/2;
    this.radius = dist(this.center.x,this.center.y,this.pos.x,this.pos.y);

    this.display = function(){
        noStroke();
        fill(red(c1),green(c1),blue(c1));

        //draw center point
        ellipse(this.center.x,this.center.y,10,10);

        var x = this.constant + sin(this.angle) * this.radius;
        var y = this.constant + cos(this.angle) * this.radius;
        ellipse(x,y,50,50);

        this.angle = map(mouseX,0, width, initAngle, initAngle + PI);
    }
}

https://www.openprocessing.org/sketch/591063

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

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

Вы, вероятно, захотите взглянуть на полярные координаты .

По сути, у вас есть следующее:

  • Центральная точка, в которой вы хотите ваше солнцевращаться вокруг.
  • Угол поворота вашего солнца.
  • Расстояние между центральной точкой и солнцем.

И вы можете вычислитьположение солнца с использованием функций cos() и sin(): 

var sunX = centerX + cos(angle) * distance;
var sunY = centerY + sin(angle) * distance;

Тогда возникает единственный вопрос, как сопоставить положение mouseX с углом.Для этого вы можете использовать функцию map().Функция map() принимает угол между двумя значениями (например, mouseX находится между 0 и width) и отображает его в другой диапазон (например, 0 и 2*PI для вашего угла).Примерно так: 

var angle = map(mouseX, 0, width, 0, 2*PI);

Возможно, вы захотите немного поиграть со значениями.Использование 0 и 2*PI даст вам полный круг.Если вам нужен только полукруг, вам нужно использовать что-то вроде PI и 2*PI.

Более подробную информацию можно найти в , ссылка .

0 голосов
/ 24 сентября 2018

строки 28 и 29 на Солнце 

    var x = this.constant + sin(this.angle + HALF_PI) * this.radius;
    var y = this.constant + cos(this.angle +HALF_PI) * this.radius;

измените свою ничью на эту 

function draw() {
    if(frameCount % 200 == 0) clouds.push(new Cloud());
    sky.display();
    sun.display(); // brought this line from bottom to behind mountains
    mountain.display();
    for(var i = 0; i < clouds.length; i++){
        clouds[i].display();
        if(!clouds[i].inBounds()){
            clouds.splice(i,1);
        }
    }

}
...