Hello Friends My Name Is Viraj,Today I Will Display Fire Effect On Your Web Page.HTML5, WebGL and Javascript have changed the way animation used to be. Past few years, we can only achieve extraordinary web animation by using Flash and Java Applet. Now it’s possible to create insane effects and crazy animations with scripting and render it on the browser.The main concept here is that there are some particles on the canvas which start attracting other when they come close to each other. Also, they’ll start drawing lines between them as they come closer to each other and the opacity of the lines depends upon the distance between them.A particle system is a technique used to simulate a variety of special visual effects like sparks, dust, smoke, fire, explosions, rain, stars, falling snow, glowing trails, and many others. Basically, a particle system consists of emitters and the particles themselves. The basic idea behind particle system is very simple – by drawing lots of very small squares or circles, which behave individually according to some rules, you can generate a visual effect where the sum of the parts is much more than the parts separately. Here are some amazing particle effect animation tutorials and examples using HTML5 canvas to help you create beautiful visual effects, such as explosions, lasers, fire, and so on.The Fire effect creates several custom attributes in the emitted particle object it creates. The custom attributes control a combination of field or emitter attributes to lessen the settings you would otherwise need to make to tune the fire.You can edit most of these attributes after you use the Fire effect by selecting the emitted particle object and opening the Extra Attributes section of the Attribute Editor. Exceptions are noted in the text. have two collections of elements I want to make inter-dependent (binded to each other) On the one hand I have some text links in a navigation bar, on the other hand I have some elements with references to the same links.Use Fire to produce animated fire, smoke, and explosion effects. Possible uses for Fire effects include campfires, torches, fireballs, clouds, and nebula.You can add any number of fire effects to a scene. The order of effects is important because effects near the bottom of the list are layered in front of effects near the top of the list.Each effect has its own parameters. When you select a fire effect in the Effects list, its parameters appear in the Environment dialog.Fire renders only in Camera or Perspective views. Orthographic or User views don’t render Fire effects. These images have animation effects, as described below (the animation occurs when hovering the images).Here In This Html Tutorial We Will Display Fire Effect Using Html/Css/Javascript Code.Here In This Blog We Will Display Fire Effect Using Html/Css/Javascript Code.
Here Is An Example Related To Topic............
Step 1 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Creating fire effect using html5 canvas - Nibunan</title>
</head>
<body style="margin: 0px">
<canvas width="700" height="450" id="drawing-surface"></canvas>
<script type="text/javascript">
function Random(range) {
return Math.floor((Math.random() * range) + 1);
}
function RandomFloat(range) {
return (Math.random() * range) + 1;
}
var viewport = new Viewport();
for (var i = 0; i < 200; i++) {
var particle = new Particle();
viewport.addObject(particle);
}
viewport.init();
function Viewport() {
var me = this;
me.objects = [];
var canvas = document.getElementById("drawing-surface");
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.onresize = function () {
resizeCanvas();
}
var drawingSurface = document.getElementById("drawing-surface").getContext("2d");
me.doPaint = true;
function drawBackgroundImage() {
drawingSurface.globalAlpha = 1;
drawingSurface.fillStyle = 'black';
drawingSurface.fillRect(0, 0, canvas.width, canvas.height);
}
function drawObjects() {
for (var i = 0; i < me.objects.length; i++) {
me.objects[i].paint(drawingSurface);
}
}
me.paintInit = function () {
me.doPaint = true;
}
function paint() {
me.paintInit();
if (me.doPaint) {
drawBackgroundImage();
drawObjects();
me.doPaint = false;
}
}
var timer;
me.init = function () {
timer = setInterval(function () { paint(); }, 1000 / 30);
};
me.repaint = function () {
me.doPaint = true;
};
me.addObject = function (obj) {
me.objects.push(obj);
}
}
function Particle() {
var me = this;
var source = {};
source.location = { x: window.innerWidth / 2, y: (window.innerHeight / 2) + 100 };
me.reset = function () {
me.wind = 0;
me.speed = RandomFloat(5) - 10;
me.radius = 20;
me.opacity = 255;
me.greenFactor = 255;
me.color = 'rgb(255,255,0)';
me.location = { x: source.location.x + Random(40), y: source.location.y };
};
me.reset();
me.move = function () {
if (me.location.y < source.location.y - 300 || me.radius <= 1) {
me.reset();
}
me.radius += 20 / (300 / me.speed);
me.opacity += 255 / (300 / me.speed);
me.greenFactor += 255 / ((300*2) / me.speed);
me.color = "rgb(255," + (Math.floor(me.greenFactor)+1) + ",0)";
me.location.x += me.wind;
me.location.y += me.speed;
};
me.paint = function (context) {
me.move();
context.beginPath();
context.arc(me.location.x, me.location.y, me.radius, 0, 2 * Math.PI, false);
context.fillStyle = me.color;
context.globalAlpha = me.opacity / 255;
context.fill();
context.closePath();
};
}
</script>
</body>
</html>
Output :
Here Is An Example Related To Topic............
Step 1 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Creating fire effect using html5 canvas - Nibunan</title>
</head>
<body style="margin: 0px">
<canvas width="700" height="450" id="drawing-surface"></canvas>
<script type="text/javascript">
function Random(range) {
return Math.floor((Math.random() * range) + 1);
}
function RandomFloat(range) {
return (Math.random() * range) + 1;
}
var viewport = new Viewport();
for (var i = 0; i < 200; i++) {
var particle = new Particle();
viewport.addObject(particle);
}
viewport.init();
function Viewport() {
var me = this;
me.objects = [];
var canvas = document.getElementById("drawing-surface");
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.onresize = function () {
resizeCanvas();
}
var drawingSurface = document.getElementById("drawing-surface").getContext("2d");
me.doPaint = true;
function drawBackgroundImage() {
drawingSurface.globalAlpha = 1;
drawingSurface.fillStyle = 'black';
drawingSurface.fillRect(0, 0, canvas.width, canvas.height);
}
function drawObjects() {
for (var i = 0; i < me.objects.length; i++) {
me.objects[i].paint(drawingSurface);
}
}
me.paintInit = function () {
me.doPaint = true;
}
function paint() {
me.paintInit();
if (me.doPaint) {
drawBackgroundImage();
drawObjects();
me.doPaint = false;
}
}
var timer;
me.init = function () {
timer = setInterval(function () { paint(); }, 1000 / 30);
};
me.repaint = function () {
me.doPaint = true;
};
me.addObject = function (obj) {
me.objects.push(obj);
}
}
function Particle() {
var me = this;
var source = {};
source.location = { x: window.innerWidth / 2, y: (window.innerHeight / 2) + 100 };
me.reset = function () {
me.wind = 0;
me.speed = RandomFloat(5) - 10;
me.radius = 20;
me.opacity = 255;
me.greenFactor = 255;
me.color = 'rgb(255,255,0)';
me.location = { x: source.location.x + Random(40), y: source.location.y };
};
me.reset();
me.move = function () {
if (me.location.y < source.location.y - 300 || me.radius <= 1) {
me.reset();
}
me.radius += 20 / (300 / me.speed);
me.opacity += 255 / (300 / me.speed);
me.greenFactor += 255 / ((300*2) / me.speed);
me.color = "rgb(255," + (Math.floor(me.greenFactor)+1) + ",0)";
me.location.x += me.wind;
me.location.y += me.speed;
};
me.paint = function (context) {
me.move();
context.beginPath();
context.arc(me.location.x, me.location.y, me.radius, 0, 2 * Math.PI, false);
context.fillStyle = me.color;
context.globalAlpha = me.opacity / 255;
context.fill();
context.closePath();
};
}
</script>
</body>
</html>
Output :
No comments:
Post a Comment