3dstf0x00

sdstf0x00

by Eshy Lavi

HTML

<body>
<button id="b" style="position:fixed;bottom:41px;left:80%;">
fill
</button>
<button id="d" style="position:fixed;bottom:41px;left:68%;">
looser
</button>
<button id="e" style="position:fixed;bottom:41px;left:53%;">
faster
</button>
<button id="d2" style="position:fixed;bottom:11px;left:68%;">
tighter
</button>
<button id="e2" style="position:fixed;bottom:11px;left:53%;">
slower
</button>
<div style="color:white;position:fixed;left:71.4%;top:3.6%;">
<p class="ps author" id='p1'>
</p>
<p class="ps es" id='p2'>
</p>
<p class="ps hy" id='p3'>
</p>
<p class="ps lavi" id="p4">
By Eshy Lavi
</p>

</div>
<canvas id="c" width="761" height="451" style="border:4px solid white;"></canvas>

</body>

CSS

body{background-color:black;}
.ps{margin:0;padding:0;}button{display:none;}p{display:none;}

JavaScript

var c   = document.getElementById('c');
var ctx = c.getContext('2d');
var author = "Eshy Lavi try emailing me at the g."
var _r=293;var _b=228;var _g=213;
var _dg=2;var _dr=1;var _db=3;
var _a=1;
var xs=[];
var ys=[];
var x3s=[];
var y3s=[];
var z3s=[];
var odiss=[];
var diss=[];
var odis;
var N=14;
var theta=0;
var rate=0.4;
var delta=14;
var c_w=document.getElementById('c').width;
var c_h=document.getElementById('c').height;
var maxrad=Math.floor(c_w/2)
var radnow;
var xzero=Math.floor(c_w/2);
var yzero=Math.floor(c_h/2);
var dnf=true;
var oxs=[];var oys=[];
var rnr=0;var nrn=0;var aqa=0;
var fillitv;
var lineWidth=13;
var maxLW=12;
var minLW=3;


function init(){

 for (var i=0;i<N;i++){
  radnow=/*Math.random()**/maxrad/2;
  theta=(i*360/N);  xs.push(xzero+radnow*Math.cos(theta/57.3));
  ys.push(yzero-radnow*Math.sin(theta/57.3)); x3s.push(xzero+radnow*Math.cos(theta/57.3));
  y3s.push(yzero-radnow*Math.sin(theta/57.3));
z3s.push(2*i);
}
 
 window.requestAnimationFrame(draw);
}

var dLW=0.25;
var gradient;

function draw(){
 ctx.fillStyle='rgba(0,0,0,1)';
 ctx.fillRect(0,0,761,451);
 ctx.fillStyle="rgba("+_r+","+_g+","+_b+","+_a+")";
 ctx.lineWidth=6;
 ctx.strokeStyle="rgba("+_r+","+_g+","+_b+","+_a+")";
 gradient=ctx.createLinearGradient(0,0,c_w,c_h);  
 gradient.addColorStop("0","rgba("+_b+","+_g+","+_r+",1");
//gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","rgba("+_r+","+_g+","+_b+","+"1");

// Fill with gradient
ctx.strokeStyle=gradient;

 ctx.beginPath();
 //ctx.moveTo(xs[0],ys[0]);
 ctx.globalCompositeOperation='source-under';
 for (nrn=0;nrn<N;nrn++){
  
  for (rnr=0;rnr<N;rnr++){
   ctx.shadowBlur = 10;
   ctx.shadowColor = "rgba("+_r+","+_g+","+_b+","+_a+")";
   
   ctx.lineTo(Math.floor(xs[rnr]),Math.floor(ys[rnr]));


ctx.moveTo(Math.floor(xs[nrn]),Math.floor(ys[nrn]));
  }
 }
  ctx.stroke();


 
 
 _r=_r+_dr;
 _g=_g+_dg;
 _b=_b+_db;

 if (_r<1||_r>255){_dr*=-1; _r=_r+_dr;}
 if (_g<1||_g>255){_dg*=-1; _g=_g+_dg;}
 if...