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

carlywight

Hello!

I'm looking for help with some custom animations for my Twine game; i've seen some cool css/javascript effects i'd like to use but my knowledge of those areas is limited, and my efforts so far haven't given me much luck.
I'm working to a deadline, so I thought i'd come for help but I don't want anyone to write me a whole heap of code for nothing...and as such I'm happy to pay for someone's time to work through this with me.

Id like to give the image in a particular div a glitchy effect when the passage it is in loads like this:
http://codepen.io/trajektorijus/details/utAqv
Toned down a little bitbut thats the idea theres an overriding scanline type effect too which would be cool to have over the entire browser window.

The comments on the pen lead me to another which gives a similar effect but with css:
http://codepen.io/bulby97/details/fcvay

I also dont mind the glitch.js the glitch transition would be cool as an alternative.
http://sjhewitt.github.io/glitch.js/examples.html

Heres a cat (because why not) using an almost perfect effect for the image:
http://codepen.io/ksmth/pen/BmwAd
This (or this sans the colour shifting) would be ace!


In a perfect world:
Passage loads
Image in specific div has 1 sec (or thereabouts) non-repeating glitchy effect applied to it ('graphic' div as seen here - https://www.dropbox.com/s/3ekbak3glbezs93/divsforhelp.jpg)
Subtle scanline effect could be applied to entire browser window (ideally) or a specific div for the whole game

If you think you could help, feel free to PM me.
Even though i'm happy to be putting money towards it i'd be happy for the code to be shared here too; that's what this community is about hey?

P.S. - have got the 'all clear' to ask this here.

Thanks in advance!
Carly

EDIT - FYI - working in Twine 1.4.2 with the Sugarcane format

carlywight

No thoughts on this one?

L

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

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

L

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

Thank you!
And again, PM me details!