Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Tree-gen

Featured Replies

Just mucking about, tell me what you think:

http://www.richardlyon.co.uk/tree/tree.php

 

It generates a tree-like structure based on a few rules... lots of random numbers, plugging them into logs with a bit of trig thrown in for good measure... I might add some leaf-spawning shortly..

 

For the code-junkies out there...

<?php

// create and fill canvas
$width = 800;
$height = 1000;
$image = imagecreatetruecolor( $width, $height );
$sky = imagecolorallocate( $image, 170, 210, 230 );
imagefill( $image, 0, 0, $sky );


// root color
$root    =    imagecolorallocate( $image, 70, 56, 28 );
$leaf    =    imagecolorallocate( $image, 75, 135,55 );

// root function
function root( $image, $x1, $y1, $width, $step, $limit, $angle = false )
{
   global $root; // color

   $step++;

   if( $step > $limit ) return;

   // randomly prune
   if( rand( 0, 20 ) > 19 ) return;

   // should the branch diverge?
   $diverge = ( rand( 0, $width * 4 ) / $width > log( $width ) );

   // should the width shrink?
   $shrink_limit = $diverge ? 1: 0;
   if( $width > 1 && rand( 0, 10 ) > $shrink_limit )
   {
       $width--;
   }

   /* make new length    */

   $length = rand( $width * 2, log($width) * 50 ) / 2;

   // calculate angle
   /* width is between 1 and 20... 180 - ( w * 8 ) gives between 172 and 20 */
   /* if it is diverging, one branch has forced angle.. */
   if( isset( $angle ) || !$angle )
   {
       $angle_dif = 180 - ( $width * 8 );
       $angle_mid = 180;

       $angle_min = $angle_mid - $angle_dif;
       $angle_max = $angle_mid + $angle_dif;

       $angle = rand( $angle_min, $angle_max );
   }

   /* calculate new positions from angle, length and x1,x2 */
   $mod_x = $length * sin( deg2rad( $angle ) );
   $mod_y = $length * cos( deg2rad( $angle ) );

   $x2 = $x1 + $mod_x;
   $y2 = $y1 + $mod_y;

   if( $width == 1 && rand( 0, 10 ) > 5 )
   {
       spawn_leaf(     $image, $x2, $y2 );
   }

   // set thickness
   imagesetthickness( $image, $width / 2 );

   // draw line
   imageline( $image, $x1, $y1, $x2, $y2, $root );

   // draw new branch(es)
   if( $diverge )
   {
       root( $image, $x2, $y2, $width, $step, $limit );
   }

   $pm = ( rand(0,10) > 5 ) ? 1 : -1;

   $angle = $angle + ( $pm * 10 );

   root( $image, $x2, $y2, $width, $step, $limit, $angle );

   return $image;
}

function spawn_leaf( $image, $cx, $cy )
{
   global $leaf; // color

   // random size between 1 and 10 wide * high
   $width = rand( 1, 10 );
   $height = rand( 1, 10 );

   return imagefilledellipse  ( $image, $cx  , $cy  , $width  , $height  , $leaf  );

}

// make first root
$x = $width/2;
$y = $height;

$image = root( $image, $x, $y, 20, 1, 30 );







// output
header('Content-type: image/png');
imagepng( $image );
imagedestroy( $image );

 

EDIT: LEAFINESS ADDED

It's very cool!

 

Needs a little work on it - I got quite a few bare little twigs and once or twice:

 

"The image “http://www.richardlyon.co.uk/tree/tree.php” cannot be displayed, because it contains errors."

 

But I love the concept and it works many more times than it doesn't!

  • Author

the bare little twigs is due to the random pruning 1/20 times... the chance of one section and then failure is possible, as is 2 or 3 sections and so on... once it gets past the 4th tube its probably diverged and so failure falls to 1/400+

 

The "cannot be displayed" is probably a division by zero somewhere, but i cba figuring it out right now...

It's genius!

I really must get my head down and learn how to program one day :)

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.