Hello.
I would like to use this effect: https://jsfiddle.net/jonnyc/Ujz4P/5/ as a background for a page.
It will be a historical page and I love the idea of having this in background and put some option in the front of it.
Thank you very much for your support!
Ionut
If you want to use the exact same thing, then, I might have a solution. I haven’t tried this, but, it should work. Here’s a step-by-step process:
Add jQuery to your document.
Save the contents of the JS (the left-bottom panel in the link you sent) in a .js file. Load this file in your Hype document <head>. You might want to change the parameters as the comments of the code mention.
On your Hype canvas, create a rectaangle and set its Inner HTML to <canvas id="myCanvas" width="400" height="400"></canvas> after changing the width and height to whatever you want.
Create a new JavaScript function in your Hype document and set its contents to draw(). Run the script when your scene loads.
That should do it. I am currently away from my macOS system to check, but, till then you can give this a go.
Thank you very much.
The steps 2 and 4 are not so clear for my level.
I would appreciate if you could give more details.
Thank you.
Ionut
Step 2: Copy the contents of the JS from the link you gave:
Copy that entire thing and paste it in a text editor or something and save the file with the extension 'js (you can also copy in the <head> of your Hype Document inside a <script> tag, but, that would just lengthen the <head> too much.
// The amount of particles to render > Code like this are comments. So, it tells you what changes you might want to make. Change all those parameters that you need.
After your .js file is ready, import it in Hype and let it add itself in the <head>.
Step 3: On the work area of your Hype document, you can create a rectangle > Go to Edit menu > Edit Inner HTML > and paste <canvas id="myCanvas" width="400" height="400"></canvas> in it. You might want to change the width and height though.
Also, I would like to add, the JSFiddle has some CSS Styling too. You can paste that inside a <style> tag inside the <head>.
EDIT: You also might want to host the Smoke.png image yourself. It’s there on line 28 in the JavaScript code. Just update the URL if you wish to:
imageObj.src = "http://www.blog.jonnycornwell.com/wp-content/uploads/2012/07/Smoke10.png";
I am not sure if ${resourcesFolderName} works in external Javascript. So, you might want to use a relative URL. For example, if you import it as a .js file and also the image in your Hype document, then, the URL would simply be imageObj.src = "Smoke10.png";. That’d be my guess.
So, I have tried it myself and I had made some wrong guesses. However, here’s the file: Smoke.hype.zip (80.3 KB)
What I told wrong before was:
Instead of copying the text in a .js file, just copy it in as a function in the Hype document.
The URL of the image I guessed was wrong.
No need to create a seperate function to draw on the canvas now as I have added it in the same function that loads the smoke.
I have edited the code from JSFiddle to adapt it to Hype (the ID selector has been changed).
P.S.: In the file I have provided, I have minified the JS code from that fiddle. If you would like (mostly you’ll ) a more user-readable format, you can paste the following code in the function:
// Create an array to store our particles
var particles = [];
// The amount of particles to render
var particleCount = 30;
// 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 = 400;
var canvasHeight = 400;
// 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 = "${resourcesFolderName}/Smoke.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, 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 >= canvasHeight) {
this.yVelocity = -this.yVelocity;
this.y = canvasHeight;
}
// Check if has crossed the top edge
else if (this.y <= 0) {
this.yVelocity = -this.yVelocity;
this.y = 0;
}
};
// 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 = hypeDocument.getElementById('myCanvas');
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(0, canvasHeight));
// 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() {
// Clear the drawing surface and fill it with a black background
context.fillStyle = "rgba(0, 0, 0, 0.5)";
context.fillRect(0, 0, 400, 400);
// 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();
// 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);
}
draw();Thank you for your support! It is perfect!
Best Regards!
Ionut