TapocoL Developing Tomorrow

Well, I have been very busy with school and other projects, that I have not been able to really get this personal site going. School has now ended for me as of 2 days ago, and I wanted to put up one of my fun personal learning projects on the site.

SVG is one of my favorite upcoming web-technologies. From it's XML-based language to the limitless possiblities with extending it, I think SVG will replace a majority of the images used online in the near future. So, this project started with creating bubbles to be randomly positioned throughout a given SVG area (width by height). You can set the size of the area, the amount of bubbles to appear in the area, the minimum and maximum size of each bubble, and the size of the border of the bubble.

<?php
header('Content-type: image/svg+xml');
 
define('WIDTH', 800);
define('HEIGHT', 600);
define('BUBBLES', 100);
define('MIN_SIZE', 5);
define('MAX_SIZE', 15);
define('STROKE_SIZE', 1);
 
echo '<?xml version="1.0" standalone="no"?>';
?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="<?php echo WIDTH; ?>" height="<?php echo HEIGHT; ?>" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g style="fill-opacity:0;stroke:rgb(0,0,0);stroke-width:<?php echo STROKE_SIZE; ?>;">
  <?php for ($i = 0; $i < BUBBLES; $i++) {
    $size = rand(MIN_SIZE, MAX_SIZE);
    $x = rand($size + STROKE_SIZE, WIDTH - $size - (STROKE_SIZE * 2));
    $y = rand($size + STROKE_SIZE, HEIGHT - $size - (STROKE_SIZE * 2)); ?>
    <circle cx="<?php echo $x; ?>" cy="<?php echo $y; ?>" r="<?php echo $size; ?>" />
  <?php } ?>
  </g>
</svg>

I will run through the SVG parts, first. echo '<?xml version="1.0" standalone="no"?>'; was used because of the <? causing errors in PHP. The DOCTYPE and SVG element are normal, so I will by pass those. The code uses grouping in SVG: <g style="fill-opacity:0;stroke:rgb(0,0,0);stroke-width:<?php echo STROKE_SIZE; ?>;">. This will set the style for all elements inside of the group with the group's attributes. The circle element has 3 main attributes. 'cx' and 'cy' are the center coordinates of the circle. 'r' is the radius of the circle.

Now, the random part is generated by PHP's rand function. The 'rand' function has two optional arguments and will generate a random integer from the arguments. If you only use 1 argument, it will be counted as the maximum integer allowed. If you use 2 arguments, the first argument is the minimum integer and the second is the maximum integer. Now, that makes the $size variable easy to create $size = rand(MIN_SIZE, MAX_SIZE);. The trickier part is setting up the coordinates, because remember the 'cx' and the 'cy' attributes are the CENTER of the circle. So, we need to make sure no bubbles get cut off of the SVG area. But, there is another problem, the $size is only for the 'r' attribute, and that does not include the stroke-width, which will be cut off if not adjusted properly. So, you add the stroke-width and the $size together for the minimum, and then use the width/height minus the size and the stroke-width * 2 (since the stroke-width is now included on each side of the circle).

And, there you go. A way to create randomly positioned and sized bubbles (transparent SVG circles with a border) within a given SVG area. I have created a follow-up to this making these bubbles interactive. Go here to see how easy it is to work with SVG for interactivity.