Generating Patterns Dynamically using PHP GD

PHP GD allows us to generate various dynamic patterns by using functions like imagefilledrectangle(), imagearc(), imagesetpixel(), and more. These patterns can be used for backgrounds, graphics, and visual effects in web applications.

Example 1: Checkerboard Pattern

This example creates an 8x8 **checkerboard pattern** using imagefilledrectangle().

<?php
header("Content-Type: image/png");

$width = 400;
$height = 400;
$rows = 8;
$cols = 8;
$cell_width = $width / $cols;
$cell_height = $height / $rows;

$image = imagecreate($width, $height);

$white = imagecolorallocate($image, 255, 255, 255);
$black = imagecolorallocate($image, 0, 0, 0);

for ($row = 0; $row < $rows; $row++) {
    for ($col = 0; $col < $cols; $col++) {
        $color = ($row + $col) % 2 == 0 ? $white : $black;
        imagefilledrectangle($image,$col * $cell_width,$row * $cell_height,($col + 1) * $cell_width,($row + 1) * $cell_height,$color);
		}
}

imagepng($image);
imagedestroy($image);
?>

Code Explanation

• Initialize the image: Create a 400x400 image canvas.
• Define Colors: Assign white and black colors using `imagecolorallocate()`.
• Loop through rows & columns: Draw alternating black and white squares.
• Output as PNG: Display the final checkerboard pattern.

Example 2: Zigzag Pattern

This example generates a zigzag pattern by using `imageline()` to create diagonal lines connecting alternating points.

<?php
header("Content-Type: image/png");

$width = 400;
$height = 300;
$image = imagecreate($width, $height);

$background = imagecolorallocate($image, 255, 255, 255);
$line_color = imagecolorallocate($image, 0, 0, 0);

$step = 20; // Zigzag line spacing

for ($x = 0; $x < $width; $x += $step) {
    imageline($image, $x, 0, $x + $step, $height, $line_color);
    imageline($image, $x + $step, $height, $x + ($step * 2), 0, $line_color);
}

imagepng($image);
imagedestroy($image);
?>

Code Explanation

• Initialize the Image: Creates a `400x300` canvas.
• Define Colors: Background is white, and zigzag lines are black.
• Loop to Draw Zigzag: Uses `imageline()` to draw diagonal lines in a repeated pattern.
• Adjustable Step Size: `$step = 20` controls the spacing of the zigzag pattern.
• Final Output: The pattern is generated and displayed as a PNG image.

This method is useful for background effects, loading screens, or artistic designs using PHP GD.

Example 3: Diagonal Stripes Pattern

This example creates a diagonal striped pattern using `imageline()` to draw slanted lines across the image.

<?php
header("Content-Type: image/png");

$width = 400;
$height = 300;
$image = imagecreate($width, $height);

$background = imagecolorallocate($image, 255, 255, 255);
$line_color = imagecolorallocate($image, 0, 0, 255); // Blue stripes

$spacing = 20; // Gap between diagonal stripes

for ($i = -$height; $i < $width; $i += $spacing) {
    imageline($image, $i, 0, $i + $height, $height, $line_color);
}

imagepng($image);
imagedestroy($image);
?>

Code Explanation

• Initialize the Image: Creates a `400x300` canvas.
• Define Colors: Background is white, and diagonal stripes are blue.
• Loop to Draw Stripes: `imageline()` is used to draw diagonal lines across the image.
• Spacing Control: `$spacing = 20` defines the distance between each stripe.
• Final Output: Generates and displays a PNG image with a diagonal striped pattern.

This technique is useful for background designs, security patterns, or visual effects in PHP GD.

Example 4: Diagonal Stripes Pattern

This example generates a diagonal stripe pattern by drawing parallel lines across the image at an angle.

<?php
header("Content-Type: image/png");

$width = 400;
$height = 400;
$stripe_width = 20; // Width of each stripe

$image = imagecreate($width, $height);

$white = imagecolorallocate($image, 255, 255, 255);
$black = imagecolorallocate($image, 0, 0, 0);

for ($i = -$height; $i < $width; $i += $stripe_width * 2) {
    imagefilledpolygon(
        $image,
        [
            $i, 0,
            $i + $stripe_width, 0,
            $i + $width, $height,
            $i + $width - $stripe_width, $height
        ],
        4,
        $black
    );
}

imagepng($image);
imagedestroy($image);
?>

Code Explanation

• Initialize the Image: Creates a `400x400` canvas.
• Define Colors: White background with black diagonal stripes.
• Draw Diagonal Stripes: Uses `imagefilledpolygon()` to create slanted rectangles across the image.
• Loop Through Stripes: Moves across the image at a defined stripe width.
• Final Output: Generates and displays a PNG image with diagonal stripes.

This pattern is useful for background designs, security overlays, and graphical textures in PHP GD.

Example 5: Triangle Pattern

This example generates a triangle pattern using diagonal lines drawn with PHP GD.

<?php
header("Content-Type: image/png");

$width = 400;
$height = 400;
$image = imagecreate($width, $height);

$white = imagecolorallocate($image, 255, 255, 255);
$black = imagecolorallocate($image, 0, 0, 0);

$gap = 40; // Distance between diagonal lines

for ($i = 0; $i <= $width; $i += $gap) {
    imageline($image, 200, 0, $i, $height, $black);
    imageline($image, 200, 0, 400 - $i, $height, $black);
}

imagepng($image);
imagedestroy($image);
?>

Code Explanation

• Initialize the Image: Creates a `400x400` canvas.
• Define Colors: Uses black lines on a white background.
• Draw the Triangle: Loops through the width to create diagonal lines converging at the top.
• Mirrored Effect: Draws left and right diagonal lines symmetrically.
• Final Output: Displays a triangular pattern using PHP GD.

This **Triangle Pattern** is useful for decorative backgrounds, game graphics, or UI elements in PHP applications.

Example 6: Diamond Pattern

This example generates a diamond pattern by drawing diagonal lines from the center outward.

<?php
header("Content-Type: image/png");

$width = 400;
$height = 400;
$image = imagecreate($width, $height);

$white = imagecolorallocate($image, 255, 255, 255);
$black = imagecolorallocate($image, 0, 0, 0);

$gap = 20; // Distance between lines
$center_x = $width / 2;
$center_y = $height / 2;

for ($i = 0; $i <= $center_x; $i += $gap) {
    imageline($image, $center_x - $i, $center_y, $center_x, $center_y - $i, $black);
    imageline($image, $center_x + $i, $center_y, $center_x, $center_y - $i, $black);
    imageline($image, $center_x - $i, $center_y, $center_x, $center_y + $i, $black);
    imageline($image, $center_x + $i, $center_y, $center_x, $center_y + $i, $black);
}

imagepng($image);
imagedestroy($image);
?>

Code Explanation

• Canvas Setup: A `400x400` image is created with a white background.
• Drawing the Diamond: Four diagonal lines are drawn symmetrically from the center outward.
• Spacing Control: The `$gap` variable adjusts the spacing between lines.
• Symmetry Effect: By mirroring lines across the center, a perfect diamond pattern emerges.

This diamond pattern can be useful for backgrounds, decorative graphics, or geometric design elements in PHP applications.

Example 7: Crosshatch Pattern

This example generates a crosshatch pattern by drawing evenly spaced horizontal and vertical lines.

<?php
header("Content-Type: image/png");

$width = 400;
$height = 400;
$image = imagecreate($width, $height);

$white = imagecolorallocate($image, 255, 255, 255);
$black = imagecolorallocate($image, 0, 0, 0);

$gap = 20; // Distance between lines

// Draw vertical lines
for ($x = 0; $x <= $width; $x += $gap) {
    imageline($image, $x, 0, $x, $height, $black);
}

// Draw horizontal lines
for ($y = 0; $y <= $height; $y += $gap) {
    imageline($image, 0, $y, $width, $y, $black);
}

imagepng($image);
imagedestroy($image);
?>

Code Explanation

• Canvas Setup: A `400x400` image is created with a white background.
• Drawing Vertical Lines: A loop draws evenly spaced vertical lines across the image.
• Drawing Horizontal Lines: Another loop draws horizontal lines at the same spacing.
• Crosshatch Effect: The combination of both sets of lines forms a structured grid.

This crosshatch pattern is useful for backgrounds, texture effects, or grid-based designs in PHP applications.