[SOLVED - Glitch Effect] Passage Transitions or another way? using javascript

Comments

• carlywight

  June 2014

  No thoughts on this one?
• L

  July 2014

  At the moment I can provide the following assistance: I've taken the script in the fourth link and converted it in to a macro:

  var Glitcher = (function () {
function Glitcher(options) {
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
this.origCanvas = document.createElement('canvas');
this.origContext = this.origCanvas.getContext('2d');
this.options = options;
}
Glitcher.prototype.glitch = function (passage, callback) {
var _this = this;
this.loadImage(passage, function (img) {
_this.renderImage(img);
_this.process();
callback();
});
};

Glitcher.prototype.process = function () {
var imageData = this.origContext.getImageData(0, 0, this.width, this.height),
pixels = imageData.data,
length = pixels.length,
options = this.options,
brightness, offset, i, x, y;

for (i = 0; i < length; i += 4) {
if (options.color) {
pixels[i] *= options.color.red;
pixels[i + 1] *= options.color.green;
pixels[i + 2] *= options.color.blue;
}

if (options.greyscale) {
brightness = pixels[i] * options.greyscale.red + pixels[i + 1] * options.greyscale.green + pixels[i + 2] * options.greyscale.blue;

pixels[i] = brightness;
pixels[i + 1] = brightness;
pixels[i + 2] = brightness;
}

if (options.stereoscopic) {
offset = options.stereoscopic.red;
pixels[i] = (pixels[i + 4 * offset] === undefined) ? 0 : pixels[i + 4 * offset];

offset = options.stereoscopic.green;
pixels[i + 1] = (pixels[i + 1 + 4 * offset] === undefined) ? 0 : pixels[i + 1 + 4 * offset];

offset = options.stereoscopic.blue;
pixels[i + 2] = (pixels[i + 2 + 4 * offset] === undefined) ? 0 : pixels[i + 2 + 4 * offset];
}
}

if (options.lineOffset) {
i = 0;

for (y = 0; y < this.height; y++) {
offset = (y % options.lineOffset.lineHeight === 0) ? Math.round(Math.random() * options.lineOffset.value) : offset;

for (x = 0; x < this.width; x++) {
i += 4;
pixels[i + 0] = (pixels[i + 4 * offset] === undefined) ? 0 : pixels[i + 4 * offset];
pixels[i + 1] = (pixels[i + 1 + 4 * offset] === undefined) ? 0 : pixels[i + 1 + 4 * offset];
pixels[i + 2] = (pixels[i + 2 + 4 * offset] === undefined) ? 0 : pixels[i + 2 + 4 * offset];
}
}
}
this.context.putImageData(imageData, 0, 0);
};

Glitcher.prototype.loadImage = function (passage, callback) {
var img = new Image();
img.src = tale.get(passage).text;
img.onload = callback.bind(0,img);
};

Glitcher.prototype.renderImage = function (img) {
this.canvas.width = this.origCanvas.width = this.width = img.width;
this.canvas.height = this.origCanvas.height = this.height = img.height;

this.origContext.drawImage(img, 0, 0);
};
return Glitcher;
})();

var glitcher = new Glitcher({
color: {
red: 1,
green: 1,
blue: 1
},
stereoscopic: {
red: 10,
green: 20,
blue: 0
},
lineOffset: {
value: 4
}
});

macros.glitcher = {
handler: function (a, b, params) {
glitcher.glitch(params[0], function () {
a.appendChild(glitcher.canvas);
setTimeout(function fn() {
if (params[1] == 0) glitcher.options = {};
else glitcher.options = {
color: {
red: 1,
green: 0.8,
blue: 0.58
},
stereoscopic: {
red: 10 * random(1, 3),
green: 5 * random(1, 3),
blue: 30 * random(1, 3)
},
lineOffset: {
value: 5 * random(1, 3),
lineHeight: 10 * random(1, 3)
}
};
glitcher.process();
if (params[1] > 0 &amp;&amp; document.body.contains(glitcher.canvas)) {
setTimeout(fn, 10); params[1]--;
}
}, 10);
});

}
}

  You can use it like so: <<glitcher "imgName" 8>>. You can only use it with imported images, not image files - this avoids having to explain and elude cross-origin resource restrictions. 8 is the number of "frames" you want it to glitch for - entering Infinity (capitalised) makes it loop forever.
  
  Don't forget to credit the script's author.
• carlywight

  July 2014

  Thank you very much! This is great!
  Please PM me details on how I can send some monies your way.
• L

  July 2014

  As a BTW, I found and tweaked some full-page scanline stylesheet code. Here it is, but I should warn that for certain reasons, this won't display in Internet Explorer:

  html {
height: 100%;
width: 100%;
margin: 0;
}
html::after {
pointer-events:none;
content:'';
top: 0;
position:absolute;
width:100%;
height:100%;
background-image: -webkit-repeating-linear-gradient(top, transparent 0px, transparent 2px, hsla(0, 0%, 50%, 0.25) 2px, hsla(0, 0%, 50%, 0.25) 4px);
background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, hsla(0, 0%, 50%, 0.25) 2px, hsla(0, 0%, 50%, 0.25) 4px);
background-size: 100% 8px;
}
@media screen\0 {html:after {display:none;}}
• carlywight

  July 2014

  Thank you!
  And again, PM me details!