Need help with applying proportional stroke to randomly sized text

p5.js Coding Questions
1

I have a sketch at: testing outline width - OpenProcessing

A phrase is output with random size and color.
Some proportion of the time, an outline is added, but rather than hardcoding a value, I want stroke to be proportional to the text size.

I have been trying to use ChatGPT to help, but it lacks enough context to do anything other than reorganising code that functions the same.

When I console.log:
console.log(textSize());
console.log(thickness);

I see a relation of 0.1 as expected.
However, what is drawn on the canvas does not reflect that.

Any ideas?

2

I am not familiar with processing and I do not really understand your code but I think you have to save correspodending textSize and strokeSize in arrays to get them together. Then you can loop through them and call on corresponding indices. I made a simple sketch in p5.js editor p5.js Web Editor | TextandStroke (p5js.org)

3

That’s very helpful, thank you!

4

Hello @optimystery,

Sharing my exploration of this using the CanvasRenderingContext2D interface:

image
image1671×497 170 KB

image
image1382×599 183 KB

References:

I explored the reference above and experimented a bit.

:)

1 Like
5

Nice, thanks. I will revisit this project soon, so this will be useful. :pray:

1 Like