Glitch-a-SPLOT

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.

Pop up content blocker says "You’ve reached the end of your free member preview for this month. Become a member now for $5/month to read this story and get unlimited access to all of the best stories on Medium."

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/

Screenshot of a turtle image, that when viewed on the web, would appear to be shifted and slice with a glitch effect, sorry, hard to describe in words. Shaken and moved.
You can’t see the glitch here, but trust me, it does! http://lab.cogdogblog.com/glitchsplot/

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

<div class="container">
	   <!-- this element will be glitch -->
	   <div class="glitch-img"></div>
	</div>

	<div id="stuff" class="trans_box1">
		<h1>Glitching the SPLOT: <span id="title"></span></h1>
		<p class="small">An experiment in adding <a href="https://github.com/hmongouachon/mgGlitch">glitch effect</a> to a random image drawn from the SPLOT at <span id="splot"></span> <span id="license"></span> <span id="sharedby"></span> <span id="furl"></p>	
	</div>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="mgGlitch.min.js"></script>

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 &lt;strong>' + randyimage.license + '&lt;/strong> ');		
		
			// load the credit data
			if (randyimage.sharedby != '') $('#sharedby').html( 'and was shared by &lt;strong>' + randyimage.sharedby + '&lt;/strong> ');
		
			// add link to the source splot item page
			$('#furl').html('-- see the original image at &lt;a href="' + randyimage.link + '" target="_blank">' +  randyimage.link + '&lt;/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.

Privacy Statement