49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
function getRandomColor() {
|
|
var letters = '0123456789ABCDEF';
|
|
var color = '#';
|
|
for (var i = 0; i < 6; i++) {
|
|
color += letters[Math.floor(Math.random() * 16)];
|
|
}
|
|
return color;
|
|
}
|
|
|
|
function drawPixel(x, y, color) {
|
|
MPP.addons.draw.mkline(x-1,y,x,y,10,color)
|
|
}
|
|
|
|
function componentToHex(c) {
|
|
var hex = c.toString(16);
|
|
return hex.length == 1 ? "0" + hex : hex;
|
|
}
|
|
|
|
function rgbToHex(r, g, b) {
|
|
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
|
|
}
|
|
|
|
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
|
|
var img = document.createElement("img");
|
|
img.crossOrigin = "Anonymous";
|
|
img.addEventListener('load', function(){
|
|
console.log(img);
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = img.width;
|
|
canvas.height = img.height;
|
|
var c = canvas.getContext('2d');
|
|
c.drawImage(img, 0, 0, img.width, img.height);
|
|
console.log(canvas);
|
|
|
|
var pos1 = [128-img.width/2,128-img.height/2], pos2 = [128+img.width/2,128+img.height/2];
|
|
//var pos1 = [0,0], pos2 = [64,64];
|
|
|
|
var ii=0;
|
|
for (let x = pos1[0], xo = 0; x < pos2[0]; x++, xo++)
|
|
for (let y = pos1[1], yo = 0; y < pos2[1]; y++, yo++) {
|
|
setTimeout(()=>{
|
|
var rgb = c.getImageData(xo,yo, 1, 1).data;
|
|
drawPixel(x,y, rgbToHex(rgb[0], rgb[1], rgb[2]));
|
|
} ,++ii * 4);
|
|
}
|
|
});
|
|
img.src = "https://mpp.terrium.net/meow64.png";
|