Advertisement
Guest User

Untitled

a guest
Dec 14th, 2017
56
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.36 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Antraste</title>
  6.         <style>
  7.             body {
  8.                 margin: 0px;
  9.             }
  10.         </style>
  11.     </head>
  12.     <body>
  13.         <canvas id="cvs" width="500" height="500"></canvas>
  14.         <script>
  15.             var d = document;
  16.             var c = d.getElementById("cvs");
  17.             var ctx = c.getContext("2d");
  18.             var mx = 0; // Mouse X
  19.             var my = 0; // Mouse Y
  20.             var stalcius = [];
  21.             var i=0;
  22.             var kiekis = 1000;
  23.            
  24.             d.addEventListener("mousemove", mmove);
  25.            
  26.             function mmove(e){
  27.                 mx = e.clientX;
  28.                 my = e.clientY;
  29.             }
  30.            
  31.             function dist(x1,y1,x2,y2){
  32.                 var a = x2 - x1;
  33.                 var b = y2 - y1;
  34.                 var c = Math.sqrt(a*a + b*b);
  35.                 return c;
  36.             }
  37.            
  38.             function limit(value, lMin, lMax){
  39.                 //var min = Math.min(value, lMax);
  40.                 //                  -15     10
  41.                 //var max = Math.max(min, lMin);
  42.                 //                  -15    0
  43.                 //if(value > lMax) { value = lMax }
  44.                 //if(value < lMin) { value = lMin }
  45.                return Math.max(Math.min(value, lMax), lMin);
  46.            }
  47.            
  48.            var Ball = function(x,y){
  49.                this.x = x;
  50.                this.y = y;
  51.                this.angle = 0;
  52.                
  53.                this.draw = function(){
  54.                    this.angle = Math.atan2(my-this.y, mx - this.x);
  55.                    var distance = dist(this.x,this.y,mx,my);
  56.                    var spalva = Math.round(distance);
  57.                    var sviesa = Math.round(100-limit(distance,0,100));
  58.                    ctx.save();
  59.                    ctx.translate(this.x,this.y);
  60.                    ctx.rotate(this.angle);
  61.                    ctx.beginPath();
  62.                    ctx.fillStyle = "hsl("+spalva+",100%,"+sviesa+"%)";
  63.                    // "hsl(360, 100%, 100%)"  
  64.                    ctx.lineWidth = 0.5;
  65.                    ctx.arc(0,0,dist(this.x,this.y,mx,my)/20+5,0,Math.PI*2);
  66.                    ctx.lineTo(0,0);
  67.                    ctx.fill();
  68.                    ctx.stroke();
  69.                    ctx.restore();
  70.                }
  71.            }
  72.            
  73.            function clr(){
  74.                ctx.clearRect(0,0,c.width,c.height);
  75.            }
  76.            
  77.            function frame(){ // Kadras
  78.                calc();
  79.                render();
  80.                requestAnimationFrame(frame);
  81.            }
  82.            
  83.            function calc(){ // Skaiciavimas
  84.                
  85.            }
  86.            
  87.            function render(){ // Piesimas ekrane
  88.                clr();
  89.                ctx.fillRect(0,0,c.width,c.height);
  90.                bumbulis.draw();
  91.                for(i=0;i<stalcius.length;i++){
  92.                    stalcius[i].draw();
  93.                }
  94.            }
  95.            
  96.            var bumbulis = new Ball(100,100);
  97.            for(i=0;i < kiekis;i++){
  98.                stalcius[i] = new Ball(Math.random()*c.width, Math.random()*c.height);
  99.            }
  100.            frame();
  101.        </script>
  102.     </body>
  103. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement