Advertisement
cloudtuts

Untitled

May 17th, 2022
578
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ;(function(){
  2.  
  3. const randomTime = random(1, 2);
  4.  
  5.     class DefineElement{
  6.         constructor(x, y){
  7.             this.x=x;
  8.             this.y=y;
  9.         }
  10.     }
  11.  
  12.     class Floating{
  13.  
  14.         constructor(canvasElement){ // no loop
  15.             this.canvasElement=canvasElement;
  16.             this.bubbles=[];
  17.             this.animate            =this.animate.bind(this);
  18.             this.resizeCanvas   =this.resizeCanvas.bind(this);
  19.             this.start              =this.start.bind(this);
  20.             this.setCanvasDimensions();
  21.             this.context=this.canvasElement.getContext('2d');
  22.             this.start();
  23.         }
  24.         createData(){
  25.             for(let i=0; i<length; i++){
  26.                 this.bubbles[i]=new DefineElement(
  27.                     el[i].position.x,
  28.                     el[i].position.y,
  29.                 );
  30.             }
  31.         }
  32.         draw(){
  33.             if(!(this.context instanceof CanvasRenderingContext2D))return;
  34.             this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
  35.             for(let i=0; i<length; i++){
  36.                 this.context.drawImage(image[i], 0, 0, image[i].width, image[i].height, this.bubbles[i].x, this.bubbles[i].y, el[i].dimension, el[i].dimension);
  37.             }
  38.         }
  39.         animate(){ // loop
  40.             this.animationTimerId=requestAnimationFrame(this.animate);
  41.             this.update();
  42.             this.draw();
  43.         }
  44.         resizeCanvas(){
  45.             window.cancelAnimationFrame(this.animationTimerId);
  46.             this.setCanvasDimensions();
  47.             this.restart();
  48.         }
  49.         restart(){
  50.             if(this.waitTimerId)clearTimeout(this.waitTimerId);
  51.             this.waitTimerId=setTimeout(this.start, 1000);
  52.         }
  53.         start(){ // no loop
  54.             this.createData();
  55.             //this.draw();
  56.             this.animate();
  57.         }
  58.         setCanvasDimensions(){
  59.             if(!this.canvasElement)return;
  60.             this.canvasWidth=this.canvasElement.width=canvas.parentNode.offsetWidth;
  61.             this.canvasHeight=this.canvasElement.height=canvas.parentNode.offsetHeight;
  62.         }
  63.  
  64.         update(){
  65.  
  66.             for(let i=0; i<length; i++){
  67.  
  68.                 if(this.bubbles[0].x<=el[i].available.x[0]||this.bubbles[0].x>=el[i].available.x[1])el[i].direction.x=0-el[i].direction.x;
  69.                 if(this.bubbles[0].y<=el[i].available.y[0]||this.bubbles[0].y>=el[i].available.y[1])el[i].direction.y=0-el[i].direction.y;
  70.  
  71.                 this.bubbles[i].x+=randomTime(el[i].direction.x)/randomIntFromInterval(5, 10);
  72.                 this.bubbles[i].y+=randomTime(el[i].direction.y)/randomIntFromInterval(5, 10);
  73.  
  74.             }
  75.  
  76.             span.innerText='Dimension: '+~~el[0].dimension+'\r\nbubble.center.x: '+~~el[0].center.x+'\r\nbubble.x: '+~~this.bubbles[0].x+'\r\nAvailable.x[0]: '+~~el[0].available.x[0]+'\r\nAvailable.x[1]: '+~~el[0].available.x[1];
  77.  
  78.         }
  79.     }
  80.  
  81. function randomIntFromInterval(min, max){ // min and max included
  82.   return Math.floor(Math.random()*(max-min+1)+min);
  83. }
  84.  
  85. function random(min, max) {
  86.   const delta = max - min;
  87.   return (direction = 1) => (min + delta * Math.random()) * direction;
  88. }
  89.  
  90.  
  91.     const span=document.getElementById('canvas-console');
  92.     const canvas=document.getElementById('float-bubbles');
  93.     const el=[];
  94.     const image=[];
  95.     let length=0;
  96.  
  97.     window.onload=function(){
  98.  
  99.         el[0]={
  100.             src:'http://192.168.0.109:19990/_files/PhotoWall01.png',
  101.         };
  102.         /*
  103.         el[1]={
  104.             src:'http://192.168.0.109:19990/_files/PhotoWall02.png',
  105.         };
  106.         el[2]={
  107.             src:'http://192.168.0.109:19990/_files/PhotoWall03.png',
  108.         };
  109.         el[3]={
  110.             src:'http://192.168.0.109:19990/_files/PhotoWall04.png',
  111.         };
  112.         */
  113.  
  114.         length=el.length;
  115.         let loaded=0;
  116.  
  117.         for(let i=0; i<length; i++){
  118.  
  119.             el[i].dimension=randomIntFromInterval(320, 360);
  120.             el[i].direction={x:1, y:-1};
  121.  
  122.             el[i].position={
  123.                 x:randomIntFromInterval(0, canvas.offsetWidth-el[i].dimension),
  124.                 y:randomIntFromInterval(0, canvas.offsetHeight-el[i].dimension),
  125.             };
  126.             el[i].center={
  127.                 x:el[i].position.x+(el[i].dimension/2),
  128.                 y:el[i].position.y+(el[i].dimension/2),
  129.             };
  130.             el[i].available={
  131.                 x:[el[i].center.x-(el[i].dimension), el[i].center.x+(el[i].dimension/3)],
  132.                 y:[el[i].center.y-(el[i].dimension), el[i].center.y+(el[i].dimension/3)],
  133.             };
  134.  
  135.             image[i]=document.createElement('img');
  136.             image[i].src=el[i].src;
  137.  
  138.             console.log(image[i]);
  139.             console.log(el[i]);
  140.  
  141.             image[i].onload=()=>{
  142.                 loaded++;
  143.                 if(loaded==length){
  144.                     new Floating(canvas);
  145.                 }
  146.             }
  147.         }
  148.     }
  149.  
  150.  
  151. })();
Advertisement
RAW Paste Data Copied
Advertisement