|
|
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> | |
<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>