CODEWITHSUNDEEP
p5.js
Bigboss01
Bigboss01

Reputation: 618

p5 with Polar Coordinates- how to spiral inwards without reversing direction

let circ1;
let circ2;

function setup() {
  createCanvas(400, 400);
  circ1 = new Circle(width/2, height/2, 200)
  // circ2 = new Circle(100, 100, 0)
}

function draw() {
  background(220);
  circ1.update();
  circ1.show();
  // circ2.update();
  // circ2.show();
}

function Circle(w,h,dim){
  this.scalar = 0;
  this.dim = dim;
  this.theta = 0;
  this.pos = createVector(w,h)
  this.booler = false;
  
  this.update = function(){
    this.pos.x = this.dim + sin(this.theta) * this.scalar
    this.pos.y = this.dim + cos(this.theta) * this.scalar
      
    push();
    fill(255,0,0);
    circle(this.theta,this.scalar,10)
    pop();
    line(this.theta,this.scalar,this.dim,this.dim)
    circle(this.dim,this.dim, 10)

    if(this.theta > 50){
      this.booler = true;
    }
    if (this.theta < 1){
      this.booler = false;
    }
    
    let d = dist(this.pos.x,this.pos.y,this.dim,this.dim)
    let force = map(d, 0,100, 0.1,0.01)
    
    if(this.booler){
      this.center(force);
    } else {
      this.decenter(force);
    }
  }
  
  this.decenter = function(force){
    this.theta += force;
    this.scalar += force;
  }
  
  this.center = function(force){
    this.theta -= force;
    this.scalar -= force;
  }
  
  this.show = function(){
    circle(this.pos.x,this.pos.y,30)  
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
</body>
</html>

This is a very mathematical question, so if it should go in another forum let me know. My problem is in this sketch. What I would like is for the spiral to move inwards (or outwards) without reversing direction.

I am drawing a circle at (posX,posY).

posX = screenWidth/2 + sin(theta) * scalar,

posY = screenHeight/2 + cos(theta) * scalar,

I am creating the clockwise (inwards) by decreasing the values theta and scalar, and increasing the values for the opposite. But this is simply "winding" and "rewinding" the spiral, not shrinking and growing it.

Upvotes: 0

Views: 121

Answers (1)

Paul Wheeler
Paul Wheeler

Reputation: 20140

To avoid reversing direction simply always increase theta even when you are decreasing scalar:

  this.decenter = function(force){
    this.theta += force;
    this.scalar += force;
  }
  
  this.center = function(force){
    // If you start decreasing theta you will be reversing the direction of rotation.
    this.theta += force;
    this.scalar -= force;
  }

Upvotes: 2

Related Questions