# Position algorithm problem in for loop

**URL:** <https://discourse.processing.org/t/position-algorithm-problem-in-for-loop/40604>\
**Category:** Coding Questions\
**Created:** [January 16, 2023, 7:05am UTC](https://discourse.processing.org/t/position-algorithm-problem-in-for-loop/40604 "2023-01-16T07:05:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![niuuin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/niuuin/32/7517_2.png) [@niuuin](https://discourse.processing.org/u/niuuin)\
**Post date:** [January 16, 2023, 7:05am UTC](https://discourse.processing.org/t/position-algorithm-problem-in-for-loop/40604/1 "2023-01-16T07:05:31Z")

</div>

![ezgif.com-gif-maker (22)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/5/3516c8789ce6a267f4bbcd3e6989d16bb7b393ca.gif)

The current state is as shown in the figure, with “a” as the axis of movement, how to move with “d” as the axis in the current cycle?

Here’s the current code, thanks for your help!

```auto
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  let tSize = 40;
  let distance = map(sin(frameCount * 0.04), -1, 1, 0, 80);
  leftAlign("abcd", 100, height/2, distance, tSize);
  
}

function leftAlign(strings, posX, posY, distance, tSize) {
  noStroke();
  textSize(tSize);
  push();
  translate(posX, posY);
  for (let i = 0; i < strings.length; i++) {
    let x = i * distance;
    text(strings[i], x, 0);
  }
  pop();
}

```

* * *

I tried to write a new function to achieve the desired effect, by rearranging the content array.

![ezgif.com-gif-maker (23)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/0/b0b544ead05d052e35adbbfc681d9f9c97727967.gif)

```auto
function rightAlign(strings, posX, posY, distance, tSize) {
  let stringsArray = strings.split("").reverse();
  noStroke();
  textSize(tSize);
  push();
  translate(posX, posY);
  for (let i = 0; i < strings.length; i++) {
    let x = -i * distance;
    text(stringsArray[i], x, 0);
  }
  pop();
}

```

But how can we achieve this effect through the positional algorithm without changing the order of the array.

---

<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:** [January 16, 2023, 10:17am UTC](https://discourse.processing.org/t/position-algorithm-problem-in-for-loop/40604/2 "2023-01-16T10:17:08Z")

</div>

> [@niuuin](#):
>
> ```auto
> let distance = map(sin(frameCount * 0.04), -1, 1, 0, 80);
>  
> 
> ```

This line must be different for each letter

Therefore move it to the function

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 16, 2023, 11:18am UTC](https://discourse.processing.org/t/position-algorithm-problem-in-for-loop/40604/3 "2023-01-16T11:18:11Z")

</div>

> [@niuuin](#):
>
> , how to move with “d” as the axis in the current cycle?

The axis element is determined when parameter _distance_ is multiplied by `0`:  
`const x = i * distance;`

Variable _i_ is both the loop iterator’s current value & string’s current index.

So when _i_ is `0` we have element “a”, which makes the multiplication w/ parameter _distance_ equal to `0`.

In order to change the axis element to “d”, which is the last index, we need to decouple current string index from current iterator value:  
`const idx = abs(strings.length - 1 - i), x = i * distance;`

Now we have a separate _idx_ variable which is the inverse of _i_.

When current _i_ is `0`, _idx_ is `3`. And when current _i_ is `3`, _idx_ is `0`.

Thus _idx_ = `3` is our new axis, b/c that’s when _i_ = `0`!

Check it out the changes I’ve made to your original sketch:

```auto
// Discourse.Processing.org/t/position-algorithm-problem-in-for-loop/40604/3
// (2023/Jan/16)

"use strict";

const TXT = 'abcd', STEP = .04, RANGE = 80, REVERSED = true;
var bg;

function setup() {
  createCanvas(400, 400);
  textSize(40).textAlign(CENTER, CENTER).noStroke();
  bg = color(220);
}

function draw() {
  background(bg);
  const dx = RANGE * norm(sin(frameCount * STEP), -1, 1);
  spreadText(TXT, 100, height >> 1, dx, REVERSED);
}

function spreadText(txt, x, y, dx, reversed = false) {
  const len = txt.length, axis = reversed? len - 1 : 0;

  if (reversed) {
    x = width - x;
    dx *= -1;
  }

  for (var i = 0; i < len; ++i) {
    const idx = abs(axis - i), px = i * dx + x;
    text(txt[idx], px, y);
  }
}

```

---

<div class="post-metadata">

**Author:** ![niuuin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/niuuin/32/7517_2.png) [@niuuin](https://discourse.processing.org/u/niuuin)\
**Post date:** [January 18, 2023, 8:34am UTC](https://discourse.processing.org/t/position-algorithm-problem-in-for-loop/40604/4 "2023-01-18T08:34:28Z")

</div>

Thank you all for your help. I also thought of a solution and made an open source tool [StringsAlign.js for p5js](https://github.com/hendasheng/StringsAlign-P5js).

![ezgif.com-gif-maker (24)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/f/3f0cd6076540388eb1a10f5c81834da82d0db2a3.gif)

My English is very poor, and I haven’t had time to do the English version of the document. You can see the internals from the examples folder. 😆

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 18, 2023, 2:33pm UTC](https://discourse.processing.org/t/position-algorithm-problem-in-for-loop/40604/5 "2023-01-18T14:33:33Z")

</div>

Congratz for your new library! 🎊 📚 🎉

And I’ve got some small advices for it:

Your library’s CDN link is unnecessarily too big:

> <https://github.com/hendasheng/StringsAlign-P5js/blob/main/README.md?plain=1#L9-L11>

The `@main` part is totally optional:

```auto
<script src="https://cdn.JsDelivr.net/gh/hendasheng/StringsAlign-P5js/scripts/stringsAlign.js"></script>

```

Actually it’d be even better if you got rid of subfolder “/scripts” and moved file “/stringsAlign.js” to the repo’s root folder:

```auto
<script
  src="//cdn.JsDelivr.net/gh/hendasheng/StringsAlign-P5js/stringsAlign.js">
</script>

```

Another small detail is to rename subfolder “/example” to “/examples”. 😉

That’s all for now. Cya! 😸

P.S.: BtW, you should post your library in the category “Gallery” as well.

---

<div class="post-metadata">

**Author:** ![niuuin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/niuuin/32/7517_2.png) [@niuuin](https://discourse.processing.org/u/niuuin)\
**Post date:** [January 19, 2023, 8:25am UTC](https://discourse.processing.org/t/position-algorithm-problem-in-for-loop/40604/7 "2023-01-19T08:25:41Z")

</div>

Thanks for your advice! This helped me a lot, this is my first library and I don’t know much about libraries. I will continue to update in the future. 😆