42 ? 1.5 : 2; // increase this value to fade out faster.
266 | this.highlight = 0; // for highlighted stroke effect;
267 | // figure out the x and y coordinates of the center of the polygon based on the
268 | // 60 degree XY axis coordinates passed in
269 | var step = Math.round(Math.cos(Math.PI/6)*tileSize*2);
270 | this.y = Math.round(step * Math.sin(Math.PI/3) * -y );
271 | this.x = Math.round(x * step + y * step/2 );
272 |
273 | // calculate the vertices of the polygon
274 | this.vertices = [];
275 | for (var i = 1; i <= this.sides;i += 1) {
276 | x = this.x + this.tileSize * Math.cos(i * 2 * Math.PI / this.sides + Math.PI/6);
277 | y = this.y + this.tileSize * Math.sin(i * 2 * Math.PI / this.sides + Math.PI/6);
278 | this.vertices.push([x, y]);
279 | }
280 | }
281 | Polygon.prototype.rotateVertices = function() {
282 | // rotate all the vertices to achieve the overall rotational effect
283 | var rotation = fgRotation;
284 | rotation -= audioSource.volume > 10000 ? Math.sin(audioSource.volume/800000) : 0;
285 | for (var i = 0; i <= this.sides-1;i += 1) {
286 | this.vertices[i][0] = this.vertices[i][0] - this.vertices[i][1] * Math.sin(rotation);
287 | this.vertices[i][1] = this.vertices[i][1] + this.vertices[i][0] * Math.sin(rotation);
288 | }
289 | };
290 | var minMental = 0, maxMental = 0;
291 | Polygon.prototype.calculateOffset = function(coords) {
292 | var angle = Math.atan(coords[1]/coords[0]);
293 | var distance = Math.sqrt(Math.pow(coords[0], 2) + Math.pow(coords[1], 2)); // a bit of pythagoras
294 | var mentalFactor = Math.min(Math.max((Math.tan(audioSource.volume/6000) * 0.5), -20), 2); // this factor makes the visualization go crazy wild
295 | /*
296 | // debug
297 | minMental = mentalFactor < minMental ? mentalFactor : minMental;
298 | maxMental = mentalFactor > maxMental ? mentalFactor : maxMental;*/
299 | var offsetFactor = Math.pow(distance/3, 2) * (audioSource.volume/2000000) * (Math.pow(this.high, 1.3)/300) * mentalFactor;
300 | var offsetX = Math.cos(angle) * offsetFactor;
301 | var offsetY = Math.sin(angle) * offsetFactor;
302 | offsetX *= (coords[0] < 0) ? -1 : 1;
303 | offsetY *= (coords[0] < 0) ? -1 : 1;
304 | return [offsetX, offsetY];
305 | };
306 | Polygon.prototype.drawPolygon = function() {
307 | var bucket = Math.ceil(audioSource.streamData.length/tiles.length*this.num);
308 | var val = Math.pow((audioSource.streamData[bucket]/255),2)*255;
309 | //console.log(audioSource.streamData[bucket]/255);
310 | val *= this.num > 42 ? 1.1 : 1;
311 | // establish the value for this tile
312 | if (val > this.high) {
313 | this.high = val;
314 | } else {
315 | this.high -= this.decay;
316 | val = this.high;
317 | }
318 |
319 | // figure out what colour to fill it and then draw the polygon
320 | var r, g, b, a;
321 | if (val > 0) {
322 | this.ctx.beginPath();
323 | var offset = this.calculateOffset(this.vertices[0]);
324 | this.ctx.moveTo(this.vertices[0][0] + offset[0], this.vertices[0][1] + offset[1]);
325 | // draw the polygon
326 | for (var i = 1; i <= this.sides-1;i += 1) {
327 | offset = this.calculateOffset(this.vertices[i]);
328 | this.ctx.lineTo (this.vertices[i][0] + offset[0], this.vertices[i][1] + offset[1]);
329 | }
330 | this.ctx.closePath();
331 |
332 | if (val > 128) {
333 | r = (val-128)*2;
334 | g = ((Math.cos((2*val/128*Math.PI/2)- 4*Math.PI/3)+1)*128);
335 | b = (val-105)*3;
336 | }
337 | else if (val > 175) {
338 | r = (val-128)*2;
339 | g = 255;
340 | b = (val-105)*3;
341 | }
342 | else {
343 | r = ((Math.cos((2*val/128*Math.PI/2))+1)*128);
344 | g = ((Math.cos((2*val/128*Math.PI/2)- 4*Math.PI/3)+1)*128);
345 | b = ((Math.cos((2.4*val/128*Math.PI/2)- 2*Math.PI/3)+1)*128);
346 | }
347 | if (val > 210) {
348 | this.cubed = val; // add the cube effect if it's really loud
349 | }
350 | if (val > 120) {
351 | this.highlight = 100; // add the highlight effect if it's pretty loud
352 | }
353 | // set the alpha
354 | var e = 2.7182;
355 | a = (0.5/(1 + 40 * Math.pow(e, -val/8))) + (0.5/(1 + 40 * Math.pow(e, -val/20)));
356 |
357 | this.ctx.fillStyle = "rgba(" +
358 | Math.round(r) + ", " +
359 | Math.round(g) + ", " +
360 | Math.round(b) + ", " +
361 | a + ")";
362 | // console.log(r);
363 | // console.log(g);
364 | // console.log(b);
365 | this.ctx.fill();
366 | // stroke
367 | if (val > 20) {
368 | var strokeVal = 20;
369 | this.ctx.strokeStyle = "rgba(" + strokeVal + ", " + strokeVal + ", " + strokeVal + ", 0.5)";
370 | this.ctx.lineWidth = 1;
371 | this.ctx.stroke();
372 | }
373 | }
374 | // display the tile number for debug purposes
375 | /*this.ctx.font = "bold 12px sans-serif";
376 | this.ctx.fillStyle = 'grey';
377 | this.ctx.fillText(this.num, this.vertices[0][0], this.vertices[0][1]);*/
378 | };
379 | Polygon.prototype.drawHighlight = function() {
380 | this.ctx.beginPath();
381 | // draw the highlight
382 | var offset = this.calculateOffset(this.vertices[0]);
383 | this.ctx.moveTo(this.vertices[0][0] + offset[0], this.vertices[0][1] + offset[1]);
384 | // draw the polygon
385 | for (var i = 0; i <= this.sides-1;i += 1) {
386 | offset = this.calculateOffset(this.vertices[i]);
387 | this.ctx.lineTo (this.vertices[i][0] + offset[0], this.vertices[i][1] + offset[1]);
388 | }
389 | this.ctx.closePath();
390 | var a = this.highlight/100;
391 | this.ctx.strokeStyle = "rgba(255, 255, 255, " + a + ")";
392 | this.ctx.lineWidth = 1;
393 | this.ctx.stroke();
394 | this.highlight -= 0.5;
395 | };
396 |
397 | var makePolygonArray = function() {
398 | tiles = [];
399 | /**
400 | * Arrange into a grid x, y, with the y axis at 60 degrees to the x, rather than
401 | * the usual 90.
402 | * @type {number}
403 | */
404 | var i = 0; // unique number for each tile
405 | tiles.push(new Polygon(6, 0, 0, tileSize, fgCtx, i)); // the centre tile
406 | i++;
407 | for (var layer = 1; layer < 7; layer++) {
408 | tiles.push(new Polygon(6, 0, layer, tileSize, fgCtx, i)); i++;
409 | tiles.push(new Polygon(6, 0, -layer, tileSize, fgCtx, i)); i++;
410 | for(var x = 1; x < layer; x++) {
411 | tiles.push(new Polygon(6, x, -layer, tileSize, fgCtx, i)); i++;
412 | tiles.push(new Polygon(6, -x, layer, tileSize, fgCtx, i)); i++;
413 | tiles.push(new Polygon(6, x, layer-x, tileSize, fgCtx, i)); i++;
414 | tiles.push(new Polygon(6, -x, -layer+x, tileSize, fgCtx, i)); i++;
415 | }
416 | for(var y = -layer; y <= 0; y++) {
417 | tiles.push(new Polygon(6, layer, y, tileSize, fgCtx, i)); i++;
418 | tiles.push(new Polygon(6, -layer, -y, tileSize, fgCtx, i)); i++;
419 | }
420 | }
421 | };
422 |
423 |
424 | function Star(x, y, starSize, ctx) {
425 | this.x = x;
426 | this.y = y;
427 | this.angle = Math.atan(Math.abs(y)/Math.abs(x));
428 | this.starSize = starSize;
429 | this.ctx = ctx;
430 | this.high = 0;
431 | }
432 | Star.prototype.drawStar = function() {
433 | var distanceFromCentre = Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
434 |
435 | // stars as lines
436 | var brightness = 200 + Math.min(Math.round(this.high * 5), 55);
437 | this.ctx.lineWidth= 0.5 + distanceFromCentre/2000 * Math.max(this.starSize/2, 1);
438 | this.ctx.strokeStyle='rgba(' + brightness + ', ' + brightness + ', ' + brightness + ', 1)';
439 | this.ctx.beginPath();
440 | this.ctx.moveTo(this.x,this.y);
441 | var lengthFactor = 1 + Math.min(Math.pow(distanceFromCentre,2)/30000 * Math.pow(audioSource.volume, 2)/6000000, distanceFromCentre);
442 | var toX = Math.cos(this.angle) * -lengthFactor;
443 | var toY = Math.sin(this.angle) * -lengthFactor;
444 | toX *= this.x > 0 ? 1 : -1;
445 | toY *= this.y > 0 ? 1 : -1;
446 | this.ctx.lineTo(this.x + toX, this.y + toY);
447 | this.ctx.stroke();
448 | this.ctx.closePath();
449 |
450 | // starfield movement coming towards the camera
451 | var speed = lengthFactor/20 * this.starSize;
452 | this.high -= Math.max(this.high - 0.0001, 0);
453 | if (speed > this.high) {
454 | this.high = speed;
455 | }
456 | var dX = Math.cos(this.angle) * this.high;
457 | var dY = Math.sin(this.angle) * this.high;
458 | this.x += this.x > 0 ? dX : -dX;
459 | this.y += this.y > 0 ? dY : -dY;
460 |
461 | var limitY = fgCanvas.height/2 + 500;
462 | var limitX = fgCanvas.width/2 + 500;
463 | if ((this.y > limitY || this.y < -limitY) || (this.x > limitX || this.x < -limitX)) {
464 | // it has gone off the edge so respawn it somewhere near the middle.
465 | this.x = (Math.random() - 0.5) * fgCanvas.width/3;
466 | this.y = (Math.random() - 0.5) * fgCanvas.height/3;
467 | this.angle = Math.atan(Math.abs(this.y)/Math.abs(this.x));
468 | }
469 | };
470 |
471 | var makeStarArray = function() {
472 | var x, y, starSize;
473 | stars = [];
474 | var limit = fgCanvas.width / 15; // how many stars?
475 | for (var i = 0; i < limit; i ++) {
476 | x = (Math.random() - 0.5) * fgCanvas.width;
477 | y = (Math.random() - 0.5) * fgCanvas.height;
478 | starSize = (Math.random()+0.1)*3;
479 | stars.push(new Star(x, y, starSize, sfCtx));
480 | }
481 | };
482 |
483 |
484 | var drawBg = function() {
485 | bgCtx.clearRect(0, 0, bgCanvas.width, bgCanvas.height);
486 | var r, g, b, a;
487 | var val = audioSource.volume/1000;
488 | r = 200 + (Math.sin(val) + 1) * 28;
489 | g = val * 2;
490 | b = val * 8;
491 | a = Math.sin(val+3*Math.PI/2) + 1;
492 | bgCtx.beginPath();
493 | bgCtx.rect(0, 0, bgCanvas.width, bgCanvas.height);
494 | // create radial gradient
495 | var grd = bgCtx.createRadialGradient(bgCanvas.width/2, bgCanvas.height/2, val, bgCanvas.width/2, bgCanvas.height/2, bgCanvas.width-Math.min(Math.pow(val, 2.7), bgCanvas.width - 20));
496 | grd.addColorStop(0, 'rgba(0,0,0,0)');// centre is transparent black
497 | grd.addColorStop(0.8, "rgba(" +
498 | Math.round(r) + ", " +
499 | Math.round(g) + ", " +
500 | Math.round(b) + ", 0.4)"); // edges are reddish
501 |
502 | bgCtx.fillStyle = grd;
503 | bgCtx.fill();
504 |
505 | /*
506 | // debug data
507 | bgCtx.font = "bold 30px sans-serif";
508 | bgCtx.fillStyle = 'grey';
509 | bgCtx.fillText("val: " + val, 30, 30);
510 | bgCtx.fillText("r: " + r , 30, 60);
511 | bgCtx.fillText("g: " + g , 30, 90);
512 | bgCtx.fillText("b: " + b , 30, 120);
513 | bgCtx.fillText("a: " + a , 30, 150);*/
514 | };
515 |
516 | this.resizeCanvas = function() {
517 | if (fgCanvas) {
518 | // resize the foreground canvas
519 | fgCanvas.width = window.innerWidth;
520 | fgCanvas.height = window.innerHeight;
521 | fgCtx.translate(fgCanvas.width/2,fgCanvas.height/2);
522 |
523 | // resize the bg canvas
524 | bgCanvas.width = window.innerWidth;
525 | bgCanvas.height = window.innerHeight;
526 | // resize the starfield canvas
527 | sfCanvas.width = window.innerWidth;
528 | sfCanvas.height = window.innerHeight;
529 | sfCtx.translate(fgCanvas.width/2,fgCanvas.height/2);
530 |
531 | tileSize = fgCanvas.width > fgCanvas.height ? fgCanvas.width / 25 : fgCanvas.height / 25;
532 |
533 |
534 | drawBg();
535 | makePolygonArray();
536 | makeStarArray()
537 | }
538 | };
539 |
540 | var rotateForeground = function() {
541 | tiles.forEach(function(tile) {
542 | tile.rotateVertices();
543 | });
544 | };
545 |
546 | var draw = function() {
547 | fgCtx.clearRect(-fgCanvas.width, -fgCanvas.height, fgCanvas.width*2, fgCanvas.height *2);
548 | sfCtx.clearRect(-fgCanvas.width/2, -fgCanvas.height/2, fgCanvas.width, fgCanvas.height);
549 |
550 | stars.forEach(function(star) {
551 | star.drawStar();
552 | });
553 | tiles.forEach(function(tile) {
554 | tile.drawPolygon();
555 | });
556 | tiles.forEach(function(tile) {
557 | if (tile.highlight > 0) {
558 | tile.drawHighlight();
559 | }
560 | });
561 |
562 | // debug
563 | /* fgCtx.font = "bold 24px sans-serif";
564 | fgCtx.fillStyle = 'grey';
565 | fgCtx.fillText("minMental:" + minMental, 10, 10);
566 | fgCtx.fillText("maxMental:" + maxMental, 10, 40);*/
567 | requestAnimationFrame(draw);
568 | };
569 |
570 | this.init = function(options) {
571 | audioSource = options.audioSource;
572 | var container = document.getElementById(options.containerId);
573 |
574 | // foreground hexagons layer
575 | fgCanvas = document.createElement('canvas');
576 | fgCanvas.setAttribute('style', 'position: absolute; z-index: 10');
577 | fgCtx = fgCanvas.getContext("2d");
578 | container.appendChild(fgCanvas);
579 |
580 | // middle starfield layer
581 | sfCanvas = document.createElement('canvas');
582 | sfCtx = sfCanvas.getContext("2d");
583 | sfCanvas.setAttribute('style', 'position: absolute; z-index: 5');
584 | container.appendChild(sfCanvas);
585 |
586 | // background image layer
587 | bgCanvas = document.createElement('canvas');
588 | bgCtx = bgCanvas.getContext("2d");
589 | container.appendChild(bgCanvas);
590 |
591 | makePolygonArray();
592 | makeStarArray();
593 |
594 | this.resizeCanvas();
595 | draw();
596 |
597 |
598 | setInterval(drawBg, 100);
599 | setInterval(rotateForeground, 20);
600 | // resize the canvas to fill browser window dynamically
601 | window.addEventListener('resize', this.resizeCanvas, false);
602 | };
603 | };
604 |
605 | /**
606 | * Makes a request to the Soundcloud API and returns the JSON data.
607 | */
608 | var SoundcloudLoader = function(player,uiUpdater) {
609 | var self = this;
610 | var client_id = "YOUR_SOUNDCLOUD_CLIENT_ID"; // to get an ID go to http://developers.soundcloud.com/
611 | this.sound = {};
612 | this.streamUrl = "";
613 | this.errorMessage = "";
614 | this.player = player;
615 | this.uiUpdater = uiUpdater;
616 |
617 | /**
618 | * Loads the JSON stream data object from the URL of the track (as given in the location bar of the browser when browsing Soundcloud),
619 | * and on success it calls the callback passed to it (for example, used to then send the stream_url to the audiosource object).
620 | * @param track_url
621 | * @param callback
622 | */
623 | this.loadStream = function(track_url, successCallback, errorCallback) {
624 | SC.initialize({
625 | client_id: client_id
626 | });
627 | SC.get('/resolve', { url: track_url }, function(sound) {
628 | if (sound.errors) {
629 | self.errorMessage = "";
630 | for (var i = 0; i < sound.errors.length; i++) {
631 | self.errorMessage += sound.errors[i].error_message + '
';
632 | }
633 | self.errorMessage += 'Make sure the URL has the correct format: https://soundcloud.com/user/title-of-the-track';
634 | errorCallback();
635 | } else {
636 |
637 | if(sound.kind=="playlist"){
638 | self.sound = sound;
639 | self.streamPlaylistIndex = 0;
640 | self.streamUrl = function(){
641 | return sound.tracks[self.streamPlaylistIndex].stream_url + '?client_id=' + client_id;
642 | };
643 | successCallback();
644 | }else{
645 | self.sound = sound;
646 | self.streamUrl = function(){ return sound.stream_url + '?client_id=' + client_id; };
647 | successCallback();
648 | }
649 | }
650 | });
651 | };
652 |
653 |
654 | this.directStream = function(direction){
655 | if(direction=='toggle'){
656 | if (this.player.paused) {
657 | this.player.play();
658 | } else {
659 | this.player.pause();
660 | }
661 | }
662 | else if(this.sound.kind=="playlist"){
663 | if(direction=='coasting') {
664 | this.streamPlaylistIndex++;
665 | }else if(direction=='forward') {
666 | if(this.streamPlaylistIndex>=this.sound.track_count-1) this.streamPlaylistIndex = 0;
667 | else this.streamPlaylistIndex++;
668 | }else{
669 | if(this.streamPlaylistIndex<=0) this.streamPlaylistIndex = this.sound.track_count-1;
670 | else this.streamPlaylistIndex--;
671 | }
672 | if(this.streamPlaylistIndex>=0 && this.streamPlaylistIndex<=this.sound.track_count-1) {
673 | this.player.setAttribute('src',this.streamUrl());
674 | this.uiUpdater.update(this);
675 | this.player.play();
676 | }
677 | }
678 | }
679 |
680 |
681 | };
682 |
683 | /**
684 | * Class to update the UI when a new sound is loaded
685 | * @constructor
686 | */
687 | var UiUpdater = function() {
688 | var controlPanel = document.getElementById('controlPanel');
689 | var trackInfoPanel = document.getElementById('trackInfoPanel');
690 | var infoImage = document.getElementById('infoImage');
691 | var infoArtist = document.getElementById('infoArtist');
692 | var infoTrack = document.getElementById('infoTrack');
693 | var messageBox = document.getElementById('messageBox');
694 |
695 | this.clearInfoPanel = function() {
696 | // first clear the current contents
697 | infoArtist.innerHTML = "";
698 | infoTrack.innerHTML = "";
699 | trackInfoPanel.className = 'hidden';
700 | };
701 | this.update = function(loader) {
702 | // update the track and artist into in the controlPanel
703 | var artistLink = document.createElement('a');
704 | artistLink.setAttribute('href', loader.sound.user.permalink_url);
705 | artistLink.innerHTML = loader.sound.user.username;
706 | var trackLink = document.createElement('a');
707 | trackLink.setAttribute('href', loader.sound.permalink_url);
708 |
709 | if(loader.sound.kind=="playlist"){
710 | trackLink.innerHTML = "" + loader.sound.tracks[loader.streamPlaylistIndex].title + "
" + ""+loader.sound.title+"
";
711 | }else{
712 | trackLink.innerHTML = loader.sound.title;
713 | }
714 |
715 | var image = loader.sound.artwork_url ? loader.sound.artwork_url : loader.sound.user.avatar_url; // if no track artwork exists, use the user's avatar.
716 | infoImage.setAttribute('src', image);
717 |
718 | infoArtist.innerHTML = '';
719 | infoArtist.appendChild(artistLink);
720 |
721 | infoTrack.innerHTML = '';
722 | infoTrack.appendChild(trackLink);
723 |
724 | // display the track info panel
725 | trackInfoPanel.className = '';
726 |
727 | // add a hash to the URL so it can be shared or saved
728 | var trackToken = loader.sound.permalink_url.substr(22);
729 | window.location = '#' + trackToken;
730 | };
731 | this.toggleControlPanel = function() {
732 | if (controlPanel.className.indexOf('hidden') === 0) {
733 | controlPanel.className = '';
734 | } else {
735 | controlPanel.className = 'hidden';
736 | }
737 | };
738 | this.displayMessage = function(title, message) {
739 | messageBox.innerHTML = ''; // reset the contents
740 |
741 | var titleElement = document.createElement('h3');
742 | titleElement.innerHTML = title;
743 |
744 | var messageElement = document.createElement('p');
745 | messageElement.innerHTML = message;
746 |
747 | var closeButton = document.createElement('a');
748 | closeButton.setAttribute('href', '#');
749 | closeButton.innerHTML = 'close';
750 | closeButton.addEventListener('click', function(e) {
751 | e.preventDefault();
752 | messageBox.className = 'hidden';
753 | });
754 |
755 | messageBox.className = '';
756 | // stick them into the container div
757 | messageBox.appendChild(titleElement);
758 | messageBox.appendChild(messageElement);
759 | messageBox.appendChild(closeButton);
760 | };
761 | };
762 |
763 | window.onload = function init() {
764 |
765 | var visualizer = new Visualizer();
766 | var player = document.getElementById('player');
767 | var uiUpdater = new UiUpdater();
768 | var loader = new SoundcloudLoader(player,uiUpdater);
769 |
770 |
771 | var audioSource = new MicrophoneAudioSource(player);
772 | // var audioSource = new SoundCloudAudioSource(player);
773 | var form = document.getElementById('form');
774 | var loadAndUpdate = function(trackUrl) {
775 | loader.loadStream(trackUrl,
776 | function() {
777 | uiUpdater.clearInfoPanel();
778 | audioSource.playStream(loader.streamUrl());
779 | uiUpdater.update(loader);
780 | setTimeout(uiUpdater.toggleControlPanel, 3000); // auto-hide the control panel
781 | },
782 | function() {
783 | uiUpdater.displayMessage("Error", loader.errorMessage);
784 | });
785 | };
786 |
787 | visualizer.init({
788 | containerId: 'visualizer',
789 | audioSource: audioSource
790 | });
791 |
792 |
793 | uiUpdater.toggleControlPanel();
794 | // on load, check to see if there is a track token in the URL, and if so, load that automatically
795 | if (window.location.hash) {
796 | var trackUrl = 'https://soundcloud.com/' + window.location.hash.substr(1);
797 | loadAndUpdate(trackUrl);
798 | }
799 |
800 | // handle the form submit event to load the new URL
801 | form.addEventListener('submit', function(e) {
802 | e.preventDefault();
803 | var trackUrl = document.getElementById('input').value;
804 | loadAndUpdate(trackUrl);
805 | });
806 | var toggleButton = document.getElementById('toggleButton')
807 | toggleButton.addEventListener('click', function(e) {
808 | e.preventDefault();
809 | uiUpdater.toggleControlPanel();
810 | });
811 | var aboutButton = document.getElementById('credit');
812 | aboutButton.addEventListener('click', function(e) {
813 | e.preventDefault();
814 | var message = document.getElementById('info').innerHTML;
815 | uiUpdater.displayMessage("About", message);
816 | });
817 |
818 | window.addEventListener("keydown", keyControls, false);
819 |
820 | function keyControls(e) {
821 | switch(e.keyCode) {
822 | case 32:
823 | // spacebar pressed
824 | loader.directStream('toggle');
825 | break;
826 | case 37:
827 | // left key pressed
828 | loader.directStream('backward');
829 | break;
830 | case 39:
831 | // right key pressed
832 | loader.directStream('forward');
833 | break;
834 | }
835 | }
836 |
837 |
838 | };
--------------------------------------------------------------------------------