CODEWITHSUNDEEP
p5.js
JieudenCuben
JieudenCuben

Reputation: 27

p5js leaving traces on canvas

I am doing an audio visualisation application that changes the size of a shape based on the values of meyda's zcr feature. However once the shape is drawn, it still leaves a traces of the previous value on the canvas. Is the a way I can remove these traces?

I assigned the zcr values to the shapes height however the drawn shape does not refresh its appearance even though the values are changed.

function setup() {
    createCanvas(800,600);
    background(180);
    
    playStopButton = createButton('play');
    playStopButton.position(20, 20);
    playStopButton.mousePressed(playStopSound);
    
    amplitude = new p5.Amplitude();
    
    rectH = 0;
    
    
    if (typeof Meyda === "undefined"){
        console.log("meyda could not be found");
    } else {
        analyzer = Meyda.createMeydaAnalyzer({
            "audioContext": getAudioContext(),
            "source": mySound,
            "bufferSize": 512,
            "featureExtractors": ["zcr"],
            "callback": features => {
                console.log(features);
                rectH = features.zcr;
            }
        });
    }
}

function draw() {
    rectMode(RADIUS);
    rect(80,300, 80, rectH);
    console.log(rectH);
}

draw and set up function for reference.

Upvotes: 1

Views: 106

Answers (1)

Kroepniek
Kroepniek

Reputation: 395

Move the a 'background(180);' from the setup() to the draw() function. Like this:

function draw() {
    background(180);
    rectMode(RADIUS);
    rect(80,300, 80, rectH);
    console.log(rectH);
}

Upvotes: 1

Related Questions