Is there a way stop the function "windowResized" to rerun the "draw"?

p5.js Beginners
1

Each time the windows is resized, the responsive function works as intended, but redrawing the canvas so all the sketch and its variables are recalculated.

I simply want to position words in a random way through out the window.

console.log('experimentsTitles.js is loaded.')

let titlesArray = ['1', '2','3', '4']

function setup() {

  createCanvas(windowWidth, windowHeight);

}

function draw() {

  clear()

  for(let i = 0; i<= titlesArray.length - 1; i++){

    let titleA = createA('/', titlesArray[i], '_blank')

    titleA.style('font-size', '5rem')

    titleA.style('text-decoration', 'none')

    titleA.position(random(width), random(height))

  }

  noLoop()

}

function windowResized() {

  resizeCanvas(windowWidth, windowHeight)

}
2

Hi! I see 2 problems here. One is that createA is not drawing on canvas but creates an HTML tag independent from the canvas. So, even if you clear, these tags remain and that’s why you see the characters multiplying.

The second issue is that random is always random :sweat_smile: I think the straightforward way is to store these random x,y in an array at setup - perhaps you want to generate random numbers between 0-1 and scale by width or height, because literally these values change after the window is resized. Another way, which is easier but less flexible is to use randomSeed. This function makes sure that every time random is called, it will return the same values in order. I provide you with the latter solution, but I highly suggest you to try the first solution :slight_smile:

console.log('experimentsTitles.js is loaded.')

let titlesArray = ['1', '2','3', '4']
let titleAs = [];

function setup() {

  createCanvas(windowWidth, windowHeight);

  randomSeed(7);
  for(let i = 0; i<= titlesArray.length - 1; i++){

    let titleA = createA('/', titlesArray[i], '_blank')

    titleA.style('font-size', '5rem')

    titleA.style('text-decoration', 'none')

    titleA.position(random() * width, random() * height)
    titleAs.push(titleA)
  }

}

function windowResized() {

  resizeCanvas(windowWidth, windowHeight)
  
  randomSeed(7);
  for(let i = 0; i<= titleAs.length - 1; i++){

    let titleA = titleAs[i];

    titleA.position(random() * width, random() * height)

  }



}

https://editor.p5js.org/micuat/sketches/mt1re7T3d

3 Likes
3

Thank you very much! Learned a lot from this.

1 Like