Live pixel sorting
How do I make an live pixel sorting?
What is a live pixel sorting? How do you make a live pixel sorting? This script and codes were developed by Khalkeus on 11 November 2022, Friday.
Live pixel sorting - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>live pixel sorting</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <video autoplay id="v"></video>
<canvas id = "c"></canvas> <script src="js/index.js"></script>
</body>
</html>
Live pixel sorting - Script Codes CSS Codes
body, html{
/* width: 100%; height: 100%; margin: 0px; padding: 0px; overflow: hidden; */
}
canvas{ padding: 0; margin: auto; display: block; width: 500px; height: 500px;
}
video { width: 0%; height: 0%;
}
Live pixel sorting - Script Codes JS Codes
function hasGetUserMedia() { return (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
function errorCallback(e){ console.log(":///");
}
var video, canvas, ctx;
function comp(a, b){ return (a[0] + a[1] + a[2]) - (b[0] + b[1] + b[2]);
}
function getVideoFrames(){ ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, canvas.width, canvas.height); var arr = [] var d = ctx.getImageData(0, 0, canvas.width, canvas.height); var i = 0; for(var y = 0; y < d.height; y++){ arr.push([]) for(var x = 0; x < d.width; x++){ arr[y].push([d.data[i], d.data[i + 1], d.data[i + 2], d.data[i + 3]]); i += 4; } } for(var i = 0; i < arr.length; i++){ if(Math.random() < 1) arr[i].sort(comp); } d = ctx.createImageData(canvas.width, canvas.height); var data = []; for(var i = 0; i < arr.length; i++){ for(j = 0; j < arr[i].length; j++){ data.push(arr[i][j][0]); data.push(arr[i][j][1]); data.push(arr[i][j][2]); data.push(arr[i][j][3]); } } d.data.set(data); ctx.putImageData(d, 0, 0); requestAnimationFrame(getVideoFrames)
}
window.onload = function() { if(hasGetUserMedia()){ video = document.getElementById('v'); canvas = document.getElementById('c'); ctx = canvas.getContext('2d'); var mediaStream = null; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; navigator.getUserMedia({audio: false, video: true}, function(stream) { video.src = window.URL.createObjectURL(stream); getVideoFrames(video, ctx); }, errorCallback); }else{ alert("Sorry your browser won't run this :(") }
}
Developer | Khalkeus |
Username | khalkeus |
Uploaded | November 11, 2022 |
Rating | 3 |
Size | 2,314 Kb |
Views | 10,120 |
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!
Name | Size |
Particle fire | 3,152 Kb |
Warpspeed | 2,409 Kb |
Planet Generator | 2,984 Kb |
Binary clock | 2,039 Kb |
Fish pond | 3,799 Kb |
Waves | 4,380 Kb |
Boids iii | 2,947 Kb |
Boids ii | 3,358 Kb |
Square loading icons | 2,249 Kb |
Cannon.js test | 2,524 Kb |
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!
Name | Username | Size |
Gradients | Karpovsystems | 2,394 Kb |
Sticky div | Kaslab | 2,225 Kb |
Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
Horizontal scroll fixed element | HerrSerker | 0 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
Bootstrap 4 Gridsystem Demo | Rivella50 | 1,535 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Opening Reveal Modal On Document Ready | Winghouchan | 1,787 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!