Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
317 lines (264 sloc) 12.4 KB
<!doctype html>
<html lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Nothing+Yout+Could+Do' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Inconsolata' 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';
// from here: http://stackoverflow.com/questions/11582512/how-to-get-url-parameters-with-javascript/11582513#11582513
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/those-are-not-goblins';
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;
var gradient;
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);
song.play();
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(0);
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);
spectrum_width = s.windowWidth * x_scale;
spectrum_height = (s.windowHeight * y_scale);
// create blank image for gradient
gradient = s.createImage(s.windowWidth, spectrum_y);
gradient.loadPixels();
for (var x = 0; x < gradient.width; x++) {
for (var y = 0; y < gradient.height; y++) {
var a = s.map(y, 0, gradient.height, 240, 100);
var c = s.map(y, 0, gradient.height, 230, 0);
for(i = 0.5; i <= 0.95; i += 0.5){
if (y > gradient.height * i) c -= s.map(y, 0, gradient.height, 0, 1);
}
gradient.set(x, y, [c, c, c, a]);
}
}
gradient.updatePixels();
};
s.draw = function() {
freq = fft.analyze();
/* BACKGROUND */
s.drawBackground();
/* SPECTRUM */
s.drawSpectrum();
/* TRACK DETAILS */
s.drawDetails();
};
s.drawBackground = function() {
var highMid = fft.getEnergy('highMid');
var random = s.random(0, 3 + s.map(highMid, 0, 255, 0, 20));
s.background(random);
s.image(gradient, 0, 0);
s.fill(0);
// random line
s.stroke(0, 0, 0, s.random(0, 30 + highMid / 2));
var random_x = s.random(0, s.width);
s.line(random_x, 0, random_x, s.height);
// darkness
s.noStroke();
s.rect(0, spectrum_y, s.width, s.height);
};
s.drawSpectrum = function() {
var volume = amp.getLevel();
/* SPECTRUM */
s.noStroke();
var bands = 64;
var l = 17000 / bands; // width per band, max frequency of 17000
var margin = 4;
for (var i = 0; i < bands; i += 1) {
s.fill(0, 0, 0, 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;
// TODO: find proper way to accommodate low frequency energy
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);
}
/* "Hidden in Darkness" */
var text_size = 100;
// reverse string if past higher threshold
var txt = text;
if (volume > 0.2) txt = text.split('').reverse().join('');
s.noStroke();
s.textFont('Nothing You Could Do');
// map letters of string to frequency bands
for (var i = 0; i < txt.length; i++) {
s.push();
var letter = txt[i];
var band = s.map(i, 0, txt.length, 0, bands);
var x_pos = s.map(band, 0, bands, spectrum_x, spectrum_x + spectrum_width);
var from = band * l + 1;
var to = from + l;
var adj = 1;
//if (i == 0) adj = 0.75;
var lvl = fft.getEnergy(from, to) * adj;
// randomly change to uppercase based on level
if (lvl > 100) {
if (Math.random() > 0.9) letter = letter.toUpperCase();
}
var lvl_translate = (lvl / 255) * 400;
var x = s.random(0, 2);
x = Math.random() > 0.5 ? x : -x;
s.translate(x, -lvl_translate);
// set size
var interp = s.map(lvl, 0, 255, text_size, 0);
if (lvl > 75) interp = s.map(lvl, 0, 255, text_size / 2, 0);
s.textSize(interp);
//setup fill
var c = 0;//lvl
var alpha = 255 - lvl * 2;
s.fill(c, c, c, alpha);
// randomize stroke a bit
s.stroke(c, c, c, s.random(0, alpha));
s.strokeWeight(s.random(0, 3));
// draw letter
s.textAlign(s.CENTER);
s.text(letter, x_pos + text_size / 2, spectrum_y);
// reset transforms
s.pop();
}
/* CHARRED GRASS */
grass_size = 100;
s.fill(0, 0, 0, 255);
s.noStroke();
s.textSize(grass_size);
s.textFont('Nothing You Could Do');
var str = '';
var chars = ",,,.;/:!!~||" + '\\';
for (i = 0; i < 200; i++) {
var random = s.random(0, chars.length);
str += chars[Math.floor(random)];
}
s.text(str, 0, spectrum_y + grass_size / 4);
// smaller grass
s.textSize(grass_size / 2);
str = str.split('').reverse().join('');
s.text(str, 0, spectrum_y + grass_size / 6);
// SCRATCHES
s.push();
s.fill(0, 0, 0, 255);
s.translate(0, 0);
s.stroke(0);
s.strokeWeight(0.5);
s.textFont('Nothing You Could Do');
var treble = fft.getEnergy('treble');
s.rotate(s.map(treble, 0, 255, 0, 1));
s.textSize(Math.floor(s.random(8, treble)));
s.tint(255, Math.floor(s.random(0, 255)));
var chars = "',.;-/`!~|/";
var random_x = Math.floor(s.random(0, s.width));
var random_y = Math.floor(s.random(0, s.height));
s.text(chars[Math.floor(s.random(0, chars.length))], random_x, random_y);
s.pop();
};
s.drawDetails = function() {
x = (s.width - (s.width * x_scale)) / 2;
y = x;
var artwork_size = 100 + 10; // 10 pixels for padding
var tsize_author = 50;
var tsize_details = 30;
var lineheight = 30;
s.fill(0);
// thumbnail - set blend mode to show white as transparent
s.blendMode(s.MULTIPLY);
if (thumbnail !== "") {
s.image(thumbnail, x, y);
x += artwork_size;
}
s.blendMode(s.BLEND);
s.stroke(0, 0, 0, s.random(0, 100));
s.strokeWeight(Math.random());
// author
//s.noStroke();
s.textSize(50);
s.textLeading(tsize_author);
y += artwork_size / 2;
s.textFont('Nothing You Could Do');
s.text(s.textFilter(sound.title), x, y);
// title
y += tsize_details;
s.textSize(tsize_details);
s.textFont('Inconsolata');
s.text(s.textFilter(sound.label_name), x, y);
// right-side
x = s.width - ((s.width - (s.width * x_scale)) / 2);
y = (s.width - (s.width * x_scale)) / 2 + (artwork_size / 2 - tsize_details / 2);
s.textSize(tsize_details);
s.textAlign(s.RIGHT);
s.text(s.textFilter(sound.created_at), x, y);
y += tsize_details;
var tag_list = sound.tag_list.replace(/['"]+/g, '');
s.text(s.textFilter(tag_list), x, y);
s.textAlign(s.LEFT);
};
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="padding:0;margin:0;overflow:hidden;">
</body>
</html>