Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
203 lines (164 sloc) 7.54 KB
<!doctype html>
<html lang="en" style="background:#000056;">
<head>
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Schoolbell' rel='stylesheet' type='text/css'>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/p5.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/addons/p5.sound.min.js"></script>
<script src="//connect.soundcloud.com/sdk.js"></script>
<script>
var p5sc_instance;
var sound;
var client_id = 'ea6d4c6a6f367767516c9221a30c2ced';
var counter = 0;
var counter_limit = 500;
var fade_alpha = 255;
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null
}
var url = getURLParameter('url');
if (!url) url = 'https://soundcloud.com/ugotsta/countdown';
var text = getURLParameter('text');
if (!text) text = '';
var p5sc = function(s) {
var canvas;
var thumbnail;
var freq;
var spectrum_x, spectrum_y, x_scale, y_scale, spectrum_width, spectrum_height;
var canvas_scale;
s.preload = function() {
s.background(0);
song = s.loadSound(sound.stream_url + '?client_id=' + client_id);
};
s.setup = function() {
canvas = s.createCanvas(s.windowWidth, s.windowHeight);
if (sound.artwork_url) thumbnail = s.loadImage(sound.artwork_url);
else thumbnail = "";
amp = new p5.Amplitude(.25);
fft = new p5.FFT(.1, 64);
s.init();
};
s.mousePressed = function() {
var fs = s.fullscreen();
s.fullscreen(!fs);
};
s.textFilter = function(t) {
// truncate lengthy strings
if (!t) return " ";
if (t.length > 30) {
var str = t.substring(0, 30);
for (var i = str.length; i >= 0; i--) {
if (str[i] === " ") return str.substring(0, i) + " ...";
}
return t.substring(0, 29) + " ...";
}
return t.toString();
};
s.init = function() {
s.background('#000056');
x_scale = 0.95; // 75% of s.width
y_scale = 0.4; // 45% of x.height
spectrum_x = (s.windowWidth - (s.windowWidth * x_scale)) / 2;
spectrum_y = (s.windowHeight - (s.windowHeight * y_scale)) + s.windowHeight * (y_scale / 2) - s.height / 2.75;
spectrum_width = s.windowWidth * x_scale;
spectrum_height = (s.windowHeight * y_scale);
};
s.draw = function() {
/* BACKGROUND */
s.drawBackground();
/* TRACK DETAILS */
s.drawDetails();
counter += 1;
// Start fade-in near counter limit.
if (counter > counter_limit - 85) {
fade_alpha -= 3;
}
if (counter == counter_limit) {
song.play();
}
if (counter >= counter_limit) {
freq = fft.analyze();
/* SPECTRUM */
s.drawSpectrum();
}
// Handle fade-in effect
s.fill(0, 0, 86, fade_alpha);
s.rect(0, 0, s.windowWidth, s.windowHeight);
};
s.drawBackground = function() {
var highMid = fft.getEnergy('highMid');
s.background('#000056');
s.fill(0);
s.noStroke();
};
s.drawSpectrum = function() {
var volume = amp.getLevel();
/* SPECTRUM */
s.noStroke();
var bands = 32;
var l = 17000 / bands; // width per band, max frequency of 17000
var margin = 4;
for (var i = 0; i < bands; i += 1) {
s.fill(254, 122, 22, 255);
var x_pos = s.map(i, 0, bands, spectrum_x, spectrum_x + spectrum_width);
var h = -(spectrum_height) + s.map((function() {
var from = i * l + 1;
var to = from + l;
var adj = 1;
if (i == 0) adj = 0.5;
if (i == 1) adj = 0.75;
return fft.getEnergy(from, to) * adj;
})(), 0, 255, spectrum_height, 0);
// draw band
s.rect(x_pos, spectrum_y, (spectrum_width / bands) - margin, h);
// draw line at top
s.fill(255, 255, 255, s.map(h, 0, -spectrum_height, 0, 150));
s.rect(x_pos, spectrum_y + h, (spectrum_width / bands) - margin, 1);
}
s.noStroke();
};
s.drawDetails = function() {
x = (s.width - (s.width * x_scale)) / 2;
y = x + s.height / 2.25;
var artwork_size = 100 + 10; // 10 pixels for padding
var tsize_author = 50;
var tsize_details = 30;
var lineheight = 30;
if (thumbnail !== "") {
s.image(thumbnail, x, y);
x += artwork_size;
}
s.noStroke();
s.fill(255, 255, 255, 255);
// author
s.textSize(50);
s.textLeading(tsize_author);
y += artwork_size / 2;
s.textFont('Luckiest Guy');
s.text(s.textFilter(sound.title), x, y);
s.fill(254, 122, 22, 255);
// title
y += tsize_details;
s.textSize(tsize_details);
s.text(sound.description, x, y);
};
s.windowResized = function() {
s.resizeCanvas(s.windowWidth, s.windowHeight);
s.init();
};
};
// call SoundCloud API
SC.initialize({
client_id: client_id
});
SC.get('/resolve', {
url: url
}, function(data) {
sound = data;
p5sc_instance = new p5(p5sc);
});
</script>
</head>
<body style="background:#000056;padding:0;padding-left:160px;padding-top:100px;margin:0;overflow:hidden;transform: perspective( 1600px ) rotateY( 45deg );width:1600px">
</body>
</html>