TV effect

Developer
Uriuriuriu
Size
3,293 Kb
Views
4,048
  1. TV effect Previews
  2. TV effect HTML Codes
  3. TV effect CSS Codes
  4. TV effect JS Codes

How do I make an tv effect?

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

TV effect Previews
IQ Test

TV effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>TV effect</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> <h1>TV effect</h1>
<div id="tv_effect" data-tv-src="http://lorempixel.com/600/400/city/"></div>
<p id="logger"></p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

TV effect - Script Codes CSS Codes

* { color: #ccc;
}
body { background-color: #222; font-size: 12px; margin: 20px;
}
h1 { text-align: center; font: 30px 'Futura'; line-height: 20px;
}
#tv_effect { border: solid 10px #fff; margin: 2px; width: 620px; height: 420px; box-sizing: border-box; cursor: pointer; margin: 20px auto;
}
#logger { text-align: center; font: 12px 'Futura';
}

TV effect - Script Codes JS Codes

(function($){ $.fn.superTvEffecter=function(options){ var options = $.extend({ wRange: 7, hRange: 10 }, options); var _wRange = options.wRange; var _hRange = options.hRange; var _wPadding = 1; var _hPadding = 1; return this.each(function(){ var $this = $(this); var img = document.createElement('img'); img.crossOrigin = 'anonymous'; var url = $this.data("tv-src"); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); $this.append(canvas); var canvasOrigine = document.createElement('canvas'); var ctxOrigine = canvasOrigine.getContext('2d'); var startTime = new Date(); img.onload = function() { // setting var width = canvas.width = canvasOrigine.width = img.width; var height = canvas.height = canvasOrigine.height = img.height; ctxOrigine.drawImage(img, 0, 0); var imageData = ctxOrigine.getImageData(0,0,width,height); var loadTime = logger(startTime, "load image", false); var newData, newImageData; // mosaic newImageData = mosaicXY(width, height, imageData.data); var endYTime = logger(loadTime, "tv effect", true); // draw ctx.putImageData(newImageData,0,0); } img.src = url; }); function mosaicXY(width, height, dataOrigine, gapFlg){ var canvasDraw = document.createElement('canvas'); canvasDraw.width = width; canvasDraw.height = height; canvasDraw.crossOrigin = 'anonymous'; var slitWidth1 = (_wRange / 3)|0; var slitWidth2 = slitWidth1*2; var ctxDraw = canvasDraw.getContext('2d'); var imageDataDraw = ctxDraw.getImageData(0,0,width,height); var dataDraw = imageDataDraw.data; var ox, oy, gauss, count, R, G, B, A; var cx = (width / _wRange)|0; // = Math.floor(width / wRange); var cy = (height / _hRange)|0; for(var wy = 0; wy<=cy; wy++){ for(var wx = 0; wx<=cx; wx++){ gauss = count = R = G = B = A = 0; var ox = wx * _wRange; var oy = wy * _hRange; for (var x = 0; x <= _wRange; x++){ var tx = ox + x; if(width<=tx)continue; for (var y = 0; y <= _hRange; y++){ var ty = oy + y; if(height<=ty)continue; var k = (ty * width) + tx; R += dataOrigine[k*4 + 0]; G += dataOrigine[k*4 + 1]; B += dataOrigine[k*4 + 2]; A += dataOrigine[k*4 + 3]; count++; } } R = (R / count)|0; G = (G / count)|0; B = (B / count)|0; A = (A / count)|0;
/* // only mosaicXY for (var x = 0; x <= _wRange; x++){ var tx = ox + x; if(width<=tx)continue; for (var y = 0; y <= _hRange; y++){ var ty = oy + y; if(height<=ty)continue; var k = (ty * width) + tx; dataDraw[k*4 + 0] = R; dataDraw[k*4 + 1] = G; dataDraw[k*4 + 2] = B; dataDraw[k*4 + 3] = A; } }*/ // tv effect for (var x = 0; x <= _wRange; x++){ var tx = ox + x; if(width<=tx)continue; for (var y = 0; y <= _hRange; y++){ var ty = oy + y; if(height<=ty)continue; var k = (ty * width) + tx; var RGB = [0,0,0]; if(0<x)RGB = [R,0,0]; if(slitWidth1<x)RGB = [0,G,0]; if(slitWidth2<x)RGB = [0,0,B]; if(y==0)RGB = [0,0,0]; dataDraw[k*4 + 0] = RGB[0]; dataDraw[k*4 + 1] = RGB[1]; dataDraw[k*4 + 2] = RGB[2]; dataDraw[k*4 + 3] = A; } } } } return imageDataDraw } function logger(oldData, preText, brFlg){ var nowTime = new Date(); var msec = nowTime - oldData; var br = " / "; if(brFlg)br = "<br>"; $("#logger").append(preText+" : "+ msec+" msec" + br); return nowTime; } };
})(jQuery);
$(function(){ $("#tv_effect").superTvEffecter({wRange:4, hRange:10}); $("#tv_effect").click(function(){ $(this).html("").superTvEffecter(); })
});
TV effect - Script Codes
TV effect - Script Codes
Home Page Home
Developer Uriuriuriu
Username uriuriuriu
Uploaded January 10, 2023
Rating 3
Size 3,293 Kb
Views 4,048
Do you need developer help for TV effect?

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
SANGETUKI separator
Three.js earth
Canvas Gaussian Blur
Glitchicken
Glitch test
Three.js ver.1 rotate camera
ClickPanel
Canvas circle gauge
Simple genetic algorithm
Css action sideBar
Create amazing web content 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!