Wpis z mikrobloga

Wklejacie do notatnika, zapisujecie jako html, otwieracie na pełnym ekranie i ewentualnie odświeżacie stronę. (ʘʘ)


body{overflow:none;background:linear-gradient(145deg,rgba(137,231,255,.8) 0,rgba(236,135,192,.8) 100%);position:relative;width:100%;margin:0 auto;z-index:-1}body:active:before{position:absolute;color:#fff;font-size:100px;content:"Proxima_Centauri";z-index:100}#centre{z-index:1;right:50%;top:50%;background-color:#000;position:absolute;margin:-50px -50px 0 100px;border-radius:40%;opacity:1;animation-name:centres;animation-duration:8s;animation-iteration-count:infinite}#centre:hover{opacity:0}@keyframes centres{0%{height:90px;width:95px;margin:-50px -50px 0 100px;transform:matrix(1,-.4,0,1,0,0);transform:rotate(0)}25%{height:80px;width:85px;margin:-45px -57px 0 100px;transform:matrix(1,-.2,-.2,1,0,.2);transform:rotate(90deg)}50%{height:85px;width:90px;margin:-40px -50px 0 100px;transform:matrix(1,0,0,1,-.2,.2);transform:rotate(180deg)}75%{height:80px;width:85px;margin:-45px -47px 0 100px;transform:matrix(1,0-.4,-.4,1,-.2,0);transform:rotate(270deg)}100%{height:90px;width:95px;margin:-50px -50px 0 100px;transform:matrix(1,0,-.2,1,0,0);transform:rotate(360deg)}}#canvas{opacity:1;background-color:rgba(0,0,0,1);cursor:wait;display:block;z-index:-100} Canvas is not supported in your browser.window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(b){window.setTimeout(b,1E3/60)}}();var canvas=document.getElementById("canvas"),ctx=canvas.getContext("2d"),cw=window.innerWidth,ch=window.innerHeight,f=[],hue=180,a=1;canvas.width=cw;canvas.height=ch;function random(b,c){return Math.random()*(c-b)+b+Math.PI*Math.random()}function calculateDistance(b,c,d,e){return Math.sqrt(Math.pow(b-d,2)+Math.pow(c-e,2))}function E(b,c,d,e){this.x=b;this.y=c;this.sx=b;this.sy=c;this.tx=d;this.ty=e;this.distanceToTarget=calculateDistance(b,c,d,e);this.distanceTraveled=0;this.coordinates=[];for(this.coordinateCount=4;this.coordinateCount--;)this.coordinates.push([this.x,this.y]);this.angle=Math.atan2(e-c,d-b);this.speed=2;this.acceleration=1.04;this.brightness=random(50,70);this.hue=random(hue-15,hue+15)}E.prototype.update=function(b){this.coordinates.pop();this.coordinates.unshift([this.x,this.y]);this.speed*=this.acceleration;var c=Math.cos(this.angle)*this.speed,d=Math.sin(this.angle)*this.speed;this.distanceTraveled=calculateDistance(this.sx,this.sy,this.x+c,this.y+d);this.distanceTraveled>=this.distanceToTarget+cw/35?f.splice(b,1):(this.x+=c,this.y+=d)};E.prototype.draw=function(){ctx.beginPath();ctx.moveTo(this.coordinates[this.coordinates.length-1][0],this.coordinates[this.coordinates.length-1][1]);ctx.lineTo(this.x,this.y);ctx.strokeStyle="hsl("+this.hue+", 80%, "+this.brightness+"%)";ctx.stroke()};function loop(){requestAnimFrame(loop);hue+=a;if(170==hue||332==hue)a=-a;console.log(hue);ctx.globalCompositeOperation="destination-out";ctx.fillStyle="rgba(0, 0, 0, 0.5)";ctx.fillRect(0,0,cw,ch);ctx.globalCompositeOperation="lighter";for(var b=f.length;b--;)f[b].draw(),f[b].update(b);f.push(new E(cw/2+random(0,cw/160),ch/2+random(-ch/160,ch/80),cw,random(0,ch)));f.push(new E(cw/2-random(0,cw/160),ch/2+random(-ch/160,ch/80),0,random(0,ch)));f.push(new E(cw/2+random(-cw/160,cw/80),ch/2-random(0,ch/160),random(0,cw),0));f.push(new E(cw/2+random(-cw/160,cw/80),ch/2+random(0,ch/160),random(0,cw),ch))}window.onload=loop
#nieprogramowanie #canvas #html #js
  • 4