API tools faq
paste
LapisSea

Untitled

LapisSea
Feb 7th, 2017
175
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.76 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>LapisSea</title>
  6. <link rel="shortcut icon" href="favicon.ico">
  7. <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
  8. <style type="text/css">
  9. body{
  10. font-family: Comfortaa;
  11. background-color: #555;
  12. }
  13. msg{
  14. display: block;
  15. font-size: 50px;
  16. position: fixed;
  17. top: 30px;
  18. left: 30px;
  19. }
  20. .canv{
  21. background-color: transparent;
  22. position: fixed;
  23. top: 0;
  24. left: 0;
  25. z-index: -1;
  26. }
  27. body,html,.canv{
  28. width: 100%;
  29. height: 100%;
  30. padding: 0;
  31. margin: 0;
  32. }
  33. .invi{
  34. display: none;
  35. }
  36. .canv,msg{
  37. user-select: none;
  38. -moz-user-select: none;
  39. -khtml-user-select: none;
  40. -webkit-user-select: none;
  41. -o-user-select: none;
  42. }
  43. a{
  44. color: inherit;
  45. border-bottom: 1px solid transparent;
  46. transition: text-shadow 0.3s,color 0.3s;
  47. text-decoration: none;
  48. text-shadow: 1px 1px 1px transparent;
  49. }
  50. .Sign{
  51. position: fixed;
  52. top: 65%;
  53. border-top: 6px solid rgb(10,10,10);
  54. background-color: rgba(120,120,120,0.1);
  55. max-width: 21.428%;
  56. opacity: 0.01;
  57. }
  58. .Title{
  59. padding: 4px 15px;
  60. font-size: 18px;
  61. font-weight: bold;
  62. }
  63. .txt{
  64. padding: 10px;
  65. font-size: 16px;
  66. }
  67. </style>
  68. <style type="text/css" id="jsStyle"></style>
  69. </head>
  70.  
  71.  
  72. <body onload="lod()" onresize="res()" onclick="clck(window.event)">
  73.  
  74. <canvas class="canv" id="bkg"></canvas>
  75. <canvas class="canv" id="tre"></canvas>
  76. <msg></msg>
  77.  
  78. <!-- <img class="invi" id="gitImg" src="images/git.svg"> -->
  79. <img class="invi" id="glintImg" src="images/Glint.png">
  80. <img class="invi" id="ambientParticle" src="images/explosion_stages.png">
  81.  
  82. <div class="Sign" style="left: 7.142%">
  83. <div class="Title">Author:</div>
  84. <div class="txt">
  85. · Me, LapisSea
  86. </div>
  87.  
  88. </div>
  89. <div class="Sign" style="left: 28.571%">
  90. <div class="Title">Contact me by:</div>
  91. <div class="txt">
  92. <a target="_blank" href="http://t.me/LapisSea">Telegram</a><br>
  93. <a target="_blank" href="https://discord.gg/rHmFGMz">Discord</a><br>
  94. <a target="_blank" href="mailto:officiallapisseamail@gmail.com">eMail</a><br>
  95. </div>
  96. </div>
  97. <div class="Sign" style="left: 50%">
  98. <div class="Title">I am a:</div>
  99. <div class="txt">
  100. · Computer science enthusiast<br>
  101. · Web, game developer<br>
  102. · Human <span style="font-size: 3px">(yes I know it's crazy)</span>
  103. </div>
  104. </div>
  105.  
  106. <script type="text/javascript" id="util">
  107. devMode=false;
  108. "use strict";
  109. function time(){return new Date().getTime();}
  110. function syso(){
  111. if(arguments.length==1)console.log(arguments[0]);
  112. else if(arguments.length==2)console.log(arguments[0],arguments[1]);
  113. else console.log(arguments);
  114. }
  115. function fillQuad(ctx,p1x,p1y,p2x,p2y,p3x,p3y,p4x,p4y){
  116. ctx.beginPath();
  117. ctx.moveTo(p1x,p1y);
  118. ctx.lineTo(p2x,p2y);
  119. ctx.lineTo(p3x,p3y);
  120. ctx.lineTo(p4x,p4y);
  121. ctx.fill();
  122. }
  123. </script>
  124.  
  125. <script src="https://cdn.rawgit.com/mourner/suncalc/b08d1f6f/suncalc.js"></script>
  126. <script src="common/CommonUtil.js?v=1"></script>
  127. <script src="common/GetURLContent.js?v=1"></script>
  128. <script src="common/CookieGetterSetter.js?v=1"></script>
  129. <script src="common/ClearAreaMaker.js?v=1"></script>
  130. <script src="common/PerlinNoise.js?v=1"></script>
  131. <script src="common/CubicBezier.js?v=1"></script>
  132. <script type="text/javascript" id="sunScript">
  133.  
  134. geoData={latitude:0,longitude:0,ip:0,isNull:true};
  135.  
  136. function initGeo(json){
  137. geoData={
  138. latitude:json.latitude,
  139. longitude:json.longitude,
  140. ip:json.ip
  141. };
  142. }
  143.  
  144. debugSunVal=-1;
  145. function debugSun(brightness){
  146. debugSunVal=brightness;
  147. updateSun();
  148. debugSunVal=-1;
  149. }
  150.  
  151. sunBrightness=NaN;
  152. function updateSun(){
  153. var prev=sunBrightness;
  154. calcSunBrightness();
  155.  
  156.  
  157. bkgCol=Math.round(sunBrightness*200+29);
  158. terrainCol=Math.round(sunBrightness*70+10);
  159. trunkCol=Math.round((1-sunBrightness*sunBrightness)*50+80);
  160.  
  161. document.body.style.color=bkgCol<126?"white":"black";
  162. document.body.style.backgroundColor="rgb("+bkgCol+","+bkgCol+","+bkgCol+")";
  163.  
  164. if(sunBrightness==prev)return;
  165. var c=document.body.style.color,a=bkgCol<126?"#AAA":"#555";
  166. jsStyle.innerHTML=`
  167. .Sign{opacity: 1; border-top-color:rgb(`+terrainCol+","+terrainCol+","+terrainCol+`);}
  168. a:hover{text-shadow: 0px 0.5px 0px `+c+`, -0.5px 0px 0px `+c+`, 0px -0.5px 0px `+c+`, 0.5px 0px 0px `+c+`;}
  169. a:active{color:`+a+`;text-shadow: 0px 0.5px 0px `+a+`, -0.5px 0px 0px `+a+`, 0px -0.5px 0px `+a+`, 0.5px 0px 0px `+a+`;}
  170. `;
  171.  
  172. if(typeof res!="undefined"){
  173. res();
  174. if(!local)ambientParticle.src=filterImage(function(pixels) {
  175. var d = pixels.data;
  176. for (var i=0; i<d.length; i+=4){
  177. d[i]=d[i+1]=d[i+2]=trunkCol;
  178. }
  179. return pixels;
  180. },ambientParticle);
  181. }
  182. }
  183. function calcSunBrightness(){
  184. if(debugSunVal>=0){
  185. sunBrightness=debugSunVal;
  186. return;
  187. }
  188. var date=new Date();
  189. var tim=date.getTime();
  190. sun=SunCalc.getTimes(date, geoData.latitude, geoData.longitude);
  191. genSun();
  192.  
  193.  
  194. var start=sun.nightEnd.getTime();
  195. var end=sun.dawn.getTime();
  196.  
  197.  
  198. if(start>tim){
  199. sunBrightness=0;
  200. return;
  201. }
  202.  
  203. if(start<tim&&tim<end){
  204. var diff=end-start;
  205. sunBrightness=(tim-start)/diff;
  206. return;
  207. }
  208. start=sun.dusk.getTime();
  209. end=sun.night.getTime();
  210.  
  211. if(start<tim&&tim<end){
  212. var diff=end-start;
  213. sunBrightness=1-(tim-start)/diff;
  214. return;
  215. }
  216. if(end<tim)sunBrightness=0;
  217. else sunBrightness=1;
  218.  
  219.  
  220. }
  221. fetchingGeo=false;
  222. function genSun(){
  223. var geo=getCookie("geo");
  224. if(typeof geo=="undefined"||geo==""){
  225. if(typeof fetchingGeoScript=="undefined")fetchGeo();
  226. }else if(geoData.isNull){
  227. initGeo(geo);
  228. }
  229.  
  230. }
  231. function fetchGeoReceve(json){
  232. json={
  233. latitude:json.geoplugin_latitude,
  234. longitude:json.geoplugin_longitude,
  235. ip:json.geoplugin_request
  236. };
  237. initGeo(json);
  238. setCookie("geo",json,1);
  239. genSun();
  240. syso("Geo data fetched!");
  241. fetchingGeoScript.parentNode.removeChild(fetchingGeoScript);
  242. delete fetchingGeoScript;
  243. updateSun();
  244. }
  245. function fetchGeo(){
  246. syso("Fetching geo data...");
  247.  
  248. fetchingGeoScript=document.createElement("script");
  249. fetchingGeoScript.src="http://www.geoplugin.net/json.gp?jsoncallback=fetchGeoReceve";
  250.  
  251. document.body.appendChild(fetchingGeoScript);
  252. }
  253. </script>
  254. <!-- <script type="text/javascript" src="http://www.geoplugin.net/json.gp?jsoncallback=initGeo"></script> -->
  255. <script type="text/javascript" id="openTyping">
  256. helloText=["Hello, ","Welcome..."];
  257. wops="abcdefghijklmnopqrstuvwxyz";
  258. mistake=false;
  259. typed="";
  260. function w(){
  261. return helloText[0];
  262. }
  263. function type(){
  264. if(devMode){
  265. msg.innerHTML=helloText.join("<br>");
  266. startTim=1;
  267. return;
  268. }
  269. setTimeout(function(){
  270. if(w().length==0){
  271. helloText.shift();
  272. if(helloText.length>0){
  273. typed+="<br>";
  274. msg.innerHTML=typed;
  275. type();
  276. }else{
  277. msg.innerHTML=typed;
  278. type=helloText=wops=typed=undefined;
  279. startTim=time();
  280. }
  281. return;
  282. }
  283. if(mistake){
  284. mistake=false;
  285. typed=typed.substring(0,typed.length-1);
  286. }
  287. else if(Math.random()>0.7){
  288. mistake=true;
  289. var correctId=wops.indexOf(w().charAt(0).toLowerCase());
  290. if(correctId==-1)mistake=false;
  291. else{
  292. var misId;
  293. do{misId=Math.round(Math.random()*wops.length);}while(correctId==misId);
  294. typed+=wops.charAt(misId);
  295. }
  296. }
  297. if(!mistake){
  298. typed+=w().charAt(0);
  299. helloText[0]=w().substring(1);
  300. }
  301. msg.innerHTML=typed;
  302. type();
  303. },Math.round(20+(mistake?0:Math.random()*50)));
  304. }
  305. </script>
  306. <script type="text/javascript" id="tree">
  307. maxPar=0;
  308. function Vec2(x=0,y=0){
  309. this.x=x;
  310. this.y=y;
  311. };
  312.  
  313. sqrtOf2=Math.sqrt(2);
  314.  
  315. function Segment(parent,pos,length,width){
  316. this.parent=parent;
  317. this.pos=pos;
  318. this.length=length;
  319. this.width=width;
  320. this.topWidth=width;
  321. this.child=[];
  322. this.sp=0;
  323. this.shock=0;
  324. this.parentCount=this.parent.parentCount+1;
  325. this.anglePref=0;
  326.  
  327. this.org=function(){
  328. var mul=(1/(this.width*this.width))*50;
  329. if(mul>1.5)mul=Math.sqrt(mul);
  330. this.origigi=(1-Math.random()*2)*mul+this.anglePref;
  331. this.origigi=(this.origigi+this.parent.origigi*2)/3;
  332. this.shock=1.5;
  333. }
  334. this.org();
  335. this.angle=Math.PI+this.origigi;
  336. this.rand=Math.random();
  337. this.topL=new Vec2();
  338. this.topR=new Vec2();
  339.  
  340.  
  341. if(this.width>2){
  342. this.childPos=[];
  343. for(var i=0,j=1+Math.round(Math.random()*2);i<j;i++){
  344. var sg=new Segment(this,new Vec2(0,0),this.length*(0.67+Math.random()*0.2),width*(0.4+Math.random()*0.5));
  345. maxPar=Math.max(maxPar,sg.parentCount);
  346. this.child.push(sg);
  347. }
  348. if(this.width>4){
  349. while(Math.random()>0.6){
  350. var sg=new Segment(this,new Vec2(0,0),this.length*(0.2+Math.random()*0.2),1+Math.random()+0.9);
  351. maxPar=Math.max(maxPar,sg.parentCount);
  352. this.child.push(sg);
  353. }
  354. }
  355. var chl=this.child.length;
  356.  
  357. var total=0;
  358. for(var i=0;i<chl;i++)total+=this.child[i].width;
  359. this.topWidth=Math.min(this.topWidth,total);
  360.  
  361. var xD=0;
  362. for(var i=0;i<chl;i++){
  363. var ch=this.child[i];
  364. ch.anglePref=chl<2?0:((i-(chl-1)/2)/(chl-1))/ch.width*2;
  365. ch.org();
  366. ch.angle=Math.PI+ch.origigi;
  367.  
  368. xD+=ch.width;
  369.  
  370. var start=ch.width/2,end=this.topWidth-ch.width/2;
  371.  
  372. if(i==0)this.childPos[i]=start;
  373. else if(i==chl-1)this.childPos[i]=end;
  374. else{
  375. var percent=(xD-ch.width/2)/total;
  376.  
  377. this.childPos[i]=Math.max(start, Math.min(this.topWidth*percent, end));
  378. }
  379. this.childPos[i]-=this.topWidth/2;
  380. }
  381.  
  382. }
  383.  
  384. this.update=function(){
  385. if(sec%10==0&&Math.random()>0.99){
  386. this.org();
  387. if(Math.random()>0.98)this.drop();
  388. }
  389.  
  390. var lower=100+this.width*10;
  391. lower+=(1-sunBrightness)*100;
  392.  
  393. this.angle+=nois.noise(this.rand,tim/20000)/lower;
  394. this.angle=(this.angle*99+Math.PI+this.origigi)/100;
  395.  
  396. //this.angle=Math.PI+this.origigi*10;
  397.  
  398. this.s90=Math.sin(this.angle+Math.PI/2);
  399. this.cs90=Math.cos(this.angle+Math.PI/2);
  400. var s=Math.sin(this.angle),cs=Math.cos(this.angle);
  401.  
  402. this.endX=this.pos.x+s*this.actualLeng;
  403. this.endY=this.pos.y+cs*this.actualLeng;
  404.  
  405. this.actualLeng=Math.min(1,(grow-1)/this.parentCount);
  406. if(this.actualLeng<1)this.actualLeng=UnitBezier.calcCubicBezier(.73,.01,.5,.99,this.actualLeng);
  407.  
  408. if(this.width<2)this.shock*=0.99;
  409.  
  410. if(this.child.length>0){
  411. for(var i=0;i<this.child.length;i++){
  412. var ch=this.child[i];
  413.  
  414. // ch.pos.x=this.endX;
  415. // ch.pos.y=this.endY;
  416. ch.pos.x=this.endX+this. s90*this.childPos[i];
  417. ch.pos.y=this.endY+this.cs90*this.childPos[i];
  418.  
  419. // var difAng=Math.abs(this.angle-ch.angle);
  420.  
  421. // ch.pos.x-=ch.width*cs*Math.sin(difAng)/2;
  422. // ch.pos.y-=ch.width*s*Math.cos(difAng)/2;
  423. ch.update();
  424.  
  425. }
  426. }
  427. }
  428. this.draw=function(ctx){
  429. if(this.actualLeng<=0)return;
  430.  
  431. var cubeS=0;
  432. if(this.width<2){
  433. cubeS=Math.max(this.actualLeng-0.8,0)*5;
  434.  
  435. }
  436.  
  437. this.actualLeng*=this.length;
  438.  
  439. ctx.addRad(this.endX,this.endY,20);
  440.  
  441.  
  442.  
  443. // o1 o4
  444. // o2 o3
  445.  
  446. ctx.fillStyle="rgb("+trunkCol+","+trunkCol+","+trunkCol+")";
  447.  
  448. this.topL.x=this.endX+this. s90*this.topWidth/2;
  449. this.topL.y=this.endY+this.cs90*this.topWidth/2;
  450. this.topR.x=this.endX-this. s90*this.topWidth/2;
  451. this.topR.y=this.endY-this.cs90*this.topWidth/2;
  452.  
  453. var
  454. blx=this.pos.x+this.s90*this.width/2,bly=this.pos.y+this.cs90*this.width/2,
  455. brx=this.pos.x-this.s90*this.width/2,bry=this.pos.y-this.cs90*this.width/2;
  456.  
  457. fillQuad(ctx,
  458. this.topL.x,this.topL.y,
  459. blx,bly,
  460. brx,bry,
  461. this.topR.x,this.topR.y
  462. );
  463. if(this.parentCount>1){
  464. //ctx.fillStyle="rgba("+trunkCol+","+trunkCol+","+trunkCol+",0.2)";
  465. fillQuad(ctx,
  466. blx,bly-1,
  467. this.parent.topL.x,this.parent.topL.y+1,
  468. this.parent.topR.x,this.parent.topR.y+1,
  469. brx,bry-1
  470. );
  471. }
  472.  
  473. // ctx.beginPath();
  474. // ctx.moveTo(this.pos.x,this.pos.y);
  475. // ctx.lineTo(endX,endY);
  476. // ctx.stroke();
  477.  
  478. if(cubeS>0&&this.shock>-1){
  479. var lol=nois.noise(this.rand,tim/2000);
  480.  
  481. cubeS*=(0.5+(lol/2+1)*0.5)*Math.max(0,1+this.shock);
  482.  
  483. cubeS*=12;
  484. var r=lol<0?-lol:0,b=Math.max(0,lol);
  485.  
  486.  
  487. ctx.fillStyle="rgba("+Math.round(r*120+50)+",50,"+Math.round(b*120+50)+",0.4)";
  488. ctx.save();
  489. ctx.translate(this.endX,this.endY);
  490.  
  491. ctx.rotate(lol/3+Math.sin(this.shock*5)/2);
  492.  
  493. ctx.fillRect(-cubeS/2,-cubeS/2, cubeS,cubeS);
  494. var glow=((this.shock-0.2)/0.8)/2;
  495. glow*=1-sunBrightness;
  496. if(glow>0){
  497. glow-=(nois.noise(this.rand,tim/100)/2+0.5)*0.03;
  498. }
  499. if(glow>0){
  500. glintData.push(this.endX);
  501. glintData.push(this.endY);
  502. glintData.push(glow);
  503. glintData.push(r);
  504. }else ctx.addRad(this.endX,this.endY,cubeS*sqrtOf2);
  505. ctx.restore();
  506. }
  507.  
  508.  
  509. if(this.child.length>0){
  510. for(var i=0;i<this.child.length;i++){
  511. this.child[i].draw(ctx);
  512. }
  513. }
  514. }
  515.  
  516. this.getClicks=function(arr){
  517. if(this.width<2)arr.push(this);
  518.  
  519. for(var i=0;i<this.child.length;i++)this.child[i].getClicks(arr);
  520. return arr;
  521. }
  522. this.drop=function(){
  523. if(this.shock>=-0.05){
  524.  
  525. var lol=nois.noise(this.rand,tim/2000);
  526.  
  527. spawnParticle(LeafParticle,this.endX,this.endY,lol<0?-lol:0,Math.max(0,lol));
  528. }
  529. this.org();
  530. this.shock=-4;
  531. }
  532. };
  533. rootSeg=new Segment({parentCount:0,origigi:0},new Vec2(300,500),100,20,1);
  534. startTim=0;
  535.  
  536. clickabals=rootSeg.getClicks([]);
  537. function updateGrow(){
  538. grow=Math.min(1,(tim-startTim)/6000);
  539. if(grow==1){
  540. grow=maxPar;
  541. updateGrow=function(){};
  542. }
  543. grow*=grow;
  544. grow*=maxPar;
  545. }
  546. function drawTree(ctx){
  547. ctx.clear();
  548. if(startTim==0)return;
  549. updateGrow();
  550.  
  551. sec=Math.round(tim/1000);
  552. if(grow>1){
  553. ctx.fillStyle="rgb("+trunkCol+","+trunkCol+","+trunkCol+")";
  554. rootSeg.update();
  555. rootSeg.draw(ctx);
  556.  
  557. if(trunkCol!=terrainCol){
  558. ctx.fillStyle="rgb("+terrainCol+","+terrainCol+","+terrainCol+")";
  559.  
  560. var mul=20/groundPartWidth;
  561. var p1=heightMap[heightMap.length-3];
  562. var p2=heightMap[heightMap.length-2];
  563. var p3=heightMap[heightMap.length-1];
  564.  
  565. var h1=(p2-p3)*tre.height*mul;
  566. var h2=(p2-p1)*tre.height*mul;
  567.  
  568. fillQuad(ctx,
  569. rootSeg.pos.x ,rootSeg.pos.y-10,
  570. rootSeg.pos.x ,rootSeg.pos.y+10,
  571. rootSeg.pos.x+20,rootSeg.pos.y+10,
  572. rootSeg.pos.x+20,rootSeg.pos.y-10-h1
  573. );
  574. fillQuad(ctx,
  575. rootSeg.pos.x+1 ,rootSeg.pos.y-10,
  576. rootSeg.pos.x+1 ,rootSeg.pos.y+10,
  577. rootSeg.pos.x-20,rootSeg.pos.y+10,
  578. rootSeg.pos.x-20,rootSeg.pos.y-10-h2
  579. );
  580. }
  581.  
  582. ctx.addRad(rootSeg.pos.x,rootSeg.pos.y,20);
  583.  
  584. }else{
  585. ctx.font="50px Comfortaa";
  586. ctx.fillStyle=document.body.style.color;
  587. var msgBound=msg.getBoundingClientRect();
  588.  
  589. var x1=msgBound.right;
  590. var y1=msgBound.bottom;
  591.  
  592. var x2=rootSeg.pos.x;
  593. var y2=rootSeg.pos.y;
  594.  
  595. var grow0=grow*1.2;
  596. if(grow0>1)return;
  597. var x=x1+(x2-x1)*grow0,y=y1+(y2-y1)*grow0*grow0-12;
  598.  
  599. ctx.addRad(x,y,10);
  600.  
  601. ctx.fillText(".",x,y);
  602. }
  603.  
  604. }
  605. function clck(e){
  606. updateGrow();
  607. if(grow<3)return;
  608.  
  609. var clX=e.clientX,clY=e.clientY;
  610.  
  611. var closest=69,minDistance=0xFFFFFFFF,posX=-1,posY=-1;
  612.  
  613. for(var i=0;i<clickabals.length;i++){
  614. var cl=clickabals[i];
  615. if(cl.width>=2)continue;
  616.  
  617. var difX=cl.endX-clX;
  618. var difY=cl.endY-clY;
  619.  
  620. var dist=Math.sqrt(difX*difX+difY*difY);
  621. if(minDistance>dist){
  622. minDistance=dist;
  623. closest=cl;
  624. posX=cl.endX;
  625. posY=cl.endY;
  626. }
  627. }
  628.  
  629. if(closest!=69&&minDistance<20){
  630. closest.drop();
  631. }
  632.  
  633.  
  634. }
  635. </script>
  636.  
  637. <script type="text/javascript" id="particles">
  638.  
  639. glintData=[];
  640. particles=[];
  641. particlePool={
  642. pool:{},
  643. get:function(type, args){
  644. var arr=this.pool[type.getId()];
  645.  
  646. if(typeof arr=="undefined"||arr.length==0){
  647. var t=new type();
  648. t.init(args);
  649. return t;
  650. }
  651. var t=arr.shift();
  652. t.init(args);
  653. return t;
  654. },
  655. put:function(dead){
  656. dead=dead[0];
  657. var type=dead.constructor;
  658. var arr=this.pool[type.getId()];
  659.  
  660. if(typeof this.pool[type.getId()]=="undefined")this.pool[type.getId()]=[];
  661. this.pool[type.getId()].push(dead);
  662. }
  663. };
  664.  
  665. function LeafParticle(){
  666. this.pos=new Vec2();
  667. this.init=function(args){
  668. this.pos.x=args[0];
  669. this.pos.y=args[1];
  670. this.r=args[2];
  671. this.b=args[3];
  672. this.rand=Math.random()*Math.PI;
  673. this.cubeS=12;
  674. this.alpha=1;
  675. }
  676. this.update=function(){
  677. var xWobl=nois.noise(this.rand,tim/2000);
  678. this.pos.y+=Math.random()*0.7-xWobl*xWobl/1.5;
  679. this.pos.x+=wind*(1.05-Math.random()*0.05)+xWobl*xWobl;
  680.  
  681. if(this.pos.x<=0||this.pos.x>tre.width)return true;
  682.  
  683. var h=getTerH(this.pos.x);
  684. var w=this.cubeS*sqrtOf2;
  685. h+=w/2;
  686. h-=this.pos.y;
  687. this.alpha=Math.min(1,(h/w)/2);
  688. return h<0;
  689. };
  690. this.draw=function(ctx){
  691. if(this.pos.x==0)return;
  692. ctx.fillStyle="rgba("+Math.round(this.r*120+50)+",50,"+Math.round(this.b*120+50)+",0.4)";
  693. ctx.globalAlpha=this.alpha;
  694. ctx.save();
  695. ctx.translate(this.pos.x,this.pos.y);
  696. ctx.rotate((tim/1000+this.rand)%Math.PI*2);
  697. ctx.fillRect(-this.cubeS/2,-this.cubeS/2, this.cubeS,this.cubeS);
  698. ctx.restore();
  699.  
  700. glintData.push(this.pos.x);
  701. glintData.push(this.pos.y);
  702. glintData.push(this.alpha*(0.2+Math.random()*0.1));
  703. glintData.push(this.r/2);
  704. };
  705. }
  706.  
  707. function AmbientParticle(){
  708. this.pos=new Vec2();
  709. this.init=function(args){
  710. this.pos.x=args[0];
  711. this.pos.y=args[1];
  712. this.start=time();
  713. this.frame=0;
  714. this.rand=Math.random()*Math.PI*2;
  715. }
  716. this.update=function(){
  717. this.frame=Math.floor((time()-this.start)*20/1000);
  718. return this.frame>15;
  719. };
  720. this.draw=function(ctx){
  721. if(this.pos.x==0)return;
  722.  
  723. var x=Math.floor(this.frame/4),y=Math.floor(this.frame%4);
  724. ctx.globalAlpha=0.2+Math.random()*0.8;
  725. ctx.save();
  726. ctx.translate(this.pos.x,this.pos.y);
  727. ctx.rotate(this.rand);
  728. ctx.translate(-32,-32)
  729. ctx.drawImage(ambientParticle,x*64,y*64,64,64,0,0,64,64);
  730. ctx.restore();
  731. ctx.addRad(this.pos.x,this.pos.y,32*sqrtOf2);
  732. ctx.globalAlpha=1;
  733. };
  734. }
  735. LeafParticle.getId=function(){return 0;};
  736. AmbientParticle.getId=function(){return 1;};
  737.  
  738. function spawnParticle(type, ...args){
  739. particles.push(particlePool.get(type,args));
  740. }
  741.  
  742. function drawPs(ctx){
  743. for(var i=0;i<particles.length;i++){
  744. var p=particles[i];
  745. if(p.update()){
  746. particlePool.put(particles.splice(i, 1))
  747. i--;
  748. }
  749. else p.draw(ctx);
  750. }
  751. if(glintData.length>1/256){
  752. while(glintData.length>0){
  753. ctx.globalAlpha=glintData[2];
  754. ctx.globalCompositeOperation="screen";
  755.  
  756. var glintImg=glintImgs.get(glintData[3]);
  757.  
  758.  
  759. var x=glintData[0];
  760. var y=glintData[1];
  761. var imgH=glintImg.naturalHeight/2,imgW=glintImg.naturalWidth/2;
  762. ctx.addRect(x-imgW,y-imgH,x+imgW,y+imgH);
  763.  
  764. ctx.drawImage(glintImg,x-imgW,y-imgH,imgW*2,imgH*2);
  765.  
  766. glintData.splice(0,4);
  767. }
  768. ctx.globalAlpha=1;
  769. ctx.globalCompositeOperation="source-over";
  770. }
  771. }
  772.  
  773. </script>
  774.  
  775.  
  776. <script type="text/javascript" id="main">
  777.  
  778.  
  779. nois=new SimplexNoise(Math);
  780. heightMap=[];
  781. heightMap.length=8;
  782. for(var i=0;i<heightMap.length;i++){
  783. heightMap[i]=1-(Math.random()*0.08+0.25-((heightMap.length-i)/heightMap.length)*0.1);
  784. }
  785.  
  786. function filterImage(filter, image){
  787. if(typeof imgDraw=="undefined"){
  788. imgDraw = document.createElement('canvas');
  789. imgDraw.ctx=imgDraw.getContext("2d");
  790. }
  791.  
  792. imgDraw.width = image.width;
  793. imgDraw.height = image.height;
  794.  
  795. imgDraw.ctx.drawImage(image,0,0);
  796.  
  797. imgDraw.ctx.putImageData(filter(imgDraw.ctx.getImageData(0,0,imgDraw.width,imgDraw.height)), 0, 0);
  798. return imgDraw.toDataURL('image/png');
  799. };
  800.  
  801. function lod(){
  802. devMode=window.location.href.endsWith("?dev");
  803. local=window.location.href.startsWith("file:///");
  804.  
  805. msg=document.querySelector("msg");
  806. bkg=document.querySelector("#bkg");
  807. tre=document.querySelector("#tre");
  808. gitImg=document.querySelector("#gitImg");
  809. signs=document.querySelectorAll(".Sign");
  810. jsStyle=document.querySelector("#jsStyle");
  811.  
  812.  
  813. bkg.ctx=bkg.getContext("2d");
  814. tre.ctx=tre.getContext("2d");
  815. injectClearAreaMaker(tre.ctx);
  816.  
  817. processGlint();
  818. updateSun();
  819. setTimeout(function(){
  820. res();
  821. updateSun();
  822. type();
  823. setInterval(updateSun, 30*1000);
  824. },50)
  825.  
  826.  
  827. requestAnimationFrame(rend);
  828. rend();
  829. res();
  830. }
  831.  
  832.  
  833. function processGlint(){
  834. imgDraw=document.createElement("canvas");
  835. imgDraw.ctx=imgDraw.getContext("2d");
  836.  
  837. glintImg=document.querySelector("#glintImg");
  838. glintImg.parentNode.removeChild(glintImg);
  839.  
  840. glintImg.id="";
  841. glintImg.className="";
  842.  
  843. ambientParticle=document.querySelector("#ambientParticle");
  844. ambientParticle.parentNode.removeChild(ambientParticle);
  845.  
  846. glintImgs={
  847. arr:[],
  848. get:function(r){
  849. return this.arr[Math.round(r*(glintImgs.arr.length-1))];
  850. }
  851. };
  852.  
  853. glintImgs.arr[0]=glintImg;
  854.  
  855. if(!local){
  856. var fine=32;
  857. for(var i=0;i<fine;i++){
  858. abc=i;
  859. glintImgs.arr[i]=document.createElement("img");
  860. glintImgs.arr[i].src=filterImage(function(pixels) {
  861. var d = pixels.data;
  862. var trans=(abc/fine);
  863. for (var i=0; i<d.length; i+=4){
  864. d[i]=50+trans*120;
  865. d[i+2]=50+(1-trans)*120;
  866. }
  867. return pixels;
  868. },glintImg);
  869. }
  870. }
  871.  
  872.  
  873. delete glintImg;
  874. }
  875.  
  876. function res(){
  877. tre.width=tre.clientWidth;
  878. tre.height=tre.clientHeight;
  879.  
  880. bkg.width=bkg.clientWidth;
  881. bkg.height=bkg.clientHeight;
  882.  
  883. groundPartWidth=bkg.width-bkg.width/(heightMap.length-1)*(heightMap.length-2);
  884.  
  885. rootSeg.pos.x=bkg.width-groundPartWidth;
  886. rootSeg.pos.y=bkg.height*heightMap[heightMap.length-2]+10;
  887.  
  888. bkg.width=bkg.clientWidth;
  889. bkg.height=bkg.clientHeight;
  890.  
  891. var ctx=bkg.ctx,trc="rgb("+terrainCol+","+terrainCol+","+terrainCol+")";
  892. ctx.fillStyle=trc;
  893.  
  894. var w=bkg.width/(heightMap.length-1);
  895. for(var i=0;i<heightMap.length-1;i++){
  896. ctx.beginPath();
  897. ctx.moveTo( i *w-1,bkg.height*heightMap[i]);
  898. ctx.lineTo( i *w-1,bkg.height);
  899. ctx.lineTo((i+1)*w ,bkg.height);
  900. ctx.lineTo((i+1)*w ,bkg.height*heightMap[i+1]);
  901. ctx.fill();
  902. }
  903.  
  904. for(var i=0;i<signs.length;i++){
  905. var s=signs[i];
  906. var b=s.getBoundingClientRect();
  907. var y=tre.height,mid=(b.left+b.right)/2,midH=getTerH(mid);
  908. y=Math.min(y,getTerH(b.left));
  909. y=Math.min(y,getTerH(b.right));
  910. y=Math.min(y,midH);
  911. y-=b.height+35;
  912. s.style.top=y+"px";
  913.  
  914. b=s.getBoundingClientRect();
  915.  
  916. ctx.fillStyle=trc;
  917. ctx.beginPath();
  918. ctx.arc((b.left+b.right)/2, midH, 10, 0, 2 * Math.PI, false);
  919. ctx.fill();
  920.  
  921. ctx.fillStyle="rgba(120,120,120,0.1)";
  922.  
  923. ctx.beginPath();
  924. ctx.moveTo(mid,midH);
  925. ctx.lineTo(b.left,b.bottom);
  926. ctx.lineTo(b.right,b.bottom);
  927. ctx.fill();
  928. if(typeof ctx.createLinearGradient!="undefined"){
  929. var grd=ctx.createLinearGradient(0,midH,0,b.bottom);
  930. grd.addColorStop(0.1,trc);
  931. grd.addColorStop(0.8,"transparent");
  932.  
  933. ctx.strokeStyle=grd;
  934. ctx.beginPath();
  935. ctx.moveTo(mid,midH);
  936. ctx.lineTo(b.left,b.bottom);
  937. ctx.moveTo(mid,midH);
  938. ctx.lineTo(b.right,b.bottom);
  939. ctx.stroke();
  940. }
  941. }
  942. }
  943. function getTerH(x){
  944. var index=x/groundPartWidth;
  945. var partId=Math.floor(index);
  946.  
  947. index-=partId;
  948. var p1=heightMap[partId],p2=heightMap[partId+1];
  949. return (p1+(p2-p1)*index)*tre.height;
  950. }
  951. function rend(){
  952. tim=time();
  953.  
  954. if(Math.random()>0.995){
  955. var x=Math.random()*tre.width;
  956. spawnParticle(AmbientParticle,x,Math.random()*getTerH(x));
  957. }
  958.  
  959. drawTree(tre.ctx);
  960. wind=Math.sin(rootSeg.angle);
  961. drawPs(tre.ctx);
  962.  
  963.  
  964. //ctx.drawImage(gitImg,100,100,200,200);
  965.  
  966. requestAnimationFrame(rend);
  967. }
  968. </script>
  969. </body>
  970. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!