Skip to content

Commit

Permalink
visualizer, easter egg
Browse files Browse the repository at this point in the history
  • Loading branch information
@m4chinations
m4chinations committed Oct 10, 2016
1 parent 910a846 commit b6b0f4a
Show file tree
Hide file tree
Showing 7 changed files with 315 additions and 155 deletions.
180 changes: 152 additions & 28 deletions footer.php
View file
Expand Up @@ -13,6 +13,10 @@

</div><!-- #content -->

<div class="egg">
<img src="<?php echo get_template_directory_uri() . '/van.png'; ?>">
</div>

<footer id="colophon" class="site-footer" role="contentinfo">

</footer><!-- #colophon -->
Expand All @@ -28,12 +32,12 @@
<script src="<?php echo get_template_directory_uri() . '/js/'; ?>audio.js"></script>
<script>
/* http://v4-alpha.getbootstrap.com/ */



/* function does ajax request to url, strips html response to the subset selector,


/* function does ajax request to url, strips html response to the subset selector,
and then replaces / updates destinationSelector content depending on replace flag
url: url of new content
subset: content selector with which to get data from e.g. #main-content
destinationSelector: content selector with which to put data into e.g. #content-zone
Expand All @@ -48,25 +52,25 @@ function sickAjaxRoutine(url, subset, destinationSelector, replace) {
$(destinationSelector).removeClass('loading');
if (replace)
$(destinationSelector).replaceWith($(response).find(subset).contents());
else
else
$(destinationSelector).html($(response).find(subset).contents());
window.scrollTo(0, 0);
history.pushState({url: url,
subset: subset,
destinationSelector: destinationSelector,
replace: replace
history.pushState({url: url,
subset: subset,
destinationSelector: destinationSelector,
replace: replace
}, null, url);
document.title = $(response).filter('title').text();
$( document.body ).trigger( 'post-load' );
})
}
window.addEventListener('popstate', function(e) {

sickAjaxRoutine(e.state.url, e.state.subset, e.state.destinationSelector, e.state.replace);

e.preventDefault();
});

/* global ajax settings */
$.ajaxSetup({
timeout: 5000, //if longer than 5 seconds just give up
Expand All @@ -76,23 +80,23 @@ function sickAjaxRoutine(url, subset, destinationSelector, replace) {
console.log(event, request, settings);
}
});

/* on nav links, reload full view */
$('header').on('click', 'a.nav-link', function(e) {
var url = $(e.currentTarget).attr('href');
console.log(url);
sickAjaxRoutine(url, 'main.site-main', 'main.site-main', false);
e.preventDefault();
});

/* on list entry links, just load into reading zone */
$('main.site-main').on('click', 'ul.index-post-list > a', function(e) {
var url = $(e.currentTarget).attr('href');
sickAjaxRoutine(url, 'main.site-main', 'main.site-main', false);
e.preventDefault();
e.stopImmediatePropagation();
});

$('main.site-main').on('click', '.day-selection li', function(e) {
var day = $(e.currentTarget).index();
$('.day-selection li').removeClass('selected');
Expand All @@ -108,7 +112,7 @@ function sickAjaxRoutine(url, subset, destinationSelector, replace) {
e.preventDefault();
e.stopImmediatePropagation();
});

/* need one for article.page.writings and article.hentry -- will complete once I get back home */
/* For writings */
$('main.site-main').on('click', 'article .col-extended', function(e) {
Expand All @@ -117,7 +121,7 @@ function sickAjaxRoutine(url, subset, destinationSelector, replace) {
sickAjaxRoutine(url, 'main.site-main', 'main.site-main', false);
e.preventDefault();
e.stopImmediatePropagation();

});

$('main.site-main').on('click', 'article.page.writings .col-title', function(e) {
Expand All @@ -126,11 +130,18 @@ function sickAjaxRoutine(url, subset, destinationSelector, replace) {
sickAjaxRoutine(url, 'main.site-main', 'main.site-main', false);
e.preventDefault();
e.stopImmediatePropagation();


});

$('header .ksdt-name').on('click', 'a', function(e) {
var url = $(e.currentTarget).attr('href');
console.log(url);
sickAjaxRoutine(url, 'main.site-main', 'main.site-main', false);
e.preventDefault();
});



$('main.site-main').on('click', 'a', function(e) {
var url = $(e.currentTarget).attr('href');
if (url.charAt(0) == '/') {
Expand All @@ -148,9 +159,112 @@ function sickAjaxRoutine(url, subset, destinationSelector, replace) {
AudioHandler.pause();
});

var egg = 0;
$('.egg img').click(function() {
if (egg == 0) {
$('.egg img').parent().css({
'transform': 'inherit',
'opacity': 1
});
egg++;
return;
}
var eggElem = $('.egg img');
eggElem.css('transform', 'translateX(-' + (egg * ($(document).width() / 3)) + 'px)');
egg++;
if (egg == 4) {
console.log("HERE");
setTimeout(function() {
window.location.href = "https://www.youtube.com/watch?v=9Yrt9qkBQ2Q";
}, 400);
}

});

var Visualizer = {
_elem: $('#vis')[0],
_ctx: null,
_width: null,
_height: null,
init: function() {
this._ctx = this._elem.getContext('2d');
this._width = this._elem.offsetWidth;
this._height = this._elem.offsetHeight;
this._elem.width = this._width;
this._elem.height = this._height;
console.log(this);
},
draw: function(audioDatas) {
/* put data into x buckets first */
var buckets = 32;
var freqs = [];
for (var i = 0; i < buckets; i++) {
var avg = 0;
for (var x = Math.floor(i * audioDatas[0].length / buckets); x < Math.floor((i+1) * audioDatas[0].length / buckets); x++) {
avg += (audioDatas[0][x] + audioDatas[1][x]) / 2;
}
freqs.push(avg / (audioDatas[0].length / buckets));
}
/* drop high freqs */
freqs = freqs.slice(0, 32);
this._ctx.clearRect(0, 0, this._width, this._height);

for (var i = 0; i < freqs.length; i++) {
var nFreq = this._height * (freqs[i] / 256); //normalize freq
this._ctx.fillRect(i * (this._width / freqs.length) + 0.5, this._height - nFreq,
this._width / freqs.length - 2, nFreq)
}
}
};

var Oscilloscope = {
_elem: $('.oscilloscope')[0],
_height: null,
_width: null,
_xy: false,
amplifer: function(v) { return v * 3.0; },
init: function() {
// Create the oscilloscopt wave element
this.wave = document.createElementNS("http://www.w3.org/2000/svg", 'path');
this.wave.setAttribute('class', 'oscilloscope__wave');

// Create the oscilloscope svg element
this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
this.svg.setAttribute('width', this._elem.offsetWidth);
this.svg.setAttribute('height', this._elem.offsetHeight);
this.svg.setAttribute('class', 'oscilloscope__svg');
this.svg.appendChild(this.wave);

this._height = this._elem.offsetWidth;
this._width = this._elem.offsetHeight;

// Append the svg element to the target container
this._elem.appendChild(this.svg);
},
draw: function(byteFreqDatas) {
var path = 'M';

if (this._xy) { //xy mode
for (var i = 0; i < byteFreqDatas[0].length; i++) {
path += (this._height / 2 * (byteFreqDatas[0][i] / 128)) + ' ' + (this._height / 2 * (byteFreqDatas[1][i] / 128)) + ', ';
}
} else {
for (var i = 0; i < byteFreqDatas[0].length; i++) {
path += ((this._width + (this._width / byteFreqDatas[0].length)/ byteFreqDatas[0].length) * i) + ' ' + (this._height / 2) * (byteFreqDatas[0][i] / 128.0) + ', ';
}
}

this.wave.setAttribute('d', path);
}
};
$(Oscilloscope._elem).click(function() {
Oscilloscope._xy = !Oscilloscope._xy;
})


var AudioHandler = {
_isPlaying: false,
_audioSource: '//ksdt.ucsd.edu/listen/stream.mp3',
_audioSource: 'https://ksdt.ucsd.edu/listen/stream.mp3',
_audio: null,
_draw: null,
_elem: $('div.player'),
Expand Down Expand Up @@ -178,16 +292,26 @@ function sickAjaxRoutine(url, subset, destinationSelector, replace) {
});
} else {
this._audio = new Audio(this._audioSource);
this._audio.crossOrigin = "anonymous";
var _this = this;
AudioAnalyser(this._audio, { passthru: true }).then((result) => {
Visualizer.init();
Oscilloscope.init();
AudioAnalyser(this._audio, { passthru: true, smoothing: 0.7 }).then((result) => {
_this._analyser = result;
_this._analyser.audio.play();
_this._draw = function draw() {
_this._draw = function draw() {
window.requestAnimationFrame(draw);
//console.log(_this._analyser.frequencies());
if (!_this._audio.paused) {
Visualizer.draw([
_this._analyser.frequencies(0), _this._analyser.frequencies(1)
]);
Oscilloscope.draw([
_this._analyser.waveform(0), _this._analyser.waveform(1)
]);
}
}; _this._draw();
});

});
this._elem.find('i').removeClass('fa-play');
this._elem.find('i').addClass('fa-spinner fa-spin');
$(this._audio).one('playing', function(e) {
Expand All @@ -201,7 +325,7 @@ function sickAjaxRoutine(url, subset, destinationSelector, replace) {
}
},
};

</script>
</body>
</html>
24 changes: 12 additions & 12 deletions functions.php
View file
Expand Up @@ -102,21 +102,21 @@ function xx_widgets_init() {

/* https://codex.wordpress.org/Rewrite_API/add_rewrite_rule */
function custom_rewrite_basic() {
/* playlist/1015 => playlist/?playlist=1015

/* playlist/1015 => playlist/?playlist=1015
doesn't work
playlist/1015 => ksdt.org/playlist => index.php?page_id=69
http://regexr.com/
*/
add_rewrite_rule('^playlist\/([0-9]+)\/?$', 'index.php?pagename=playlist&playlist=$matches[1]', 'top');

/* show/Burger Town => show/?showName=Burger Town */
/* http://regexr.com/3e2gg */
add_rewrite_rule('^show\/(.*)/?$', 'index.php?pagename=show&showName=$matches[1]', 'top');

add_rewrite_rule('^writings/blog', 'index.php?pagename=posts', 'top');
}
add_action('init', 'custom_rewrite_basic');
Expand All @@ -131,7 +131,7 @@ function add_query_vars_filter( $vars ){


function create_post_type() {

/* creates custom 'album review' posts */
register_post_type( 'albumreviews',
array(
Expand All @@ -148,7 +148,7 @@ function create_post_type() {
'taxonomies' => array('category'),
)
);

/* creates custom 'weeklypicks' posts */
register_post_type( 'weeklypicks',
array(
Expand All @@ -165,7 +165,7 @@ function create_post_type() {
'taxonomies' => array('category'),
)
);

/* creates custom 'concertreviews' posts */
register_post_type( 'concertreviews',
array(
Expand All @@ -182,8 +182,8 @@ function create_post_type() {
'taxonomies' => array('category'),
)
);


}

add_action( 'init', 'create_post_type' );
Expand Down Expand Up @@ -215,7 +215,7 @@ function mytheme_customize_register( $wp_customize ) {
*/
function xx_scripts() {
wp_enqueue_style( 'xx-style', get_stylesheet_uri() );
wp_enqueue_style( 'xx-sass-styles', get_template_directory_uri() . '/sass/index.css');
wp_enqueue_style( 'xx-sass-styles', get_template_directory_uri() . '/sass/index.min.css');

wp_enqueue_script( 'zoom', get_template_directory_uri() . '/js/zoom.min.js', array('jquery'), '', true);
wp_enqueue_script( 'xx-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
Expand Down

0 comments on commit b6b0f4a

Please sign in to comment.