# Needs help scaling my project to the correct size

**URL:** <https://discourse.processing.org/t/needs-help-scaling-my-project-to-the-correct-size/33414>\
**Category:** Libraries\
**Created:** [November 9, 2021, 4:33am UTC](https://discourse.processing.org/t/needs-help-scaling-my-project-to-the-correct-size/33414 "2021-11-09T04:33:52Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![timtam198](https://avatars.discourse-cdn.com/v4/letter/t/439d5e/32.png) [@timtam198](https://discourse.processing.org/u/timtam198)\
**Post date:** [November 9, 2021, 4:33am UTC](https://discourse.processing.org/t/needs-help-scaling-my-project-to-the-correct-size/33414/1 "2021-11-09T04:33:52Z")

</div>

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,

 ![Screenshot 2021-11-09 at 12.26.55 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c02357b53c77c552c010c4aadd8262f793209d3c.jpeg)  
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?

```auto
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();
}

```

---

<div class="post-metadata">

**Author:** ![38Red](https://avatars.discourse-cdn.com/v4/letter/3/9de053/32.png) [@38Red](https://discourse.processing.org/u/38Red)\
**Post date:** [November 13, 2021, 9:44am UTC](https://discourse.processing.org/t/needs-help-scaling-my-project-to-the-correct-size/33414/2 "2021-11-13T09:44:49Z")

</div>

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