CODEWITHSUNDEEP
javascriptgraphicsgeometryprocessingp5.js
KP.
KP.

Reputation: 186

Move along an arc in p5js

I am having so much trouble fixing this part of my code. I am creating an interactive picture in P5js. Part of the picture is a sun. I want the sun to move across the screen in an arc as the mouse moves back and forth across the screen. Like this:

diagram

My thought is essentially to map mouse to a certain range of angles and then use that angle to calculate the position of my sun, but I'm having a lot of trouble wrapping my head around circular motion.

Specifically, I can get something to move circularly, but I don't really understand how to change the center point of said circle. Here is the code for my sun object and also a link to the Sketch on openprocessing where you can see it in action and play around with the code:

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

Thanks in advance for any help, I am just having trouble connecting my old high school geometry into code!

Upvotes: 2

Views: 3041

Answers (2)

Kevin Workman
Kevin Workman

Reputation: 42176

You'll probably want to look into polar coordinates.

Basically, you have the following:

  • A center point that you want your sun to rotate around.
  • An angle you want your sun to be rotate.
  • A distance between the center point and the sun.

And you can calculate the position of the sun using the cos() and sin() functions:

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

Then, the only question becomes how to map the mouseX position to the angle. For this, you can use the map() function. The map() function takes an angle between two values (like mouseX being between 0 and width) and maps it to another range (like 0 and 2*PI for your angle). Something like this:

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

You'll probably want to play with the values a bit. Using 0 and 2*PI will give you a full circle. If you only want a half circle, you'll want to use something like PI and 2*PI.

More info can be found in the reference.

Upvotes: 2

ashish singh
ashish singh

Reputation: 6904

line 28 and 29 in Sun

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

change your draw to this

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);
        }
    }

}

Upvotes: 2

Related Questions