DEV Community: Onikute.

How to make a logo watermark tool in Golang on any Unix Distribution

Onikute. — Tue, 29 Oct 2019 21:37:37 +0000

Introduction

A common need for creatives is to place our logo on pictures we produce. e.g. A photographer with 100s of dope pictures about to post them on social media.

In this tutorial, we will make a simple watermark tool in Golang. The program will place a smaller image (the logo) on the larger one, at the bottom right.

Go is described as an "open source programming language that makes it easy to build simple, reliable, and efficient software". It's pretty fun to learn and is worth a closer look if you're just hearing about it.

Prerequisites

You will need the following:

A computer with a working internet connection.
A local Golang installation. These tutorials by DigitalOcean can help you install and setup Go on MacOS and Ubuntu. You can also download Go for your distribution directly and follow the installation instructions after downloading.

Goals

We are setting out to make a watermark tool that can accomplish the following:

Accept names of a background image and a watermark.
Resize the watermark while preserving it’s aspect ratio.
Place the water mark on the bottom right of the background, with a default padding.
Save the new image with a different name.

Step 1 - Setting up the project folder

If you followed the instructions to install Go, you now have a working installation on your machine. We will be working from the $GOPATH/src directory, which is usually /go/src on most installations. You can run echo $GOPATH and copy the output.

Navigate to this directory using cd /go/src and create a folder named watermark by running the command mkdir watermark. Create the main.go file which we'll be using for the remainder of this tutorial by running the command touch main.go.

We also need two sample images that we'll use for our testing. You can use any images you deem fit. Just ensure they are named sample1.png and sample2.png. The output image will be stored in the output directory.

Our resulting directory structure should look like this:

/go/src    
│
└─── watermark
│   │   main.go
│   │   sample1.png
│   │   sample2.png
|   └── output

Step 2 - Installing the Image processing package

For basic image manipulation, the imaging package by disintegration is a good choice. It has features to resize, filter, transform images and more.

To install the package, run go get -u http://github.com/disintegration/imaging

Step 3 - Receiving input as command line arguments

Since this is a command line application, a good place to start is with receiving arguments. Go has a simple interface to do this using the native os package. We can retrieve arguments as strings separated by spaces in the Args property of os, which is a slice.

The first argument in os.Args is the path to the file being executed, we can remove the first element in the slice and use the rest. We can then validate the input to ensure the right arguments were entered. The code block below contains the implementation.

package main

import (
    "fmt"
    "os"
)

const invalidCommand = "Please enter a valid input."

func main() {

    // The first argument is the path to the program, so we will omit it.
    args := os.Args[1:]

    if len(args) < 2 {
        fmt.Println(invalidCommand)
        return
    }

    background := args[0]
    watermark := args[1]
}

Step 4 - Placing one image over the other

Considering the Single Responsibility Principle, we will separate the image placement logic from the watermark logic to make the program more flexible. We will also separate other common logic into functions so they are re-usable.

The PlaceImage function will receive 5 arguments which include the output image name (what we want the output to be called), plus the names and dimensions of the background image and smaller image.

The code block below provides the implementation of PlaceImage. For brevity, i'm only including the function and it's associated imports.

import (
    "fmt"
    "os"
    "github.com/disintegration/imaging"
)

func PlaceImage(outName, bgImg, markImg, markDimensions, locationDimensions string) {

    // Coordinate to super-impose on. e.g. 200x500
    locationX, locationY := ParseCoordinates(locationDimensions, "x")

    src := OpenImage(bgImg)

    // Resize the watermark to fit these dimensions, preserving aspect ratio. 
    markFit := ResizeImage(markImg, markDimensions)

    // Place the watermark over the background in the location
    dst := imaging.Paste(src, markFit, image.Pt(locationX, locationY))

    err := imaging.Save(dst, outName)

    if err != nil {
        log.Fatalf("failed to save image: %v", err)
    }

    fmt.Printf("Placed image '%s' on '%s'.\n", markImg, bgImg)
}

If you read through the code, you must have noticed there are a couple of functions that have not been defined yet. These are the helper functions I mentioned above. Let's have a look at their implementations.

ParseCoordinates - This function get x and y coordinates from text such as 200x200. It receives a string and returns two integers.

func ParseCoordinates(input, delimiter string) (int, int) {

    arr := strings.Split(input, delimiter)

    // convert a string to an int
    x, err := strconv.Atoi(arr[0])

    if err != nil {
        log.Fatalf("failed to parse x coordinate: %v", err)
    }

    y, err := strconv.Atoi(arr[1])

    if err != nil {
        log.Fatalf("failed to parse y coordinate: %v", err)
    }

    return x, y
}

OpenImage - This function reads an image from the specified path. If the image is not found, it throws a fatal error and the program is exited.

func OpenImage(name string) image.Image {
    src, err := imaging.Open(name)
    if err != nil {
        log.Fatalf("failed to open image: %v", err)
    }
    return src
}

ResizeImage - Resize an image to fit these dimensions, preserving aspect ratio.

func ResizeImage (image, dimensions string) image.Image {
    width, height := ParseCoordinates(dimensions, "x")
    src := OpenImage(image)
    return imaging.Fit(src, width, height, imaging.Lanczos)
}

Combined, these functions provide the image placement logic we need, and we can now proceed to write our watermark logic. We are getting there!

Step 5 - Calculating The Water Mark Position

Since we know the watermark is to be placed on the bottom right, we need to:

Get the co-ordinates required to place the watermark on the bottom right

We can achieve this by subtracting the watermark size from both extremes of the x and y coordinates of the background image. e.g. If the dimensions of the image are 1300x700, and the watermark size is 200x200, the watermark will be placed at 1200x500. To help in getting a mental picture of this, have a look at this image.
Add a padding

The watermark has to be spaced equidistant from the edges of the background to look good. So we need to add a padding.

This can be done easily by subtracting the padding (e.g. 20px) from both the x and y coordinates of the watermark position.

But that presents a small problem: images with an imperfect aspect ratio won't resize to 200x200 since the aspect ratio is preserved. Instead, they'd be skewed (e.g. 200x40 or 40x200), making the padding look uneven.

To solve this problem, we specify a constant padding of 20 and multiply that by the aspect ratio of the background. This means that the larger side of the image will have less padding, and will remain equidistant from the borders.

The function itself is brief and is separated into different variable names for clarity.

  // Subtracts the dimensions of the watermark and padding based on the background's aspect ratio

    func CalcWaterMarkPosition(bgDimensions, markDimensions image.Point, aspectRatio float64) (int, int) {

        bgX := bgDimensions.X
        bgY := bgDimensions.Y
        markX := markDimensions.X
        markY := markDimensions.Y

        padding := 20 * int(aspectRatio)

        return bgX - markX - padding, bgY - markY - padding
    }

Step 6 - Adding the water mark

We're almost there! Now we can implement the function to add the watermark. This function does the following:

Generates a name for the output image.
Gets the dimensions of both the background and watermark, using the resize function.
Calculates the watermark position.
Places the image on the watermark position.

This is implemented in the following code-block.

    func addWaterMark(bgImg, watermark string) {

        outName := fmt.Sprintf("watermark-new-%s", watermark)

        src := OpenImage(bgImg)

        markFit := ResizeImage(watermark, "200x200")

        bgDimensions := src.Bounds().Max
        markDimensions := markFit.Bounds().Max

        bgAspectRatio := math.Round(float64(bgDimensions.X) / float64(bgDimensions.Y))

        xPos, yPos := CalcWaterMarkPosition(bgDimensions, markDimensions, bgAspectRatio)

        PlaceImage(outName, bgImg, watermark, watermarkSize, fmt.Sprintf("%dx%d", xPos, yPos))

        fmt.Printf("Added watermark '%s' to image '%s' with dimensions %s.\n", watermark, bgImg, watermarkSize)
    }

Step 7 - Bringing it all together

We can now complete our main function by bringing all the functions together and running a command. e.g. go run main.go sample1.png sample2.png. The following code-block contains all the code.

    package main

    import (
        "fmt"
        "image"
        "log"
        "math"
        "os"
        "strconv"
        "strings"

        "github.com/disintegration/imaging"
    )

    const invalidCommand = "Please enter a valid input."

    func main() {

        // The first argument is the path to the program, so we will omit it.
        args := os.Args[1:]

        if len(args) < 2 {
            fmt.Println(invalidCommand)
            return
        }

        background := args[0]
        watermark := args[1]

        addWaterMark(background, watermark)
    }

    func addWaterMark(bgImg, watermark string) {

        outName := fmt.Sprintf("watermark-new-%s", watermark)

        src := OpenImage(bgImg)

        markFit := ResizeImage(watermark, "200x200")

        bgDimensions := src.Bounds().Max
        markDimensions := markFit.Bounds().Max

        bgAspectRatio := math.Round(float64(bgDimensions.X) / float64(bgDimensions.Y))

        xPos, yPos := CalcWaterMarkPosition(bgDimensions, markDimensions, bgAspectRatio)

        PlaceImage(outName, bgImg, watermark, watermarkSize, fmt.Sprintf("%dx%d", xPos, yPos))

        fmt.Printf("Added watermark '%s' to image '%s' with dimensions %s.\n", watermark, bgImg, watermarkSize)
    }

    func PlaceImage(outName, bgImg, markImg, markDimensions, locationDimensions string) {

        // Coordinate to super-impose on. e.g. 200x500
        locationX, locationY := ParseCoordinates(locationDimensions, "x")

        src := OpenImage(bgImg)

        // Resize the watermark to fit these dimensions, preserving aspect ratio. 
        markFit := ResizeImage(markImg, markDimensions)

        // Place the watermark over the background in the location
        dst := imaging.Paste(src, markFit, image.Pt(locationX, locationY))

        err := imaging.Save(dst, outName)

        if err != nil {
            log.Fatalf("failed to save image: %v", err)
        }

        fmt.Printf("Placed image '%s' on '%s'.\n", markImg, bgImg)
    }

    func resizeImage (image, dimensions string) image.Image {

        width, height := ParseCoordinates(dimensions, "x")

        src := OpenImage(image)

        return imaging.Fit(src, width, height, imaging.Lanczos)
    }

    func OpenImage(name string) image.Image {
        src, err := imaging.Open(name)
        if err != nil {
            log.Fatalf("failed to open image: %v", err)
        }
        return src
    }

    func ParseCoordinates(input, delimiter string) (int, int) {

        arr := strings.Split(input, delimiter)

        // convert a string to an int
        x, err := strconv.Atoi(arr[0])

        if err != nil {
            log.Fatalf("failed to parse x coordinate: %v", err)
        }

        y, err := strconv.Atoi(arr[1])

        if err != nil {
            log.Fatalf("failed to parse y coordinate: %v", err)
        }

        return x, y
    }

Conclusion

In this tutorial, we have written a basic watermark tool in ~100 lines of Golang. Hopefully this was pretty straightforward and easy to replicate. We can extend this and make it better in a couple of ways.

Add support for multiple background images.
Refactor ParseCoordinates - There has to be a shorter way to do this lol. Maybe map and convert all elements to int.
Add support for different positions.

It's important to keep thinking of new ways to improve the software we come across daily, as we can inadvertently push software engineering forward by doing so.

I hope you had as much fun as I did making this!

Ejo | Yoruba Snake Game

Onikute. — Wed, 23 Oct 2019 08:24:30 +0000

This main purpose of this post is to describe how the game was built. Most of it is already covered in the video tutorial though. I just added all the Yoruba nonsense.

The game consists of:

A snake eating eba.
Scoreboard.
Health bar.
Exciting animations for a 2D game.
Pause menu.
About Menu.

Rules:

If he eats himself three times, he dies.
Bushes at the edge are poisonous so they drain all his health.
You get bonus points after eating a particular amount at intervals.

Setup

Pygame is a standard Python library for making games. It's very popular and has great support. It's the main module for the game. Pyganim is used here to add animations to the game.

In this phase we:

Import dependencies.
Setup the game screen (Text, Display Width and Height, Icon, Caption, Colors etc).
Load images.

    import pygame
    import pyganim
    import os
    import random

    pygame.init()

    images_path = os.getcwd() + "\images\\"

    # Setting the display width and height
    display_width = 800
    display_height = 600
    gameDisplay = pygame.display.set_mode((display_width,display_height))
    pygame.display.set_caption('Ejo')

Animations

The way the animations work is mostly to create frames and go through them at pre-defined speeds. To make an infinite animation, you can create an infinite loop. For example:

game_overAnim = pyganim.PygAnimation([(images_path + 'game_over2.png', 150), (images_path + 'game_over3.png', 100)])
bonusAnim = pyganim.PygAnimation([(images_path+'bonus_text1.png', 150), (images_path+'bonus_text2.png', 100)])

while game_over is True:
        game_overAnim.play()

Screen Display

The pygame screen is a cartesian plane. What you have to do is write content to the screen at specified coordinates. After writing, you need to call pygame.display.update.

message_to_screen is a helper function used throughout the game to well, display a message to the screen. First, it gets the rendered font from calling text_objects and determines where the centre of the message should be.

def message_to_screen(msg, color, y_displace=0, x_displace=0, size="small", font=None, font_size=None):
    """
    :param msg:
    :param color:
    :param y_displace:
    :param x_displace:
    :param size:
    :param font:
    :param font_size:
    :return:
    """
    text_surf, text_rect = text_objects(msg, color, size, font, font_size)
    text_rect.center = (display_width/2) + x_displace, (display_height/2) + y_displace
    gameDisplay.blit(text_surf, text_rect)

def text_objects(text, color, size = None,  font = None, fontSize = None):
    """
    :param text:
    :param color:
    :param size:
    :param font:
    :param fontSize:
    :return:
    """
    text_surface = None

    if size == 'small':
        text_surface = small_font.render(text, True, color)
    elif size == 'medium':
        text_surface = med_fontButton.render(text, True, color)
    elif size == 'large':
        text_surface = large_font.render(text, True, color)
    elif font is not None:
        font = pygame.font.Font(r'C:\Users\Ope O\Downloads\Fonts' + '\\' + font , fontSize)
        text_surface = font.render(text, True, color)

    return text_surface, text_surface.get_rect()

gameDisplay.blit(image, x, y) is used to display images to the screen. You'd come across it often in the code.

Snake

The snake is a list, which is appended to increase the length etc. The main characteristics of the snake are:

Length - As long as the items in the list, plus the length. Each item that's not the head has a block size of 20.
Health - Starts off at 90. Reduced by 30 if snake eats itself and totally if you enter the barrier.
Skin - Each entry in the list (that is not the head) is displayed using an image loaded from source.
Head - First list element. An image is used to depict this too.

Direction - The snake moves in a direction by continuously adding to the coordinates in the main game loop. The default block size is 20.

for event in pygame.event.get():
        if event.type == pygame.QUIT:
            game_exit = True
        if event.type == pygame.KEYDOWN:
            if event.key == pygame.K_LEFT:
                direction = 'left'
                lead_x_change = -block_size
                lead_y_change = 0
            elif event.key == pygame.K_RIGHT:
                direction = 'right'
                lead_x_change = block_size
                lead_y_change = 0 
            elif event.key == pygame.K_UP:
                direction = 'up'
                lead_y_change = -block_size
                lead_x_change = 0 
            elif event.key == pygame.K_DOWN:
                direction = 'down'
                lead_y_change = block_size
                lead_x_change = 0
            elif event.key == pygame.K_p:
                pause()

lead_x += lead_x_change
lead_y += lead_y_change

snake_head = list()
snake_head.append(lead_x)
snake_head.append(lead_y)
snake_list.append(snake_head)

When the direction is changed, the snake head needs to be rotated to face the direction it's moving.

def Snake(block_size, snake_list):
    """
    functionality for rotation
    :param block_size:
    :param snake_list:
    :return:
    """

    head = None

    if direction == 'right':
        head = pygame.transform.rotate(img, 270)
    if direction == 'left':
        head = pygame.transform.rotate(img, 90)
    if direction == 'up':
        head = img
    if direction == 'down':
        head = pygame.transform.rotate(img, 180)

    gameDisplay.blit(head, (snake_list[-1][0], snake_list[-1][1]))

    for XnY in snake_list[:-1]:
        gameDisplay.blit(skin,  (XnY[0], XnY[1]))

Position - Each part of the snake's body has it's own (x & y) coordinates.

Game Loop

Most of the functionality of the game is implemented by running while loops, including what is called the main game loop. The loop is only exited on some user input e.g. exit.

Going back to calling pygame.display.update, the display needs to be updated after each iteration of the loop to ensure graphics are rendered properly.

In the while loops, various conditions are checked to determine if an action needs to be taken. Some examples of this are:

The snake head intersecting with a body part.
User pressing pause.
Snake head meeting the barrier.

Snake head intersecting with eba.

# And this is the code for when the snake 'eats' an apple
if (rand_apple_x < lead_x < rand_apple_x + AppleThickness) or (
      rand_apple_x < lead_x + block_size < rand_apple_x + AppleThickness):
  if rand_apple_y < lead_y < rand_apple_y + AppleThickness:
      rand_apple_x, rand_apple_y = randAppleGen()
      score_value += 4
      snake_length += 4
  elif rand_apple_y < lead_y + block_size < rand_apple_y + AppleThickness:
      rand_apple_x, rand_apple_y = randAppleGen()
      snake_length += 4
      score_value += 4

Eba

The eba is displayed using an image loaded from source. It's main functionality is to be generated in pseudo-random positions for the user to chase, and re-generate when it's 'eaten'.

The apple thickness is a global variable set by default to 30.

def randAppleGen():

    """

    :return:

    """

    rand_apple_x = round(random.randrange(40, display_width - AppleThickness - 40))

    rand_apple_y = round(random.randrange(30, display_height - AppleThickness - 30))
return rand_apple_x, rand_apple_y

Score

The score is text displayed at the upper right corner.

def score_update(score):

    """

    :param score:

    :return:

    """

    text = small_font.render('Score: ' + str(score), True, white)

    gameDisplay.blit(text, [display_width - 765,20])

Health Bar

def health_bars(snake_health):

    """

    :param snake_health:

    :return:

    """

    if snake_health > 75:

        snake_health_color = green

    elif snake_health > 50:

        snake_health_color = yellow

    else:

        snake_health_color = red

    health_text = small_font.render('Health: ', True, white)

    gameDisplay.blit(health_text,[display_width-210, 20])

    pygame.draw.rect(gameDisplay, black , (display_width-131, 25, 92, 22))

    pygame.draw.rect(gameDisplay, white , (display_width-130, 26, 90, 20))

    pygame.draw.rect(gameDisplay, snake_health_color , (display_width-130, 26, snake_health, 20))

Screenshots

Running in Docker

I tried to put the app in a container for the purpose of this post, but couldn't. I'll publish another post soon about that whole process and why it might not be a dead-end.

Tbh though, all you really need is to have Python on your machine and probably ability to create a virtualenv.

Ideas/Improvements

Soundtrack.
Storyline.
Different levels e.g. random obstacles get introduced at higher levels.
High Score.

If you want to see the entire picture, the repo is open-source here. Feel free to clone and contribute.