Glitch Video

Developer
Uriuriuriu
Size
3,178 Kb
Views
8,096
  1. Glitch Video Previews
  2. Glitch Video HTML Codes
  3. Glitch Video CSS Codes
  4. Glitch Video JS Codes

How do I make an glitch video?

What is a glitch video? How do you make a glitch video? This script and codes were developed by Uriuriuriu on 10 January 2023, Tuesday.

Glitch Video Previews
IQ Test

Glitch Video - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Glitch Video</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="myCanvas" width="854px" height="480px"></canvas>
<br>synced canvas & glitch <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Glitch Video - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Economica);
body { text-align: center; padding: 20px; background-color: #3498db; font-family: 'Economica', sans-serif; color: #FFF; font-size: 30px;
}
#myVideo,
#myCanvas { border: solid 10px #FFF;
}
#myCanvas { background-color: #000;
}

Glitch Video - Script Codes JS Codes

$(function(){ /* :glitchBoy */ function glitchBoy(canvas, options){ this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.origCanvas = document.createElement('canvas'); this.origContext = this.origCanvas.getContext('2d'); this.width = canvas.width; this.height = canvas.height; this.options = options; } glitchBoy.prototype.drawImage = function(img, x, y){ this.canvas.getContext("2d").drawImage(img, x, y); }; glitchBoy.prototype.glitchWave = function(renderLineHeight, cuttingHeight){ var image = this.ctx.getImageData(0, renderLineHeight, this.width, cuttingHeight); this.ctx.putImageData(image, 0, renderLineHeight - 10); }; glitchBoy.prototype.glitchSlip = function(waveStrength, startHeight, endHeight){ if(endHeight < startHeight){ var temp = endHeight; endHeight = startHeight; startHeight = temp; } for(var h = startHeight; h < endHeight; h++){ if(Math.random() < 0.1)h++; var image = this.ctx.getImageData(0, h, this.width, 1); this.ctx.putImageData(image, Math.random()*waveStrength-(waveStrength/2), h); } }; glitchBoy.prototype.glitchFillRandom = function(fillCnt, cuttingMaxHeight){ var cw = this.width; var ch = this.height; for(var i = 0; i< fillCnt; i++){ var rndX = cw * Math.random(); var rndY = ch * Math.random(); var rndW = cw * Math.random(); var rndH = cuttingMaxHeight * Math.random(); var image = this.ctx.getImageData(rndX,rndY,rndW, rndH); this.ctx.putImageData(image, (rndX* Math.random())%cw, rndY); } } glitchBoy.prototype.process = function () { } /* :videoGirl */ function videoGirl(options, callback){ var options = $.extend({ src:"", type:'video/ogg', controls:false, autoplay:true, loop:true, muted:true }, options); var video = document.createElement('video'); video.crossOrigin = 'anonymous'; // important!!!! video.controls = options.controls; video.autoplay = options.autoplay; video.loop = options.loop; video.muted = options.muted; var source = document.createElement('source'); source.src = options.src; source.type = options.type; video.appendChild(source); this.video = video; this.source = source; //video.play(); // load if(callback !== null){ video.addEventListener('loadeddata', callback); } }; // sync var FPS = 30; var frm = 0; var vGirl = new videoGirl({ src:'http://upload.wikimedia.org/wikipedia/commons/b/b1/Big_buck_bunny_zoom_in.ogv', type:'video/ogg' }, sync); function sync(){ var canvas = document.getElementById("myCanvas"); var glitch = new glitchBoy(canvas); setInterval(function(){ frm++; glitch.drawImage(vGirl.video, 0, 0); glitch.glitchWave((frm * 3) % glitch.height, 10); if(frm %100 < 10){ // fillCnt, cuttingMaxHeight glitch.glitchFillRandom(5, 20); } if(80 < frm%100){ glitch.glitchSlip(10,200,300); } if(95 < frm%100){ glitch.glitchSlip(10,100* Math.random(),400 * Math.random()); } }, 1000/FPS); }
});
Glitch Video - Script Codes
Glitch Video - Script Codes
Home Page Home
Developer Uriuriuriu
Username uriuriuriu
Uploaded January 10, 2023
Rating 4.5
Size 3,178 Kb
Views 8,096
Do you need developer help for Glitch Video?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Uriuriuriu (uriuriuriu) Script Codes
Name
Masonry
Enchant.js sample
Three.js ver.1 rotate camera
AngularJS - first step -
Css action sideBar
ClickPanel
TV effect
Canvas Gaussian Blur
Css background animation
Simple genetic algorithm
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!