- Author:
- Roy Evan Sia
- Twitter:
- @
- GitHub:
- Facebook:
- Google+:
- +
- Reddit:
- /r/
- Pouet:
- Website:
- Compo:
- classic
- Demo link:
- https://js1k.com/2012-love/demo/1045
- Shortlink:
- https://js1k.com/1045
- Blog post:
- please update here!
- Bytes:
- 888
- Chars:
- 888
- Submission
var e="Love.,Liebe.,Amor.,Cinta.,Pagibig.,\u611b\u3002".split(","),h=[],i,j,k,l=0,m,n;c.width=700;c.height=448;b.style.backgroundColor="#000";a.font="200px Georgia";a.textBaseline="middle";a.textAlign="center";for(var o=0;o<e.length;o++)a.fillStyle="#fff",a.fillText(e[o],c.width/2,c.height/2),h[o]=a.getImageData(0,0,c.width,c.height),a.clearRect(0,0,c.width,c.height);function s(t){return Math.floor(Math.random()*t)}n=Math.ceil(h[0].width/7);
(function u(){window.setTimeout(function(){0===l&&(m=s(e.length),i=s(256),j=s(256),k=s(256));for(var f=0;f<h[m].height;f+=7)for(var g=0;g<7*l;g+=7){var d;a:{d=m;for(var p=0;5>p;p++)for(var q=0;5>q;q++){var r=4*(f+p)*h[d].width+4*(g+q);if(0!==h[d].data[r]||0!==h[d].data[r+1]||0!==h[d].data[r+2]){d=1;break a}}d=0}a.fillStyle=1===d?"rgb("+(255-i)+","+(255-j)+","+(255-k)+")":"rgb("+i+","+j+","+k+")";a.fillRect(g,f,5,5)}l=(l+1)%n;u()},1)})();
- Description
- Love in different languages.
- Base64 encoded
dmFyIGU9IkxvdmUuLExpZWJlLixBbW9yLixDaW50YS4sUGFnaWJpZy4sXHU2MTFiXHUzMDAyIi5zcGxpdCgiLCIpLGg9W10saSxqLGssbD0wLG0sbjtjLndpZHRoPTcwMDtjLmhlaWdodD00NDg7Yi5zdHlsZS5iYWNrZ3JvdW5kQ29sb3I9IiMwMDAiO2EuZm9udD0iMjAwcHggR2VvcmdpYSI7YS50ZXh0QmFzZWxpbmU9Im1pZGRsZSI7YS50ZXh0QWxpZ249ImNlbnRlciI7Zm9yKHZhciBvPTA7bzxlLmxlbmd0aDtvKyspYS5maWxsU3R5bGU9IiNmZmYiLGEuZmlsbFRleHQoZVtvXSxjLndpZHRoLzIsYy5oZWlnaHQvMiksaFtvXT1hLmdldEltYWdlRGF0YSgwLDAsYy53aWR0aCxjLmhlaWdodCksYS5jbGVhclJlY3QoMCwwLGMud2lkdGgsYy5oZWlnaHQpO2Z1bmN0aW9uIHModCl7cmV0dXJuIE1hdGguZmxvb3IoTWF0aC5yYW5kb20oKSp0KX1uPU1hdGguY2VpbChoWzBdLndpZHRoLzcpOw0KKGZ1bmN0aW9uIHUoKXt3aW5kb3cuc2V0VGltZW91dChmdW5jdGlvbigpezA9PT1sJiYobT1zKGUubGVuZ3RoKSxpPXMoMjU2KSxqPXMoMjU2KSxrPXMoMjU2KSk7Zm9yKHZhciBmPTA7ZjxoW21dLmhlaWdodDtmKz03KWZvcih2YXIgZz0wO2c8NypsO2crPTcpe3ZhciBkO2E6e2Q9bTtmb3IodmFyIHA9MDs1PnA7cCsrKWZvcih2YXIgcT0wOzU+cTtxKyspe3ZhciByPTQqKGYrcCkqaFtkXS53aWR0aCs0KihnK3EpO2lmKDAhPT1oW2RdLmRhdGFbcl18fDAhPT1oW2RdLmRhdGFbcisxXXx8MCE9PWhbZF0uZGF0YVtyKzJdKXtkPTE7YnJlYWsgYX19ZD0wfWEuZmlsbFN0eWxlPTE9PT1kPyJyZ2IoIisoMjU1LWkpKyIsIisoMjU1LWopKyIsIisoMjU1LWspKyIpIjoicmdiKCIraSsiLCIraisiLCIraysiKSI7YS5maWxsUmVjdChnLGYsNSw1KX1sPShsKzEpJW47dSgpfSwxKX0pKCk7
- Original source
// full source at https://github.com/darklight721/JS1K/blob/master/src.js
// Declare variables
var t = ["Love.","Liebe.","Amor.","Cinta.","Pagibig.","愛。"],// texts
p = 5, // pixel size
s = 2, // spacing between pixels
img = [], // image data
r,g,v, // rgb colors
i=0,h,m; // incrementors
// Set canvas size
c.width = 700;
c.height = 448;
// Set background color
b.style.backgroundColor = "#000";
// Format font
a.font = "200px Georgia";
a.textBaseline = "middle";
a.textAlign = "center";
for (var j = 0; j < t.length; j++)
{
// Draw text
a.fillStyle = "#fff";
a.fillText(t[j],c.width/2,c.height/2);
// Save image data
img[j] = a.getImageData(0,0,c.width,c.height);
// Clear the canvas
a.clearRect(0,0,c.width,c.height);
}
// Get a random value between 0 to n
var getRandomValue = function(n){
return Math.floor(Math.random()*n);
};
// Pick a random rgb color
var randomColor = function(){
r = getRandomValue(256);
g = getRandomValue(256);
v = getRandomValue(256);
};
// Tests whether a pixel contains a text
var isTextOnPixel = function(w,x,y) {
for (var i = 0; i < p;i++)
{
for (var j = 0; j < p; j++)
{
var k = ((y+i)*img[w].width*4) + ((x+j)*4);
if (img[w].data[k] !== 0 || img[w].data[k+1] !== 0 || img[w].data[k+2] !== 0)
{
return 1;
}
}
}
return 0;
};
m = Math.ceil(img[0].width/(p+s)); // max number of pixelated columns
// Start rendering
(function render(){
window.setTimeout(function(){
if (i === 0) // only pick a random color once the whole canvas is painted with the current color
{
h = getRandomValue(t.length); // get random index of texts
randomColor();
}
for (var y = 0; y < img[h].height; y+=p+s)
{
for (var x = 0; x < i*(p+s); x+=p+s)
{
if (isTextOnPixel(h,x,y) === 1)
{
// if pixel contains text, get the opposite color
a.fillStyle = "rgb("+(255-r)+","+(255-g)+","+(255-v)+")";
}
else
{
a.fillStyle = "rgb("+r+","+g+","+v+")";
}
// Draw rect here
a.fillRect(x,y,p,p);
}
}
i = (i+1) % m; // increment
render();
},1);
})();