Why isn't my canvas resizing in p5.js?

Hey everyone, so I was editing my code and I believe when I added the translate function in my function draw, it somehow prevented my text and other contexts of my sketch to resize when I would resize my browser. Not sure what has happened here.
Would really appreciate if someone could have a look to see my mistake :slight_smile:

function setup() {
  
  createCanvas (windowWidth, windowHeight);
  background (255);
  
  //colorMode (HSB, 255);
  mode =0; // initially before the artwork animation has begun 

function draw (){
  //clear();
  translate (width/2, height/2);
  
  if (mode==0) {
    
    img.resize (155, 43);
    image (img, windowWidth/2 -885, windowHeight/2 - 541);
    fill (0);
    textAlign (CENTER);
    textSize (50);
    textFont ("Futura");
    text ('N   O          T   I   F   Y', windowWidth/2 -720, windowHeight/2 -500);
    text ('M Y', windowWidth/2 - 710, windowHeight/2 -400);
    text ('A', windowWidth/2 -1000, windowHeight/2 -290); //windowWidth - 730, windowHeight - 300);
    text ('D', windowWidth/2 -930, windowHeight/2 -320);
    text ('D', windowWidth/2 -860, windowHeight/2 -340);
    text ('!', windowWidth/2 -790, windowHeight/2 -280);
    text ('C', windowWidth/2 -720, windowHeight/2 -320);
    text ('T', windowWidth/2 -650, windowHeight/2 -290);
    text ('!', windowWidth/2 -580, windowHeight/2 -270);
    text ('O', windowWidth/2 -510, windowHeight/2 -300);
    text ('N', windowWidth/2 -440, windowHeight/2 -310);
    text ('.', windowWidth/2 -370, windowHeight/2 -310);
    text ('.', windowWidth/2 -300, windowHeight/2 -310);
    text ('.', windowWidth/2 -220, windowHeight/2 -310);
    
    textSize (15);
    text ('This is an interactive generative artwork based off the data notification that Alice Yu received within a week. Move the sliders around to see what happens! Just have fun with it!',windowWidth/2 -800 ,windowHeight/2 -500, 525, 100);
    text ('Press ENTER to Begin', windowWidth/2 - 810, windowHeight/2 -550);
   
    noFill ();
    strokeWeight (1);
    stroke (0);
   rect (windowWidth/2 -886, windowHeight/2 -539, 155, 40, 50);
   noLoop ();

  }

function windowResized () {
  resizeCanvas (windowWidth, windowHeight);

}

this is a TON if code to go through. maybe try to isolate the problem so people could maybe help you with the specific misunderstanding you have.

2 Likes

sorry okay! :slight_smile:

1 Like