# Programming advice (spiral from point to point)

**URL:** <https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628>\
**Category:** Coding Questions\
**Created:** [June 18, 2022, 6:34pm UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628 "2022-06-18T18:34:57Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rbu](https://avatars.discourse-cdn.com/v4/letter/r/bb73d2/32.png) [@Rbu](https://discourse.processing.org/u/Rbu)\
**Post date:** [June 18, 2022, 6:34pm UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/1 "2022-06-18T18:34:57Z")

</div>

Hello,

I am looking to start a programming project.  
But stuck at the first  
I want to program a progressive circle that follows a line.

 ![IMG_20220618_192254](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/b/7b4c7ac985682f6b2cce2d6a4ad8b69b7d953b59.jpeg)

I will add a picture because im unsure how to explain.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 18, 2022, 6:52pm UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/2 "2022-06-18T18:52:01Z")

</div>

Hello @rbu,

There are resources here to start you on your journey:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts…

This is about trigonometry:

> **[Trigonometry Primer](https://processing.org/tutorials/trig/)**
>
> An introduction to trigonometry.

This snippet from tutorial will let help you draw a circle:

```auto
float x = cos(radians(angle)) * radius; 
float y = sin(radians(angle)) * radius;
point(x, y); // hint...

```

You will have to consider how to increase _angle_ over time…

Start simple and draw a circle with points…

Once you have an x and y point of a circle to plot you can then add to the y over time and have the circles progress in the y direction.

Start simple and work from there…

I did this in a few lines of code with above suggestion:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/e/6ec61d597ac53bc6ee4b9d440e630facbc908432.png)

You may want try drawing a line at first and have it grow longer over time.

Simple example with _point()_ to start with:

```auto
float x;
float y;

void setup() 
  {
  size(300, 600);
  }

void draw() 
  {
  x = 150;
  point(x, y);
  y = y+1;
  }

```

If you are a beginner you need to look up the references for every element of your code:

- setup()
- draw()
- background()
- size()
- point()
- And so on…

`:)`

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [June 19, 2022, 7:35am UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/3 "2022-06-19T07:35:30Z")

</div>

Hi @Rbu,

Just as another hint…

This from @glv post …

```auto
float x = cos(radians(angle)) * radius; 
float y = sin(radians(angle)) * radius;
point(x, y); // hint...

```

… will give you the circle points around the origin (0,0).  
If you want to adjust the origin you need to apply an offset for x and y.  
Ie:

```auto
// offX could be x value of your line point
// offY could be y value of your line point
float x = offX + cos(radians(angle)) * radius; 
float y = offY + sin(radians(angle)) * radius;
point(x, y); // hint...

```

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 19, 2022, 3:02pm UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/4 "2022-06-19T15:02:34Z")

</div>

It’s also fun to do in 3D

Like a spiral going north

---

<div class="post-metadata">

**Author:** ![Rbu](https://avatars.discourse-cdn.com/v4/letter/r/bb73d2/32.png) [@Rbu](https://discourse.processing.org/u/Rbu)\
**Post date:** [June 19, 2022, 6:52pm UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/5 "2022-06-19T18:52:14Z")

</div>

Thanks for the help.

I’m struggling, to be honest. If there is a level zero with coding, I’m minus 1. I have read the references and understand the basics.

I also understand the simple example where the line progresses, but I can not work out how to even draw the circle with the cos and sin for the life of me.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 19, 2022, 7:18pm UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/6 "2022-06-19T19:18:08Z")

</div>

> [@mnse](#):
>
> ```auto
> float x = offX + cos(radians(angle)) * radius; 
> float y = offY + sin(radians(angle)) * radius;
> point(x, y); // hint...
> 
> ```

This would work inside a for loop from angle going from 0  
To 360

```auto
for(int angle=0; angle<360; angle++) {

...

}

```

A few variables are to be defined before the for loop:

`float radius=30; float offX=90; float offY=90;`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 19, 2022, 7:33pm UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/7 "2022-06-19T19:33:29Z")

</div>

> [@Rbu](#):
>
> I also understand the simple example where the line progresses, but I can not work out how to even draw the circle with the cos and sin for the life of me.

There are examples available with the Processing IDE (File \> Examples… ):

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/6/661392e267307ca681509dd14a27300382e72d7a.png)

Take a look at the one I highlighted.

Consider going through some of the tutorials on the Processing website:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

`:)`

---

<div class="post-metadata">

**Author:** ![Ghostsss](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ghostsss/32/16483_2.png) [@Ghostsss](https://discourse.processing.org/u/Ghostsss)\
**Post date:** [June 20, 2022, 1:11pm UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/8 "2022-06-20T13:11:49Z")

</div>

One more hint.  
You may also require strokeWeight() function.

---

<div class="post-metadata">

**Author:** ![Rbu](https://avatars.discourse-cdn.com/v4/letter/r/bb73d2/32.png) [@Rbu](https://discourse.processing.org/u/Rbu)\
**Post date:** [June 20, 2022, 7:34pm UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/9 "2022-06-20T19:34:38Z")

</div>

So I think I have done it.

```auto
float radius = 50;
float offX = 300;
float offY = 25;

void setup() {
  size(600,600);
}

void draw() {
 
  for(int angle=0; angle<360; angle++) {
  float x = offX + cos(radians(angle)) * radius; 
  float y = offY + sin(radians(angle)) * radius;
  point(x,y);
  offY += 0.15;
  }
  
}

```

so my next objective is to go from pixel a say 150,150 to pixel 300,300. got any hints pls

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 20, 2022, 8:02pm UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/10 "2022-06-20T20:02:21Z")

</div>

> [@Rbu](#):
>
> so my next objective is to go from pixel a say 150,150 to pixel 300,300. got any hints pls

Hello,

Try drawing a line with `point()` and also with `line()` from (150, 150) to (300, 300).

Look up the references for:

- `point()`
- `line()`
- `for()`

Are you using the resources here?

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

Another good resource:

> **[Happy Coding](https://happycoding.io/)**
>
> HappyCoding.io is a collection of coding tutorials, and a community of folks just like you learning how to code.

`:)`

---

<div class="post-metadata">

**Author:** ![Rbu](https://avatars.discourse-cdn.com/v4/letter/r/bb73d2/32.png) [@Rbu](https://discourse.processing.org/u/Rbu)\
**Post date:** [June 20, 2022, 8:37pm UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/11 "2022-06-20T20:37:27Z")

</div>

hello glv,

i get the line but where am I going wrong with the point?

```auto
float radius = 50;
float offX = 300;
float offY = 25;

void setup() {
  size(750,750);
   line(150,150,600,150);
  line(150,150,150,600);
  line(600,150,600,600);
  line(150,600,600,600);
}

void draw() {
  
  for(int k = 600; k < 150; k = k-11){
    for(int j = 600; j < 150; j = j-1){
    point(k,j);

    }
  }
  
  for(int i = 150; i < 600; i = i+1){
    line(150,150,i,i);
  }
  
  for(int angle=0; angle<360; angle++) {
  float x1 = offX + cos(radians(angle)) * radius; 
  float y1 = offY + sin(radians(angle)) * radius;
  point(x1,y1);
  offY += 0.15;
  }
  
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 20, 2022, 9:58pm UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/12 "2022-06-20T21:58:50Z")

</div>

For the line you don’t need a  
for loop.

Instead just say

line(offX, offY, offX, offY +  
height- 100);

or so

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 21, 2022, 12:36am UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/13 "2022-06-21T00:36:47Z")

</div>

Hello,

> [@Rbu](#):
>
> i get the line but where am I going wrong with the point?

You are trying to progress from a -1 skill level to a nested for loop that is decrementing.

Start simple and work from there.

Try an incrementing for loop first.

Read a bit more about for loops and take a close look at this _test_ in your loop:

`k < 150 // this evaluates to false`

These are popular tutorials:

https://www.youtube.com/embed/videoseries?list=PLzJbM9-DyOZyMZzVda3HaWviHqfPiYN7e&wmode=transparent&rel=0&autohide=1&showinfo=1&enablejsapi=1

`:)`

---

<div class="post-metadata">

**Author:** ![Rbu](https://avatars.discourse-cdn.com/v4/letter/r/bb73d2/32.png) [@Rbu](https://discourse.processing.org/u/Rbu)\
**Post date:** [November 25, 2022, 6:20pm UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/14 "2022-11-25T18:20:56Z")

</div>

Hello all after a long battle with mental health I’m back.

```auto
float radius = 25;
//float offX = 600;
//float offY = 50;
String[] lines;
int index = 0;
int index1 = 1;

void setup() {
  size(1200, 600, P2D);
  background(10);
  stroke(255);
  frameRate(2);
  lines = loadStrings("list.txt");
}

void draw() {

  if (index < lines.length) {
    String[] pieces = split(lines[index], ' ');
    if (index1 < lines.length) {
      String[] pieces1 = split(lines[index1], ' ');

      int x = int(pieces[0]);
      int y = int(pieces[1]);
      int x1 = int(pieces1[0]);
      int y1 = int(pieces1[1]);
      line(x, y, x1, y1);

      float dis = dist (x, y, x1, y1);
      println(dis);
      PVector v1 = new PVector(x, y);
      PVector v2 = new PVector(x1, y1);
      float a = PVector.angleBetween(v1, v2);
      println(degrees(a));
      
        if (x < x1) {
         int 2x (x ++1);
        } else {
          println ("no");
        }
        if (y < y1) {
         println ("yes");
        } else {
          println ("no");
        }

      // Go to the next line for the next run through draw()
      index = index + 1;
      index1 = index1 + 1;

      for (int angle=0; angle<360; angle++) {
       
        float x2 = x + cos(radians(angle)) * radius;
        float y2 = y + sin(radians(angle)) * radius;
        point(x2, y2);
        //adjust the over laps of curves
        //x1 += 0.10;
      }
    }
  }
}

```

this is what I have so far, and struggling with how to get the circles to follow the path in a spiralling action I know I need to offset the x and the y, but how? any advice or where to look?

also, I have tried adding if statements I’m just experimenting with what I can do, really, but I can get it to println but when I want it to change an aspect, I can’t get it too, and all the examples are changing background colours.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 26, 2022, 1:06pm UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/15 "2022-11-26T13:06:27Z")

</div>

Hello!

Good to hear that you are better! 👍

you are using a text file, can you post the first 10 lines of it please?  
I am not sure about the content.

I assumed this content:

```auto
100 200
200 220
300 230
400 240
500 250
600 260
700 270
800 280
900 290

```

You connect point 0 with point 1, then point 1 with point 2 and so on.

There is a trick to calculate all points between two points x,y and x1,y1 (point 0 with point 1 and so on): it’s the `lerp()` command. We use it inside the for loop.

We use these calculated points as the wandering CENTER for the spiral we are drawing.

So while the angle increases, the center wanders at the same speed.

**Full Code**

```auto
float radius = 25;

String[] lines;

int index = 0;
int index1 = 1;

void setup() {
  size(1200, 600, P2D);
  background(10);
  stroke(255);
  frameRate(2);
  lines = loadStrings("list.txt");
}

void draw() {

  if (index < lines.length) {

    String[] pieces = split(lines[index], ' ');

    if (index1 < lines.length) {

      String[] pieces1 = split(lines[index1], ' ');

      int x = int(pieces[0]);
      int y = int(pieces[1]);
      int x1 = int(pieces1[0]);
      int y1 = int(pieces1[1]);

      // make a line between x,y and x1,y1
      stroke(255, 0, 0); // RED 
      line(x, y, x1, y1);

      // make a spiral between x,y and x1,y1
      float upperBound = 360*3; 
      for (int angle=0; angle<upperBound; angle++) {

        // calc parameter amt for lerp to indicate how far we are between x,y and x1,y1. 
        // amt is between 0 and 1. 
        float amt = map( angle, 
          0, upperBound, 
          0, 1); 

        // calc current center between x,y and x1,y1
        float myCenterX = lerp ( x, x1, amt);  
        float myCenterY = lerp ( y, y1, amt); 

        float x2 = myCenterX + cos(radians(angle)) * radius;
        float y2 = myCenterY + sin(radians(angle)) * radius;

        stroke(0, 255, 0); // GREEN 
        point(x2, y2);
      }// for

      // Go to the next line for the next run through draw()
      index = index + 1;
      index1 = index1 + 1;
    }
  }
}

```

**Remark**

> [@Rbu](#):
>
> ` int 2x (x ++1);`

- this won’t work: x ++1 ---- you want x++
- same line: 2x ( ---- you want `2 * (` OR `2 * x * (` [other than in math, processing doesn’t know the implicit multiply, we always need the `*` operator]
- the int in this place I cannot understand. When you declare a new var it’s `int x2 = 2 * (x++);` OR just `x = 2 * (x++);` without the int
- I deleted the section anyway

Have a nice advent season!

Warm regards,

Chrisir 😊

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 26, 2022, 1:45pm UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/16 "2022-11-26T13:45:22Z")

</div>

Quick 3D spiral

```auto

float radius = 75;
float ang1=0; 

ArrayList<PVector> listAllPoints=new ArrayList(); 

void setup() {
  size(1200, 600, P3D);

  background(10);
  avoidClipping();
  stroke(255);
  //frameRate(2);
  noStroke(); 
  fill(0, 255, 0); // GREEN 
  sphereDetail(4);

  for (int i=0; i < 10; i++) {
    defineAllPoints();
  }
}

void draw() {
  background(10);

  camera(0, height/2.0, (height/2.0) / tan(PI*30.0 / 180.0), 
    0, height/2.0, 0, 
    0, 1, 0);

  lights(); 
  rotateY(ang1+=0.093); 

  for (PVector pv : listAllPoints ) {
    mySphereCommand(pv.x, pv.y, pv.z);
  }
}

// -----------------------------------------------------------------

void defineAllPoints() {
  // make a spiral 
  float upperBound = 360*13; 
  for (int angle=0; angle<upperBound; angle++) {

    // calc parameter amt for lerp to indicate how far we are. 
    // amt is between 0 and 1. 
    float amt = map( angle, 
      0, upperBound, 
      0, 1); 

    float myX = lerp(90, width-111, amt);  
    float myY = 233 + cos(radians(angle)) * radius;
    float myZ = -33 + sin(radians(angle)) * radius;

    listAllPoints.add(new PVector(myX, myY, myZ));
  } // for
}

void mySphereCommand(float x2, float y2, float z2) {
  pushMatrix(); 
  translate(x2, y2, z2);
  sphere( 12 ); 
  popMatrix();
}

void avoidClipping() {
  // avoid clipping (at camera): 
  // https : // 
  // forum.processing.org/two/discussion/4128/quick-q-how-close-is-too-close-why-when-do-3d-objects-disappear
  perspective(PI/3.0, (float) width/height, 1, 1000000);
}//func 
//

```

---

<div class="post-metadata">

**Author:** ![Rbu](https://avatars.discourse-cdn.com/v4/letter/r/bb73d2/32.png) [@Rbu](https://discourse.processing.org/u/Rbu)\
**Post date:** [November 27, 2022, 11:04am UTC](https://discourse.processing.org/t/programming-advice-spiral-from-point-to-point/37628/17 "2022-11-27T11:04:32Z")

</div>

One word to them responses Legendary, thank you so much; I’ve started to add some additional elements to the code you helped with, as a variable radius and a variable affecting the map solution I feel I would have been stuck at the problem for months, so thank you very much.

I’m sure there will be more questions to follow as even tho I am starting to pick things up do feel the biggest issue is problem-solving and getting the solutions required. and keep my code clean I mean, you half my code and got better results, so thanks again for your knowledge sharing.