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.

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!)

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

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.

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon
Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.


Leave a Reply

Your email address will not be published. Required fields are marked *