Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Spotify Sound
ID	4818997152268288
Created	4 years ago, 1620189176333
Updated	4 years ago, 1636521453495
Code	/** Presenting a responsive Spotify! Use the up/down arrow on your keyboard to scroll through the sounds list. I made Spotify to show you that coding has many useful implementations, though I have to acknowledge that JavaScript is probably not the best language to code apps (but why not?). Keep learning! This program can only play sounds that are available on Khan Academy, as not doing so is against the guidelines. It would be great if you subscribe: https://www.khanacademy.org/computer-programming/i/5657327166341120 / //{ var currentScene = 1; var wchSoundScene; var sound = { rpg: ["battle-magic", "battle-spell", "battle-swing", "coin-jingle", "door-open", "giant-hyah", "giant-no", "giant-yah", "hit-clop", "hit-splat", "hit-thud", "hit-whack", "metal-chime", "metal-clink", "step-heavy", "water-bubble", "water-slosh"], retro: ["boom1", "boom2", "coin", "hit1", "hit2", "jump1", "jump2", "laser1", "laser2", "laser3", "laser4", "rumble", "thruster-short", "thruster-long", "whistle1", "whistle2"], likedSounds: [], favourites: ["battle-spell", "coin-jingle", "hit-splat", "water-bubble", "rumble"], dailyMix: ["coin-jingle", "laser1", "giant-hyah", "water-slosh", "thruster-long"], onRepeat: ["coin-jingle", "step-heavy", "rumble", "whistle1", "whistle2"], laserEffects: ["laser1", "laser2", "laser3", "laser4"], hitSounds: ["hit-clop", "hit-splat", "hit-thud", "hit-whack", "hit1", "hit2"], battleEffects: ["battle-magic", "battle-spell", "battle-swing", "boom1", "boom2"], giantSays: ["giant-hyah", "giant-no", "giant-yah"], elements: ["metal-chime", "metal-clink", "water-bubble", "water-slosh"], flightReacts: ["jump1", "jump2", "thruster-short", "thruster-long"] }; var liked = { rpg: [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false], retro: [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false] }; var playSounds = { rpg: [getSound("rpg/battle-magic"), getSound("rpg/battle-spell"), getSound("rpg/battle-swing"), getSound("rpg/coin-jingle"), getSound("rpg/door-open"), getSound("rpg/giant-hyah"), getSound("rpg/giant-no"), getSound("rpg/giant-yah"), getSound("rpg/hit-clop"), getSound("rpg/hit-splat"), getSound("rpg/hit-thud"), getSound("rpg/hit-whack"), getSound("rpg/metal-chime"), getSound("rpg/metal-clink"), getSound("rpg/step-heavy"), getSound("rpg/water-bubble"), getSound("rpg/water-slosh")], retro: [getSound("retro/boom1"), getSound("retro/boom2"), getSound("retro/coin"), getSound("retro/hit1"), getSound("retro/hit2"), getSound("retro/jump1"), getSound("retro/jump2"), getSound("retro/laser1"), getSound("retro/laser2"), getSound("retro/laser3"), getSound("retro/laser4"), getSound("retro/rumble"), getSound("retro/thruster-short"), getSound("retro/thruster-long"), getSound("retro/whistle1"), getSound("retro/whistle2")] }; var button = function(config) { this.x = config.x \|\| 355; this.y = config.y \|\| 100; this.w = config.w \|\| 90; this.h = config.h \|\| 50; this.size = config.size \|\| 1; this.shape = config.shape \|\| "rect"; this.title = config.title; }; var navBarScene = 1; var lbryScene = 0; var lbyMainScn = [0, 0]; var stgDataInf = 0; var stgDataLmt = 335; var sndLaunchOnce = false; var homeButton = new button ({x: 0.005, y: 425, w: 400/3, h: 75}); var searchButton = new button ({x: 400/3, y: 425, w: 400/3, h: 75}); var libraryButton = new button ({x: 800/3 - 1, y: 425, w: 400/3 + 2, h: 75}); var settingsButton = new button ({x: 365, y: 40, w: 50, h: 50, shape: "ellipse"}); var mfuNextBtn = [new button ({x: 345, y: 230, w: 25, h: 30, shape: "ellipse"}), new button ({x: 370, y: 230, w: 25, h: 30, shape: "ellipse"})]; var mfuPlayBtn = [new button ({w: 45, h: 45, shape: "ellipse"}), new button ({w: 45, h: 45, shape: "ellipse"}), new button ({w: 45, h: 45, shape: "ellipse"}), new button ({w: 45, h: 45, shape: "ellipse"})]; var lbyScnBtn = [new button ({x: 20, y: 20, w: 100, h: 50, title: "Sound"}), new button ({x: 140, y: 20, w: 150, h: 50, title: "Podcasts"})]; var soundButton = [new button ({x: 51, w: 90, title: "Playlists", shape: "ellipse"}), new button ({x: 142, w: 90, title: "Creators", shape: "ellipse"}), new button ({x: 232, w: 90, title: "Albums", shape: "ellipse"})]; var podcastButton = [new button ({x: 55, w: 90, title: "Episodes", shape: "ellipse"}), new button ({x: 146, w: 90, title: "Downloads", shape: "ellipse"}), new button ({x: 234, w: 90, title: "Shows", shape: "ellipse"})]; var stgBackButton = new button ({x: 35, y: 29, w: 35, h: 35, shape: "ellipse"}); var stgLanButton = new button ({x: 260, y: 92, w: 120, h: 30}); var stgDataButton = new button ({x: 335, y: 190, w: 30, h: 20}); var soundLikeBtn = [new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({})]; var addLikeBtn = new button ({x: 330, y: 359 + 65/2, w: 50, h: 50, shape: "ellipse"}); var soundPlayBtn = [new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({}), new button ({})]; var addPlayBtn = new button ({x: 370, y: 359 + 65/2, w: 50, h: 50, shape: "ellipse"}); button.prototype.isMouseInside = function() { if (this.shape === "rect") { return mouseX >= this.x && mouseX <= this.x + this.w && mouseY >= this.y && mouseY <= this.y + this.h; } else if (this.shape === "ellipse") { return abs(mouseX - this.x) <= this.w/2 && abs(mouseY - this.y) <= this.h/2; } }; button.prototype.chgFill = function(inColor, outColor) { if (this.isMouseInside()) { fill(inColor); } else { fill(outColor); } }; button.prototype.chgStroke = function(inColor, outColor) { if (this.isMouseInside()) { stroke(inColor); } else { stroke(outColor); } }; button.prototype.navBar = function(elmName, num) { noStroke(); fill(55, 55, 55); rectMode(CORNER); rect(this.x, this.y, this.w, this.h); this.chgFill(color(100, 100, 100), color(179, 179, 169)); this.chgStroke(color(100, 100, 100), color(179, 179, 179)); strokeWeight(3); if (navBarScene === num) { fill(255, 255, 255); stroke(255, 255, 255); } textFont(createFont("sans-serif"), 15); textAlign(CENTER, CENTER); text(elmName, this.x + this.w/2, 480); if (elmName === "Home") { noStroke(); rectMode(CENTER); rect(this.x + this.w/2, this.y + 30, 20, 15); triangle(this.x + 57, this.y + 23, this.x + 77, this.y + 23, this.x + this.w/2, this.y + 17); fill(55, 55, 55); rect(this.x + this.w/2, this.y + 35, 5, 10, 15); } else if (elmName === "Search") { pushMatrix(); translate(this.x + 65, this.y + 26); scale(0.85); noFill(); ellipse(0, 0, 20, 20); line(8, 8, 13, 13); popMatrix(); } else if (elmName === "Your Library") { line(this.x + 55, this.y + 18, this.x + 55, this.y + 37); line(this.x + 62, this.y + 18, this.x + 62, this.y + 37); line(this.x + 70, this.y + 18, this.x + 80, this.y + 37); } }; button.prototype.settings = function() { this.chgFill(color(175, 175, 175), color(255, 255, 255)); textAlign(CENTER, CENTER); textSize(30); text("⚙", this.x, this.y); }; button.prototype.panelNext = function() { var message; if (this.x <= 350) { message = "<"; } else { message = ">"; } this.chgFill(color(179, 179, 179), color(255, 255, 255)); textFont(createFont("fantasy"), 25); textAlign(CENTER, CENTER); text(message, this.x, this.y); }; button.prototype.panelPlay = function() { if (this.isMouseInside()) { if (this.size < 1.25) { this.size += 0.025; } } else { if (this.size > 1) { this.size -= 0.05; } } pushMatrix(); translate(this.x, this.y); scale(this.size); fill(0, 0, 0, 75); stroke(255, 255, 255); strokeWeight(1); ellipse(0, 0, this.w, this.h); fill(255, 255, 255); textFont(createFont("sans-serif"), 25); textAlign(CENTER, CENTER); text("▷", 1, 0); popMatrix(); }; button.prototype.lbryScene = function(num) { this.chgFill(color(125, 125, 125), color(185, 185, 185)); if (lbryScene === num) { fill(255, 255, 255); } textFont(createFont("sans-serif Bold"), 30); textAlign(CORNER, CENTER); text(this.title, this.x, this.y + this.h/2); }; button.prototype.lbryMain = function(type, num) { this.chgFill(color(125, 125, 125), color(185, 185, 185)); if ((type === "sound" && lbyMainScn[0] === num) \|\| (type === "podcast" && lbyMainScn[1] === num)) { fill(255, 255, 255); } textFont(createFont("sans-serif"), 17); textAlign(CENTER, CENTER); text(this.title, this.x, this.y); }; button.prototype.stgBack = function() { this.chgFill(color(179, 179, 169), color(255, 255, 255)); textFont(createFont("sans-serif"), 25); textAlign(CENTER, CENTER); text("←", this.x, this.y -2); }; button.prototype.stgMain = function(elmName) { if (elmName === "language") { noStroke(); fill(55, 55, 55); rect(this.x, this.y, this.w, this.h); this.chgFill(color(179, 179, 169), color(255, 255, 255)); textSize(14); textAlign(CORNER, CENTER); text("English", this.x + 15, this.y + this.h/2); } else if (elmName === "data-saver") { if (stgDataInf === 0) { if (stgDataLmt > this.x) { stgDataLmt -= 5; } } else if (stgDataInf === 1) { if (stgDataLmt < this.x + this.w) { stgDataLmt += 5; } } if (stgDataInf === 0) { fill(75, 75, 75); } else if (stgDataInf === 1) { fill(26, 104, 52); } rect(this.x, this.y, this.w, this.h, 15); if (stgDataInf === 0) { fill(150, 150, 150); } else if (stgDataInf === 1) { fill(28, 210, 92); } ellipse(stgDataLmt, this.y + this.h/2, this.h + 7, this.h + 7); } }; button.prototype.sndPanel = function(elmName) { this.chgFill(color(175, 175, 175), color(255, 255, 255)); textSize(22); textAlign(CENTER, CENTER); if (elmName === "like") { for (var i = 0; i < sound.rpg.length; i++) { if ((this.title === sound.rpg[i] && liked.rpg[i]) \|\| (this.title === sound.retro[i] && liked.retro[i])) { fill(30, 215, 95); } } text("❤", this.x, this.y); } else if (elmName === "play") { pushMatrix(); translate(this.x, this.y); rotate(90); text("▲", 0, 0); popMatrix(); } }; var lbryBtnDec = { x: [20, 20], w: [65, 70], limit: [20, 20] }; function anmBtnDec(num) { var stopPos = [20, 110, 200]; for (var i = 0; i < soundButton.length; i++) { if (lbyMainScn[num] === i) { lbryBtnDec.limit[num] = stopPos[i]; } } if (lbryBtnDec.x[num] < lbryBtnDec.limit[num]) { lbryBtnDec.x[num] += 15; } else if (lbryBtnDec.x[num] > lbryBtnDec.limit[num]) { lbryBtnDec.x[num] -= 15; } noStroke(); fill(30, 215, 95); rect(lbryBtnDec.x[num], 117, lbryBtnDec.w[num], 3, 15); } var panel = function(config) { this.x = config.x \|\| 20; this.y = config.y; this.w = config.w \|\| 360; this.h = config.h \|\| 70; this.title = config.title; this.colour = config.colour; }; var gradient = { home: { liked: 0, onRepeat: 0, }, search: { bg: [color(57, 150, 82), color(224, 156, 27), color(23, 87, 194), color(219, 61, 87), color(119, 48, 166), color(16, 158, 158)], }, library: 0, sound: { bg: [color(220, 20, 60), color(255, 127, 80), color(255, 165, 0), color(173, 255, 47), color(64, 225, 208), color(100, 149, 237), color(123, 104, 238), color(255, 105, 180), color(255, 228, 196), color(244, 164, 96)], num: [floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10)), floor(random(10))] } }; var mfuPos = "left"; var soundSelect = false; var topPanel = [new panel ({y: 80, w: 176, h: 50, title: "Liked Sounds"}), new panel ({y: 140, w: 176, h: 50, title: "Favourites"}), new panel ({x: 204, y: 80, w: 176, h: 50, title: "Rpg"}), new panel ({x: 204, y: 140, w: 176, h: 50, title: "Retro"})]; var mfuPanel = [new panel ({y: 260, w: 110, h: 110, title: "Daily Mix"}), new panel ({x: 145, y: 260, w: 110, h: 110, title: "On Repeat"}), new panel ({x: 270, y: 260, w: 110, h: 110, title: "Laser Effects"}), new panel ({x: 400, y:260, w: 110, h: 110, title: "Hit Sounds"})]; var searchPanel = [new panel ({y: 100, w: 170, h: 80, title: "Rpg"}), new panel ({x: 210, w: 170, h: 80, y: 100, title: "Retro"}), new panel({y: 225, w: 170, h: 80, title: "Battle Effects"}), new panel ({x: 210, y: 225, w: 170, h: 80, title: "Giant Says"}), new panel ({y: 320, w: 170, h: 80, title: "Elements"}), new panel ({x: 210, y: 320, w: 170, h: 80, title: "Flight Reacts"})]; var libraryPanel = new panel ({y: 140, w: 380, h: 55}); var settingsPanel = [new panel ({y: 75, title: "Language"}), new panel ({y: 160, title: "Data Saver (Unavailable now)"}), new panel ({y: 260, title: "About"})]; var soundPanel = [new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({}), new panel ({})]; var soundPlyPanel = new panel ({x: -1, y: 359, w: 402, h: 65}); panel.prototype.isMouseInside = function() { return mouseX >= this.x && mouseX <= this.x + this.w && mouseY >= this.y && mouseY <= this.y + this.h; }; panel.prototype.chgFill = function(inColor, outColor) { if (this.isMouseInside()) { fill(inColor); } else { fill(outColor); } }; panel.prototype.top = function() { //MAIN noStroke(); fill(55, 55, 55); rect(this.x, this.y, this.w, this.h, 5); this.chgFill(color(179, 179, 169), color(255, 255, 255)); textAlign(CORNER, CENTER); textFont(createFont("sans-serif"), 15); text(this.title, this.x + 60, this.y + this.h/2); //IMAGES if (this.title === "Liked Sounds") { //COVER fill(85, 85, 224); rect(this.x, this.y, 50, this.h/2, 5); fill(150, 180, 250); rect(this.x, this.y + this.h/2, 50, this.h/2, 5); //MAIN GRADIENT if (gradient.home.liked === 0) { var r = 85; var g = 85; var b = 224; for (var i = 0; i < this.h; i += 2) { r += 3.5; g += 5; b ++; noStroke(); fill(r, g, b); if (i === 0 \|\| i === 48) { rect(this.x, this.y + i, 50, 2, 5); } else { rect(this.x, this.y + i, 50, 2); } } gradient.home.liked = get(this.x, this.y, 50, this.h); } else { image(gradient.home.liked, this.x, this.y); } //TEXT textSize(18); textAlign(CENTER, CENTER); text("🤍", this.x + 49/2, this.y + this.h/2); } else if (this.title === "Favourites") { fill(255, 166, 0); rect(this.x, this.y, 50, this.h, 5); fill(245, 189, 86); triangle(this.x + 10, this.y + this.h, this.x + 35, this.y + this.h, this.x + 45, this.y); } else if (this.title === "Rpg") { fill(173, 141, 235); rect(this.x, this.y, 50, this.h, 5); fill(153, 113, 227); ellipse(this.x + 50/2, this.y + this.h/2, 50, 50); fill(139, 99, 212); ellipse(this.x + 50/2, this.y + this.h/2, 35, 35); fill(121, 79, 201); ellipse(this.x + 50/2, this.y + this.h/2, 17, 17); } else if (this.title === "Retro") { fill(108, 171, 115); rect(this.x, this.y, 50, this.h, 5); fill(255, 255, 255); rect(this.x, this.y, 50, 35, 5); fill(0, 0, 0); textFont(createFont("fantasy"), 10); textAlign(CENTER, CENTER); text("This is spongejr", this.x, this.y - 2, 50, 35); } //COVER if (this.isMouseInside()) { fill(0, 0, 0, 55); rect(this.x, this.y, 50, this.h, 5); } }; panel.prototype.madeForYou = function(num) { //SET VARIABLES mfuPlayBtn[num].x = this.x + this.w/2; mfuPlayBtn[num].y = this.y + this.h/2; //TITLE noStroke(); fill(255, 255, 255); textFont(createFont("sans-serif"), 15); textAlign(CORNER, CORNER); text(this.title, this.x, this.y + this.h + 25); //PICTURES if (this.title === "Daily Mix") { //BACKGROUND fill(230, 184, 94); rect(this.x, this.y, this.w, this.h); //DECORATION fill(219, 68, 92); rect(this.x, this.y + 45, this.w, 65); ellipse(this.x + 30, this.y + 50, 60, 30); fill(230, 184, 94); ellipse(this.x + 85, this.y + 45, 50, 20); //TEXT fill(255, 255, 255); textFont(createFont("fantasy"), 20); text("Your", this.x + 10, this.y + 71); text("Daily Mix", this.x + 10, this.y + 96); } else if (this.title === "On Repeat") { //GRADIENT if (gradient.home.onRepeat === 0) { var r = 35; var g = 57; var b = 93; for (var i = 0; i < this.w; i += 3) { r += 4; g ++; b ++; fill(r, g, b); rect(this.x + i, this.y, 5, this.h); } gradient.home.onRepeat = get(this.x, this.y, this.w, this.h); } else { image(gradient.home.onRepeat, this.x, this.y); } //TEXT pushMatrix(); translate(this.x + this.w/2 + 5, this.y + this.h/2 - 10); rotate(60); fill(255, 192, 203); textFont(createFont("sans-serif"), 120); textAlign(CENTER, CENTER); text("∞", 0, 0); popMatrix(); fill(255, 255, 255); textFont(createFont("fantasy"), 15); textAlign(CORNER, CENTER); text("On", this.x + 5, this.y + 80); text("Repeat", this.x + 5, this.y + 95); } else if (this.title === "Laser Effects") { //BACKGROUND fill(107, 128, 138); rect(this.x, this.y, this.w, this.h); //TEXT fill(255, 255, 255); textFont(createFont("serif"), 17); textAlign(CENTER, CENTER); text("Laser Effects", this.x + this.w/2, this.y + 20); //IMAGE fill(77, 52, 20); rectMode(CORNER); rect(this.x, this.y + this.h - 10, this.w, 10); //table pushMatrix(); //right hand translate(this.x + 42, this.y + 92); rotate(30); fill(244, 226, 198); rectMode(CENTER); rect(0, 0, 8, 25, 5); fill(0, 49, 82); rect(0, -5, 8, 10); popMatrix(); pushMatrix(); //left hand translate(this.x + 68, this.y + 92); rotate(330); fill(244, 226, 198); rectMode(CENTER); rect(0, 0, 8, 25, 5); fill(0, 49, 82); rect(0, -5, 8, 10); popMatrix(); fill(0, 49, 82); rect(this.x + this.w/2, this.y + 90, 20, 20); //clothes fill(244, 226, 198); rect(this.x + 45, this.y + 100, 20, 8, 5); //right hand extension fill(0, 0, 0); rect(this.x + this.w/2, this.y + 60, 35, 30, 10); //hair fill(244, 226, 198); ellipse(this.x + this.w/2, this.y + 70, 30, 30); //head fill(0, 0, 0); rect(this.x + 48, this.y + 70, 12, 8, 5); //black glasses rect(this.x + 63, this.y + 70, 12, 8, 5); rect(this.x + 55, this.y + 67, 10, 2); textFont(createFont("cursive Bold"), 12); text("-", this.x + 55, this.y + 77); //mouth } else if (this.title === "Hit Sounds") { //BACKGROUND fill(255, 255, 255); rectMode(CORNER); rect(this.x, this.y, this.w, this.h); //LINE GRADIENTS for (var i = 0; i < this.w; i += 20) { stroke(153, 113, 227); strokeWeight(4); line(this.x + i + 2, this.y + 2, this.x + this.w - 2, this.y + this.h - i - 2); } for (var i = 0; i < this.h - 10; i += 20) { line(this.x + 2, this.y + i + 2, this.x + this.w - i - 2, this.y + this.h - 2); } //TITLE noStroke(); fill(255, 255, 255); ellipse(this.x + 28, this.y + this.h/2 + 27, this.w/2, this.h/2); fill(0, 0, 0); textFont(createFont("fantasy"), 20); textAlign(CENTER, CENTER); text("Hit", this.x + 27, this.y + this.h/2 + 27); } //COVER if (this.isMouseInside()) { fill(0, 0, 0, 75); rectMode(CORNER); rect(this.x, this.y, this.w, this.h); mfuPlayBtn[num].panelPlay(); } }; function anmMfu() { if (mfuPos === "left") { if (mfuPanel[1].x < 145) { for (var i = 0; i < mfuPanel.length; i++) { mfuPanel[i].x += 5; } } } else if (mfuPos === "right") { if (mfuPanel[1].x > 20) { for (var i = 0; i < mfuPanel.length; i++) { mfuPanel[i].x -= 5; } } } } panel.prototype.search = function(num) { noStroke(); fill(gradient.search.bg[num]); rect(this.x, this.y, this.w, this.h, 5); this.chgFill(color(255, 255, 255, 175), color(255, 255, 255)); textFont(createFont("sans-serif Bold"), 17); textAlign(CORNER, CORNER); text(this.title, this.x + 15, this.y + 17, 90, 100); fill(255, 255, 255, 50); beginShape(); vertex(this.x + this.w - 38, this.y + 12); vertex(this.x + this.w - 60, this.y + this.h - 10); vertex(this.x + this.w - 25, this.y + this.h); vertex(this.x + this.w, this.y + this.h); vertex(this.x + this.w, this.y + 27); endShape(); }; panel.prototype.library = function() { //GRADIENT IMAGE if (gradient.library === 0) { var r = 85; var g = 85; var b = 224; for (var i = 0; i < this.h; i += 2) { r += 3.5; g += 5; b ++; noStroke(); fill(r, g, b); rect(this.x, this.y + i, this.h, 2); } gradient.library = get(this.x, this.y, this.h, this.h); } else { image(gradient.library, this.x, this.y); } //IMAGE TEXT textSize(18); textAlign(CENTER, CENTER); text("🤍", this.x + (this.h -1)/2, this.y + this.h/2); //TITLE this.chgFill(color(179, 179, 169), color(255, 255, 255)); textFont(createFont("sans-serif Bold"), 20); textAlign(CORNER, CORNER); text("Liked Sounds", this.x + this.h + 10, this.y + 25); //COVER if (this.isMouseInside()) { fill(0, 0, 0, 55); rect(this.x, this.y, this.h, this.h); } }; panel.prototype.settings = function() { fill(255, 255, 255); textFont(createFont("sans-serif Bold"), 17); textAlign(CORNER, CENTER); text(this.title, this.x, this.y); if (this.title === "Language") { fill(185, 185, 185);textFont(createFont("sans-serif"), 15); text("Choose language", this.x, this.y + 30); stgLanButton.stgMain("language"); } else if (this.title === "Data Saver (Unavailable now)") { fill(185, 185, 185);textFont(createFont("sans-serif"), 15); text("Sets your sound quality to low (equivalent to 24 kbit/s) and disables creators canvasses", this.x, this.y + 30 - 20, 290, 50); stgDataButton.stgMain("data-saver"); } else if (this.title === "About") { fill(255, 255, 255); textFont(createFont("sans-serif"), 17); text("Version", this.x, this.y + 35); fill(185, 185, 185); textSize(15); text("8.6.20.1063", this.x, this.y + 65); } }; panel.prototype.sound = function(elmName, num) { //DETERMINE CREATOR var creator; for (var i = 0; i < sound.rpg.length; i++) { if (this.title === sound.rpg[i]) { creator = "artisticdude"; } } for (var i = 0; i < sound.retro.length; i++) { if (this.title === sound.retro[i]) { creator = "spongejr"; } } //MAIN if (elmName === "sound-panel") { this.colour = gradient.sound.bg[gradient.sound.num[num]]; //BACKGROUND noStroke(); fill(55, 55, 55); rect(this.x, this.y, this.w, this.h, 5); //IMAGE fill(this.colour); rect(this.x, this.y, this.h, this.h, 5); //TEXT fill(255, 255, 255); textFont(createFont("sans-serif Bold"), 17); textAlign(CORNER, CENTER); text(this.title, this.x + this.h + 15, this.y + this.h/2 - 10); fill(185, 185, 185); textFont(createFont("sans-serif"), 15); text(creator, this.x + this.h + 15, this.y + this.h/2 + 15); //COVER if (this.isMouseInside()) { fill(0, 0, 0, 35); rect(this.x, this.y, this.w, this.h, 5); } } else if (elmName === "play-panel") { addLikeBtn.title = this.title; addPlayBtn.title = this.title; //MAIN RECT stroke(0, 0, 0); strokeWeight(1); fill(55, 55, 55); rect(this.x, this.y, this.w, this.h); //UPPER STROKE stroke(255, 255, 255); line(this.x, this.y, this.x + this.w, this.y); //IMAGE noStroke(); fill(this.colour); rect(this.x + 1, this.y + 1, 63, this.h - 2); //TITLE fill(255, 255, 255); textFont(createFont("sans-serif Bold"), 17); textAlign(CORNER, CENTER); text(this.title, this.x + this.h + 15, this.y + 24); fill(185, 185, 185); textFont(createFont("sans-serif"), 15); text(creator, this.x + this.h + 15, this.y + 46); //BUTTONS addLikeBtn.sndPanel("like"); addPlayBtn.sndPanel("play"); } }; function chgSoundLen() { var length; if (wchSoundScene === "Rpg") { length = 17; } else if (wchSoundScene === "Retro") { length = 16; } else if (wchSoundScene === "Liked Sounds") { length = sound.likedSounds.length; } else if (wchSoundScene === "Hit Sounds") { length = 6; } else if (wchSoundScene === "Favourites" \|\| wchSoundScene === "Daily Mix" \|\| wchSoundScene === "Battle Effects") { length = 5; } else if (wchSoundScene === "On Repeat" \|\| wchSoundScene === "Laser Effects" \|\| wchSoundScene === "Elements" \|\| wchSoundScene === "Flight Reacts") { length = 4; } else if (wchSoundScene === "Giant Says") { length = 3; } return length; } function chgSoundList(num) { var scenes = ["Rpg", "Retro", "Liked Sounds", "Favourites", "Daily Mix", "On Repeat", "Laser Effects", "Hit Sounds", "Battle Effects", "Giant Says", "Elements", "Flight Reacts"]; var sounds = [sound.rpg[num], sound.retro[num], sound.likedSounds[num], sound.favourites[num], sound.dailyMix[num], sound.onRepeat[num], sound.laserEffects[num], sound.hitSounds[num], sound.battleEffects[num], sound.giantSays[num], sound.elements[num], sound.flightReacts[num]]; for (var i = 0; i < scenes.length; i++) { if (wchSoundScene === scenes[i]) { soundPanel[num].title = sounds[i]; soundLikeBtn[num].title = sounds[i]; soundPlayBtn[num].title = sounds[i]; } } } var topBg = { home: 0, sound: 0 }; function timeZone() { if (hour() < 12) { return "Morning"; } else if (hour() >= 12 && hour() < 17) { return "Afternoon"; } else if (hour() >= 17) { return "Evening"; } } function homeTopGradient() { if (topBg.home === 0) { var col = [155, 150, 145, 140, 135, 130, 125, 120, 115, 110, 105, 100, 95, 90, 85, 80, 75, 70, 65, 60, 55, 50, 45, 40, 35, 30, 25, 20, 15, 10, 5]; for (var i = 0; i < width; i += 5) { for (var j = 0; j < col.length; j++) { if (col[j] > 20) { col[j] -= 1.65 - j/18; } else { col[j] = 20; } noStroke(); fill(25, col[j], col[j]); rect(i, j 6, 5, 6); } } topBg.home = get(); } else { image(topBg.home, 0, 0); } } function soundTopGradient() { if (topBg.sound === 0) { var r = 23; var g = 150; var b = 68; for (var i = 0; i < 150; i += 3) { if (r > 25) { r -= 2; } else { r = 25; } if (g > 20) { if (i < 50) { g -= 4.75; } else { g -= 3; } } else { g = 20; } if (b > 20) { b -= 3; } else { b = 20; } noStroke(); fill(r, g, b); rect(0, i, width, 3); } topBg.sound = get(0, 0, width, 100); } else { image(topBg.sound, 0, 0); } } //} VARIABLES //{ var homeScene = function() { currentScene = 1; navBarScene = 1; background(25, 20, 20); homeTopGradient(); settingsButton.settings(); fill(255, 255, 255); textFont(createFont("sans-serif Bold"), 25); textAlign(CORNER, CORNER); text("Good " + timeZone(), 20, 50); for (var i = 0; i < topPanel.length; i++) { topPanel[i].top(); } for (var i = 0; i < mfuNextBtn.length; i++) { mfuNextBtn[i].panelNext(); } fill(255, 255, 255); textFont(createFont("sans-serif Bold"), 25); textAlign(CORNER, CORNER); text("Made For You", 20, 240); for (var i = 0; i < mfuPanel.length; i++) { mfuPanel[i].madeForYou(i); } anmMfu(); homeButton.navBar("Home", 1); searchButton.navBar("Search", 2); libraryButton.navBar("Your Library", 3); }; var searchScene = function() { currentScene = 2; navBarScene = 2; background(25, 20, 20); fill(255, 255, 255); textFont(createFont("sans-serif Bold"), 30); textAlign(CORNER, CORNER); text("Search", 20, 50); textSize(15); text("Top genres", 20, 80); text("Browse All", 20, 205); for (var i = 0; i < searchPanel.length; i++) { searchPanel[i].search(i); } homeButton.navBar("Home", 1); searchButton.navBar("Search", 2); libraryButton.navBar("Your Library", 3); }; var libraryScene = function() { currentScene = 3; navBarScene = 3; background(25, 20, 20); for (var i = 0; i < lbyScnBtn.length; i++) { lbyScnBtn[i].lbryScene(i); } if (lbryScene === 0) { for (var i = 0; i < soundButton.length; i++) { soundButton[i].lbryMain("sound", i); } anmBtnDec(0); if (lbyMainScn[0] === 0) { libraryPanel.library(); } if (lbyMainScn[0] === 1) { fill(255, 255, 255); textFont(createFont("sans-serif Bold"), 22); text("Your creators will appear here", width/2, 235); fill(185, 185, 185); textFont(createFont("sans-serif"), 13); text("Unfortunately, you cannot add any creators now.", width/2, 265); } else if (lbyMainScn[0] === 2) { fill(255, 255, 255); textFont(createFont("sans-serif Bold"), 25); text("Your albums will appear here", width/2 - 330/2, 240 - 100/2, 330, 100); } } else if (lbryScene === 1) { for (var i = 0; i < podcastButton.length; i++) { podcastButton[i].lbryMain("podcast", i); } anmBtnDec(1); if (lbyMainScn[1] === 0) { fill(255, 255, 255); textFont(createFont("sans-serif Bold"), 25); text("Looking for a show to listen to?", width/2 - 350/2, 240 - 100/2, 350, 100); } else if (lbyMainScn[1] === 1) { fill(255, 255, 255); textFont(createFont("sans-serif Bold"), 22); text("No Downloads Yet", width/2, 235); fill(185, 185, 185); textFont(createFont("sans-serif"), 13); text("Upgrade to Premium by subscribing to me to start downloading.", width/2 - 300/2, 270 - 50/2, 300, 50); } else if (lbyMainScn[1] === 2) { fill(255, 255, 255); textFont(createFont("sans-serif Bold"), 22); text("You haven't followed any shows yet", width/2 - 320/2, 225 - 100/2, 320, 100); fill(185, 185, 185); textFont(createFont("sans-serif"), 13); text("When you follow a show, which, sadly, cannot be done, you'll get new episodes automatically.", width/2 - 275/2, 280 - 50/2, 275, 50); } } homeButton.navBar("Home", 1); searchButton.navBar("Search", 2); libraryButton.navBar("Your Library", 3); }; var settingsScene = function() { currentScene = 4; background(25, 20, 20); stgBackButton.stgBack(); fill(255, 255, 255); textFont(createFont("sans-serif Bold"), 17); textAlign(CENTER, CENTER); text("Settings", width/2, 30); for (var i = 0; i < settingsPanel.length; i++) { settingsPanel[i].settings(); } homeButton.navBar("Home", 1); searchButton.navBar("Search", 2); libraryButton.navBar("Your Library", 3); }; var soundY = 0; var soundScene = function() { currentScene = 5; background(25, 20, 20); pushMatrix(); translate(0, soundY); soundTopGradient(); stgBackButton.stgBack(); fill(255, 255, 255); textFont(createFont("sans-serif Bold"), 20); text(wchSoundScene, width/2, 50); popMatrix(); for (var i = 0; i < chgSoundLen(); i++) { soundPanel[i].y = (105 + i * 80) + soundY; chgSoundList(i); soundLikeBtn[i].x = 320; soundLikeBtn[i].y = (140 + i * 80) + soundY; soundLikeBtn[i].w = 33; soundLikeBtn[i].shape = "ellipse"; soundPlayBtn[i].y = (140 + i * 80) + soundY; soundPlayBtn[i].w = 33; soundPlayBtn[i].shape = "ellipse"; soundPanel[i].sound("sound-panel", i); soundLikeBtn[i].sndPanel("like"); soundPlayBtn[i].sndPanel("play"); } if (wchSoundScene === "Liked Sounds" && sound.likedSounds.length === 0) { fill(255, 255, 255); textFont(createFont("sans-serif Bold"), 25); text("Your liked sounds will appear here", width/2 - 330/2, 225 - 100/2, 330, 100); } if (soundSelect) { soundPlyPanel.sound("play-panel"); } homeButton.navBar("Home", 1); searchButton.navBar("Search", 2); libraryButton.navBar("Your Library", 3); }; //} SCENES //{ draw = function() { if (currentScene === 1) { homeScene(); } else if (currentScene === 2) { searchScene(); } else if (currentScene === 3) { libraryScene(); } else if (currentScene === 4) { settingsScene(); } else if (currentScene === 5) { soundScene(); } //RESET VARIABLES if (currentScene !== 5) { soundSelect = false; soundY = 0; for (var i = 0; i < gradient.sound.num.length; i++) { gradient.sound.num[i] = floor(random(10)); } for (var i = 0; i < sound.dailyMix.length; i++) { if (i === floor(random(2)) \|\| i === floor(random(2, 4)) \|\| i === floor(random(3, 5))) { sound.dailyMix[i] = sound.rpg[floor(random(sound.rpg.length))]; } else { sound.dailyMix[i] = sound.retro[floor(random(sound.retro.length))]; } } } }; //} JS PRE-DEFINED FUNCTION //{ mouseClicked = function() { if (currentScene === 1) { var panels = [topPanel[0], topPanel[1], topPanel[2], topPanel[3], mfuPlayBtn[0], mfuPlayBtn[1], mfuPlayBtn[2], mfuPlayBtn[3]]; var scenes = ["Liked Sounds", "Favourites", "Rpg", "Retro", "Daily Mix", "On Repeat", "Laser Effects", "Hit Sounds"]; if (settingsButton.isMouseInside()) { settingsScene(); } if (mfuNextBtn[0].isMouseInside()) { mfuPos = "left"; } if (mfuNextBtn[1].isMouseInside()) { mfuPos = "right"; } for (var i = 0; i < panels.length; i++) { if (panels[i].isMouseInside()) { soundScene(); wchSoundScene = scenes[i]; } } } else if (currentScene === 2) { for (var i = 0; i < searchPanel.length; i++) { if (searchPanel[i].isMouseInside()) { soundScene(); wchSoundScene = searchPanel[i].title; } } } else if (currentScene === 3) { for (var i = 0; i < lbyScnBtn.length; i++) { if (lbyScnBtn[i].isMouseInside()) { lbryScene = i; } } if (lbryScene === 0) { for (var i = 0; i < soundButton.length; i++) { if (soundButton[i].isMouseInside()) { lbyMainScn[0] = i; } } } else if (lbryScene === 1) { for (var i = 0; i < podcastButton.length; i++) { if (podcastButton[i].isMouseInside()) { lbyMainScn[1] = i; } } } if (libraryPanel.isMouseInside()) { soundScene(); wchSoundScene = "Liked Sounds"; } } else if (currentScene === 4) { if (stgBackButton.isMouseInside()) { homeScene(); } if (stgDataButton.isMouseInside()) { if (stgDataInf === 0) { stgDataInf = 1; } else if (stgDataInf === 1) { stgDataInf = 0; } } } else if (currentScene === 5) { if (stgBackButton.isMouseInside()) { if (navBarScene === 1) { homeScene(); } else if (navBarScene === 2) { searchScene(); } else if (navBarScene === 3) { libraryScene(); } } for (var i = 0; i < chgSoundLen(); i++) { if (soundPanel[i].isMouseInside() && !(soundSelect && soundPlyPanel.isMouseInside())) { soundSelect = true; soundPlyPanel.title = soundPanel[i].title; soundPlyPanel.colour = soundPanel[i].colour; } if (soundLikeBtn[i].isMouseInside() && !(soundSelect && soundPlyPanel.isMouseInside())) { for (var j = 0; j < sound.rpg.length; j++) { if (soundLikeBtn[i].title === sound.rpg[j]) { if (liked.rpg[j]) { liked.rpg[j] = false; for (var y = 0; y < sound.likedSounds.length; y++) { if (sound.likedSounds.length !== 1) { if (soundLikeBtn[i].title === sound.likedSounds[y]) { if (y === 0) { sound.likedSounds.shift(); } else { sound.likedSounds.splice(y, y); } } } else { sound.likedSounds.pop(); } } } else { liked.rpg[j] = true; sound.likedSounds.push(soundLikeBtn[i].title); } } if (soundLikeBtn[i].title === sound.retro[j]) { if (liked.retro[j]) { liked.retro[j] = false; for (var y = 0; y < sound.likedSounds.length; y++) { if (sound.likedSounds.length !== 1) { if (soundLikeBtn[i].title === sound.likedSounds[y]) { if (y === 0) { sound.likedSounds.shift(); } else { sound.likedSounds.splice(y, y); } } } else { sound.likedSounds.pop(); } } } else { liked.retro[j] = true; sound.likedSounds.push(soundLikeBtn[i].title); } } } } if (soundPlayBtn[i].isMouseInside() && !(soundSelect && soundPlyPanel.isMouseInside())) { for (var j = 0; j < sound.rpg.length; j++) { if (soundLikeBtn[i].title === sound.rpg[j]) { playSound(playSounds.rpg[j]); } if (soundLikeBtn[i].title === sound.retro[j]) { playSound(playSounds.retro[j]); } } } } if (addLikeBtn.isMouseInside()) { for (var j = 0; j < sound.rpg.length; j++) { if (addLikeBtn.title === sound.rpg[j]) { if (liked.rpg[j]) { liked.rpg[j] = false; for (var y = 0; y < sound.likedSounds.length; y++) { if (sound.likedSounds.length !== 1) { if (addLikeBtn.title === sound.likedSounds[y]) { if (y === 0) { sound.likedSounds.shift(); } else { sound.likedSounds.splice(y, y); } } } else { sound.likedSounds.pop(); } } } else { liked.rpg[j] = true; sound.likedSounds.push(addLikeBtn.title); } } if (addLikeBtn.title === sound.retro[j]) { if (liked.retro[j]) { liked.retro[j] = false; for (var y = 0; y < sound.likedSounds.length; y++) { if (sound.likedSounds.length !== 1) { if (addLikeBtn.title === sound.likedSounds[y]) { sound.likedSounds.splice(y, y); } } else { sound.likedSounds.pop(); } } } else { liked.retro[j] = true; sound.likedSounds.push(addLikeBtn.title); } } } } if (addPlayBtn.isMouseInside()) { for (var j = 0; j < sound.rpg.length; j++) { if (addPlayBtn.title === sound.rpg[j]) { playSound(playSounds.rpg[j]); } if (addPlayBtn.title === sound.retro[j]) { playSound(playSounds.retro[j]); } } } } if (homeButton.isMouseInside()) { homeScene(); navBarScene = 1; } else if (searchButton.isMouseInside()) { searchScene(); navBarScene = 2; } else if (libraryButton.isMouseInside()) { libraryScene(); navBarScene = 3; } }; keyPressed = function() { if (keyCode === 38) { if (soundY < 0) { soundY += 10; } } if (keyCode === 40) { if (soundY > (chgSoundLen() * -80 + 240)) { soundY -= 10; } } }; //} UI
Folds	21,776,777,955,956,983,984,1185
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgL2ro9vHCAw
Votes	285
Spin-Offs	3
Type	PJS
Width	400
Height	500
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Kevin W
Author Name	KevinWijaya15
Author ID	kaid_80690558755794815547379
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739370409120
Updated	8 months ago, 1744845023094
Source Deleted	unknown