Off-Register

An experimental jQuery script that brings the imperfection of print to the web.

Off-Register

An experimental jQuery script that brings the imperfection of print to the web.

Off-Register

An experimental jQuery script that brings the imperfection of print to the web.

Off-Register

An experimental jQuery script that brings the imperfection of print to the web.

Off-Register

An experimental jQuery script that brings the imperfection of print to the web.

Concept

Concept

Concept

Concept

Printing is an imperfect process. As the number of reproductions increase, the fidelity of the print to the original decreases. Each step in the printing process and each copy creates new chances for error and variation. I explored this by using CMYK screens to reproduce a one-color handwritten phrase to this effect. I am still a novice printer, so each print out of the edition of fifty was unique.

There is no undo in printing, and no spellcheck in hand lettering. Infinite ways to fuck up.

Code

Code

Code

Code

The script is simple. It is based on the animation functions from Jack Rugile's jRumble script, but intensity of Off-Register increases over time. jRumble has several variables that can be manipulated to vary the motion of affected objects. This is thouroughly documented on that page. Off-Register can be modified with values that determine the speed and amount of increase in intensity. These can be modified when calling the function in your document using the following code.

$(document).ready(function() {
  var distance = 0,
    intensity = 50, // higher values for less intensity
    speed = 0, // higher values are slower
    increase = 10000, // number of milliseconds before distance is increased. higher numbers=slower increase.
    offregclass = 'offreg'; // name of class to be affected.
  console.log(distance, intensity, speed, increase, offregclass);

  function addone() {
    distance++;
    $('.' + offregclass).jrumble({
      x: distance / intensity,
      y: distance / intensity,
      rotation: distance / intensity / intensity,
    });
    $('.' + offregclass).trigger('startRumble');
    setTimeout(addone, 10000);
  }
  addone();
});

When using the script on your own site, it is best to structure the overlays in HTML by hand. Each element that will vibrate must be nested into a absolute positioned container.

The script can also be used as a bookmarklet and then run on other sites to get a bit of the print newspaper experience while reading online. When used as a bookmarklet, an additional section of code can be added to duplicate the page elements.

The section header above is positioned using this structure:

<div class="absolute">
  <h3 class="offreg">The Code</h3>
</div>
<div class="absolute">
  <h3 class="offreg">The Code</h3>
</div>
<div class="absolute">
  <h3 class="offreg">The Code</h3>
</div>
<div class="absolute">
  <h3>The Code</h3>
</div>

When using the bookmarklet, this code duplicates the page elements to create the CMY layers:

$( "<div id='aqua' class='clone'></div>" ).appendTo( "body" );
$("body").children().clone().appendTo('#aqua');
$("#aqua").children().css({"position":"absolute","top":"0","left":"0"});
$("#aqua").find('*').css({"color":"aqua", "opacity":"0.8"});

$( "<div id='magenta' class='clone'></div>" ).appendTo( "body" );
$("#aqua").children().clone().appendTo('#magenta');
$("#magenta").children().css({"position":"absolute","top":"0","left":"0"});
$("#magenta").find('*').css({"color":"fuchsia", "opacity":"0.8"});

$( "<div id='yellow' class='clone'></div>" ).appendTo( "body" );
$("#magenta").children().clone().appendTo('#yellow');
$("#yellow").children().css({"position":"absolute","top":"0","left":"0"});
$("#yellow").find('*').css({"color":"yellow", "opacity":"0.8"});

Examples:

Use

Use

Use

Use

Off-Register is still very much an experiment, particularly as a bookmarklet. When applied to other pages the results vary widely depending on the structure and complexity of the page. But give it a try! The source code is available on Github here. Please feel free to use it and to offer suggestions! Email me at sallymaier@gmail.com if you have any questions, comments, or suggestions.

Click the link below to apply Off-Register to this entire page. Drag or save it to your bookmarks to create a bookmarklet that you can click on any page.

Bookmarklet

Thanks

Thanks

Thanks

Thanks