A Flash Developer Resource Site

Results 1 to 3 of 3

Thread: does anyone know how to draw a fractal?

  1. #1
    Junior Member
    Join Date
    Feb 2004
    Posts
    2

    does anyone know how to draw a fractal?

    I want to make a lightning effect and I figured I would need to draw a fratal between 2 points. Is this possible?

  2. #2
    Senior Member jbum's Avatar
    Join Date
    Feb 2004
    Location
    Los Angeles
    Posts
    2,920
    I made the following script which draws an animated lightning bolt for you, using a fractal subdivision.

    This script assumes the movie has a BLACK background. Otherwise you won't be able to see it, cause the lightning bolt is white.

    Enjoy

    Code:
    // Animated lightning by Jim Bumgardner
    //
    
    MovieClip.prototype.lightSeg = function(x1,y1,x2,y2,dev)
    {
      if (dev < 1) {
    		this.moveTo(x1,y1);
    		this.lineTo(x2,y2);
    	}
    	else {
    		var midx = (x2+x1)/2;
    		var midy = (y2+y1)/2;
    		midx += (Math.random()-.5)*dev;
    		midy += (Math.random()-.5)*dev;
    		this.lightSeg(x1,y1,midx,midy,dev/2);
    		this.lightSeg(x2,y2,midx,midy,dev/2);
    	}
    }
    
    MovieClip.prototype.drawLightning = function(x1,y1,x2,y2)
    {
      this.clear();
    	this.lineStyle(3,0xFFFFFF);
    
    // 100 is the 'maximum deviance' for the lightning.  Use a smaller number for 'straighter' (and less CPU intensive) lightning.
    	this.lightSeg(x1,y1,x2,y2,100);
    }
    
    this.onEnterFrame = function()
    {
      // these are the coords for the beginning and end of the lightning bolt
    	this.drawLightning(0,0,200,200);
    }

  3. #3
    Senior Member jbum's Avatar
    Join Date
    Feb 2004
    Location
    Los Angeles
    Posts
    2,920
    Thought I'd add some comments. For some reason I can't edit my prior post, so I'll add them here.

    The algorithm I used is called "midpoint displacement" and is commonly used for generating fractal terrain. If you place one of those lightning bolts on its side, it will look like a mountain range.

    The recursive routine lightSeg() does all the work.

    You pass it the coordinates of a line segment (x1,y1,x2,y2) and a displacement value (dev). It computes the midpoint of the line (midx,midy), and then displaces it by a random value. The random value is scaled by the displacement value, which is reduced by half each time we subdivide the line.

    In this example, the initial displacement is 100. You will need to adjust the initial displacement proportionate to the length of the lightning bolt (you don't want to use a displacement of 100 pixels for a lightning bolt that is only 50 pixels wide).

    The first (big) subdivision gets a big displacement, and the smaller subdivisions get smaller displacements
    (the displacement value gets divided by 2 for each level of recursion). This is what makes it 'fractally'.

    When the displacement value falls below some arbitrary minimum (I'm using 1) we draw the line segment. This is the line that says

    if (dev < 1)

    If you change the 1 to a large value, you'll get fewer (and longer) line segments and the lightning will render a little faster, but look less 'realistic'.

    Since this effect looks pretty cool, I'm going to add a few different lightning based movies to my website (see the URL below) over the next few days, such as multiple lightning bolts travelling around a marquee - that kind of thing.


    Enjoy!

    - Jim
    Last edited by jbum; 03-09-2004 at 08:48 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center