# Replicating text

**URL:** <https://discourse.processing.org/t/replicating-text/36853>\
**Category:** Coding Questions\
**Created:** [May 12, 2022, 7:39pm UTC](https://discourse.processing.org/t/replicating-text/36853 "2022-05-12T19:39:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![luciaromancanivell](https://avatars.discourse-cdn.com/v4/letter/l/8edcca/32.png) [@luciaromancanivell](https://discourse.processing.org/u/luciaromancanivell)\
**Post date:** [May 12, 2022, 7:39pm UTC](https://discourse.processing.org/t/replicating-text/36853/1 "2022-05-12T19:39:08Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

Hello again,

I am working on a school project where we have to create this with a loop… but I can only get a dark blur, here is the result I need and my current code.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/1/5185d9f92f855b3b09bd50aac53d9eaed4e6d489.png)

```auto
// Variables globales
var canvasWH = 700;
var x;

function setup() {
  createCanvas(canvasWH, canvasWH);
}

function draw() {
textSize(200);
textAlign(CENTER,CENTER);
text('Lucía',350, 350);
  
for(var x=3; x<=500; x++){
stroke('black');
  strokeWeight (2);
noFill();
text('Lucía', 350+x, 350); 
}
}

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [May 12, 2022, 8:43pm UTC](https://discourse.processing.org/t/replicating-text/36853/2 "2022-05-12T20:43:16Z")

</div>

Suggestions:  
1.) Try limiting x to a much smaller number, eg in the 15-20 range.  
2.) To get separation of the lines use an X offset of something like 350 + 3\*x

---

<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:** [May 12, 2022, 8:59pm UTC](https://discourse.processing.org/t/replicating-text/36853/3 "2022-05-12T20:59:30Z")

</div>

> [@svan](#):
>
> like 350 + 3\*x

`like 350 - 3*x`

Chrisir

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [May 12, 2022, 9:08pm UTC](https://discourse.processing.org/t/replicating-text/36853/4 "2022-05-12T21:08:35Z")

</div>

To get offset to right I think you’ll have to use +offset. Negative offset is going to offset it to the left (ie backwards, not forward). Need to decrease stroke weight also; lines are too thick the way it’s set.

---

<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:** [May 13, 2022, 2:46pm UTC](https://discourse.processing.org/t/replicating-text/36853/5 "2022-05-13T14:46:10Z")

</div>

Hello,

Consider:

- _noLoop()_ in _setup()_  
or  
_background()_ at start of _draw()_
- larger spacing; increase steps in _for()_ loop or in body of loop
- start text at the right of screen and decrement x
- experiment with different stroke widths
- try different _textAlign()_ parameters

I was able to modify your code to do this:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/1/01a2b523b780b227acbb67a8ac86fa52583e6a6a.png)

`:)`