Challenge (eye candy) - Fire

[retrotron]

Maybe this is a good idea, maybe not.
In lieu of pom's great water threat, we could do one on fire too.
25 lines, and be sure to post an example.

I'll start with a simple one:

>> see it (about a 450 x 450 viewing area)

function removeClip(clip) {
    clip.removeMovieClip();
} // end removeClip()
function setFlame() {
    for (var j = 0; j<20; j++) {
        _root.createEmptyMovieClip("flame"+i, theDepth++);
        _root["flame"+i]._x = _root["flame"+i]._y=250+(Math.random()*3);
        _root["flame"+i].beginGradientFill("linear", [0xFF9900, 0xFF6600], [Math.random()*150, Math.random()*150], [0, 255], {matrixType:"box", x:0, y:-40, w:10, h:20, r:(45/180)*Math.PI});
        _root["flame"+i].curveTo(-8, -3, 0, -33);
        _root["flame"+i].curveTo(10, 5, 0, 0);
        _root["flame"+i].endFill();
        _root["flame"+i]._xscale = _root["flame"+i]._yscale=Math.random()*95;
        _root["flame"+i]._alpha = Math.random()*80;
        _root["flame"+(i++)].onEnterFrame = function() {
            if (this._yscale>1) {
                this._x -= Math.sin(this.count++)*(Math.random()*10);
                this._y -= Math.random()*5;
                this._xscale -= Math.random()*5;
                this._yscale -= Math.random()*10;
                this._alpha -= Math.ceil(Math.random()*1);
            } else {
                delete this.onEnterFrame;
                removeClip(this);
            } // end if (this._yscale > 1)
        } // end onEnterFrame()
    } // end j loop
} // end setFlame()
flameInterval = setInterval(setFlame, 10);

[pom]

Should I start now the Wind Challenge?

And by the way that's very nice, Retrotron.

[retrotron]

Ha ha, yeah, eventually we might get the water, fire, wind, and earth eye candy, and then we can wallow in our full orbed orientation to pagan cosmic AS syncretism. Mu ha ha ha ha ha!

[pom]

Let's try and get this battle going...
Freely inspired from deliMIter: use a dark background and a fps of 24

makeFlame = function () {
    var cl = this.createEmptyMovieClip ( "flame" + i, i++ ) ;
    cl.lineStyle ( random ( 10 ) + 20 ) ;
    cl.lineTo ( .45, .15 ) ;
    cl._x = 50 + random (15) - 7 ;
    cl._y = 100 ;
    cl.phi = Math.random() * Math.PI  - Math.PI / 2 ;
    (cl.col = new Color (cl)).setRGB ( cl.c = 0xff0000 ) ;
    cl.onEnterFrame = function () {
        this._y -=3 ;
        this._x += 3 * Math.cos ( this.w + this.phi ) ;
        this.w += .5 ;
        if ( this.c < 0xfffc00 ) this.col.setRGB (this.c += 0x000f00 ) ;
        this._alpha < 5 ? this.removeMovieClip() : this._alpha -= 2 ;
        this._xscale = this._yscale -= 2 ;
    }
}
setInterval ( this, "makeFlame", 30 ) ;

pom

[retrotron]

That's pretty intense . . . makes me think of deep sea vents . . . hmmm . . . you may have bridged the water/fire thread.

[Jesse]

That's awesome POM. Great work

[pom]

If someone wants to add some smoke with the remaining of the lines... <-- edit: looks like it's a smiley-free zone...
edit2 : 1789 posts, vive la France!!

[JGizmo]

Hi pom, I played with your codes and added some smoke, hope you don't mind.

makeFlame = function () {
    var cl = this.createEmptyMovieClip("flame"+i, i++);
    cl.lineStyle(random(10)+20);
    cl.lineTo(.45, .15);
    cl._x = 200+random(15);
    cl._y = 400;
    cl.smoke = false;
    cl.phi = Math.random()*Math.PI-Math.PI/2;
    (cl.col=new Color(cl)).setRGB(cl.c=0xff0000);
    cl.onEnterFrame = function() {
        if (!this.smoke) {
            this.col.setRGB(this.c += 0x000600);
            this._alpha -= 1;
            this._y -= 3;
            this.w += .5;
            this._xscale = this._yscale -= 1;
            this._x += 3*Math.cos(this.w+this.phi);
            if (this.c>=0xfffc00) {
                this.smoke = !this.smoke;
                this.col.setRGB(0xcccccc);
            }
        } else {
            smokeit(this);
        }
    };
};
smokeit = function (name) {
    name._y -= 20+random(20);
    name._x += 5*Math.cos(name.w+name.phi);
    name._xscale = name._yscale =100+random(300);
    name._alpha<5 ? name.removeMovieClip() : name._alpha -= 5;
};
setInterval(this, "makeFlame", 30);

John

[snapple]

This is from looking at retrotron's code (sorry just felt like playing instead of thinking), it's a lot more simple and gives a really nice flame / realistic flickering effect:

*bg=0x000000, fps=12*

function makeFire(){
     for(i=0; i<40; i++){
         _root.createEmptyMovieClip("flame"+i,i);
         _root["flame"+i].beginFill(0xFF3300);
         _root["flame"+i].curveTo(-15, -3, 0, -43);
         _root["flame"+i].curveTo(15, 5, 0, 0);
         _root["flame"+i].endFill();
         _root["flame"+i]._yscale = Math.random()*195;
         _root["flame"+i].onEnterFrame = function(){
            if (this._yscale>1) {
                          this._x -= Math.random()*10;
                          this._y -= Math.random()*5;
                          this._alpha -= Math.ceil(Math.random()*250);
             }
        }
    }
}
setInterval(makeFire, 20);

I have a question.

I was going to use beginGradientFill (but i dont fully understand it), i understand all of the parameters apart from the matrix one - what i understand is that it is an argument that allows for transformation, i know you can have 3X3 or box - and that box is easier, but what exactly does it do and why do i need it ? I thought that the string value "radial" or "linear" would do the job ???

Many thanks indeed, regards - snapple

[Jesse]

Jesse owns up to not understanding the color matrix in beginGradient fill also. I've seen a tutorial ont his which, while I appreciate the author's efforts, was not really any help at all. I don't know of any good ones, so if anyone can teahc me a bit, I'll write one. Or someone could write one for us