Develop Reference

Change bitmap pixels according to byteBuffer

I'm trying to clear unwanted area from picture, in the most efficient way,
My code for now:
Bitmap picture = ...;
ByteBuffer mask = ...;
int height = picture.getHeight();
int width = picture.getWidth();
for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
float currFloat = mask.getFloat();
if (currFloat > 0.7) {
req.setPixel(x, y, Color.TRANSPARENT);
}
}
}
My mask (ByteBuffer of (for example) 8*8):
My picture (Bitmap of 8*8):
Excepted result:
Thankfully, it works,
but unfortunately it takes too long since there are a lot of images to process..
There is any way to make it work faster? (something like matrix multiplication?)
I can transform the bitmap into buffer using
picture.copyPixelsToBuffer(buff)
Thanks in advance.

How to efficiently get and set bitmap pixels

I am currently making an app that involves altering the RGB values of pixels in a bitmap and creating a new bitmap after.
My problem is I need help increasing speed of this process. (It can take minutes to process a bitmap with inSampleSize = 2 and forever to process an inSampleSize = 1) Right now, I am using the getPixel and setPixel methods to alter the pixels and believe these two methods are the root of the problem as they are very inefficient. The getPixels method isn't suitable as I am not altering each pixel in order (ex. getting a pixel and changing a radius of 5 pixels around it to the same colour) unless anyone knows of a way to use getPixels (perhaps be able to put the pixels in a 2D array).
This is part of my code:
public static final alteredBitmp(Bitmap bp)
{
//initialize variables
// ..................
Bitmap bitmap = Bitmap.createBitmap(width, height,
Bitmap.Config.ARGB_8888);
for (int x = 0; x < width; x++) {
int left = Math.max(0, x - RADIUS);
int right = Math.min(x + RADIUS, width - 1);
for (int y = 0; y < height; ++y) {
int top = Math.max(0, y - RADIUS);
int bottom = Math.min(y + RADIUS, height - 1);
int maxIndex = -1;
for (int j = top; j <= bottom; j++) {
for (int i = left; i <= right; i++) {
pixelColor = bitmap.getPixel(i, j);
//get rgb values
//make changes to those values
}
}
}
}
//set new rgb values
bitmap.setPixel(x, y, Color.rgb(r, g, b));
//return new bitmap
Much thanks in advance!

Consider looking at RenderScript, which is Android's high performance compute framework. As you are iterating over width x height number of pixels and altering each one which in a modern device could be around a million pixels or higher, doing it in a single thread can take minutes. RenderScript can parallelize operations over CPU or the GPU where possible.
http://android-developers.blogspot.com/2012/01/levels-in-renderscript.html
http://developer.android.com/guide/topics/renderscript/index.html
Google IO 2013 session:
https://youtu.be/uzBw6AWCBpU
RenderScript compatibility library: http://android-developers.blogspot.com/2013/09/renderscript-in-android-support-library.html

How to get total area covered while drawing path on canvas android?

Im using below code to draw line on bitmap canvas while finger touch move... here i posted partial code and it is working fine..
As shown in below image, the black and white bitmap erased on touch drag.. I made canvas transparent so the parent layout background(color image) is getting visible.
I want to know , how much area is erased(like 50% or 60% of bitmap ).. is there any way to find that?
//Erasing paint
mDrawPaint = new Paint();
mDrawPaint.setAntiAlias(true);
mDrawPaint.setDither(true);
mDrawPaint.setStyle(Paint.Style.STROKE);
mDrawPaint.setStrokeJoin(Paint.Join.ROUND);
mDrawPaint.setStrokeCap(Paint.Cap.ROUND);
mDrawPaint.setStrokeWidth(50);
mDrawPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
BlurMaskFilter mBlur = new BlurMaskFilter(10, BlurMaskFilter.Blur.NORMAL);
mDrawPaint.setMaskFilter(mBlur);
private void doDraw(Canvas c) {
c.drawBitmap(mBitmap, 0, 0,null );
}
private float mX, mY;
private static final float TOUCH_TOLERANCE = 1;
void touch_start(float x, float y) {
mPath.reset();
mPath.moveTo(x, y);
mX = x;
mY = y;
}
void touch_move(float x, float y) {
float dx = Math.abs(x - mX);
float dy = Math.abs(y - mY);
if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
mX = x;
mY = y;
}
canvas.drawPath(mPath, mDrawPaint ); //Erasing Black and white image
}
void touch_up() {
mPath.lineTo(mX, mY);
// commit the path to our offscreen
mCanvas.drawPath(mPath, mDrawPaint);
// kill this so we don't double draw
mPath.reset();
}

Try to use Monte Carlo method to estimate percentage of transparent area. I think it is a fastest and easiest way to do this. Take about 50 (depends on accuracy you need) random pixels on your transparency mask and check their color. Then calc ans = TransparentPixelsCount/TestPixelCount.
It is very hard to calculate square of user's drawings using path coordinates. And it's quite long to iterate over all pixels. So, IMHO Monte Carlo is your choise.

To get an exact (and slow) answer, you need to inspect every pixel and count the number are transparent and divide by the total number of pixels. If your requirements allow for some estimation, it is probably best to sample the image.
You could downsize the image and run and the above procedure on the smaller image. That has the disadvantage that the scaling operation might be going through all the pixels making it slow. I would recommend a grid sampling, it is similar to downsizing, but skips over pixels. Basically, we evenly space x sample points on a grid over the image. Then count the number of sample points that are transparent. The estimate of transparent percentage is the total transparent samples/number of transparent samples. You can get reasonable accuracy (usually within 5%) with a small number, say 100, samples. Here is a code function that implements this method -- bm is the Bitmap and scale is the number of samples per axis, so setting scale = 10 gives 100 total samples (10x10 sampling grid over the image).
static public float percentTransparent(Bitmap bm, int scale) {
final int width = bm.getWidth();
final int height = bm.getHeight();
// size of sample rectangles
final int xStep = width/scale;
final int yStep = height/scale;
// center of the first rectangle
final int xInit = xStep/2;
final int yInit = yStep/2;
// center of the last rectangle
final int xEnd = width - xStep/2;
final int yEnd = height - yStep/2;
int totalTransparent = 0;
for(int x = xInit; x <= xEnd; x += xStep) {
for(int y = yInit; y <= yEnd; y += yStep) {
if (bm.getPixel(x, y) == Color.TRANSPARENT) {
totalTransparent++;
}
}
}
return ((float)totalTransparent)/(scale * scale);
}
For reference, the slow method that would give you the results by counting every pixel is below. It can be used for reference on testing the above estimator.
static public float percentTransparent(Bitmap bm) {
final int width = bm.getWidth();
final int height = bm.getHeight();
int totalTransparent = 0;
for(int x = 0; x < width; x++) {
for(int y = 0; y < height; y++) {
if (bm.getPixel(x, y) == Color.TRANSPARENT) {
totalTransparent++;
}
}
}
return ((float)totalTransparent)/(width * height);
}

A different approach on this: you can calculate the size of each path using ComputeBounds. Then it should be simple to compare this with the size of your view and decide the % of the drawing.
Jus you need to keep in mind that the path can be drawn over itself, so you need to be careful and handle that in the calculation.

Store all point x and y value in two different sorted sets, one for x value of point and other for y value of point.
The final value of your bound will be point(min_x,min_y) and point(max_x,max_y).

You need to detect the points lying inside the drawn polygon.
Here is the functions which takes array that contains all the drawn point, and second parameter are the points itself i.e. x ,y.
// Return true if the dot { x,y } is within any of the polygons in the list
function pointInPolygons( polygons, dot )
for (i=1, [polygons count] i++)
{
if (pointInPolygon( polygons[i], dot ))
return true
}
return false
end
// Returns true if the dot { x,y } is within the polygon
//defined by points table { {x,y},- --{x,y},{x,y},... }
function pointInPolygon( points, dot )
local i, j = #points, #points
local oddNodes = false
for i=1, #points do
if ((points[i].y < dot.y and points[j].y>=dot.y
or points[j].y< dot.y and points[i].y>=dot.y) and (points[i].x<=dot.x
or points[j].x<=dot.x)) then
if (points[i].x+(dot.y-points[i].y)/(points[j].y-points[i].y)*(points[j].x-points[i].x)<dot.x) then
oddNodes = not oddNodes
end
end
j = i
end
return oddNodes
end

How to draw upscaled pixel art efficiently in Android?

I'm making a game that has lots of pixel art in it. A standard button in my game is about 12x12 pixels and scaled up five times for displaying. All of the characters are also scaled two times bigger, depending on the screen. The problem is that if I store all these images to upscaled bitmaps, I get the out of memory error in Android. If I try to scale them up every time for drawing, the game runs really slowly.
That's why I wrote my own PixelArtBitmap class. It results in great images and requires so little memory, but is highly inefficient, dropping my fps a lot. It's still faster than scaling bitmaps up every time for drawing. Here's the class:
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
class PixelArtBitmap{
private int[][] pixels = null;
private boolean[][] visible = null;
private float width = 0;
private float height = 0;
private float drawWidth = 0;
private float drawHeight = 0;
private int pixelsX = 0;
private int pixelsY = 0;
private static Paint boxPaint = new Paint();
public PixelArtBitmap(Bitmap bitmap, float scale){
boxPaint.setStrokeWidth(0);
pixels = new int[bitmap.getWidth()][bitmap.getHeight()];
visible = new boolean[bitmap.getWidth()][bitmap.getHeight()];
pixelsX = bitmap.getWidth();
pixelsY = bitmap.getHeight();
//Utility is an another class of mine, providing information about the device
drawWidth = scale * Utility.getScaleWidth();
drawHeight = scale * Utility.getScaleHeight();
width = pixelsX * drawWidth;
height = pixelsY * drawHeight;
for(int x = 0 ; x < bitmap.getWidth() ; x++){
for(int y = 0 ; y < bitmap.getHeight() ; y++){
pixels[x][y] = bitmap.getPixel(x,y);
if(Color.alpha(pixels[x][y]) == 0) visible[x][y] = false;
else visible[x][y] = true;
}
}
bitmap.recycle();
bitmap = null;
}
public void draw(float x, float y, Canvas canvas){
for(int drawY = 0 ; drawY < pixelsY ; drawY++){
for(int drawX = 0 ; drawX < pixelsX ; drawX++){
if(visible[drawX][drawY]){
boxPaint.setColor(pixels[drawX][drawY]);
canvas.drawRect(x + drawWidth * drawX, y + drawHeight * drawY,
x + drawWidth * (drawX + 1), y + drawHeight * (drawY + 1), boxPaint);
}
}
}
}
}
So, how could I make this class faster or is there a totally different way for doing this correctly?

Instead of creating a new bigger sized Bitmap you can also draw smaller sized Bitmap directly into new size using;
Canvas.drawBitmap(Bitmap, null, dstRect, Paint);
This method should re-size the original Bitmap into dstRect size and I'm quite sure there's a setting to select nearest neighbor filtering. This should enable you to draw smaller image directly into desired size whilst retaining the pixel art looks.

Android: Efficiently ensuring that the pixels in a scaled bitmap have only two colors

I have a bitmap whose pixels contain only two argb values: pure black and pure transparent. I then scale the bitmap up in Android, now the bitmap has many argb values: pure black and pure transparent and black with various levels of transparency (i.e half transparent black); this is due to the interpolation done automatically by android. I would like the bitmaps pixels to contain only the original two argb values.
Currently I accomplish this with the following process:
my_bitmap = Bitmap.createScaledBitmap(BitmapFactory
.decodeResource(context.getResources(),
R.drawable.my_resource),
new_width, new height, false);
for (int i = 0; i < my_bitmap.getWidth(); i++) {
for (int j = 0; j < my_bitmap.getWidth(); j++) {
if (my_bitmap.getPixel(i, j) != Color.TRANSPARENT) {
my_bitmap.setPixel(i, j, Color.BLACK);
}
}
}
This is achingly slow on a cheaper phone for even a small bitmap, does anyone know how to either A) do this much faster or B) scale a bitmap up with no new argb values appearing?

I think the answer here is an algorithmic one.
Bitmap operations are very expensive... perhaps you can cache the bitmap somewhere and only draw it when the interpolation is specifically requested?
My other idea would be to group some amount of pixels together and have a flag "hasChanged" or something like that, and set it to true when something is changed so the system knows it has to redraw that pixel group. This way you don't redraw things more often than necessary.
Hope this helps!

Do the scale in code since the built-in algorithm isn't what you want. You'll avoid the interpolation that you don't want and you won't have to undo it. (Excuse any coding errors -- I wrote this without access to an IDE or compiler.)
my_bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.my_resource);
int[] src = new int[my_bitmap.getWidth() * my_bitmap.getHeight()];
my_bitmap.getPixels(src, 0, my_bitmap.getWidth(), 0, 0, my_bitmap.getWidth(), my_bitmap.getHeight());
int[] dst = new int[new_width * new_height];
float scaleX = my_bitmap.getWidth() / new_width;
float scaleY = my_bitmap.getHeight() / new_height;
for (int y = 0; y < new_height; y++) {
for (int x = 0; x < new_width; x++) {
int srcY = (int) (y * scaleY);
int srcX = (int) (x * scaleX);
dst[y*new_height + x] = src[srcY*my_bitmap.getHeight() + srcX];
}
}
Bitmap newBitmap = Bitmap.createBitmap(dst, 0, new_width, new_width, new_height, Bitmap.Config.ARGB_8888);