HELP : can´t remove sliders from home page

p5.js Coding Questions
1

I can’t remove sliders from the home page. They should only be visible and working when you press “Start Mixing”. Help please!! Thanks!

let myFont

let relleno

let data

let r

let b

let g

let ariana

let billie

let dualipa

let justin

let taylor

let tini

let bot1 = false

let bot2 = false

let bot3 = false

let bot4 = false

let bot5 = false

let bot6 = false

let ari = false

let bil = false

let dua = false

let jus = false

let tay = false

let ti = false

let cddua

let cdari

let cdbil

let cdjus

let cdtay

let cdtin

let rot = 0

let comienzo = false

let myColors = ["#b0919f", “#efd284”, “#7fb5db”, “#63c195”, “#ccb29d”, “#173861”];

let randCol

let sliderRate

let sliderPan

let fft

function preload(){

//Sonidos y canciones

sonido1 = loadSound(‘sonidos/sonido1.mp3’)

sonido2 = loadSound(“sonidos/sonido2.mp3”)

sonido3 = loadSound(“sonidos/sonido3.mp3”)

sonido4 = loadSound(“sonidos/sonido4.mp3”)

sonido5 = loadSound(“sonidos/sonido5.mp3”)

sonido6 = loadSound(“sonidos/sonido6.mp3”)

songariana = loadSound(“sonidos/ariana.mp3”)

songbillie = loadSound(“sonidos/billie.mp3”)

songdua = loadSound(“sonidos/dua.mp3”)

songjustin = loadSound(“sonidos/justin.mp3”)

songtaylor = loadSound(“sonidos/taylor.mp3”)

songtini = loadSound(“sonidos/TINI.mp3”)

//Imágenes

ariana = loadImage(‘discos/ariana.jpg’)

billie = loadImage(‘discos/billie.png’)

dualipa = loadImage(‘discos/dualipa.jpg’)

justin = loadImage(‘discos/justin.jpg’)

taylor = loadImage(‘discos/taylor.jpg’)

tini = loadImage(‘discos/tini.jpg’)

cddua = loadImage (‘cd/duacd.png’)

cdari = loadImage (‘cd/arianacd.png’)

cdbil = loadImage (‘cd/billiecd.png’)

cdjus = loadImage (‘cd/justincd.png’)

cdtay = loadImage (‘cd/taylorcd.png’)

cdtin = loadImage (‘cd/tinicd.png’)

myFont = loadFont(‘tipografia/BebasNeue-Regular.ttf’)

}

function setup() {

createCanvas(1500, 700);

frameRate(40)

w = width/150

fft = new p5.FFT();

fft.setInput(sonido1);

fft.setInput(sonido2);

fft.setInput(sonido3);

fft.setInput(sonido4);

fft.setInput(sonido5);

fft.setInput(sonido6);

fft.setInput(songariana);

fft.setInput(songbillie);

fft.setInput(songdua);

fft.setInput(songjustin);

fft.setInput(songtaylor);

fft.setInput(songtini);

pixelDensity(1)

slide()

}

function draw() {

if (comienzo == false){

portada()

}

if (comienzo == true){

background(0);



frecuencia()

dj()

arriba((mouseX > width/20 && mouseY > height/15 && mouseX < width/20 + 220 && mouseY < height/10 + 220),176,145, 159,cdari,width/6.2, height/5.15)

arriba((mouseX > width/20 && mouseY > height/2.7 && mouseX < width/20 + 220 && mouseY < height/2.5 + 220),239,210, 132,cdbil,width/6.2, height/2)

arriba((mouseX > width/20 && mouseY > height/1.47 && mouseX < width/20 + 220 && mouseY < height/1.4 + 220),127,181, 219,cddua,width/6.2, height/1.24)

arriba((mouseX > width/1.2 && mouseY > height/15 && mouseX < width/1.2 + 220 && mouseY < height/10 + 220),99,193, 149,cdjus,width/1.2, height/5.15)

arriba((mouseX > width/1.2 && mouseY > height/2.7 && mouseX < width/1.2 + 220 && mouseY < height/2.5 + 220),204,178, 157,cdtay,width/1.2, height/2)

arriba((mouseX > width/1.2 && mouseY > height/1.47 && mouseX < width/1.2 + 220 && mouseY < height/1.4 + 220),26,53, 97,cdtin,width/1.2, height/1.24)

//imágenes tapas

tapas(ariana, 20, 15)

tapas(billie, 20, 2.7)

tapas(dualipa,20, 1.47)

tapas(justin, 1.2, 15)

tapas(taylor, 1.2, 2.7)

tapas(tini, 1.2, 1.47)

//botones azules

botonazul(bot1, 3, 2)

botonazul(bot2, 2.25, 2)

botonazul(bot3, 1.8, 2)

botonazul(bot4, 3, 1.5)

botonazul(bot5, 2.25, 1.5)

botonazul(bot6, 1.8, 1.5)

//CD MEDIO

cdmedio(ari, 176, 145, 159, 2.5, cdari) 

cdmedio(bil,239,210,132,2.5, cdbil)

cdmedio(dua, 127, 181, 219, 2.5, cddua)

cdmedio(jus, 99, 193, 149, 1.75, cdjus)

cdmedio(tay, 204, 178, 157, 1.75, cdtay)

cdmedio(ti, 26, 53, 97, 1.75, cdtin)

//slider disco 1 volumen

songariana.setVolume(slider.value());

songbillie.setVolume(slider.value());

songdua.setVolume(slider.value());

//slider disco 1 velocidad

songariana.rate(sliderRate.value());

songbillie.rate(sliderRate.value());

songdua.rate(sliderRate.value());

//slider disco 2 volumen

songjustin.setVolume(slider2.value());

songtaylor.setVolume(slider2.value());

songtini.setVolume(slider2.value());

//slider disco 2 velocidad

songjustin.rate(sliderRate1.value());

songtaylor.rate(sliderRate1.value());

songtini.rate(sliderRate1.value());

//sliders botones volumen y velocidad

sonido1.setVolume(slider3.value())

sonido1.rate(sliderRate3.value())

sonido2.setVolume(slider4.value())

sonido2.rate(sliderRate4.value())

sonido3.setVolume(slider5.value())

sonido3.rate(sliderRate5.value())

sonido4.setVolume(slider6.value())

sonido4.rate(sliderRate6.value())

sonido5.setVolume(slider7.value())

sonido5.rate(sliderRate7.value())

sonido6.setVolume(slider8.value())

sonido6.rate(sliderRate8.value())

//sliders botones velocidad



tocadisco()



replay()

}

}

function botonazul(a, b, c) {

if (a == true) {

fill(0,0,255)

noStroke()

rect(width/b, height/c, width/11, height/11, 10, 10, 10, 10)

}

}

function cdmedio(a, r, g, b, c, img) {

if (a == true) {

push()

noStroke()

fill(r,g,b)

ellipse(width/c, height/3, width/9)

translate(width/c, height/3);

rotate(rot);

imageMode(CENTER)

image(img, 0, 0, 180, 180)

imageMode(CORNER)

fill(0)

stroke(220)

strokeWeight(5)

ellipse(0, 0, width/50)

fill(153,4,4)

noStroke()

ellipse(0, 0, width/55)

fill(10)

ellipse(0, 0, width/85)

fill(185)

ellipse(0, 0, width/200)

rot = rot + 0.01

pop()

}

}

function arriba (condi, r, g, b, cd, x, y){

if (condi){

fill(r, g, b)

ellipse(x, y, width/9)

fill(0)

stroke(220)

ellipse(x, y, width/50)

imageMode(CENTER)

image(cd, x, y, 180, 180)

imageMode(CORNER)

}

}

//Interacciones con botones y discos

function mouseClicked(){

//boton 1

if(mouseX > width/3 && mouseY > height/2 && mouseX < width/3 + width/11 && mouseY < height/2 + height/11&& comienzo==true){

if (bot1 == false){

  bot1 = true

  sonido1.loop()

}

else{

  bot1 = false

  sonido1.stop()

}

}

//boton 2

if(mouseX > width/2.25 && mouseY > height/2 && mouseX < width/2.25 + width/11 && mouseY < height/2 + height/11 && comienzo==true){

if (bot2 == false){

  bot2 = true

  sonido2.loop()

}

else{

  bot2 = false

  sonido2.stop()

}

}

//boton 3

if(mouseX > width/1.8 && mouseY > height/2 && mouseX < width/1.8 + width/11 && mouseY < height/2 + height/11&& comienzo==true){

if (bot3 == false){

  bot3 = true

  sonido3.loop()

}

else{

  bot3 = false

  sonido3.stop()

}

}

//boton 4

if(mouseX > width/3 && mouseY > height/1.5 && mouseX < width/3 + width/11 && mouseY < height/1.5 + height/11&& comienzo==true){

if (bot4 == false){

  bot4 = true

  sonido4.loop()

}

else{

  bot4 = false

  sonido4.stop()

}

}

//boton 5

if(mouseX > width/2.25 && mouseY > height/1.5 && mouseX < width/2.25 + width/11 && mouseY < height/1.5 + height/11&& comienzo==true){

if (bot5 == false){

  bot5 = true

  sonido5.loop()

}

else{

  bot5 = false

  sonido5.stop()

}

}

//boton 6

if(mouseX > width/1.8 && mouseY > height/1.5 && mouseX < width/1.8 + width/11 && mouseY < height/1.5 + height/11&& comienzo==true){

if (bot6 == false){

  bot6 = true

  sonido6.loop()

}

else{

  bot6 = false

  sonido6.stop()

}

}

//una canción a la vez

if(mouseX > width/20 && mouseY > height/10 && mouseX < width/20 + 220 && mouseY < height/10 + 220&& comienzo==true){

if (ari == false){

  ari = true

  bil = false

  dua = false

  songariana.loop()

  songbillie.stop()

  songdua.stop()

}

else{

  ari = false

  songariana.stop()

}

}

if(mouseX > width/20 && mouseY > height/2.5 && mouseX < width/20 + 220 && mouseY < height/2.5 + 220&& comienzo==true){

if (bil == false){

  bil = true

  ari = false

  dua = false

  songbillie.loop()

  songdua.stop()

  songariana.stop()

}

else{

  bil = false

  songbillie.stop()

}

}

if(mouseX > width/20 && mouseY > height/1.4 && mouseX < width/20 + 220 && mouseY < height/1.4 + 220&& comienzo==true){

if (dua == false){

  dua = true

  ari = false

  bil = false

  songdua.loop()

  songariana.stop()

  songbillie.stop()

}

else{

  dua = false

  songdua.stop()

}

}

if(mouseX > width/1.2 && mouseY > height/10 && mouseX < width/1.2 + 220 && mouseY < height/10 + 220&& comienzo==true){

if (jus == false){

  jus = true

  tay = false

  ti = false

  songjustin.loop()

  songtaylor.stop()

  songtini.stop()

}

else{

  jus = false

  songjustin.stop()

}

}

if(mouseX > width/1.2 && mouseY > height/2.5 && mouseX < width/1.2 + 220 && mouseY < height/2.5 + 220&& comienzo==true){

if (tay == false){

  tay = true

  ti = false

  jus = false 

  songtaylor.loop()

  songjustin.stop()

  songtini.stop()

}

else{

  tay = false

  songtaylor.stop()

}

}

if(mouseX > width/1.2 && mouseY > height/1.4 && mouseX < width/1.2 + 220 && mouseY < height/1.4 + 220&& comienzo==true){

if (ti == false){

  ti = true

  jus = false

  tay = false

  songtini.loop()

  songtaylor.stop()

  songjustin.stop()

}

else{

  ti = false

  songtini.stop()

}

}

if(mouseX>width/2.32 && mouseY>height/1.8 && mouseX<width/2.32+200 && mouseY<height/1.8+50){

comienzo = true

}

if(mouseX>width/2.25 && mouseY>height/1.15 && mouseX<width/2.25+150 && mouseY<height/1.15+50){

comienzo = false

bot1 = false

sonido1.stop()

bot2 = false

sonido2.stop()

bot3 = false

sonido3.stop()

bot4 = false

sonido4.stop()

bot5 = false

sonido5.stop()

bot6 = false

sonido6.stop()

ari = false

songariana.stop()

bil = false

songbillie.stop()

dua = false

songdua.stop()

jus = false

songjustin.stop()

tay = false

songtaylor.stop()

ti = false

songtini.stop()

}

}

//figuras

function dj (){

//discos

noStroke()

strokeWeight(2)

fill(185)

rect(width/3.5, height/6, width/2.5, height/1.5, 20, 20, 20, 20)

fill(30)

ellipse(width/2.5, height/3, width/9)

ellipse(width/1.75, height/3, width/9)

stroke(10)

noFill()

ellipse(width/2.5, height/3, width/11)

ellipse(width/1.75, height/3, width/11)

ellipse(width/2.5, height/3, width/14)

ellipse(width/1.75, height/3, width/14)

ellipse(width/2.5, height/3, width/20)

ellipse(width/1.75, height/3, width/20)

fill(10)

ellipse(width/2.5, height/3, width/25)

ellipse(width/1.75, height/3, width/25)

fill(153,4,4)

noStroke()

ellipse(width/2.5, height/3, width/29)

ellipse(width/1.75, height/3, width/29)

fill(10)

ellipse(width/2.5, height/3, width/85)

ellipse(width/1.75, height/3, width/85)

fill(185)

ellipse(width/2.5, height/3, width/200)

ellipse(width/1.75, height/3, width/200)

//botones

fill(30)

rect(width/3, height/2, width/11, height/11, 10, 10, 10, 10)

rect(width/3, height/1.5, width/11, height/11, 10, 10, 10, 10)

rect(width/2.25, height/2, width/11, height/11, 10, 10, 10, 10)

rect(width/2.25, height/1.5, width/11, height/11, 10, 10, 10, 10)

rect(width/1.8, height/2, width/11, height/11, 10, 10, 10, 10)

rect(width/1.8, height/1.5, width/11, height/11, 10, 10, 10, 10)

}

//Figura tocadisco

function tocadisco(){

strokeWeight(5)

stroke(220)

strokeCap(ROUND)

line(width/2.1, height/4.1, width/2.2, height/3)

line(width/2.2, height/3, width/2.34, height/2.8)

line(width/2, height/4.1, width/1.94, height/3)

line(width/1.94, height/3, width/1.85, height/2.8)

stroke(10)

strokeWeight(8)

strokeCap(SQUARE)

line(width/2.1, height/4.15, width/2.12, height/3.8)

line(width/2.34, height/2.8, width/2.38, height/2.75)

line(width/2, height/4.15, width/1.99, height/3.8)

line(width/1.85, height/2.8, width/1.83, height/2.75)

}

function slide(){

//slider disco 1

slider = createSlider(0,1,0.5,0.01);

slider.position(width/3.65,height/3.2);

slider.style(“transform”,“rotate(-90deg)”);

//velocidad

sliderRate = createSlider(0,2,1,0.01);

sliderRate.position(width/3.45,height/3.2);

sliderRate.style(“transform”,“rotate(-90deg)”);

//slider disco 2

slider2 = createSlider(0,1,0.5,0.01);

slider2.position(width/1.65,height/3.2);

slider2.style(“transform”,“rotate(-90deg)”);

//velocidad

sliderRate1 = createSlider(0,2,1,0.01);

sliderRate1.position(width/1.60,height/3.2);

sliderRate1.style(“transform”,“rotate(-90deg)”);

//slider botón 1

slider3 = createSlider(0,1,0.5,0.01);

slider3.position(width/2.99,height/1.68);

sliderRate3 = createSlider(0,2,1,0.01);

sliderRate3.position(width/2.99,height/1.60);

//slider botón 2

slider4 = createSlider(0,1,0.5,0.01);

slider4.position(width/2.24,height/1.68);

sliderRate4 = createSlider(0,2,1,0.01);

sliderRate4.position(width/2.24,height/1.60);

//slider botón 3

slider5 = createSlider(0,1,0.5,0.01);

slider5.position(width/1.79,height/1.68);

sliderRate5 = createSlider(0,2,1,0.01);

sliderRate5.position(width/1.79,height/1.60);

//slider botón 4

slider6 = createSlider(0,1,0.5,0.01);

slider6.position(width/2.99,height/1.31);

sliderRate6 = createSlider(0,2,1,0.01);

sliderRate6.position(width/2.99,height/1.265);

//slider botón 5

slider7 = createSlider(0,1,0.5,0.01);

slider7.position(width/2.24,height/1.31);

sliderRate7 = createSlider(0,2,1,0.01);

sliderRate7.position(width/2.24,height/1.265);

//slider botón 6

slider8 = createSlider(0,1,0.5,0.01);

slider8.position(width/1.79,height/1.31);

sliderRate8 = createSlider(0,2,1,0.01);

sliderRate8.position(width/1.79,height/1.265);

}

//Imágenes de las tapas LISTOOOOO

function tapas(art, x, y){

image(art, width/x, height/y, 180, 180)

}

//Figuras de los CD´s LISTOOOOO

function discos(r, g, b, a, b){

noStroke()

fill(r, g, b)

ellipse(width/a, height/b, width/9)

fill(0)

stroke(220)

ellipse(width/a, height/b, widht/50)

discos(176, 145, 159, 6.2, 4.7)

discos(239, 210, 132, 6.2, 1.94)

discos(127, 181, 219, 6.2, 1.21)

discos(99, 193, 149, 1.2, 4.71)

discos(204, 178, 157, 1.2, 1.94)

discos(26, 53, 97, 1.2, 1.208)

}

function discportada(x,y){

noStroke()

strokeWeight(2)

fill(30)

ellipse(x, y, width/11)

stroke(10)

noFill()

ellipse(x, y, width/14)

ellipse(x, y, width/20)

ellipse(x, y, width/28)

fill(10)

ellipse(x, y, width/35)

fill(153,4,4)

noStroke()

ellipse(x, y, width/50)

fill(10)

ellipse(x, y, width/200)

fill(185)

ellipse(x, y, width/285)

noFill()

if (mouseX > x - (width / 11) / 2 && mouseY > y - (width / 11) / 2 && mouseX < x + (width / 11) / 2 && mouseY < y + (width / 11) / 2) {

randCol = randomSeed(myColors.length);

randCol = floor(randCol);

    fill(randCol);

    ellipse(x, y, width/11)

    stroke(10)

    noFill()

    ellipse(x, y, width/14)

    ellipse(x, y, width/20)

    ellipse(x, y, width/28)

    fill(10)

    ellipse(x, y, width/35)

    fill(153,4,4)

    noStroke()

    ellipse(x, y, width/50)

    fill(10)

    ellipse(x, y, width/200)

    fill(185)

    ellipse(x, y, width/285)

    noFill()

}

}

function portada(){

background(200);

textFont(myFont)

noStroke()

fill(30)

textSize(100)

text(“DJ CONSOLE”, width/2.55, height/2.2)

fill(153,4,4)

rect(width/2.25, height/1.8, 200, 50, 5, 5, 5, 5)

textFont(myFont)

noStroke()

fill(255)

textSize(30)

text(“START MIXING”, width/2.13, height/1.65)

if(mouseX>width/2.25 && mouseY>height/1.8 && mouseX<width/2.25+200 && mouseY<height/1.8+50){

fill(110,20,20)

rect(width/2.25, height/1.8, 200, 50, 5, 5, 5, 5)

textFont(myFont)

noStroke()

fill(255)

textSize(30)

text("START MIXING", width/2.13, height/1.65)

}

discportada(150,100)

discportada(350,100)

discportada(550,100)

discportada(750,100)

discportada(950,100)

discportada(1150,100)

discportada(1350,100)

discportada(150,260)

discportada(350,260)

discportada(1150,260)

discportada(1350,260)

discportada(150,440)

discportada(350,440)

discportada(1150,440)

discportada(1350,440)

discportada(150,600)

discportada(350,600)

discportada(550,600)

discportada(750,600)

discportada(950,600)

discportada(1150,600)

discportada(1350,600)

}

function replay(){

noStroke()

fill(153,4,4)

rect(width/2.25, height/1.15, 150, 50, 5, 5, 5, 5)

textFont(myFont)

noStroke()

fill(255)

textSize(30)

text(“REPLAY”, width/2.12, height/1.085)

if (mouseX>width/2.25 && mouseY>height/1.15 && mouseX<width/2.25+150 && mouseY<height/1.15+50){

noStroke()

fill(110,20,20)

rect(width/2.25, height/1.15, 150, 50, 5, 5, 5, 5)

textFont(myFont)

noStroke()

fill(255)

textSize(30)

text("REPLAY", width/2.12, height/1.085)

}

}

function frecuencia() {

let spectrum = fft.analyze();

noStroke()

fill(100,20,20)

for (i = 0; i < spectrum.length; i++) {

colorMode(HSB, 176,145,159)

let amp = spectrum[i];

let y = map(amp, 0, 256, height, 0);

fill(i,53,97)

rect (i*w, y, w - 5, height - y)

colorMode(RGB)

}

}

2

Hi @axelen ,

Welcome to the community! :wink:

When you post some code in the forum, please format it by using the </> button in the message editor or use triple backticks around your code like this : ```code``` → code

(You can edit your previous message for that)

Also in order for us to help, posting your whole code is not really helpful, you should either provide a link to your code or use the p5 web editor to share your sketch and assets (fonts and sounds).

1 Like
3

Second everything josephh said, additionally it can be helpful to post a reduced example of what you are trying to do or what you are having issues with. Since you are having issues with sliders and removing them you could post a minimal example that shows how you are creating the slider and a where you are trying to remove it.

That said, despite your code being impossible to read I don’t see any calls to remove() on the p5.Element returned by createSlider(). So you might want to look into that.

1 Like