Glitch Image

Developer
AaronChuo (小狂)
Size
6,535 Kb
Views
38,456
  1. Glitch Image Previews
  2. Glitch Image HTML Codes
  3. Glitch Image CSS Codes
  4. Glitch Image JS Codes

How do I make an glitch image?

Canvas + CSS. What is a glitch image? How do you make a glitch image? This script and codes were developed by AaronChuo (小狂) on 11 September 2022, Sunday.

Glitch Image Previews
IQ Test

Glitch Image - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Glitch Image</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="glitch-image"> <span class="corner corner-top-left"></span> <span class="corner corner-top-right"></span> <span class="corner corner-bottom-left"></span> <span class="corner corner-bottom-right"></span> <canvas id="canvas"></canvas>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Glitch Image - Script Codes CSS Codes

body { background: url(https://sethwinternight.files.wordpress.com/2012/11/325453-png1.jpg) top no-repeat #000;
}
.glitch-image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; padding: 10px 0; -webkit-animation: flick 80ms linear infinite; animation: flick 80ms linear infinite;
}
.glitch-image canvas { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-animation: turnOn 100ms ease-in 500ms forwards; animation: turnOn 100ms ease-in 500ms forwards;
}
.corner { position: absolute; width: 20px; height: 20px; border-style: solid; border-color: #32dcdc;
}
.corner-top-left { top: 0; left: 0; border-width: 2px 0 0 2px;
}
.corner-top-right { top: 0; right: 0; border-width: 2px 2px 0 0;
}
.corner-bottom-left { bottom: 0; left: 0; border-width: 0 0 2px 2px;
}
.corner-bottom-right { bottom: 0; right: 0; border-width: 0 2px 2px 0;
}
@-webkit-keyframes flick { 0% { opacity: .8; } 100% { opacity: .9; }
}
@keyframes flick { 0% { opacity: .8; } 100% { opacity: .9; }
}
@-webkit-keyframes turnOn { 0% { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-filter: brightness(5); filter: brightness(5); } 100% { -webkit-transform: rotateX(0); transform: rotateX(0); -webkit-filter: brightness(1); filter: brightness(1); }
}
@keyframes turnOn { 0% { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-filter: brightness(5); filter: brightness(5); } 100% { -webkit-transform: rotateX(0); transform: rotateX(0); -webkit-filter: brightness(1); filter: brightness(1); }
}

Glitch Image - Script Codes JS Codes

'use strict';
(function () { 'use strict'; var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), img = new Image(), currentFrame = 0, totalFrame = 10, offset = .01, width, height, imgData, data, requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; // 圖片載入 img.crossOrigin = "Anonymous"; img.src = 'https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/16114949_1538098962874418_7323972514285008848_n.jpg?oh=e3e9551344b6d2f5e28c57e6f04c143c&oe=596C589E'; img.onload = function () { init(); glitchAnimation(); }; /** * init 初始化畫布 */ var init = function () { canvas.width = width = img.width * .5; offset = width * offset; canvas.height = height = ~ ~(img.height * (width - offset * 2) / img.width); document.querySelector('.glitch-image').style.width = width + 'px'; document.querySelector('.glitch-image').style.height = height + 'px'; }.bind(this); /** * glitchAnimation 雜訊效果動畫 */ var glitchAnimation = function glitchAnimation() { // 第一次執行與每次跑完影格皆會重置影像 if (!(currentFrame % totalFrame) || currentFrame > totalFrame) { clearCanvas(); // 繪製原始影像 ctx.drawImage(img, // 參數多到我常常搞混阿=0= 0, // 圖片剪裁的起始x座標 0, // 圖片剪裁的起始y座標 img.width, // 圖片剪裁的寬度 img.height, // 圖片剪裁的高度 offset, // 繪於Canvas上的起始x座標 0, // 繪於Canvas上的起始y座標 width - offset * 2, // 繪於Canvas上的圖片寬度 height); // 繪於Canvas上的圖片高度 // 取得影像資料 imgData = ctx.getImageData(0, 0, width, height); // 將影像冷色化 imgData = pixelProcessor(imgData, 4, pixelCooler); // 回存處理後的影像資料至畫布 ctx.putImageData(imgData, 0, 0); currentFrame = 0; } // 在亂數影格上執行雜訊演算 if (currentFrame === randInt(0, totalFrame)) { // 將影像的紅色像素做位移 imgData = pixelProcessor(imgData, 1, pixelFlick); // 回存處理後的影像資料至畫布 ctx.putImageData(imgData, 0, 0); // 塊狀雜訊 drawGlitch(width, height, randInt(3, 10), glitchBlock); // 條狀雜訊 drawGlitch(width, height, randInt(3, 30), glitchLine); } currentFrame++; window.requestAnimationFrame(glitchAnimation); }; /** * pixelFlick 像素位移 * @param {number} i 第i個像素 * @param {number[]} d 像素陣列 */ var pixelFlick = function pixelFlick(i, d) { d[i] = d[i + 16]; }; /** * pixelCooler 冷色化 * @param {number} i 第i個像素 * @param {number[]} d 像素陣列 */ var pixelCooler = function pixelCooler(i, d) { d[i] = 1; d[i + 1] += randInt(2, 5); d[i + 2] *= randInt(1, 3) + 8; }; /** * glitchBlock 塊狀雜訊運算 * @param {number} i 第i次運算 * @param {number} x 影像上的亂數x座標 * @param {number} y 影像上的亂數y座標 */ var glitchBlock = function glitchBlock(i, x, y) { if (i > 3) { var spliceHeight = 1 + randInt(0, 10); ctx.drawImage(canvas, x, y, x, spliceHeight, randInt(0, x), y, randInt(x, width), spliceHeight); } }; /** * glitchLine 條狀雜訊運算 * @param {number} i 第i次運算 * @param {number} x 影像上的亂數x座標 * @param {number} y 影像上的亂數y座標 */ var glitchLine = function glitchLine(i, x, y) { var spliceHeight = 1 + randInt(1, 50); ctx.drawImage(canvas, offset, y, width - offset * 2, spliceHeight, 1 + randInt(0, offset * 2), //-offset / 3 + randInt(0, offset / 1.5), y + randInt(0, 10), width - offset, spliceHeight); }; /** * pixelProcessor 對像素資料進行自訂運算 * @param {Object} imageData 像素模型 * @param {number} step 每幾個像素進行一次運算 * @param {Function} callback 自訂運算函式 * @return {Object} 回傳運算後的像素模型 */ var pixelProcessor = function pixelProcessor(imageData, step, callback) { var data = imageData.data || [], step = step * 4 || 4; if (data.length) { var rgb = []; for (var i = 0; i < data.length; i += step) { callback && callback(i, data); } return imageData; } else { return imageData; } }; /** * drawGlitch 繪製雜訊效果 * @param {number} width 影像寬度 * @param {number} height 影像高度 * @param {number} amount 雜訊數量 * @param {Function} callback 自訂繪製函式 */ var drawGlitch = function drawGlitch(width, height, amount, callback) { for (var i = 0; i < (amount || 10); i++) { var x = Math.random() * width + 1, y = Math.random() * height + 1; callback(i, x, y); } }; /** * randInt 亂數取整數 */ var randInt = function randInt(a, b) { return ~ ~(Math.random() * (b - a) + a); }; /** * clearCanvas 重置畫布 */ var clearCanvas = function clearCanvas() { ctx.clearRect(0, 0, width, height); };
})();
Glitch Image - Script Codes
Glitch Image - Script Codes
Home Page Home
Developer AaronChuo (小狂)
Username aaronchuo
Uploaded September 11, 2022
Rating 4
Size 6,535 Kb
Views 38,456
Do you need developer help for Glitch Image?

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!

AaronChuo (小狂) (aaronchuo) Script Codes
Name
Animated Ability Chart
BBQ by pure CSS, no image, no javascript
Random Displacement of Data Node
Ramen by pure CSS
Radar Scanner
Scifi-style Radio-based Tab
The Heart
Brown by pure CSS, no image, no javascript
Fly to Future
Chopper by pure CSS, no image, no javascript
Create amazing blog posts 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!