# Issue with windowResize(windowWidth, windowHeight)

**URL:** <https://discourse.processing.org/t/issue-with-windowresize-windowwidth-windowheight/17858>\
**Category:** Coding Questions\
**Created:** [February 16, 2020, 1:15pm UTC](https://discourse.processing.org/t/issue-with-windowresize-windowwidth-windowheight/17858 "2020-02-16T13:15:21Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jctitan](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jctitan](https://discourse.processing.org/u/jctitan)\
**Post date:** [February 16, 2020, 1:15pm UTC](https://discourse.processing.org/t/issue-with-windowresize-windowwidth-windowheight/17858/1 "2020-02-16T13:15:21Z")

</div>

Hi, recently I was making my reactjs app and decided to use p5 canvas as background. Since I didn’t use p5 before, I found some code on internet and copy it to my app. Canvas (background) looks good on page first load, but I have some problems with windowResize event, which I added to code (as it should be added according to p5 documentation). I realize (by console.log()) that variables windowWidth and windowHeigth are changing on window resizing, event windowResize is triggered and even function draw() got called (by event). But this is where the problem arises. Although function draw() is called canvas is not redraw. Any suggestions?

Here is code:

```auto
let circles = [],
    circle = {},
    overlapping = false,
    NumCircles = 40,
    protection = 10000,
    counter = 0;

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

function setup() {
    let canvas = createCanvas(windowWidth, windowHeight);
    
    // populate circles array
    // brute force method continues until # of circles target is reached
    // or until the protection value is reached
    while (circles.length < NumCircles && counter < protection) {
        circle = {
            x: random(width),
            y: random(height),
            r: random(3, 15)
        };
        overlapping = false;

        // check that it is not overlapping with any existing circle
        // another brute force approach
        for (var i = 0; i < circles.length; i++) {
            var existing = circles[i];
            var d = dist(circle.x, circle.y, existing.x, existing.y);
            if (d < circle.r + existing.r) {
                // They are overlapping
                overlapping = true;
                // do not add to array
                break;
            }
        }

        // add valid circles to array
        if (!overlapping) {
            circles.push(circle);
        }

        counter++;
    }
}

function draw() {
    background('rgb(250, 251, 234)');
    noStroke();
    fill('rgba(23, 174, 238, 0.3)');
    for (let i = 0; i < circles.length; i++) {
        ellipse(circles[i].x, circles[i].y, circles[i].r * 2, circles[i].r * 2);
    }
}

```

And it is embedded in index.html:

```auto
<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.min.js"></script>
        <script src="./canvas.js"></script>

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 16, 2020, 1:34pm UTC](https://discourse.processing.org/t/issue-with-windowresize-windowwidth-windowheight/17858/2 "2020-02-16T13:34:54Z")

</div>

The sketch from the link below uses **windowResized()** and it works alright: 😔  
[Bl.ocks.org/GoSubRoutine/raw/fa085945d45152786698f44a9523ccac/](http://Bl.ocks.org/GoSubRoutine/raw/fa085945d45152786698f44a9523ccac/)

> <https://gist.github.com/GoSubRoutine/fa085945d45152786698f44a9523ccac>

---

<div class="post-metadata">

**Author:** ![jctitan](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jctitan](https://discourse.processing.org/u/jctitan)\
**Post date:** [February 16, 2020, 1:54pm UTC](https://discourse.processing.org/t/issue-with-windowresize-windowwidth-windowheight/17858/3 "2020-02-16T13:54:31Z")

</div>

So what I did wrong?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 16, 2020, 4:10pm UTC](https://discourse.processing.org/t/issue-with-windowresize-windowwidth-windowheight/17858/4 "2020-02-16T16:10:09Z")

</div>

Just by looking I can’t tell what’s wrong, sorry. 🤷‍♂️  
You can host your sketch online so others can see & test the problem: 🐠

> **[Glitch: The friendly community where everyone builds the web](https://glitch.com)**
>
> Simple, powerful, free tools to create and use millions of apps.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 16, 2020, 6:45pm UTC](https://discourse.processing.org/t/issue-with-windowresize-windowwidth-windowheight/17858/5 "2020-02-16T18:45:57Z")

</div>

Hello,

Add this to your draw and please report back:

```auto
    fill(255, 0, 0);
    for (let i = 0; i < 20; i++) 
      {
      ellipse(random(windowWidth), random(windowHeight), 20, 20);
      }

```

’ 🙂 ’

---

<div class="post-metadata">

**Author:** ![jctitan](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jctitan](https://discourse.processing.org/u/jctitan)\
**Post date:** [February 16, 2020, 9:39pm UTC](https://discourse.processing.org/t/issue-with-windowresize-windowwidth-windowheight/17858/6 "2020-02-16T21:39:07Z")

</div>

Here is [demo](https://editor.p5js.org/jctitan/sketches/hiaQHFr7) of code

@glv that piece of code causes circles to infinitely redrawing (or moving), without me resizing window. I need canvas which will have random static circles (as it is in demo) which will move only on resizing window (or scrolling through page), so that I don’t have large parts of page without any circle. I have problems with second part.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 16, 2020, 10:05pm UTC](https://discourse.processing.org/t/issue-with-windowresize-windowwidth-windowheight/17858/7 "2020-02-16T22:05:25Z")

</div>

> [@glv](#):
>
> fill(255, 0, 0); for (let i = 0; i \< 20; i++) { ellipse(random(windowWidth), random(windowHeight), 20, 20); }

Hello,

I got the impression that canvas was not resizing and provided the code above) to visualize that it was.

Consider:

- An array of fixed _x, y_ data was generated in setup().
- Scale and plot that data to fit the new resized screen in draw().
- Save the initial _windowWidth_ and _windowHeight_ in 2 variables such as _iniX_ and _iniY_.
- Use a factor of _windowWidth/iX_ to scale the x of the ellipse and do similar for y

I got this working here.

’ 🙂 ’

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 17, 2020, 12:56am UTC](https://discourse.processing.org/t/issue-with-windowresize-windowwidth-windowheight/17858/8 "2020-02-17T00:56:22Z")

</div>

> [@glv](#):
>
> Use a factor of _windowWidth/iX_ to scale the _x_ of the ellipse and do similar for _y_.

Although it’s in Java Mode syntax, this sketch render faces w/ diff. sizes based on the coordinates & dimensions initial values: 👼  
[Studio.ProcessingTogether.com/sp/pad/export/ro.9G5yFfYFFDXi1](http://Studio.ProcessingTogether.com/sp/pad/export/ro.9G5yFfYFFDXi1)

This can easily be ported to p5js flavor w/ **windowResized()** to refresh each Face instance to be drawn based on new factor values. 🧙

---

<div class="post-metadata">

**Author:** ![jctitan](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jctitan](https://discourse.processing.org/u/jctitan)\
**Post date:** [February 18, 2020, 8:54pm UTC](https://discourse.processing.org/t/issue-with-windowresize-windowwidth-windowheight/17858/9 "2020-02-18T20:54:07Z")

</div>

Hi,

sorry I was busy last two days so I didn’t have time to check your solution and reply you.

Just to inform you that I solved my issue. I didn’t solve it exactly as you wrote but you really help me to understand what is problem with my code. Thanks a lot!