Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Antraste</title>
- <style>
- body {
- margin: 0px;
- }
- </style>
- </head>
- <body>
- <canvas id="cvs" width="500" height="500"></canvas>
- <script>
- var d = document;
- var c = d.getElementById("cvs");
- var ctx = c.getContext("2d");
- var mx = 0; // Mouse X
- var my = 0; // Mouse Y
- var stalcius = [];
- var i=0;
- var kiekis = 1000;
- d.addEventListener("mousemove", mmove);
- function mmove(e){
- mx = e.clientX;
- my = e.clientY;
- }
- function dist(x1,y1,x2,y2){
- var a = x2 - x1;
- var b = y2 - y1;
- var c = Math.sqrt(a*a + b*b);
- return c;
- }
- function limit(value, lMin, lMax){
- //var min = Math.min(value, lMax);
- // -15 10
- //var max = Math.max(min, lMin);
- // -15 0
- //if(value > lMax) { value = lMax }
- //if(value < lMin) { value = lMin }
- return Math.max(Math.min(value, lMax), lMin);
- }
- var Ball = function(x,y){
- this.x = x;
- this.y = y;
- this.angle = 0;
- this.draw = function(){
- this.angle = Math.atan2(my-this.y, mx - this.x);
- var distance = dist(this.x,this.y,mx,my);
- var spalva = Math.round(distance);
- var sviesa = Math.round(100-limit(distance,0,100));
- ctx.save();
- ctx.translate(this.x,this.y);
- ctx.rotate(this.angle);
- ctx.beginPath();
- ctx.fillStyle = "hsl("+spalva+",100%,"+sviesa+"%)";
- // "hsl(360, 100%, 100%)"
- ctx.lineWidth = 0.5;
- ctx.arc(0,0,dist(this.x,this.y,mx,my)/20+5,0,Math.PI*2);
- ctx.lineTo(0,0);
- ctx.fill();
- ctx.stroke();
- ctx.restore();
- }
- }
- function clr(){
- ctx.clearRect(0,0,c.width,c.height);
- }
- function frame(){ // Kadras
- calc();
- render();
- requestAnimationFrame(frame);
- }
- function calc(){ // Skaiciavimas
- }
- function render(){ // Piesimas ekrane
- clr();
- ctx.fillRect(0,0,c.width,c.height);
- bumbulis.draw();
- for(i=0;i<stalcius.length;i++){
- stalcius[i].draw();
- }
- }
- var bumbulis = new Ball(100,100);
- for(i=0;i < kiekis;i++){
- stalcius[i] = new Ball(Math.random()*c.width, Math.random()*c.height);
- }
- frame();
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement