My Pixels: Four Shades – Strength in Man 0

My Pixels: Four Shades – Strength in Man 0

Count the colors please.

Are they 4? Ops, its 5. My mistake! It should be in the monochromatic category.

I saw a video on YouTube in which someone was doing a pixel art and it is my attempt to try to imitate him. (It is obviously not the same and he did it much better. And I forgot that video title and channel name -_- )

I tried to do dithering (regular pixel pattern) and it is… ammm okay. But the hand is so badly drawn and looks disproportionate.

I draw it on Pyxel Edit and colorized it on GIMP (It was black and white). Unfortunately, I uploaded only the colorized version which have this problem that the whites are not whiter.

Grid Size: 128*96 (This is scaled by 4)

Strength In Man 0
Strength In Man 0
Advertisements

My Pixels: Random Man 1

My Pixels: Random Man 1

Bored me, tried to do some pixel art.

I did a lazy pixel art. And bothered uploading it on my blog. It is quite a long time since I did a 32 by 32 pixel art. Here, you can see a scaled version (128 by 128 pixels).

Huh! At least, better than my first pixel art.

Grid Size: 32*32

Random Pixel Man 1
Random Pixel Man 1

My Pixels: Monochromatic – Red Dungeon

My Pixels: Monochromatic – Red Dungeon

Monochromatic… must be boring.

It is similar to the Four Shades category but… with more shades.

I hope that makes sense. This time it is a Red Dungeon… more like bloody dungeon. I started off by thinking of a horror/creepy scene and it ended up like that.

2 versions, one with more contrast. This time, I used Pyxel Edit free version which you can download here.

The only feature I used it for, is Tiling feature. It not only allow us to use a group of pixels in a repetitive tiling fashion but it does so in kinda, live mode. Other than that, you don’t get much from the free version.

Each tile is 32*32 pixels. Grid size of the whole image doesn’t matter when using tiling. So, I didn’t bothered with it.

redDungeon0Cropped
Red Dungeon
redDungeonContrast
Red Dungeon (Contrast)

 

Box Blur with SDL2

Box Blur with SDL2

Originally, this post is intended to be on cplusplus.com as an article of mine but they never accepted it. So, I thought why not just put it on my own website. If you know what the heck SDL2 and C++ is, you can understand the technique.


What is Box Blur?

Box Blur is a very easy technique of blurring an image. It is based on the fact that there is replacing of the color of a pixel with the average of all the colors of its adjacent pixels. With that said, the number of adjacent pixels can be increased or decreased, giving us the option to increase or decrease the extent of blurring effect as well.

The Implementation

First thing, you should know basics of C++ as well as a bit of SDL2. You should know bit shifting, some commonly used color formats and image formats.
We are going to use SDL2 along with SDL2_image. SDL2_image allows us to work with many image formats. We are only going to use PNG image format.

It is going to be a single file project and there will be no exception handling.

We are not going to make UI for managing things like input image name or blur extent. But we do have a settings file acting as input which will provide necessary data to work properly. Therefore, we will include fstream header.

We will also have some safety to know our errors and for this, we need to include iostream. All other headers are as expected.

#include <iostream>
#include <string>
#include <fstream>
#include <SDL.h>
#include <SDL_image.h>

Now that, we talked about input, there are variables to keep them too.

//Input data
int window_width = 800;
int window_height = 600;
std::string input_image_name = "inputImage.png";
std::string output_image_name = "NULL";
int blur_extent = 1;

There will be no SDL_Texture. It is almost useless to have textures because we have to do pixel manipulation with it, all onto the CPU in one way or the other. SDL_Surface is ideal for direct pixel manipulation onto the CPU.

//SDL structures
SDL_Window* window = NULL;
SDL_Event input;
SDL_Surface* windowSurface = NULL;
SDL_Surface* imageSurface = NULL;

bool quit = false;

A simple function to get input from a file in a proper way.

void getInput(std::string inputFileName)
{
	std::ifstream inputFile;
	inputFile.open(inputFileName);

	if (inputFile.fail())
	{
		std::cerr << "ERROR: Failed to open " << inputFileName << "." << std::endl; 	} 	else 	{ 		while (inputFile.good()) 		{ 			std::string tag; 			inputFile >> tag;

			if (tag == "[window_width]") inputFile >> window_width;
			else if (tag == "[window_height]") inputFile >> window_height;
			else if (tag == "[input_image_name]") inputFile >> input_image_name;
			else if (tag == "[output_image_name]") inputFile >> output_image_name;
			else if (tag == "[blur_extent]") inputFile >> blur_extent;
		}
	}

	inputFile.close();
}

After getting input, it is time for initializing the systems.

void init()
{
	SDL_Init(SDL_INIT_EVERYTHING);
	window = SDL_CreateWindow("BoxBlurrer",
		SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED,
		window_width, window_height, SDL_WINDOW_SHOWN);
	windowSurface = SDL_GetWindowSurface(window);
	imageSurface = IMG_Load(input_image_name.c_str());
}

After initializing the systems, we have to blur the image that we loaded in.

Box blur is just averaging the color values of adjacent pixels and then, using it as the color values of that pixel. It is called box blur because of the fact that it is always done in a square.

void blur() //This manipulates with SDL_Surface and gives it box blur effect
{
	for (int y = 0; y < imageSurface->h; y++)
	{
		for (int x = 0; x < (imageSurface->pitch / 4); x++)
		{
			Uint32 color = ((Uint32*)imageSurface->pixels)[(y * (imageSurface->pitch / 4)) + x];

			//SDL_GetRGBA() is a method for getting color
			//components from a 32 bit color
			Uint8 r = 0, g = 0, b = 0, a = 0;
			SDL_GetRGBA(color, imageSurface->format, &r, &g, &b, &a);

			Uint32 rb = 0, gb = 0, bb = 0, ab = 0;

			//Within the two for-loops below, colors of adjacent pixels are added up

			for (int yo = -blur_extent; yo <= blur_extent; yo++)
			{
				for (int xo = -blur_extent; xo <= blur_extent; xo++) 				{ 					if (y + yo >= 0 && x + xo >= 0
						&& y + yo < imageSurface->h && x + xo < (imageSurface->pitch / 4)
						)
					{
						Uint32 colOth = ((Uint32*)imageSurface->pixels)[((y + yo)
                                                * (imageSurface->pitch / 4)) + (x + xo)];

						Uint8 ro = 0, go = 0, bo = 0, ao = 0;
						SDL_GetRGBA(colOth, imageSurface->format, &ro, &go, &bo, &ao);

						rb += ro;
						gb += go;
						bb += bo;
						ab += ao;
					}
				}
			}

			//The sum is then, divided by the total number of
			//pixels present in a block of blur radius

			//For blur_extent 1, it will be 9
			//For blur_extent 2, it will be 25
			//and so on...

			//In this way, we are getting the average of
			//all the pixels in a block of blur radius

			//(((blur_extent * 2) + 1) * ((blur_extent * 2) + 1)) calculates
			//the total number of pixels present in a block of blur radius

			r = (Uint8)(rb / (((blur_extent * 2) + 1) * ((blur_extent * 2) + 1)));
			g = (Uint8)(gb / (((blur_extent * 2) + 1) * ((blur_extent * 2) + 1)));
			b = (Uint8)(bb / (((blur_extent * 2) + 1) * ((blur_extent * 2) + 1)));
			a = (Uint8)(ab / (((blur_extent * 2) + 1) * ((blur_extent * 2) + 1)));

			//Bit shifting color bits to form a 32 bit proper colour
			color = (r) | (g << 8) | (b << 16) | (a << 24); 			((Uint32*)imageSurface->pixels)[(y * (imageSurface->pitch / 4)) + x] = color;
		}
	}
}

After blurring, we want to make sure that we can see the blurred image on the screen.

void update()
{
	//Putting surface onto the screen
	SDL_BlitSurface(imageSurface, NULL, windowSurface, NULL);
	SDL_UpdateWindowSurface(window);
}

At the end, when we are quitting the program, we want to make sure that the blurred image is saved as a PNG image file. If we don’t want to have any saved output, we use “NULL” as the output image name.

void setOutput() //For saving image as PNG
{
	if (output_image_name != "NULL")
		IMG_SavePNG(imageSurface, output_image_name.c_str());
}

Now, just need to clear the resources.

void clear()
{
	SDL_FreeSurface(imageSurface);
	SDL_DestroyWindow(window);
	IMG_Quit();
	SDL_Quit();
}

Getting everything in one piece, all in our main function!

int main()
{
	getInput("settings.ini");
	init();
	blur();
	while (!quit)
	{
		while (SDL_PollEvent(&input) > 0)
			if (input.type == SDL_QUIT) quit = true;
		update();
	}
	setOutput();
	clear();
	return 0;
}

It’s pretty much straight forward and I hope that you understand that…

To those who loves to criticize, I know it could be way more better than that if we could change the blur extent by pressing some key and having its result instantly on the screen, or if we make another input tag for image format. But I think that we should keep things simple…

The Results

Unfortunately, I couldn’t post the images. But you can try and see it for yourself.

If you want to show some better pixel manipulation, I will appreciate it!

My Pixels: Four Shades – Beach Aside The City

My Pixels: Four Shades – Beach Aside The City

Someone told me to try less colors. Limiting oneself to something like 4 colors/shades increases the rate of learning. It also motivates a person to try a bigger grid size. If you can guess every element in the image below without considering the title, it is a good pixel art.

The image is made with only with white, black and 2 shades of grey. It is then, scaled 2 times. After that, I played with its temperature and applied a little-blue tint.

Although, I do believe that there are a lot of mistakes. For example, I should have used some black on the palm tree as well. The far-off palm tree looks a bit too pixellated. The plants, although seem visible, have no shadow of there own. The shadow of the rock in the bottom right seems a little miscalculated.

Obviously, there are more mistakes. But it is much more organic and natural-looking than my other pixels. So, let us just enjoy the view!

Oh and by the way, this is not made in GIMP. This is made in Pixly, an Android Pixel Art Editor which is, in one word… awesome.

Grid Size: 256*128

Beach Aside The City - Made with only 4 shades (colors)
Beach Aside The City – Made with only 4 shades (colors)

Making An Intro Video

I heard of Adobe After Effects that it is an awesome software for video editing and camera tricks. So, I bought it and tried it out.

I had not done any practice or tutorial before making this intro video below. I am wowed myself! It is too easy to do great and professional stuff…

I hope that you like it.

Of course, it is just a try. I don’t want to make it my true intro video. Maybe, I will just use the same video above and modify it a bit so that, it looks better for my intro video.

Thank you Adobe!