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 ^^