Skip to content

Instantly share code, notes, and snippets.

@xav76
Created October 23, 2012 18:42
Show Gist options
  • Select an option

  • Save xav76/3940695 to your computer and use it in GitHub Desktop.

Select an option

Save xav76/3940695 to your computer and use it in GitHub Desktop.
A CodePen by Simon FREMAUX. Lost In The Dark - My js1k entry - https://github.com/dievardump/js1k/
<canvas id="c"></canvas>
(function () {
'use strict';
var b = document.body,
c = document.getElementsByTagName('canvas')[0],
a = c.getContext('2d');
document.body.clientWidth; // fix bug in webkit: http://qfox.nl/weblog/218
// inspired by a picwin ( mIRC ) contest i saw many years ago
// the contest was a 512b picwin snippet.
// source : http://scriptsdb.org/comments.php?id=1125
b.bgColor='#000';
var L="♥",
iWidth = c.width = b.clientWidth, // canvas width
iHeight=c.height=b.clientHeight, // canvas height
oPos = { x : 50, y : 50 }, // heart position
oSize = { w : 30, h : 50 }, // thing width and height
iLum = 255, // luminosity
aThings=[], // all things container
oCurrentEllipsis = { x: 130, y : 200},
oNextEllipsis = { x: 130, y : 200},
iStep=0;
// calc all things positions
var m = -oSize.w, q =0; // m and q are x and y pos for things
while(m<iWidth||q<iHeight)
{
aThings.push( { x : m, y : q } ); // add a thing
if (m>iWidth) { // if we are at the max right
m=-oSize.w; // return to left
q+=oSize.w*1.5; // next line
}
m+=oSize.h;
}
function process() {
// move the heart
fnMove();
// pick just visible things
var aVisible = [];
for(var i = aThings.length; i--; )
{
var oCurrent = aThings[i],
hypo = Math.sqrt(Math.abs(Math.pow(oPos.x-oCurrent.x,2)+Math.abs(Math.pow(oPos.y-oCurrent.y,2)))); // calc dist from thing to heart
if (hypo<iLum+oSize.h && hypo>oSize.w) { // if thing is not too far (255px+thingHeight) and not too close ( thig width )
aVisible.push({dist:hypo, x:oCurrent.x,y:oCurrent.y}); // set thing as visible
}
}
// sort thing by dist to have a "pretty" print
aVisible.sort(sortByDist);
a.clearRect(0, 0, iWidth, iHeight); // clear canvas
var oVisible = null,
radius = null;
for(i=aVisible.length;i--;){ // for all visible things
// save current canvas state to manipulate it
a.save();
oVisible = aVisible[i];
radius = Math.acos((oPos.y-oVisible.y)/oVisible.dist); // calc horizontal radius between thing and heart
radius *= (oPos.x-oVisible.x>0) ? -1 : 1;
a.translate(oVisible.x,oVisible.y); // translate the canvas
a.rotate(radius); // rotate canvas
// calc luminosity for this thing
var iCurrentLum = -Math.floor(oVisible.dist-iLum);
if ( iCurrentLum > iLum ) { // avoid luminosity > 255
iCurrentLum = iLum;
} else if (iCurrentLum < 0 ) { // avoid luminosity < 0
iCurrentLum = 0;
}
// draw the thing
a.beginPath();
a.lineWidth=oSize.w;
a.lineCap='round';
a.moveTo(0,0);
a.lineTo(0,oSize.h);
a.strokeStyle='rgba('+iCurrentLum+',0,0,1)';
a.stroke();
a.closePath();
// restore state
a.restore();
}
//draw the heart
a.textAlign="center",
a.textBase="middle",
a.font="42px a",
a.fillStyle="red",
a.fillText(L,oPos.x,oPos.y);
//loop process
setTimeout(process, 33);
};
// function to sort thing by DESC dist
function sortByDist(a, b){
return b.dist-a.dist
};
// function which set new heart coord "randomly" around an elipse
function fnMove() {
var radius = 0;
// check if we are at the new coords
if (oCurrentEllipsis.x==oNextEllipsis.x) {
oNextEllipsis.x= Math.round(Math.random()*iWidth/2);
}
if ( oCurrentEllipsis.y==oNextEllipsis.y ) {
oNextEllipsis.y= Math.round(Math.random()*iHeight/2);
}
//set new dir.x
if ( oCurrentEllipsis.x < oNextEllipsis.x ) {
oCurrentEllipsis.x++;
} else {
oCurrentEllipsis.x--;
}
// set new dir.y
if ( oCurrentEllipsis.y<oNextEllipsis.y ) {
oCurrentEllipsis.y++;
} else {
oCurrentEllipsis.y--;
}
// we change the radius counting on steps
radius=iStep/30;
iStep++;
// the point where we are suppose to go next
var dir = {
x : Math.cos(radius)*oCurrentEllipsis.x+iWidth/2,
y : Math.sin(radius)*oCurrentEllipsis.y+iHeight/2
};
// check if we change direction
var oDiff = {
x : oPos.x-dir.x,
y : oPos.y-dir.y
};
if ( oDiff.x != 0 || oDiff.y !=0 ) {
oDiff.x*=-1;
oDiff.y*=-1;
}
oPos.x += oDiff.x;
oPos.y += oDiff.y;
};
process();
}());
html, body {
width : 100%;
height : 100%;
position : relative;
overflow : hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment