Dynamic Text size (responsive)

p5.js Coding Questions
1

Hello, everyone,
I would like the text to change size according to the choice of window size. But my code doesn’t work. Can you explain me why please?

let titleSize = floor(createNumberDict(12, setLayout[layoutMode][0]));

where setLayout is an array containing the different sizes and layoutMode is a variable I set manually to change the window size.

2 Likes
2

I don’t fully understand how your code works (since you didn’t post the whole version) but in general, you could change it with the help of width & height variables. The simplest example would be:

textSize(width*0.1); //the larger the width, the larget the text
//but this doesn't take into accound height!

Or you could do something like this (if you have window size options available to user)

if(width<100) textSize(5);
else if(width<200) textSize(10);
else if(width<300) textSize(15);
//and continue like this.

The 3rd option is to have everything automated. You let the user choose one of n presets:

if(sizePreset==0) textSize(15);
if(sizePreset==1) textSize(20);
if(sizePreset==2) textSize(50);
if(sizePreset==3) textSize(7);

Or you can automate this by using

textSize(textSizeArray[sizePreset]);
//or using a function to get/calculate it 
//(more flexible and no crashing 
//since you can set default value even if preset is out of range)
textSize(getTextSize(sizePreset));
2 Likes
3

Thank you very much :smiley: I’m a novice and I din’t noticed it.
Your solution solved my problem :smiley:

2 Likes