How to scale text and image to responsive canvas?

Processing Coding Questions
1

Hi! I’m trying to do a big project, but I’m stuck in a part of it. The canvas I’m working on is responsive, but the text and image aren’t. Here’s a simple code that make what i’m needing.

function setup(){
  createCanvas(windowWidth,windowHeight);
  logo = loadImage("logo.png");
}

function draw(){
  background(0);
  imageMode(CENTER);
  image(logo, windowWidth / 2, windowHeight / 3, 100, 100);
  imageMode(CORNER);
  textSize(30);
  textAlign(CENTER, CENTER);
  rectMode(CENTER);
  text('This is a string of text! This is a string of text!',windowWidth / 2, windowHeight / 2 , 
windowWidth, windowHeight);
}

This is what it looks on a laptop screen:

pic1
pic1.jpg1365×663 121 KB

And this is what look on a responsive screen:

pic2
pic2.PNG393×639 97.2 KB

I want to make the text and the image as big and legible than it is on responsive mode. I know that I have to change the lines

textSize(30);

and

image(logo, windowWidth / 2, windowHeight / 3, 100, 100);

but i don’t know how. Any tips?

1 Like
2

Hi @LoCamillo,

Why don’t you make the size of your text proportional to your canvas size ?

textSize(x/height);

You could also play with constrain() to control your value

textSize( constrain(x/height, 30, 60) );
1 Like