JS1k 2012 - 1025 - Details - A lovely JavaScript golfing competition

Author:

Manel Villar

Twitter:

GitHub:

Facebook:

Google+:

Reddit:

/r/

Pouet:

Website:

Compo:

classic

Demo link:

https://js1k.com/2012-love/demo/1025

Shortlink:

https://js1k.com/1025

Blog post:

please update here!

Bytes:

1017

Chars:

1017

Submission

function N(){M=document.createElement("canvas"),M.width=W,M.height=H,m=M.getContext("2d"),S(m,B),m.fillRect(0,0,W,H),m.globalCompositeOperation="xor",m.beginPath(),Z=W/2,h=H/3,P=Math.PI,m.moveTo(Z,H*.8),m.lineTo(Z-h-h/7,h+h/8),m.arc(Z-h/2,h,h*.6,P-P/8,0),m.arc(Z+h/2,h,h*.6,P,P/8),m.closePath(),m.fill(),m.font=O+"px Arial",S(m,B),m.fillText(s,Z-h*s.length*.1,h/.7)}function I(){S(a,"#f00");for(k=0;k<10;k++)D=Y-5+k,E=L[D],f=E[0],F=E[1],X-10<f&&(f=L[D][0]=X-5),X+5>F&&(F=L[D][1]=X+5),a.fillRect(f,D,F-f,1),a.fillRect(f,D,F-f,1);a.drawImage(M,0,0),S(a,b),a.fillText("Move the cursor",Z,50)}function S(a,b){a.fillStyle=b}w=window,W=w.innerWidth,H=w.innerHeight,L=[];for(k=-99;k<H;k++)L[k]=[9e9,0];c.width=W,c.height=H,c.style.width=W+"px",c.style.height=H+"px",B="#FFF",b="#000",S(a,B),a.fillRect(0,0,W,H),O=H/6,s="js1k",N(),a.drawImage(M,0,0),X=Y=0,setInterval(I,10),c.onmousemove=function(a){X=a.clientX,Y=a.clientY},w.onkeydown=function(a){U=a.keyCode,U==13?s="":U==107?O++:U==109?O--:s+=String.fromCharCode(U),N(s)}

Description

Shows your love when the mouse moves across the screen. You can change the text using... the keyboard. 'Enter' key deletes text. '+' increases font size. '-' decreases font size.

Base64 encoded

ZnVuY3Rpb24gTigpe009ZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgiY2FudmFzIiksTS53aWR0aD1XLE0uaGVpZ2h0PUgsbT1NLmdldENvbnRleHQoIjJkIiksUyhtLEIpLG0uZmlsbFJlY3QoMCwwLFcsSCksbS5nbG9iYWxDb21wb3NpdGVPcGVyYXRpb249InhvciIsbS5iZWdpblBhdGgoKSxaPVcvMixoPUgvMyxQPU1hdGguUEksbS5tb3ZlVG8oWixIKi44KSxtLmxpbmVUbyhaLWgtaC83LGgraC84KSxtLmFyYyhaLWgvMixoLGgqLjYsUC1QLzgsMCksbS5hcmMoWitoLzIsaCxoKi42LFAsUC84KSxtLmNsb3NlUGF0aCgpLG0uZmlsbCgpLG0uZm9udD1PKyJweCBBcmlhbCIsUyhtLEIpLG0uZmlsbFRleHQocyxaLWgqcy5sZW5ndGgqLjEsaC8uNyl9ZnVuY3Rpb24gSSgpe1MoYSwiI2YwMCIpO2ZvcihrPTA7azwxMDtrKyspRD1ZLTUrayxFPUxbRF0sZj1FWzBdLEY9RVsxXSxYLTEwPGYmJihmPUxbRF1bMF09WC01KSxYKzU+RiYmKEY9TFtEXVsxXT1YKzUpLGEuZmlsbFJlY3QoZixELEYtZiwxKSxhLmZpbGxSZWN0KGYsRCxGLWYsMSk7YS5kcmF3SW1hZ2UoTSwwLDApLFMoYSxiKSxhLmZpbGxUZXh0KCJNb3ZlIHRoZSBjdXJzb3IiLFosNTApfWZ1bmN0aW9uIFMoYSxiKXthLmZpbGxTdHlsZT1ifXc9d2luZG93LFc9dy5pbm5lcldpZHRoLEg9dy5pbm5lckhlaWdodCxMPVtdO2ZvcihrPS05OTtrPEg7aysrKUxba109WzllOSwwXTtjLndpZHRoPVcsYy5oZWlnaHQ9SCxjLnN0eWxlLndpZHRoPVcrInB4IixjLnN0eWxlLmhlaWdodD1IKyJweCIsQj0iI0ZGRiIsYj0iIzAwMCIsUyhhLEIpLGEuZmlsbFJlY3QoMCwwLFcsSCksTz1ILzYscz0ianMxayIsTigpLGEuZHJhd0ltYWdlKE0sMCwwKSxYPVk9MCxzZXRJbnRlcnZhbChJLDEwKSxjLm9ubW91c2Vtb3ZlPWZ1bmN0aW9uKGEpe1g9YS5jbGllbnRYLFk9YS5jbGllbnRZfSx3Lm9ua2V5ZG93bj1mdW5jdGlvbihhKXtVPWEua2V5Q29kZSxVPT0xMz9zPSIiOlU9PTEwNz9PKys6VT09MTA5P08tLTpzKz1TdHJpbmcuZnJvbUNoYXJDb2RlKFUpLE4ocyl9

Original source

//Uses the technic for double maks appointed here: http://ir.gl/98bad9
w = window;
W = w.innerWidth;
H = w.innerHeight;
L = [];

for (k=-99;k<H;k++) {
  L[k] = [9e9,0];
}

c.width=W;
c.height=H;
c.style.width = W + 'px';
c.style.height = H + 'px';

B = "#FFF";
b = "#000";
S(a,B);
a.fillRect(0,0,W,H);

O = H/6;
s = "js1k";

// Create a canvas that we will use as a mask
function N() {
  M = document.createElement('canvas');
  // Ensure same dimensions
  M.width = W;
  M.height = H;
  m = M.getContext('2d');

  // This color is the one of the filled shape
  S(m,B);
  // Fill the mask
  m.fillRect(0, 0, W, H);
  m.globalCompositeOperation = 'xor';


  // heart
  m.beginPath();
  Z = W/2;
  h = H/3;
  P = Math.PI;
  m.moveTo(Z,H*.8);
  m.lineTo(Z-h-(h/7),h+(h/8));
  m.arc(Z-(h/2), h, h*.6,P-(P/8),0);
  m.arc(Z+(h/2),h,h*.6,P,P/8);
  m.closePath();
  m.fill();

  m.font = O+"px Arial";
  S(m,B);
  m.fillText(s,Z-((h*(s.length*.1))),h/.7);
}

N();

// Draw mask on the image, and done !
a.drawImage(M, 0, 0);


X=Y=0;


function I() {
  S(a,"#f00");
  for (k=0; k<10;k++) {

    D = Y-5+k;

    E = L[D];
    f = E[0];
    F = E[1];
    
    if (X-10 < f) {
      f = L[D][0] = X-5;
    }

    if (X+5 > F) {
      F = L[D][1] = X+5;
    }


    a.fillRect(f,D,F-f,1);
    a.fillRect(f,D,F-f,1);

  }
  a.drawImage(M, 0, 0);
  S(a,b);
  a.fillText("Move the cursor",Z,50);
}

setInterval(I, 10);

c.onmousemove = function(e) {
   X = e.clientX;
   Y = e.clientY;
}

w.onkeydown = function(e) {
  U = e.keyCode;
  if (U == 13)
    s ="";
  else if (U == 107)
    O++;
  else if (U == 109)
    O--;
  else
    s += String.fromCharCode(U);
  N(s);
}

function S(c,s) {
  c.fillStyle=s;
}

JS1k: The JavaScript code golfing competition

2012 - Love

Hidden Love