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

Question

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/p5@1.3.1/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.

You should include your code in your question. Links to external sites can become invalid in the future which makes questions less useful to anybody with a similar problem. Also it is a courtesy to people who might answer your question. With p5.js specifically it is possible to post your code as a [runnable snippet](https://stackoverflow.com/a/67410652/229247). — Paul Wheeler, Jan 17 '22 at 05:31

score 2 · Accepted Answer · answered Jan 17 '22 at 05:33

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

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

1 Answers1