Viewing Program

Program Data

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

Title	Sound Picker
ID	5621140689780736
Created	11 years ago, 1420770969633
Updated	10 years ago, 1421301363264
Code	/** * * Finally we have @sound. To listen to any of the new sounds, pick * one in the list and click the play button. For more information, see: * http://www.khanacademy.org/computer-programming/what-does-oh-noes-say/5306255674179584 * * Have a look at @SpongeJr's program for discussion and updates about sounds here: * https://www.khanacademy.org/computer-programming/sound-requests-and-updates-new-info-about-release/6650496291700736 * * Like @explosions and smoke? Play with sounds and (configurable) smoke explosions here: * https://www.khanacademy.org/computer-programming/smoke-explosions/6001034028384256 * / / * * Code for all my GUI elements may be found at the following link: * http://www.khanacademy.org/computer-programming/gui-blue-theme/5394422402121728 * */ angleMode = "radians"; var mainFont = createFont("monospace", 12); var COLORS = { BG: color(34, 35, 38), GRAY: color(62, 62, 64), TEXT: color(240, 240, 240), BLUESTROKE: color(0, 119, 148), BLUEFILL: color(0, 119, 148, 150), BLUEHOVER: color(0, 119, 148, 100) }; var Vector = function(x, y) { this.x = x \|\| 0; this.y = y \|\| 0; this.color = color(30, 30, 30); this.copy = function() { var vector = new Vector(this.x, this.y); vector.color = this.color; return vector; }; this.set = function(x, y) { this.x = x; this.y = y; return this.copy(); }; this.add = function(vector) { this.x += vector.x; this.y += vector.y; return this.copy(); }; this.sub = function(vector) { this.x -= vector.x; this.y -= vector.y; return this.copy(); }; this.mult = function(c) { this.x = c; this.y = c; return this.copy(); }; this.div = function(c) { this.mult(1/c); return this.copy(); }; this.norm = function() { return dist(0, 0, this.x, this.y); }; this.normalize = function() { var len = this.norm(); this.x /= len; this.y /= len; return this.copy(); }; this.normalizeTo = function(c) { this.normalize(); this.mult(c); return this.copy(); }; this.dot = function(vector) { return (this.xvector.x + this.yvector.y); }; this.angle = function(vector) { var cosOfAngle = this.dot(vector)/(this.norm()vector.norm()); return acos(cosOfAngle); }; this.between = function(p, q) { this.x = q.x - p.x; this.y = q.y - p.y; return this.copy(); }; this.draw = function(point) { var len = this.norm(); var ang = atan2(this.y, this.x); translate(point.x, point.y); rotate(ang); strokeWeight(2); fill(this.color); stroke(this.color); line(0, 0, len, 0); triangle(len - 5, -2, len, 0, len - 5, 2); resetMatrix(); }; }; var Mouse = function() { this.set(0, 0); this.pressed = false; this.dp = new Vector(); }; Mouse.prototype = new Vector(); Mouse.prototype.update = function() { this.set(mouseX, mouseY); this.pressed = mouseIsPressed; this.dp.set(mouseX - pmouseX, mouseY - pmouseY); }; var Hitbox = function(x, y, w, h) { this.init(x, y, w, h); }; Hitbox.prototype.init = function(x, y, w, h) { this.pos = new Vector(x, y); this.size = new Vector(w, h); }; Hitbox.prototype.getMid = function() { var midX = this.pos.x + 0.5this.size.x; var midY = this.pos.y + 0.5this.size.y; var midP = new Vector(midX, midY); return midP; }; Hitbox.prototype.containsPoint = function(point) { var stateX = (point.x >= this.pos.x) && (point.x <= (this.pos.x + this.size.x)); var stateY = (point.y >= this.pos.y) && (point.y <= (this.pos.y + this.size.y)); var state = stateX && stateY; return state; }; Hitbox.prototype.containsPoints = function(points) { var state = true; for (var i = 0; i < points.length; i ++) { var p = points[i]; if (!this.containsPoint(p)) { state = false; break; } } return state; }; var MenuItem = function(x, y, w, label) { this.init(x, y, w, 20); this.hovered = false; this.pressed = false; this.state = false; this.symbol = " √"; this.label = label; this.font = mainFont; }; MenuItem.prototype = new Hitbox(); MenuItem.prototype.draw = function() { strokeWeight(1); stroke(COLORS.BLUESTROKE); fill(this.hovered ? COLORS.BLUEHOVER : COLORS.BLUEFILL); rect(this.pos.x, this.pos.y, this.size.x, this.size.y, 1); fill(COLORS.TEXT); textFont(this.font); text(this.label + (this.state ? this.symbol : ""), this.pos.x + 5, this.pos.y + 0.5this.size.y + 4); }; MenuItem.prototype.update = function(mouse) { this.hovered = this.containsPoint(mouse); this.pressed = this.hovered && mouse.pressed; if (this.pressed && !this.state) { this.state = true; } }; MenuItem.prototype.main = function(mouse) { this.update(mouse); this.draw(); }; var Menu = function(x, y, title) { this.init(x, y, 100, 20); this.items = []; this.title = title \|\| ""; this.font = mainFont; }; Menu.prototype = new Hitbox(); Menu.prototype.setItemWidth = function() { for (var i = 0; i < this.items.length; i ++) { this.items[i].size.x = this.size.x; } }; Menu.prototype.addItem = function(label) { var x = this.pos.x; var y = this.pos.y + 20this.items.length + (this.title === "" ? 0 : 5); var itm = new MenuItem(x, y, this.size.x, label); itm.state = this.items.length === 0; this.items.push(itm); this.size.y = 20this.items.length; textFont(this.font); if (textWidth(label + itm.symbol) > this.size.x - 15) { this.size.x = textWidth(label + itm.symbol) + 20; this.setItemWidth(); } }; Menu.prototype.add = function(args) { if (args instanceof Array) { for (var i = 0; i < args.length; i ++) { this.addItem(args[i]); } } else { this.addItem(args); } }; Menu.prototype.exists = function(label) { var exists = false; for (var i = 0; i < this.items.length; i ++) { if (this.items[i].label === label) { exists = true; break; } } return exists; }; Menu.prototype.get = function(label) { if (this.exists(label)) { for (var i = 0; i < this.items.length; i ++) { var itm = this.items[i]; if (itm.label === label) { return itm; } } } else { return null; } }; Menu.prototype.getChecked = function() { for (var i = 0; i < this.items.length; i ++) { var itm = this.items[i]; if (itm.state) { return itm; } } }; Menu.prototype.getCheckedLabel = function() { return this.getChecked().label; }; Menu.prototype.set = function(label) { if (this.exists(label)) { this.getChecked().state = false; this.get(label).state = true; } }; Menu.prototype.draw = function() { fill(COLORS.TEXT); textFont(this.font); text(this.title, this.pos.x, this.pos.y); fill(COLORS.GRAY); strokeWeight(2); stroke(COLORS.BLUESTROKE); rect(this.pos.x, this.pos.y + (this.title === "" ? 0 : 5), this.size.x, this.size.y, 1); for (var i = 0; i < this.items.length; i ++) { this.items[i].draw(); } }; Menu.prototype.update = function(mouse) { for (var i = 0; i < this.items.length; i ++) { var itm = this.items[i]; itm.update(mouse); if (itm.state) { for (var j = 0; j < this.items.length; j ++) { if (i !== j) { this.items[j].state = false; } } } } }; Menu.prototype.main = function(mouse) { this.update(mouse); this.draw(); }; var Button = function(x, y, label) { this.font = mainFont; this.label = label; this.hovered = false; this.pressed = false; textFont(this.font); this.init(x, y, textWidth(label) + 15, 20); }; Button.prototype = new Hitbox(); Button.prototype.draw = function() { strokeWeight(2); stroke(COLORS.BLUESTROKE); fill(this.pressed ? COLORS.BLUEHOVER : COLORS.BLUEFILL); rect(this.pos.x, this.pos.y, this.size.x, this.size.y, 1); fill(COLORS.TEXT); textFont(this.font); text(this.label, this.pos.x + 7, this.pos.y + 0.50this.size.y + 4); }; Button.prototype.update = function(mouse) { this.hovered = this.containsPoint(mouse); this.pressed = this.hovered && mouse.pressed; }; Button.prototype.main = function(mouse) { this.update(mouse); this.draw(); }; var linspace = function(a, b, n) { var points = []; var step = (b - a) / (n - 1); for (var i = 0; i < n; i ++) { points.push(a + istep); } return points; }; var AudioViz = function(config) { this.f = config.beat \|\| function(x) {return random(-1, 1);}; this.a = config.a \|\| -1; this.b = config.b \|\| 1; this.n = config.n \|\| 50; this.domain = linspace(this.a, this.b, this.n); this.points = this.generatePoints(); this.sx = config.sx \|\| 20; this.sy = config.sy \|\| 40; this.origin = config.origin \|\| new Vector(); this.w = config.w \|\| 150; this.h = config.h \|\| 100; this.window = new Hitbox(this.origin.x - this.w/2, this.origin.y - this.h/2, this.w, this.h); this.wMid = this.window.getMid(); this.font = mainFont; this.title = config.title \|\| ""; this.play = true; this.playbackSpeed = 0.10; }; AudioViz.prototype.mapPoint = function(point) { return [this.origin.x + point[0]this.sx, this.origin.y - point[1]this.sy]; }; AudioViz.prototype.invMapPoint = function(point) { return [(point[0] - this.origin.x)/this.sx, (this.origin.y - point[1])/this.sy]; }; AudioViz.prototype.generatePoints = function() { var points = []; for (var i = 0; i < this.domain.length; i ++) { var x = this.domain[i]; var y = this.f(x); points.push([x, y]); } return points; }; AudioViz.prototype.plot = function() { noFill(); strokeWeight(2); stroke(COLORS.BLUESTROKE); / beginShape(); for (var i = 0; i < this.points.length; i ++) { var pt = this.mapPoint(this.points[i]); if (this.window.containsPoint({x: pt[0], y: pt[1]})) { curveVertex(pt[0], pt[1]); } } endShape(); / for (var i = 0; i < this.points.length - 1; i ++) { var pt = this.mapPoint(this.points[i]); var qt = this.mapPoint(this.points[i+1]); var d = dist(pt[0], pt[1], qt[0], qt[1]); if (d <= 100) { line(pt[0], pt[1], qt[0], qt[1]); } } }; AudioViz.prototype.draw = function() { // Window. strokeWeight(2); stroke(COLORS.BLUESTROKE); fill(COLORS.BG); rect(this.window.pos.x, this.window.pos.y, this.window.size.x, this.window.size.y, 1); // Midline. strokeWeight(2); stroke(COLORS.GRAY); line(this.window.pos.x, this.wMid.y, this.window.pos.x + this.window.size.x, this.wMid.y); // Title. fill(COLORS.TEXT); textFont(this.font); text("Sound: " + this.title, this.window.pos.x + 5, this.window.pos.y + this.window.size.y + 15); if (this.play) { this.plot(); } }; AudioViz.prototype.update = function() { for (var i = 0; i < this.points.length; i ++) { var point = this.points[i]; point[0] -= this.playbackSpeed; var mPoint = this.mapPoint(point); if (mPoint[0] <= this.window.pos.x) { mPoint[0] = this.window.pos.x + this.window.size.x; this.points[i] = this.invMapPoint(mPoint); } } }; AudioViz.prototype.main = function() { this.update(); this.draw(); }; /* * * Setup, event handling and main loop. * */ var mouse = new Mouse(); / Load all sounds. / var sounds = { rpg: [], retro: [] }; var soundNames = { 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" ].sort(), retro: [ "boom1","boom2","coin","hit1","hit2","jump1","jump2", "laser1","laser2","laser3","laser4","rumble","thruster-short", "thruster-long","whistle1","whistle2" ].sort() }; for (var pack in soundNames) { var packNames = soundNames[pack]; for (var i = 0; i < packNames.length; i ++) { var soundName = pack + "/" + packNames[i]; var sound = getSound(soundName); sounds[pack].push(sound); } } / GUI element definitions */ var packPicker = new Menu(120, 25, "CHOOSE PACKAGE >"); packPicker.add(["rpg","retro"]); var soundPickers = {}; for (var pack in sounds) { var x = packPicker.pos.x + 123; var soundPicker = new Menu(x, 25, "CHOOSE SOUND"); soundPicker.add(soundNames[pack]); soundPickers[pack] = soundPicker; } var buttonPlay = new Button(80, 165, "PLAY SOUND"); var AV = new AudioViz({ a: -5, b: 5, n: 100, origin: new Vector(125, 250), w: 200, h: 100, sy: 35 }); var mouseClicked = function() { if (buttonPlay.pressed) { var pack = packPicker.getCheckedLabel(); var soundName = soundPickers[pack].getCheckedLabel(); var index = soundNames[pack].indexOf(soundName); var sound = sounds[pack][index]; playSound(sound); } }; frameRate(60); var draw = function() { mouse.update(); background(COLORS.BG); var pack = packPicker.getCheckedLabel(); var soundPicker = soundPickers[pack]; packPicker.main(mouse); soundPicker.main(mouse); buttonPlay.main(mouse); AV.main(mouse); AV.title = pack + "/" + soundPicker.getCheckedLabel(); fill(100); textFont(mainFont); text("[Reminder: turn up your volume]", 10, 390); };
Folds	23,31,32,108,110,114,116,120,122,124,125,128,129,134,135,140,141,151,153,164,166,175,176,182,183,186,188,194,196,200,201,214,215,223,224,233,234,245,246,253,254,256,257,262,263,276,277,289,290,293,295,304,306,315,316,319,320,323,325,332,333,356,357,359,360,362,363,371,372,395,396,417,418,429,430,433,444,447,448,460,461,468,475,480,483,487,489,497,500,517
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLDw3Iz-CQw
Votes	217
Spin-Offs	14
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"5306255674179584","title":"What does Oh Noes Say?","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Qeeko
Author Name	Qeeko
Author ID	kaid_656542968054661279010009
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739398052519
Updated	10 months ago, 1739398059296
Source Deleted	unknown