|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title></title>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
body {
|
|
|
|
|
margin: 0px
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
var svg = (function(colors){
|
|
|
|
|
var canvas = document.createElement('canvas'),
|
|
|
|
|
ctx = canvas.getContext('2d');
|
|
|
|
|
|
|
|
|
|
canvas.width = 10
|
|
|
|
|
canvas.height = 5
|
|
|
|
|
var upscale = 10
|
|
|
|
|
|
|
|
|
|
var im = ctx.getImageData(0,0,canvas.width,canvas.height)
|
|
|
|
|
for (var i = 0; i < im.data.length; i+=4) {
|
|
|
|
|
im.data[i] = Math.round(Math.random()*255)
|
|
|
|
|
im.data[i+1] = Math.round(Math.random()*255)
|
|
|
|
|
im.data[i+2] = Math.round(Math.random()*255)
|
|
|
|
|
im.data[i+3] = 255
|
|
|
|
|
};
|
|
|
|
|
ctx.putImageData(im,0,0)
|
|
|
|
|
var url = canvas.toDataURL()
|
|
|
|
|
im = new Image()
|
|
|
|
|
im.src = url
|
|
|
|
|
canvas.width *= upscale
|
|
|
|
|
canvas.height *= upscale
|
|
|
|
|
ctx.drawImage(im,0,0,canvas.width, canvas.height)
|
|
|
|
|
im = ctx.getImageData(0,0,canvas.width,canvas.height)
|
|
|
|
|
|
|
|
|
|
var xmlns = "http://www.w3.org/2000/svg";
|
|
|
|
|
var svg = document.createElementNS(xmlns, 'svg')
|
|
|
|
|
svg.setAttribute('viewBox',"0 0 "+im.width+" "+im.height)
|
|
|
|
|
for (var i = 0; i < im.data.length; i+=4) {
|
|
|
|
|
var mindist = 195075
|
|
|
|
|
var mincolor = [0,0,0]
|
|
|
|
|
var pix = [im.data[i],im.data[i+1],im.data[i+2]]
|
|
|
|
|
for (var j = 0; j < colors.length; j++) {
|
|
|
|
|
var color = colors[j]
|
|
|
|
|
var d0 = color[0] - pix[0]
|
|
|
|
|
var d1 = color[1] - pix[1]
|
|
|
|
|
var d2 = color[2] - pix[2]
|
|
|
|
|
var d = Math.abs(d0)+Math.abs(d1)+Math.abs(d2)
|
|
|
|
|
if (d<mindist) {
|
|
|
|
|
mindist = d
|
|
|
|
|
mincolor = color
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var n = i/4
|
|
|
|
|
ctx.fillStyle = 'rgba('+Math.min(mincolor[0]+n%2*20,255)+', '+mincolor[1]+', '+mincolor[2]+',1)'
|
|
|
|
|
var elem = document.createElementNS(xmlns, "rect");
|
|
|
|
|
|
|
|
|
|
elem.setAttributeNS(null,"x",n%im.width);
|
|
|
|
|
elem.setAttributeNS(null,"y",Math.floor(n/im.width));
|
|
|
|
|
elem.setAttributeNS(null,"width",1.5);
|
|
|
|
|
elem.setAttributeNS(null,"height",1.5);
|
|
|
|
|
elem.setAttributeNS(null,"fill", 'rgba('+Math.min(mincolor[0]+n%2*20,255)+', '+mincolor[1]+', '+mincolor[2]+',1)');
|
|
|
|
|
|
|
|
|
|
svg.appendChild(elem);
|
|
|
|
|
};
|
|
|
|
|
return svg
|
|
|
|
|
})([[39, 198, 249], [6, 188, 249], [116, 218, 251], [91, 211, 251]])
|
|
|
|
|
|
|
|
|
|
document.body.appendChild(svg)
|
|
|
|
|
// wrap.appendChild(svg)
|
|
|
|
|
|
|
|
|
|
// document.body.style.backgroundImage = "url(data:image/svg+xml;utf8,"+wrap.innerHTML+")"
|
|
|
|
|
// document.styleSheets[0].insertRule("body {background: url('data:image/svg+xml;utf8,"+wrap.innerHTML+"')}",0)
|
|
|
|
|
|
|
|
|
|
// ctx.putImageData(im,0,0)
|
|
|
|
|
// canvas.style.width = 2000
|
|
|
|
|
// canvas.style.height = 2000
|
|
|
|
|
|
|
|
|
|
// document.body.appendChild(canvas)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<!-- <script type="text/javascript" src="wolo.js"></script> -->
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
