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

p5.js Coding Questions
1

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?

1 Like
2

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

1 Like
3 
// 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

1 Like
4

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

5

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

6

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

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:

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.

1 Like
7

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?

8

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.

9

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

2 Likes