Labels

Code Snippet #1: The Fractal Tree!

 I found this neat little snippet of code and decided this will be the first in a long series of daily code snippets that do things that might interest some of you guys or even inspire something

this one for instance makes a small little tree in HTML
so here is how to make a tree in HTML Canvas

this is the code to copy if you want to play with it or learn how it works:

how to make a tree in HTML Canvas
<!DOCTYPE html>
<html>
<head>
  <title>Canvas Tree</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      function drawTree(x, y, angle, length) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);

        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -length);
        ctx.stroke();

        if (length > 4) {
          drawTree(0, -length, angle + 25, length * 0.7);
          drawTree(0, -length, angle - 25, length * 0.7);
        }
        ctx.restore();
      }
      drawTree(canvas.width / 2, canvas.height, 0, 100);
    });
  </script>
</body>
</html>

here is what my friend has to say about this code.

Code Breakdown:

Canvas Setup: The <canvas> element is utilized to create a blank canvas that adapts dynamically to the window size.

Drawing the Tree: The JavaScript code employs the HTML5 Canvas API to draw a tree in a recursive fashion. The drawTree function, with its clever use of translations, rotations, and line drawing, orchestrates the creation of intricate branches.

Understanding the Canvas Tree Algorithm:

The heart of this code lies in the recursive nature of the drawTree function. Here's a brief breakdown of its key components:

Translation and Rotation: The ctx.translate and ctx.rotate functions manipulate the canvas context, allowing the drawing of branches at different angles and positions.

Line Drawing: The ctx.beginPath, ctx.moveTo, and ctx.lineTo functions create the lines representing the tree branches.

Recursion: The magic happens as the drawTree function calls itself to draw smaller branches, creating a visually appealing and dynamic tree structure.

Application and Learning:

Remember, this code is just the foundation. Explore further by:

Tuning the Parameters: Modify the values passed to the drawTree function to adjust the size, angle, and branching patterns, generating unique and diverse trees.

Adding Color: Infuse your creations with life by introducing color variations to the branches. Experiment with different palettes and gradients to enhance the visual appeal.

Exploring Leaves: Go beyond simple lines and add leaf shapes to your branches, creating a more realistic and vibrant representation of nature's artistry.

Labels:

Comments

Post a Comment

Quote of the day