I cannot say I have the itch to glitch, but have always dug the kinds of things my colleague John Johnston does with adding glitch effects to digital stuff.

But one link leads to another, and an idea sparks, and then next thing you have been dabbling a bit long, it’s been an unknown amount of time since you’ve eaten, the dog has given up on the walk…

So I keep getting notifications of content from medium.com in the inbox. I sift a lot, and sometimes follow links, more and more of them ending up like this. A Readwall.

I like to check the wall. Often these are articles that are easily found on the original place by Googling the title. Other times, I just pop the link into a new incognito window (one where browser cookies are not checked), and I get my full view over the readwall.

So I was a little curious, not fully sure why, to look over the wall at Add an awesome glitch effect to your webpage elements. To be honest, the article was definitely not worth five clams a month; all the code examples provided where screenshots of code. Useless.

But there was a useful link to a GitHub library for mgGlitch “a little jquery helper to glitch everything.” And my light bulb went off as I had recently played with some simple jQuery to fetch via the WordPress API a random image from a TRU Collector SPLOT. I thought the same code structure could likely work with the glitch library.

Hence Glitch-A-SPLOT (warning, a big twitching image appears here) http://lab.cogdogblog.com/glitchsplot/

The HTML is simple; everything is mostly placeholder for stuff populated by jQuery.

	   
	   

	

	

		
Glitching the SPLOT: 
		
An experiment in adding glitch effect to a random image drawn from the SPLOT at    
	
	

We then add scripts for jQuery and a local version of mgGlitch.js:

All the action happens next in a script tag inside (document).ready(function(){...}); which starts when the page loads. We define the source URL for a TRU Collector SPLOT where the images will come from, and then a general function, assuming it is giving a chunk of json with splot image data, to set the glitch effect in motion and populate the other page content (an improvement would be to generate some kind of message of the content was not delivered, hey this is a prototype!)

		// this sets the image source, in the future it could be
		// a front page entry
		var splot_source = 'https://splot.ca/collector';

		function update_backdrop ( fromsplot ) {
			// populates the page with stuff from the remotely fetched json data
			randyimage = fromsplot[0]; 
		
			// glitch the background image		
			$('.glitch-img').css('background-image', 'url(' + randyimage.images.large + ')' );

			$( function() {
					$( ".glitch-img" ).mgGlitch({
					  // set 'true' to stop the plugin
					  destroy : false, 
					  // set 'false' to stop glitching
					  glitch: true, 
					  // set 'false' to stop scaling
					  scale: true, 
					  // set 'false' to stop glitch blending
					  blend : true, 
					  // select blend mode type
					  blendModeType : 'hue',
					  // set min time for glitch 1 elem
					  glitch1TimeMin : 200, 
					  // set max time for glitch 1 elem
					  glitch1TimeMax : 400,
					  // set min time for glitch 2 elem
					  glitch2TimeMin : 10, 
					  // set max time for glitch 2 elem
					  glitch2TimeMax : 100, 
					});
			});
		
			// set the title and source of the SPLOT site
			$('#title').text(randyimage.title);	
			$('#splot').text(splot_source);
		
			// load license data
			if (randyimage.license === null) randyimage.license = "Rights Status Unknown";
			$('#license').html('The original image being glitched is licensed <strong>' + randyimage.license + '</strong> ');		
		
			// load the credit data
			if (randyimage.sharedby != '') $('#sharedby').html( 'and was shared by <strong>' + randyimage.sharedby + '</strong> ');
		
			// add link to the source splot item page
			$('#furl').html('-- see the original image at <a href="' + randyimage.link + '" target="_blank">' +  randyimage.link + '</a>');
		}

The call to the API is where it gets the data:

		// Let's get some images!
		$.ajax({
		  url: splot_source + '/wp-json/splotcollector/v1/randy/1',
		  jsonp:"cb",
		  dataType:'json',
		  success: function(data) {
			// save the results in array we can use later
			splotstuff = data;
		
			// use function to update display
			update_backdrop(splotstuff);
				
			} //success
		  }); //ajax

If you are curious to see what this looks like, the data the page receives, just pop http://splot.ca/collector/wp-json/splotcollector/v1/randy/1 into a browser.

Whether glitch is your thing or not, I’m pretty excited about what we can do with an image if we can get a random (or heck newest? oldest?) from a SPLOT or any site, through the API.

This was a fun play. Onward soon to seeing how to make the splot power something like pechaflickr.

Featured Image: I took my same code, but skipped the random image fetch, and forced the glitch on my own image of the SPLOT Duck. I screen captured the glitch as a video file, imported into PhotoShop, and made it into a GIF.

 Share this barking on social media

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon