Created
October 23, 2012 18:42
-
-
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/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <canvas id="c"></canvas> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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(); | |
| }()); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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