Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Simple circle intersection fractal... Presented in AS3 source code! Ouch...

106 views
Skip to first unread message

Chris M. Thomasson

unread,
Feb 26, 2013, 3:32:23 AM2/26/13
to
Here is a simple circle intersection fractal source code using straight
lines to connect locus of intersections.


The fractal goes as follows:

1. draw to circles that happen to intersect.
2. define and records points of intersections.
3. draw smaller circles around all points accumulated in step 2.
4. goto step 1 until you get sick of drawing circles!


I have half assed AS3 (Flash!) source code below for your amusement!

:^)

__________________________________________________________________
package
{
import flash.display.Sprite;
import flash.events.Event;


/**
* ...
* @author Chris M. Thomasson
*/
public class Main extends Sprite
{
private var mcr1:Number = 3;
private var mcr2:Number = 3;

public function
prv_draw(i:uint, cmp1:Array, cmp2:Array):void {
if (i > 33 || ! cmp1 || ! cmp2) return;
var c:Number = cmp1[2] + cmp2[2];
c = (c * 314) * (c * 628) + 0xFF0000;
this.graphics.lineStyle(.277 / (i / 22),
0xFFFFFF, .1);
prv_circle_draw(cmp1, 0);
var isect1:Array = prv_circle_isect(cmp1, cmp2, 0, 3);
if (isect1)
{
prv_draw(i + 1, isect1, cmp1);
prv_draw(i + 1, isect1, cmp2);
prv_draw(i + 1, cmp1, isect1);
prv_draw(i + 1, cmp2, isect1);
}
}
public function
Main():void {
addEventListener(Event.ENTER_FRAME, prv_cdraw_render);
}


public function
prv_cdraw_render(e5:Event = null):void {

this.graphics.clear();

var circles:Array = [
222, 266, 188,
488, 300, 222];

this.graphics.lineStyle(1, 0xFFFFFF, .1);
this.graphics.drawCircle(circles[0], circles[1], circles[2]);
this.graphics.drawCircle(circles[3], circles[4], circles[5]);
prv_draw(0, circles, circles);

mcr1 -= .007;
mcr2 += .17;
}


public function
prv_distance(
points:Array,
offset:uint
):Number {
var x_diff_sq:Number =
(points[offset + 3] - points[offset]) *
(points[offset + 3] - points[offset]);

var y_diff_sq:Number =
(points[offset + 4] - points[offset + 1]) *
(points[offset + 4] - points[offset + 1]);

return Math.sqrt(x_diff_sq + y_diff_sq);
}


public function
prv_circle_draw(
circles:Array,
oi:uint
):void {
if (! circles) return;

this.graphics.moveTo(circles[oi + 3], circles[oi + 4]);
if (circles[oi + 2] < 33)
{
this.graphics.lineTo(circles[oi + 0], circles[oi + 1]);
}

this.graphics.moveTo(circles[oi + 0], circles[oi + 1]);
if (circles[oi + 5] < 33)
{
this.graphics.lineTo(circles[oi + 3], circles[oi + 4]);
}
}


public function
prv_circle_isect(
circles:Array,
circles2:Array,
ci1:uint,
ci2:uint
):Array {

if (circles[ci1 + 0] == circles2[ci2 + 0] &&
circles2[ci2 + 1] == circles2[ci2 + 1])
{
return null;
}

if (circles[ci1 + 2] < 1 || circles2[ci2 + 2] < 1)
{
return null;
}

var distance:Number =
prv_distance(
circles,
0);

var dx:Number = circles2[ci2 + 0] - circles[ci1 + 0];
var dy:Number = circles2[ci2 + 1] - circles[ci1 + 1];
var d:Number = Math.sqrt((dy * dy) + (dx * dx));

if (d > circles[ci1 + 2] + circles2[ci2 + 2])
{
return null;
}
if (d < Math.abs(circles[ci1 + 2] - circles2[ci2 + 2]))
{
return null;
}

var a:Number =
((circles[ci1 + 2] * circles[ci1 + 2]) -
(circles2[ci2 + 2] * circles2[ci2 + 2]) +
(d * d)) / (2 * d);

var x2:Number = circles[ci1 + 0] + (dx * a / d);
var y2:Number = circles[ci1 + 1] + (dy * a / d);
var h:Number = Math.sqrt((circles[ci1 + 2] * circles[ci1 + 2]) -
(a * a));

var rx:Number = -dy * (h / d);
var ry:Number = dx * (h / d);

var p1x:Number = x2 + -h * (circles2[ci2 + 1] - circles[ci1 +
1]) / d;
var p1y:Number = y2 + h * (circles2[ci2 + 0] - circles[ci1 + 0])
/ d;
var p2x:Number = p1x - ((p1x - x2) * 2);
var p2y:Number = p1y - ((p1y - y2) * 2);

var hr:Number = h / mcr1;

return [p1x, p1y, hr, p2x, p2y, hr];
}
}
}

__________________________________________________________________

Chris M. Thomasson

unread,
Feb 26, 2013, 5:18:53 AM2/26/13
to
"Chris M. Thomasson" wrote in message
news:kghrv1$d9i$1...@speranza.aioe.org...

> Here is a simple circle intersection fractal source code using straight
> lines to connect locus of intersections.


> The fractal goes as follows:

> [...]

> __________________________________________________________________
> [...]
> __________________________________________________________________


FWIW, here are some links to images created by the algorithm:


http://webpages.charter.net/appcore/fractal/cisect_imgs/p1.jpg

http://webpages.charter.net/appcore/fractal/cisect_imgs/p2.jpg

http://webpages.charter.net/appcore/fractal/cisect_imgs/p3.jpg


Hope there are not too crappy! ;^o


BTW, I have to iterate the other isect points... I am "half" done.

:^)

Roger Bagula

unread,
Mar 1, 2013, 1:14:37 PM3/1/13
to
Chris M. Thomasson
And just how do we run this code?
What program can i download to run it
and on what operating system?
I'd like to see your fractal...
( Man does not live by code alone).
Roger Bagula

Chris M. Thomasson

unread,
Mar 1, 2013, 5:35:47 PM3/1/13
to
"Roger Bagula" wrote in message
news:87d4638f-32ee-40e2...@googlegroups.com...

> Chris M. Thomasson
> And just how do we run this code?
> What program can i download to run it
> and on what operating system?

You can download a free actionscript 3 compiler; IMHO, here is a damn good
one:

http://www.flashdevelop.org


Create a new flash as3 project...
Cut and paste the code...
Compile and run.
It _should_ be as simple as that.


I am very sorry for just posting raw code without giving further references!

;^(




> I'd like to see your fractal...
> ( Man does not live by code alone).

I posted the code online in the form of a compiled flash application.
Unfortunately, it will only work if your browser has access to flash...

http://webpages.charter.net/appcore/fractal/flash


The parameters are hardcoded for now. I really _need_ to add a GUI so that
you can alter params on the fly...


I will post a JavaScript version that uses the HTML5 canvas when I get some
more time.


I hope you can view than damn thing! ;^o




Also, it seems like all of the circle-like fractals I can find revolve
around various sets of tangent circles. I cannot seem to find one that
relies on determining the intersection points between a set of circles, then
creating smaller circles around said intersections. Then, simply repeat the
process forever for the new smaller circles created around the parent
intersections have child intersections of their own. AFAICT, you can go on
for infinity wrt circle intersection fractals.


Humm. I should add support for ellipses as well...


BTW, thank you for taking the time to actually take a look at it! It's the
first fractal I have created...


Do you think this fractal has any merit whatsoever?

:^o

Chris M. Thomasson

unread,
Mar 1, 2013, 6:36:02 PM3/1/13
to
"Chris M. Thomasson" wrote in message
news:kgrag9$hb1$1...@speranza.aioe.org...

> "Roger Bagula" wrote in message
> news:87d4638f-32ee-40e2...@googlegroups.com...

> > Chris M. Thomasson
> > And just how do we run this code?
> > What program can i download to run it
> > and on what operating system?

[....]

> > I'd like to see your fractal...
> > ( Man does not live by code alone).

> I posted the code online in the form of a compiled flash application.
> Unfortunately, it will only work if your browser has access to flash...

> http://webpages.charter.net/appcore/fractal/flash

> The parameters are hardcoded for now. I really _need_ to add a GUI so that
> you can alter params on the fly...

[...]


FWIW, if you cannot see it growing from the first iteration then you might
need a wider screen/higher resolution because I have the first two circles
hardcoded at follows

The position of the first two circles are contained within the `circles'
array
under the scope of `prv_cdraw_render()' function:
_________________________________________________________
public function
prv_cdraw_render(e:Event = null):void {

this.graphics.clear();

var circles:Array = [
267, 266, 188,
488, 300, 222];

[...]
_________________________________________________________

That's 6 array entries which happen to define two overlapping circles
where:

// circle 1 (x, y, r)
circle_x1 = circles[0];
circle_y1 = circles[1];
circle_r1 = circles[2];

// circle 2 (x, y, r)
circle_x2 = circles[3];
circle_y2 = circles[4];
circle_r2 = circles[5];

As you can see, circle_x2 is at 488 with a radius of 222.
The circle_x1 is at 267 with a radius of 188.

Result... This might not fit well on smaller screens until it goes through
some "higher" iteration counts.


Sorry about that nonsense.

Chris M. Thomasson

unread,
Mar 1, 2013, 7:45:50 PM3/1/13
to


"Chris M. Thomasson" wrote in message
news:kgrag9$hb1$1...@speranza.aioe.org...

"Roger Bagula" wrote in message
news:87d4638f-32ee-40e2...@googlegroups.com...

> > Chris M. Thomasson
> > And just how do we run this code?
> > What program can i download to run it
> > and on what operating system?

> You can download a free actionscript 3 compiler; IMHO, here is a damn good
> one:

> http://www.flashdevelop.org


> Create a new flash as3 project...
> Cut and paste the code...
> Compile and run.
> It _should_ be as simple as that.
[....]

Actually, you need to set the background color of the project (e.g., main
stage/canvas)
to black wrt the posted code as is because it paints with white, which will
not show up
to good on a white background!

Ouch.


Also, I limited the drawing up to a certain point. Basically, if the
distance between the
intersection points of two circles is less than 1, then the algorithm will
stop iterating,
and finally stop rendering altogether.


Here is code that paint's using black, so you can use it out of the box with
FlashDevelop
that happens to have a default background color of white:
_____________________________________________________________

package
{
import flash.display.Sprite;
import flash.events.Event;


/**
* ...
* @author Chris M. Thomasson
*/
public class Main extends Sprite
{
private var mcr1:Number = 3;
private var mcr2:Number = 3;
private var mcrbail:Number = 1.341;

public function
prv_draw(i:uint, cmp1:Array, cmp2:Array):void {
if (i > 22 || ! cmp1 || ! cmp2) return;
var c:Number = cmp1[2] + cmp2[2];
c = (c * 314) * (c * 628) + 0xFF0000;
this.graphics.lineStyle(.277 / (i / 22),
0x000000, .1);
prv_circle_draw(cmp1, 0);
var isect1:Array = prv_circle_isect(cmp1, cmp2, 0, 3);
if (isect1)
{
prv_draw(i + 1, isect1, cmp1);
prv_draw(i + 1, isect1, cmp2);
prv_draw(i + 1, cmp1, isect1);
prv_draw(i + 1, cmp2, isect1);
}
}
public function
Main():void {
// render test
//mcr1 = mcrbail;
//prv_cdraw_render();

addEventListener(Event.ENTER_FRAME, prv_cdraw_render);
}


public function
prv_cdraw_render(e5:Event = null):void {

this.graphics.clear();

var circles:Array = [
267, 266, 188,
488, 300, 222];

this.graphics.lineStyle(1, 0xFFFFFF, .1);
this.graphics.drawCircle(circles[0], circles[1], circles[2]);
this.graphics.drawCircle(circles[3], circles[4], circles[5]);
prv_draw(0, circles, circles);

mcr1 -= .007;
mcr2 += .17;


if (mcr1 < mcrbail) // mcr bailout
{
// render bailout
removeEventListener(Event.ENTER_FRAME, prv_cdraw_render);
if (h < 1)
{
// bailout
return null;
}


var rx:Number = -dy * (h / d);
var ry:Number = dx * (h / d);

var p1x:Number = x2 + -h * (circles2[ci2 + 1] - circles[ci1 +
1]) / d;
var p1y:Number = y2 + h * (circles2[ci2 + 0] - circles[ci1 + 0])
/ d;
var p2x:Number = p1x - ((p1x - x2) * 2);
var p2y:Number = p1y - ((p1y - y2) * 2);

var hr:Number = h / mcr1;

if (hr < 1)
{
// bailout;
return null;

Chris M. Thomasson

unread,
Mar 3, 2013, 8:58:59 PM3/3/13
to

"Chris M. Thomasson" wrote in message
news:kgi26f$uu1$1...@speranza.aioe.org...

[...]

> FWIW, here are some links to images created by the algorithm:

> http://webpages.charter.net/appcore/fractal/cisect_imgs/p1.jpg

> http://webpages.charter.net/appcore/fractal/cisect_imgs/p2.jpg

> http://webpages.charter.net/appcore/fractal/cisect_imgs/p3.jpg


Here is another, IMHO, nice image:

http://webpages.charter.net/appcore/fractal/cisect_imgs/p4.jpg

:^)

Chris M. Thomasson

unread,
Mar 4, 2013, 1:10:03 AM3/4/13
to
"Chris M. Thomasson" wrote in message
news:kgi26f$uu1$1...@speranza.aioe.org...

> FWIW, here are some links to images created by the algorithm:
> http://webpages.charter.net/appcore/fractal/cisect_imgs/p1.jpg
> http://webpages.charter.net/appcore/fractal/cisect_imgs/p2.jpg
> http://webpages.charter.net/appcore/fractal/cisect_imgs/p3.jpg
> http://webpages.charter.net/appcore/fractal/cisect_imgs/p4.jpg

Here are three new ones (I especially like p6 and p7):

http://webpages.charter.net/appcore/fractal/cisect_imgs/p5.jpg

http://webpages.charter.net/appcore/fractal/cisect_imgs/p6.jpg

http://webpages.charter.net/appcore/fractal/cisect_imgs/p7.jpg



Sorry for all the posts! Well, it kinds of seems a bit dead around
here anyway... :^o

Anyway, I should just make a quick little webpage for all of the
images.

Chris M. Thomasson

unread,
Mar 10, 2013, 9:09:31 PM3/10/13
to
"Chris M. Thomasson" wrote in message
news:kgi26f$uu1$1...@speranza.aioe.org...

[...]

>> FWIW, here are some links to images created by the algorithm:

Here are some more fairly "awesome" circle intersection fractal images
of mine:

http://webpages.charter.net/appcore/fractal/cisect_imgs/p8.jpg

http://webpages.charter.net/appcore/fractal/cisect_imgs/p9.jpg


FWIW, `p9.jpg' is a zoom of `p8.jpg' upper left hand corner. The zoom
was not further iterated, and you still get further detail...

Also, closely examine all of the black regions enclosed in color. Then
examine the border of the fractal.

The black basically defines the set.
Any other color is out of the set.

The sets are all oozing from self-similarity...


What do you think?

Chris M. Thomasson

unread,
Mar 10, 2013, 9:22:33 PM3/10/13
to
"Chris M. Thomasson" wrote in message
news:kgi26f$uu1$1...@speranza.aioe.org...

[...]

>> FWIW, here are some links to images created by the algorithm:

> Here are some more fairly "awesome" circle intersection fractal images
> of mine:

> http://webpages.charter.net/appcore/fractal/cisect_imgs/p8.jpg

> http://webpages.charter.net/appcore/fractal/cisect_imgs/p9.jpg

Oops. I forgot to post this one, which is basically an "x-ray" for image
`p8.jpg':

http://webpages.charter.net/appcore/fractal/cisect_imgs/p10.jpg

I say x-ray because I decrease the alpha channel, and you can see further
inner structure and self-similarity... :^)

0 new messages