New wiki-page
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
Line 1: Line 1:
<script>
<script>
    // fork of
//AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE.  
    // http://jsfiddle.net/jonnyc/Ujz4P/5/
var context=document.getElementById("canvas");  
    //
var canvasWidth=context.width;
    // Create an array to store our particles
var canvasHeight= context.height;
    var particles = [];
var fogCount=15;
    // The amount of particles to render
var fog=new Image();
    var particleCount = 60;
var mountain=new Image();
    // The maximum velocity in each direction
var fogs=[];
    var maxVelocity = 2;
var FPS=20;
    // The target frames per second (how often do we want to update / redraw the scene)
var maxVel=1;
    var targetFPS = 33;
 
    // Set the dimensions of the canvas as variables so they can be used.
fog.src = "https://s27.postimg.org/57e6pz0xf/fog.png";
    var canvasWidth = window.innerWidth;
mountain.src="https://s27.postimg.org/4j5c7127n/mac2.jpg" ;
    var canvasHeight = window.innerHeight;
 
    // borders for particles on top and bottom
 
    var borderTop = 0.01 * canvasHeight;
function fogPart(){
    var borderBottom = 0.99 * canvasHeight;
this.x=0;
    // Create an image object (only need one instance)
this.y=0;
    var imageObj = new Image();
this.xVel=0;
    // Once the image has been downloaded then set the image on all of the particles
this.yVel=0;
    imageObj.onload = function() {
this.radius=5;
      particles.forEach(function(particle) {
this.draw=function(){
        particle.setImage(imageObj);
context.drawImage(this.image,this.x-100,this.y-100);
      });
 
    };
};
    // Once the callback is arranged then set the source of the image
this.update=function(){
    imageObj.src = "http://www.blog.jonnycornwell.com/wp-content/uploads/2012/07/Smoke10.png";
 
    // A function to create a particle object.
this.x += this.xVel;
    function Particle(context) {
        this.y += this.yVel;
      // Set the initial x and y positions
 
      this.x = 0;
 
      this.y = 0;
        if (this.x >= canvasWidth) {
      // Set the initial velocity
            this.xVel = -this.xVel;
      this.xVelocity = 0;
            this.x = canvasWidth;
      this.yVelocity = 0;
        }
      // Set the radius
 
      this.radius = 5;
        else if (this.x <= 0) {
      // Store the context which will be used to draw the particle
            this.xVel = -this.xVel;
      this.context = context;
            this.x = 0;
      // The function to draw the particle on the canvas.
        }
      this.draw = function() {
 
        // If an image is set draw it
 
        if (this.image) {
        if (this.y >= canvasHeight) {
          this.context.drawImage(this.image, this.x - 128, this.y - 128);
            this.yVel = -this.yVel;
          // If the image is being rendered do not draw the circle so break out of the draw function               
            this.y = canvasHeight;
          return;
        }
        }
       
        // Draw the circle as before, with the addition of using the position and the radius from this object.
     
        this.context.beginPath();
        else if (this.y <= 0) {
        this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
            this.yVel = -this.yVel;
        this.context.fillStyle = "rgba(0, 255, 255, 0.1)";
            this.y = 0;
        this.context.fill();
        }
        this.context.closePath();
};
      };
 
      // Update the particle.
this.setImage=function(img){
      this.update = function() {
this.image=img;
        // Update the position of the particle with the addition of the velocity.
};
        this.x += this.xVelocity;
this.setPos = function(x, y) {
        this.y += this.yVelocity;
        this.x = x;
        // Check if has crossed the right edge
        this.y = y;
        if (this.x >= canvasWidth) {
    };
          this.xVelocity = -this.xVelocity;
 
          this.x = canvasWidth;
        }
    this.setVel = function(x, y) {
        // Check if has crossed the left edge
        this.xVel = x;
        else if (this.x <= 0) {
        this.yVel = y;
          this.xVelocity = -this.xVelocity;
    };
          this.x = 0;
 
        }
 
        // Check if has crossed the bottom edge
};
        if (this.y >= borderBottom) {
          this.yVelocity = -this.yVelocity;
          this.y = borderBottom;
        }
        // Check if has crossed the top edge
        else if (this.y <= borderTop) {
          this.yVelocity = -this.yVelocity;
          this.y = borderTop;
        }
      };
      // A function to set the position of the particle.
      this.setPosition = function(x, y) {
        this.x = x;
        this.y = y;
      };
      // Function to set the velocity.
      this.setVelocity = function(x, y) {
        this.xVelocity = x;
        this.yVelocity = y;
      };
      this.setImage = function(image) {
        this.image = image;
      };
    }
    // A function to generate a random number between 2 values
    function generateRandom(min, max) {
      return Math.random() * (max - min) + min;
    }
    // The canvas context if it is defined.
    var context;
    // Initialise the scene and set the context if possible
    function init() {
      var canvas = document.getElementById('myCanvas');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      if (canvas.getContext) {
        // Set the context variable so it can be re-used
        context = canvas.getContext('2d');
        // Create the particles and set their initial positions and velocities
        for (var i = 0; i < particleCount; ++i) {
          var particle = new Particle(context);
          // Set the position to be inside the canvas bounds
          particle.setPosition(generateRandom(0, canvasWidth), generateRandom(borderTop, borderBottom));
          // Set the initial velocity to be either random and either negative or positive
          particle.setVelocity(generateRandom(-maxVelocity, maxVelocity), generateRandom(-maxVelocity, maxVelocity));
          particles.push(particle);
        }
      } else {
        alert("Please use a modern browser");
      }
    }
    // The function to draw the scene
    function draw() {
      //  background image
      context.globalAlpha = 1;
            context.globalCompositeOperation = 'source-over';
      context.drawImage(backImg, 0, 0, canvasWidth, canvasHeight);
context.globalAlpha = 0.75;      context.globalCompositeOperation = 'soft-lights';
      // Fog layer
      // Go through all of the particles and draw them.
      particles.forEach(function(particle) {
        particle.draw();
      });
     
    }
    // Update the scene
    function update() {
      particles.forEach(function(particle) {
        particle.update();
      });
    }
    // Initialize the scene
    init();
    var backImg = document.getElementById("back");
      // If the context is set then we can draw the scene (if not then the browser does not support canvas)
      if (context) {
        setInterval(function() {
          // Update the scene befoe drawing
          update();
          // Draw the scene
          draw();
        }, 1000 / targetFPS);
      }
</script>


<style>
function random(min, max){
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:700');
    return Math.random() * (max - min) + min;
body {
  background: #000;
  color: rgb(126, 0, 0);
}
}
function init() {
    if (canvas.getContext) {
        context = canvas.getContext('2d');
        for(var i=0; i < fogCount; i++){
            var fog = new fogPart();
            fog.setPos(random(0, canvasWidth), random(0, canvasHeight));
   
            fog.setVel(random(-maxVel, maxVel), random(-maxVel, maxVel));
            fogs.push(fog);           
        }
    }
    else {
        alert("UN-supported browser");
    }
};


.u-full-width {
fog.onload=function(){
  width: 100%;
  display: block;
}


#back {
fogs.forEach(function(part){
  visibility: hidden;
part.setImage(fog);
  display: none;
});
}


#headText {
};
  position: absolute;
function draw(){
  bottom: 1.5em;
  left: 40%;
  font-family: 'Playfair Display', serif;
  text-align: center;
  font-size: 2.5em;
  line-height: 1.25em;
}


</style>
    context.drawImage(mountain,0,0);
    context.globalAlpha = 0.09;
    fogs.forEach(function(part) {
        part.draw();
    });


<img id="back" width="100%" height="auto" src="https://lauracampbell89.files.wordpress.com/2014/12/e0bf35_1da77d8cc72b4028a5c0a40e8944884b.jpg" />
};
function update(){
fogs.forEach(function(part){
part.update();
});


};


<div class="u-full-width">
init();
  <center>
if (context) {
     <canvas id="myCanvas" width="900" height="600"></canvas>
    setInterval(function() {
  </center>
        update();draw();
</div>
     }, 1000 / FPS);
}
</script>


<div id="headText">
<canvas id="canvas" width="750" height="390"></canvas>
I loved you<br /> at your darkest.
</div>

Revision as of 12:51, 17 July 2017

<script> //AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE. var context=document.getElementById("canvas"); var canvasWidth=context.width; var canvasHeight= context.height; var fogCount=15; var fog=new Image(); var mountain=new Image(); var fogs=[]; var FPS=20; var maxVel=1;

fog.src = "https://s27.postimg.org/57e6pz0xf/fog.png"; mountain.src="https://s27.postimg.org/4j5c7127n/mac2.jpg" ;


function fogPart(){ this.x=0; this.y=0; this.xVel=0; this.yVel=0; this.radius=5; this.draw=function(){ context.drawImage(this.image,this.x-100,this.y-100);

}; this.update=function(){

this.x += this.xVel; 

       this.y += this.yVel;



       if (this.x >= canvasWidth) {
           this.xVel = -this.xVel;
           this.x = canvasWidth;
       }
  
       else if (this.x <= 0) {
           this.xVel = -this.xVel;
           this.x = 0;
       }



       if (this.y >= canvasHeight) {
           this.yVel = -this.yVel;
           this.y = canvasHeight;
       }
       
     
       else if (this.y <= 0) {
           this.yVel = -this.yVel;
           this.y = 0;
       }

};

this.setImage=function(img){ this.image=img; }; this.setPos = function(x, y) { 

       this.x = x;
       this.y = y;
   };



   this.setVel = function(x, y) {
       this.xVel = x;
       this.yVel = y;
   };


};

function random(min, max){ 

   return Math.random() * (max - min) + min;

} function init() { 

   if (canvas.getContext) {
       context = canvas.getContext('2d');
       for(var i=0; i < fogCount; i++){
           var fog = new fogPart();

           fog.setPos(random(0, canvasWidth), random(0, canvasHeight));
    
           fog.setVel(random(-maxVel, maxVel), random(-maxVel, maxVel));
           fogs.push(fog);            
       }
   }
   else {
       alert("UN-supported browser");
   }

};

fog.onload=function(){

fogs.forEach(function(part){ part.setImage(fog); });

}; function draw(){ 

   context.drawImage(mountain,0,0);
   context.globalAlpha = 0.09;
   fogs.forEach(function(part) {
       part.draw();
   });

}; function update(){ fogs.forEach(function(part){ part.update(); });

};

init(); if (context) { 

   setInterval(function() {
       update();draw();
   }, 1000 / FPS);

} </script>

<canvas id="canvas" width="750" height="390"></canvas>

Retrieved from "https://w.ikabodo.se/index.php?title=Widget:Fog&oldid=3628"