Replicating text

p5.js Coding Questions
1

please format code with </> button * homework policy * asking questions

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
image825×406 9.8 KB

// 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); 
}
}
2

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

1 Like
3

like 350 - 3*x

Chrisir

4

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.

5

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

:)

2 Likes