# Help, Just learned this library. Im stuck, project due in two days

**URL:** <https://discourse.processing.org/t/help-just-learned-this-library-im-stuck-project-due-in-two-days/4472>\
**Category:** Coding Questions\
**Created:** [October 14, 2018, 11:08pm UTC](https://discourse.processing.org/t/help-just-learned-this-library-im-stuck-project-due-in-two-days/4472 "2018-10-14T23:08:59Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![TylerD07](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@TylerD07](https://discourse.processing.org/u/TylerD07)\
**Post date:** [October 14, 2018, 11:08pm UTC](https://discourse.processing.org/t/help-just-learned-this-library-im-stuck-project-due-in-two-days/4472/1 "2018-10-14T23:08:59Z")

</div>

So i recreated a matrix rain background that was on a tutorial given on youtube. I cannot figure out how to get the rain to redraw when the screen resizes. It is fully adaptable if you initially open the screen in full screen and then resize but if it starts small and goes bigger i can only get the canvas to resize and not the animation it self. Ive googled my issue and even messaged the developer that wrote the orginal code and to no avail im still stuck. Any advice?

---

<div class="post-metadata">

**Author:** ![Eeyorelife](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@Eeyorelife](https://discourse.processing.org/u/Eeyorelife)\
**Post date:** [October 14, 2018, 11:33pm UTC](https://discourse.processing.org/t/help-just-learned-this-library-im-stuck-project-due-in-two-days/4472/2 "2018-10-14T23:33:29Z")

</div>

Post your code and your attempts to solve it, that will make it easier to help you

---

<div class="post-metadata">

**Author:** ![TylerD07](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@TylerD07](https://discourse.processing.org/u/TylerD07)\
**Post date:** [October 15, 2018, 1:56am UTC](https://discourse.processing.org/t/help-just-learned-this-library-im-stuck-project-due-in-two-days/4472/3 "2018-10-15T01:56:41Z")

</div>

```auto
// Original Code writtin by 
// Emily Xie
// Re-written and editted by Tyler Daughtry, with permission.
var streams = [];
var fadeInterval = 1.6;
var symbolSize = 16;

function setup() {
    createCanvas(
        window.innerWidth,
        window.innerHeight
    );
    background(0);

    var x = 0;
    for (var i = 0; i <= width / symbolSize; i++) {
        var stream = new Stream();
        stream.generateSymbols(x, random(-2000, 0));
        streams.push(stream);
        x += symbolSize
    }

    textFont('Consolas');
    textSize(symbolSize);
}

function draw() {
    background(0, 150);
    streams.forEach(function (stream) {
        stream.render();
    });
}

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

function Symbol(x, y, speed, first, opacity) {
    this.x = x;
    this.y = y;
    this.value;

    this.speed = speed;
    this.first = first;
    this.opacity = opacity;

    this.switchInterval = round(random(2, 25));

    this.setToRandomSymbol = function () {
        var charType = round(random(0, 5));
        if (frameCount % this.switchInterval == 0) {
            this.value = round(random(0, 9));
        }
    }

    this.rain = function () {
        this.y = (this.y >= height) ? 0 : this.y += this.speed;
    }

}

function Stream() {
    this.symbols = [];
    this.totalSymbols = round(random(5, 35));
    this.speed = random(2, 8);

    this.generateSymbols = function (x, y) {
        var opacity = 255;
        var first = round(random(0, 4)) == 1;
        for (var i = 0; i <= this.totalSymbols; i++) {
            symbol = new Symbol(
                x,
                y,
                this.speed,
                first,
                opacity
            );
            symbol.setToRandomSymbol();
            this.symbols.push(symbol);
            opacity -= (255 / this.totalSymbols) / fadeInterval;
            y -= symbolSize;
            first = false;
        }
        
        
    }

    this.render = function () {
        this.symbols.forEach(function (symbol) {
            if (symbol.first) {
                fill(140, 255, 170, symbol.opacity);
            } else {
                fill(0, 255, 255, symbol.opacity);
            }
            text(symbol.value, symbol.x, symbol.y);
            symbol.rain();
            symbol.setToRandomSymbol();
        });
    }
}

```

Ive tried adding reDraw functions and ive added a windowResize funtion and included the resize canvas inside of it. the canvas redraws but i tried to call the draw function in the same way nothing changes

---

<div class="post-metadata">

**Author:** ![TylerD07](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@TylerD07](https://discourse.processing.org/u/TylerD07)\
**Post date:** [October 15, 2018, 1:57am UTC](https://discourse.processing.org/t/help-just-learned-this-library-im-stuck-project-due-in-two-days/4472/4 "2018-10-15T01:57:17Z")

</div>

i just posted it as a reply thanks for the feed back

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 15, 2018, 7:49am UTC](https://discourse.processing.org/t/help-just-learned-this-library-im-stuck-project-due-in-two-days/4472/5 "2018-10-15T07:49:47Z")

</div>

Edit your post, select your code, and hit the FORMAT THIS AS CODE button, which looks like this: \</\>

---

<div class="post-metadata">

**Author:** ![Eeyorelife](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@Eeyorelife](https://discourse.processing.org/u/Eeyorelife)\
**Post date:** [October 15, 2018, 8:37am UTC](https://discourse.processing.org/t/help-just-learned-this-library-im-stuck-project-due-in-two-days/4472/6 "2018-10-15T08:37:58Z")

</div>

The reason you are having problems with resizing of the window is because of this block of code:

```auto
for (var i = 0; i <= width / symbolSize; i++) {
    var stream = new Stream();
    stream.generateSymbols(x, random(-1000, 0));
    streams.push(stream);
    x += symbolSize
}

```

Here, you generate all the symbols and their positions. When you make the window smaller than the original size, you don’t change the actual amount of symbols you draw. You just crop away those who doesn’t fit in the page. But when you make the window bigger you include more space, but the amount of symbols are still the same. And each symbol has its own x-value. So you need to generate new symbols for the new space. Maybe you could do it like this everytime you resize the window:

```auto
for (var i = prevMax; i <= width / symbolSize; i++) {
    stream.generateSymbols(x, random(-2000, 0));
    streams.push(stream);
    x += symbolSize
}

```

That way you add symbols to the space that is not yet filled in.

---

<div class="post-metadata">

**Author:** ![TylerD07](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@TylerD07](https://discourse.processing.org/u/TylerD07)\
**Post date:** [October 15, 2018, 1:59pm UTC](https://discourse.processing.org/t/help-just-learned-this-library-im-stuck-project-due-in-two-days/4472/7 "2018-10-15T13:59:20Z")

</div>

ok so i tried including the changes you suggested by replaceing “0” with “prevMax” and it completley took away the canvas and the streams. when you said “do it like this everytime you resize the window” did you mean for me to include the below code in to the resizeWindow function?

---

<div class="post-metadata">

**Author:** ![Eeyorelife](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@Eeyorelife](https://discourse.processing.org/u/Eeyorelife)\
**Post date:** [October 15, 2018, 5:04pm UTC](https://discourse.processing.org/t/help-just-learned-this-library-im-stuck-project-due-in-two-days/4472/8 "2018-10-15T17:04:09Z")

</div>

Well, I’m honestly not an expert on p5.js, but to me it looks like `streams` is an array. So in the block of code I pointed to, you are generating the symbols and putting it into the array. And the amount of symbols you add to the array depends on the size of the screen. A bigger screen means a bigger array. So if the screen increases, you have to increase the size of the array.

---

<div class="post-metadata">

**Author:** ![TylerD07](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@TylerD07](https://discourse.processing.org/u/TylerD07)\
**Post date:** [October 15, 2018, 5:15pm UTC](https://discourse.processing.org/t/help-just-learned-this-library-im-stuck-project-due-in-two-days/4472/9 "2018-10-15T17:15:58Z")

</div>

Hey man your first reply actually helped me out, I was able to change the width of the x axis it was generateing the streams on and essentially just created off screen streams so when you resized it just made the other streams visable. Problem solved. Thanks for the help