Glitch test

Developer
Uriuriuriu
Size
4,246 Kb
Views
4,048
  1. Glitch test Previews
  2. Glitch test HTML Codes
  3. Glitch test CSS Codes
  4. Glitch test JS Codes

How do I make an glitch test?

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

Glitch test Previews
IQ Test

Glitch test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Glitch test</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> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Glitch test - Script Codes CSS Codes

body { background-color: #1f9ede; margin: 0; padding: 0; width: 100%; height: 100%;
}
* { margin: 0; padding: 0; width: 100%; height: 100%;
}

Glitch test - Script Codes JS Codes

$(function(){ /* :glitchBox */ function glitchBox(canvas){ this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.width = canvas.width; this.height = canvas.height; } glitchBox.prototype.glitchWave = function(renderLineHeight, cuttingHeight){ var image = this.ctx.getImageData(0, renderLineHeight, this.width, cuttingHeight); this.ctx.putImageData(image, 0, renderLineHeight - 10); }; glitchBox.prototype.glitchSlip = function(waveDistance){ var startHeight = this.height * Math.random(); var endHeight = startHeight + 30 + (Math.random() * 40); 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()*waveDistance-(waveDistance/2), h); } }; glitchBox.prototype.glitchSlipColor = function(waveDistance){ var startHeight = this.height * Math.random(); var endHeight = startHeight + 30 + (Math.random() * 40); var imageData = this.ctx.getImageData(0, startHeight, this.width, endHeight); var data = imageData.data; var r = g = b = 0; for(var i = 0, len = imageData.width * imageData.height; i<len; i++){ if(i % imageData.width ==0){ r = i + Math.floor((Math.random() -0.5) * waveDistance); g = i + Math.floor((Math.random() -0.5) * waveDistance); b = i + Math.floor((Math.random() -0.5) * waveDistance); } data[i*4] = data[r*4]; //r data[i*4 + 1] = data[g*4 + 1]; //g data[i*4 + 2] = data[b*4 + 2]; //b
// data[i*4 + 3] = data[a*4 + 3]; //a } this.ctx.putImageData(imageData, 0, startHeight); }; glitchBox.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); } } /* :canvasView */ function canvasView(canvas, FPS, loopFPS){ if(canvas == null){ canvas = document.createElement('canvas'); } this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.width = 0; this.height = 0; this.GRID_X = 50; this.GRID_Y = 50; this.frm = 0; this.FPS = FPS; this.loopFPS = loopFPS; this.bgCanvasImage; } canvasView.prototype.initCanvas = function(){ this.canvas.width = this.width = window.innerWidth; this.canvas.height = this.height = window.innerHeight; this.ctx.clearRect(0, 0, this.width, this.height); this.ctx.globalAlpha = 1; } canvasView.prototype.drawCanvas = function(){ var cw = this.width; var ch = this.height; var ctx = this.ctx; this.drawBG(); // circle ctx.strokeStyle = 'rgba(200,255,255,1)'; ctx.beginPath(); ctx.lineWidth = 10; var taskFPS = (this.frm % this.loopFPS)/this.loopFPS; ctx.arc(cw/2, ch/2, cw*0.4705, 0, 2*Math.PI*taskFPS, false); ctx.stroke(); // bar ctx.fillStyle = this.makeGradientStyle(); var taskFPS = this.frm % this.loopFPS; ctx.fillRect(cw/this.loopFPS * taskFPS, ch*0.45, cw*0.5, ch*0.1); ctx.fillRect(cw/this.loopFPS * taskFPS - cw, ch*0.45, cw*0.5, ch*0.1); // text ctx.fillStyle = '#000000'; ctx.textAlign = "center"; ctx.textBaseline = "top"; ctx.font = "14px 'Futura'"; ctx.fillText("frame : " + this.frm, cw/2, ch*0.855, 500); ctx.fillText("width : " + cw + " / height : " + ch + "px", cw/2, ch*0.89, 500); ctx.font = "24px 'Futura'"; ctx.fillText(yyyymmdd(), cw/2, ch*0.065, 500); ctx.font = "55px 'Futura'"; ctx.fillText(hhmissms(), cw/2, ch*0.1, 500); } canvasView.prototype.drawBG = function(){ if(this.bgCanvasImage == null){ var cw = this.width; var ch = this.height; var ctx = this.ctx; // set grid this.setGrid(); // set circle ctx.strokeStyle = 'rgba(30,30,30,0.8)'; ctx.beginPath(); ctx.lineWidth = 40; ctx.arc(cw/2, ch/2, cw/2, 0, Math.PI*2, false); ctx.stroke(); ctx.strokeStyle = 'rgba(30,30,30,0.8)'; ctx.beginPath(); ctx.lineWidth = 10; ctx.arc(cw/2, ch/2, cw*0.460, 0, Math.PI*2, false); ctx.stroke(); // set slash ctx.lineWidth = 0.5; ctx.strokeStyle = 'rgba(0,0,0,0.15)'; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(cw,ch); ctx.stroke(); ctx.moveTo(cw, 0); ctx.lineTo(0, ch); ctx.stroke(); // save Image this.bgCanvasImage = ctx.getImageData(0, 0,cw,ch); } // put saved image this.ctx.putImageData(this.bgCanvasImage, 0,0); } canvasView.prototype.setGrid = function(){ var pointR = 5; var detailCeparetCnt = 5; var gridW = this.width / this.GRID_X*10; var gridH = this.height / this.GRID_Y*10; // detailDot var patternCanvas1 = document.createElement("canvas"); patternCanvas1.width = gridW/detailCeparetCnt; patternCanvas1.height = gridH/detailCeparetCnt; var pCtx = patternCanvas1.getContext("2d"); pCtx.arc(gridW/detailCeparetCnt/2,gridH/detailCeparetCnt/2, 1.2,0,Math.PI * 2); pCtx.fillStyle = "rgba(0,0,0,0.2)"; pCtx.fill(); // grid+ var patternCanvas2 = document.createElement("canvas"); patternCanvas2.width = gridW; patternCanvas2.height = gridH; var pCtx2 = patternCanvas2.getContext("2d"); pCtx2.arc((gridW/2),(gridH/2),2,0,Math.PI * 2); pCtx2.fillStyle = "rgba(0,0,0,0.5)"; pCtx2.fill(); pCtx2.lineWidth = 0.5; pCtx2.strokeStyle = 'rgba(0,0,0,0.1)'; pCtx2.moveTo(0, (gridH/2)); pCtx2.lineTo(gridW, (gridH/2)); pCtx2.stroke(); pCtx2.moveTo((gridW/2), 0); pCtx2.lineTo((gridW/2), gridH); pCtx2.stroke(); pCtx2.fillStyle = pCtx2.createPattern(patternCanvas1, "repeat"); pCtx2.fillRect(0, 0,patternCanvas2.width, patternCanvas2.height); var ctx = this.ctx; ctx.fillStyle = ctx.createPattern(patternCanvas2, "repeat"); ctx.fillRect(0, 0,this.width, this.height); } canvasView.prototype.makeGradientStyle = function(){ var grad = this.ctx.createLinearGradient(0,0, this.width,0); grad.addColorStop(0,'rgb(220, 0, 0)'); grad.addColorStop(0.5,'rgb(220, 0, 220)'); grad.addColorStop(1,'rgb(0, 0, 220)'); return grad; } // other // 1桁の数字を0埋めで2桁にする var toDoubleDigits = function(num) { num += ""; if (num.length === 1)num = "0" + num; return num; }; var toTripleDigits = function(num) { num += ""; if (num.length === 1)num = "0" + num; if (num.length === 2)num = "0" + num; return num; }; // 日付をYYYY/MM/DD HH:DD:MI:SS形式で取得 var yyyymmdd = function() { var date = new Date(); var yyyy = date.getFullYear(); var mm = toDoubleDigits(date.getMonth() + 1); var dd = toDoubleDigits(date.getDate()); return yyyy + '/' + mm + '/' + dd; }; var hhmissms = function() { var date = new Date(); var hh = toDoubleDigits(date.getHours()); var mi = toDoubleDigits(date.getMinutes()); var ss = toDoubleDigits(date.getSeconds()); var ms = toTripleDigits(date.getMilliseconds()) return hh + ':' + mi + ':' + ss + ':' + ms; }; var getRandOffsetNum = function(){ var num = Math.random() * 1800 + 250; if(Math.random() < 0.6){ num *= -1; } return num; } var FPS = 30; var loopFPS = 100; var canvasView = new canvasView(null, FPS, loopFPS); canvasView.initCanvas(); var glitch = new glitchBox(canvasView.canvas); document.body.appendChild(canvasView.canvas); var render = function(){ canvasView.frm++; canvasView.drawCanvas(); if(canvasView.frm %100 < 10){ // fillCnt, cuttingMaxHeight glitch.glitchFillRandom(5, 20); } if(canvasView.frm%100 < 20){ glitch.glitchSlip(8); } if(94 < canvasView.frm%100){ glitch.glitchSlipColor(50); } // renderLineHeight, cuttingHeight glitch.glitchWave((canvasView.frm * 3) % canvasView.height, 3); // if(counter >= 10)clearInterval(timer); } // animation task window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback, element){ window.setTimeout(callback, 1000 / FPS); }; })(); function animationLoop(){ render(); requestAnimationFrame(animationLoop); }; animationLoop();
});
Glitch test - Script Codes
Glitch test - Script Codes
Home Page Home
Developer Uriuriuriu
Username uriuriuriu
Uploaded January 10, 2023
Rating 4.5
Size 4,246 Kb
Views 4,048
Do you need developer help for Glitch test?

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
Simple genetic algorithm
Three.js ver.1 rotate camera
AngularJS - first step -
Three.js ver.2 animation
Css action sideBar
TV effect
Glitchicken
Shuffle text word separator
Glitch Video
Three.js earth
Create amazing marketing copy 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!