Grid using Perl

With these 3 images we are trying to show how higher resolution makes the pixels "disappear". In all 3 images we are drawing a diagonal line.

The images

In the first image we have a resolution of 3x3 and thus the diagonal line consists of 3 pixels. It is very clear that these are pixels.

In the second image the resolution is 10x10. We can still clearly see the pixels, but we can also see that the line is a bit smoother.

In the third image the resolution is even better. It is 120x120 pixels. Due to the frequency of the grid lines the image is almost black, but those lines are only there so we can see the resolution. The diagonal seems to be smooth. People with good eyes can still see that it is made out of individual pixels, but many people will already miss that.

If we increased the resolution even further, (eg. my external screen is 2560x1440 pixels and the built-in screen of my notebook is 3840x2400 pixels) the line would seem totally smooth.

The code:

In this case it was written in Perl, but we have examples in other languages as well.

use strict;
use warnings;
use SVG (-nocredits => 1, -inline => 1);

my $IMAGE_WIDTH = 400;
my $IMAGE_HEIGHT = 400;
my $DEFAULT_NUMBER_OF_PIXELS = 20;

die "Usage: $0 WIDTH (in real pixels) HEIGHT (in real pixels) SIZE (how many real pixels is the side of a pixel in the grid)\n"
    if @ARGV != 3;

my ($width, $height, $size) = @ARGV;
my $svg = draw_grid(@ARGV);
draw_diagonal_line($svg, @ARGV);
print $svg->xmlify();

sub draw_diagonal_line {
    my ($svg, $width, $height, $size) = @_;
    for my $box (1..$height/$size) {
        # horizontal line
        $svg->rectangle(
            x =>  ($box-1) * $size,
            y =>  ($box-1) * $size,
            width =>  $size,
            height =>  $size,
            fill => "red",
        );
    }

}


sub draw_grid {
    my ($width, $height, $size) = @_;
    die "Width of $width cannot be divided by $size\n"
        if $width / $size != int($width / $size);
    die "Height of $height cannot be divided by $size\n"
        if $height / $size != int($height / $size);

    my $svg = SVG->new( width => $width, height => $height);

    for my $row (0..$height/$size) {
        # horizontal line
        $svg->line(
            x1 =>  0,
            y1 =>  $row * $size,
            x2 =>  $width,
            y2 =>  $row * $size,
            stroke => "black",
            "stroke-width" => 1,
        );
    }


    for my $column (0..$width/$size) {
        # vertical line
        $svg->line(
            x1 =>  $column * $size,
            y1 =>  0,
            x2 =>  $column * $size,
            y2 =>  $height,
            stroke => "black",
            "stroke-width" => 1,
        );
    }
    return $svg;
}

$ perl src/examples/perl/grid.pl 600 600 200 > src/examples/perl/grid-600-600-200.svg
$ perl src/examples/perl/grid.pl 600 600 60 > src/examples/perl/grid-600-600-60.svg
$ perl src/examples/perl/grid.pl 600 600 5 > src/examples/perl/grid-600-600-2.svg