Needs help scaling my project to the correct size

[timtam198]

Hello, does anyone know how to make my object stay the same size even when the canvas size changes?
I am currently using windowWidth/Height for my canvas size and while it look great like this,

my shapes distorts weirdly when I try to move the canvas size or when I activate the full screen.
Is there anyway that allows just the canvas size to increase and for my work to still be centralised and increase in size proportionally?

let angle = 0;
let w = 20;
let ma;
let maxD;
let mic;
let amp = 0;
let amp2 = 0;
let amp3 = 0;


function setup() {
  createCanvas(windowWidth, windowHeight,WEBGL);
  // Create an Audio input
  mic = new p5.AudioIn();
  // start the Audio Input.
  // By default, it does not .connect() (to the computer speakers)
  mic.start();
  ma = atan(cos(QUARTER_PI));
  maxD = dist(0, 0, 200, 200);
}

function draw() {
  background(220);
  //scale(0.9, 0.7, 0.8);
  push();
  globe(); 
  cyl();
  cyli();
  cylin();
  cylind();
  cylinde();
  cylindd();
  cylinddd();
  pop();
  
}


function globe(){
  micLevel = mic.getLevel();
  amp += (micLevel - amp) * 1;
  //do adjustments to change the size
  ortho(-600,600, 600, -600, 0, 2000);
  rotateX(ma);
  rotateY(-QUARTER_PI);

  
  for (let z = 0; z < height; z += w) {
    for (let x = 0; x < width; x += w) {
      push();
      let d = dist(x, z, width/2, height/2);
      let offset = map(d,0, maxD, -PI, PI);
      let a = angle + offset;
      let h = floor(map(sin(a), -1, 1, 100, 300));
      translate(x - width / 2, -400, z - height / 2);
      normalMaterial();
      directionalLight(250,0,0,-0.5,-0.1,-0.1);
      noStroke();
      specularMaterial(200);
      //shininess(50);
      box(w, h, w);
      pop();
    }
  }
  angle -= 0.1;
  
}

function cyl()
{
    micLevel = mic.getLevel();
  amp += (micLevel - amp) * 0.91;
  //sphere
  let y = height/7 - amp * height/2;
  translate(0, 50, 0);
  push();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //normalMaterial();
  directionalLight(255,0,0,-0.5,-0.3,-1);
  noStroke();
  specularMaterial(250);
  shininess(50);
  sphere(5+y,128);
  pop();
}


function cyli()
{
    micLevel = mic.getLevel();
  amp2 += (micLevel - amp2) * 0.41;
  //sphere
  let p = height/5 - amp2 * height/2;
  translate(150, -50, -40);
  push();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //normalMaterial();
  directionalLight(255,0,0,-1,-0.5,-1);
  noStroke();
  specularMaterial(250);
  shininess(50);
  sphere(4+p,128);
  pop();
}

function cylin()
{
    micLevel = mic.getLevel();
  amp3 += (micLevel - amp3) * 0.51;
  //sphere
  let p = height/5 - amp3 * height/2;
  translate(-220, -40, 30);
  push();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //normalMaterial();
  directionalLight(255,0,0,-1,-0.5,-1);
  noStroke();
  specularMaterial(250);
  shininess(50);
  sphere(4+p,128);
  pop();
}

function cylind()
{
    micLevel = mic.getLevel();
  amp += (micLevel - amp) * 0.1;
  //sphere
  let p = height/7 - amp * height/2;
  translate(120, -90, 0);
  push();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //normalMaterial();
  directionalLight(255,0,0,-1,-0.5,-1);
  noStroke();
  specularMaterial(250);
  shininess(50);
  sphere(4+p,128);
  pop();
}

function cylinde()
{
    micLevel = mic.getLevel();
  amp2 += (micLevel - amp2) * 0.01;
  //sphere
  let p = height/7 - amp2 * height/2;
  translate(50,300, 0);
  push();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //normalMaterial();
  directionalLight(255,0,0,-1,-0.5,-1);
  noStroke();
  specularMaterial(250);
  shininess(50);
  sphere(4+p,128);
  pop();
}

function cylindd()
{
    micLevel = mic.getLevel();
  amp += (micLevel - amp) * 0.01;
  //sphere
  let p = height/7 - amp * height/2;
  translate(-180, -80, 60);
  push();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //normalMaterial();
  directionalLight(255,0,0,-1,-0.5,-1);
  noStroke();
  specularMaterial(250);
  shininess(50);
  sphere(4+p,128);
  pop();
}

function cylinddd()
{
    micLevel = mic.getLevel();
  amp += (micLevel - amp) * 0.01;
  //sphere
  let p = height/9 - amp * height/2;
  translate(60, 60, -60);
  push();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //normalMaterial();
  directionalLight(255,0,0,-0.5,-0.5,-1);
  noStroke();
  specularMaterial(250);
  shininess(50);
  sphere(4+p,128);
  pop();
}

[38Red]

Your 'p’s are a function of height, so should scale with height e.g. let p = height/9 - amp * height/2;
You then mix it with a constant (4+p) to set the sphere radius, so it will no longer scale proportionally. Try swapping ‘4’ for some function of height (e.g height/100) and see if that works