Experimenting with Slang — Average picture color

Photo by Ricardo Gomez Angel on Unsplash

If you are one of the people, who like me, struggle with aesthetics and still want to create a harmonizing collage, re-decorate your room etc. ,with out getting a sore eye, you need help. And thankfully, Slang is here to help. You can download it here!

You might wonder how a programming language can solve a problem like this — but, it is actually very simple: take the images you might want to put up in your collage, calculate their average color and see if they are a match. If yes, continue with building your collage, if not, go find another picture. Thankfully, you will not have to read a thick manual or debug any code to do so. As Slang is a visual and flow-based language, you only have to pick out your operators and connect them correctly. Now you might say that it is always easier done than said, but I am happy to proof to you how simple it is. In total, you will need only four operators and seven connecting flows.

Once you downloaded Slang, just click on the file and Slang should first open your console and then a new window with Slang in your default browser.

Start page of Slang

In the bottom left corner you will find the “New operator” field and this is where we start. Type in the name for your local operator (I called it “AverageColor”) and click on the plus sign.

You are now ‘inside’ of your local operator and can start coding it. First, we enter the settings for our input and output:

Preparing the operator

1. Change the in-port to map and add two parameters: the actual image (binary) and the name (String)of the image. Slang will later automatically recognize that you want to upload something and will give you the upload option (more on this later).
2. Of course we will also need to define the output: For this we need three out-port, red, green and blue. This way, we will later receive the numbers of the RGB code.

Different operators

Now we are ready to choose our operators. We will need a “Decode” operator for our image, and three “Average” operators for our colors (red, blue and green). Connect the yellow arrow on the top of with the yellow arrow of the “Decode” operator. Secondly, hover over the out-ports of the decode block; you will see “pixels.blue”, “pixels.green” and “pixels.red”. Relate these three ports with one “Average” block each. Lastly, hover over the out-ports on the bottom to see which one is related to which color. The order should be blue, green red. Link the blue out-port with the blue average, the green out-port with the green average and the red out-port with the red average.

Once this is all done, your Slang window should look like this:

Finished Slang code

Click on the save button on the top left corner and then hit play. The bottom of your wind should now look like this:

The operator in action

All that is left to do now is upload your file (.jpg or .png) and press “Send”. As I mentioned before, Slang recognizes that you are trying to upload a picture (the “Decode” operator is only for images, thats why) and as a smart tool, Slang will also recognize that you want to have the color as an output; this is why your output will look like this:

AverageColor output

Just be aware that larger pictures will take a longer time to be processed.

Isn’t that neat? So now that you know how to build an average-color-operator, you will never have troubles putting together matching pictures again!