Displaying effect unwanted


#1

Hello,
I’m trying to remake the concept of the Patatap of jonobr1 ( see https://www.patatap.com/) wich is pretty cool : 1 song 1 shape according to the song, launched by your keyboard.
So I’m stuck on only one animation wich the render isn’t what I want, and I think it’s because I misunderstood the use of one object, but I can’t know wich one…

So, the purpose of this animation is to display some rectangles in the canvas when the amplitude is over a certain step.So during the song is playing, many rectangles will appears at different moments. I’d like to keep it on screen, with their transparency going down. So an frame during the animation should looks like this :

So for this, I use a class “biscotte” and I draw on a buffer because the background can be changed by another animation, and I want to keep my rectangles on the foreground.

var amplitude;
var biscottes = [] // used for the class
var pg // for the buffer
var transparence

function preload() {
 sound2 = loadSound("assets/mysound2.wav")
}

function setup() {
    canvas = createCanvas(windowWidth, windowHeight);
    background(0, 40);
    amplitude = new p5.Amplitude()

    pg = createGraphics(width, height)

    //width & height of my rectangles
    Xrect = 0.04375 * width
    Yrect = 0.20380434782608695 * height 
    transparence = 40
}

function draw() {
    musicPlay(sound2, 66) //b

// call my animation function if my sound is playing
if (sound2.currentTime() < sound2.duration() - 0.1 && sound2.currentTime() > 0) {
        anim2()
    } else {
        pg.clear()
        biscottes = []
    }

// play a sound 
function musicPlay(sound, keyID) {

    if (keyIsDown(keyID) == true) {
// if the same sound is running, stop it and relaunch it
        if (sound.isPlaying() == true) {
            sound.stop()
            sound.play()
        } else {
            sound.play()
        }
    } //ifkeydown
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight)
    background(0)
}


function anim2() {
    amplitude.setInput(sound2)
    var level = amplitude.getLevel()
    var displayy = map(level, 0, 0.0025, 0, 100)
    image(pg, 0, 0, width, height)

    if (displayy > 85) { // so if amplitude is over 85%, display a new biscotte
        biscottes.push(new biscotte())
        //biscotte.update(); // update biscotte transparency
    }
    // loop through biscottes with a for..of loop
    for (let rect of biscottes) {
        rect.update(); // update biscotte transparency
        rect.display(); // draw new biscotte

    }   
}

For my code in my main sketch. I think I didn’t forgot anything between all others animations. I think that displaying my buffer in my function2 could be one of the origin of my issue, but I don’t know where to place it, I tried in many locations in my code, without success…

And this is my class biscotte : I think that something is wrong in my way of displaying, because my rectangles become transparent too fast…but 0.1 shoud be ok, isn’t ?

 //biscottes class
     function biscotte() {
         this.x = random(Xrect / 2 + 5, width - (Xrect / 2 + 5))
         this.y = random(Yrect / 2 + 5, height - (Yrect / 2 + 5))
         this.transparence = 100
         this.foundAspot = true //used to find if the position of my current rectangle is ok
        

         
         if(biscottes.length>0) this.foundAspot =false
         
         while (this.foundAspot == false) {
//verify that my current rect won't be drawn above another, and stay entirely in my screen
             for (let b of biscottes) {
                 if (abs(this.x - b.x) < Xrect + 3 || abs(this.y - b.y) < Yrect + 3) {
                     this.x = random(Xrect / 2 + 5, width - (Xrect / 2 + 5))
                     this.y = random(Yrect / 2 + 5, height - (Yrect / 2 + 5))
                     this.foundAspot = true
                 }
                 
                 if(b = biscottes.length) this.foundASpot = true
}
}
         this.update = function () {
             this.transparence = this.transparence - 00.1
             console.log(this.transparence)

         }


         this.display = function () {
             pg.noStroke()
             pg.fill(220, this.transparence)
             pg.rectMode(CENTER)
             pg.rect(this.x, this.y, Xrect, Yrect, 15)
         }

     }

Any suggestions ? I think there are many issues in my code for doing what I want, but one by one, I may be able to overpass them ^^


#2

Actually, I was running my files on Firefox, and it causes somes issues, and when I run it on Chrome, it’s working…almost.
I still not understand why the transparency of my rectangles do not change when I update them…I call my class from here, when sound overpass a step of amplitude :

if (displayy > 85) { //displaying condition : if amplitude > 85 %
        biscottes.push(new biscotte())
    }
    // loop through biscottes with a for..of loop
    for (let rect of biscottes) {
        rect.update(); // update biscotte transparency
        rect.display(); // draw new biscotte

    }

and then I update / display my rectangles (this is in my class)


         this.update = function () {
             this.transparence = this.transparence - 5
             console.log(this.transparence)
         }


         this.display = function () {
             pg.noStroke()
             pg.fill(220,this.transparence)
             pg.rectMode(CENTER)
             pg.rect(this.x, this.y, Xrect, Yrect, 15)
         }