New wiki-page
Jump to navigation
Jump to search
<script>
// fork of // http://jsfiddle.net/jonnyc/Ujz4P/5/ // // Create an array to store our particles var particles = []; // The amount of particles to render var particleCount = 60; // The maximum velocity in each direction var maxVelocity = 2; // The target frames per second (how often do we want to update / redraw the scene) var targetFPS = 33; // Set the dimensions of the canvas as variables so they can be used. var canvasWidth = window.innerWidth; var canvasHeight = window.innerHeight; // borders for particles on top and bottom var borderTop = 0.01 * canvasHeight; var borderBottom = 0.99 * canvasHeight; // Create an image object (only need one instance) var imageObj = new Image(); // Once the image has been downloaded then set the image on all of the particles imageObj.onload = function() { particles.forEach(function(particle) { particle.setImage(imageObj); }); }; // Once the callback is arranged then set the source of the image imageObj.src = "http://www.blog.jonnycornwell.com/wp-content/uploads/2012/07/Smoke10.png"; // A function to create a particle object. function Particle(context) { // Set the initial x and y positions this.x = 0; this.y = 0; // Set the initial velocity this.xVelocity = 0; this.yVelocity = 0; // Set the radius this.radius = 5; // Store the context which will be used to draw the particle this.context = context; // The function to draw the particle on the canvas. this.draw = function() { // If an image is set draw it if (this.image) { this.context.drawImage(this.image, this.x - 128, this.y - 128); // If the image is being rendered do not draw the circle so break out of the draw function return; } // Draw the circle as before, with the addition of using the position and the radius from this object. this.context.beginPath(); this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false); this.context.fillStyle = "rgba(0, 255, 255, 0.1)"; this.context.fill(); this.context.closePath(); }; // Update the particle. this.update = function() { // Update the position of the particle with the addition of the velocity. this.x += this.xVelocity; this.y += this.yVelocity; // Check if has crossed the right edge if (this.x >= canvasWidth) { this.xVelocity = -this.xVelocity; this.x = canvasWidth; } // Check if has crossed the left edge else if (this.x <= 0) { 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> @import url('https://fonts.googleapis.com/css?family=Playfair+Display:700'); body {
background: #000; color: rgb(126, 0, 0);
}
.u-full-width {
width: 100%; display: block;
}
- back {
visibility: hidden; display: none;
}
- headText {
position: absolute; bottom: 1.5em; left: 40%; font-family: 'Playfair Display', serif; text-align: center; font-size: 2.5em; line-height: 1.25em;
}
</style>
<img id="back" width="100%" height="auto" src="https://lauracampbell89.files.wordpress.com/2014/12/e0bf35_1da77d8cc72b4028a5c0a40e8944884b.jpg" />
<canvas id="myCanvas" width="900" height="600"></canvas>
I loved you
at your darkest.