2D Graphic Drawing by Pixels in Html5, Android and IOS platform

September 30, 2016

In the last post, I introduced the 2D Graphic Drawing in Html5 and android canvas, it is the basic skills if you want running into GUI programming fields, they have the similar drawing API, once you got familiar and fluent in one platform, you will be a master of another GUI platforms in a short time.

And why we must learn this 2D graphic drawing API? In Html5 canvas, game developing is the most common scenario to use canvas drawing API, and in Android and IOS platform, if you want to make a custom view or widget, then here we are the 2D drawing show, the difference is that Android is operating those drawing API on a canvas, while the IOS is drawing in a Graphic Context.

Again, in the last example, I learned an example how to drawing custom clock widget in Html5 Canvas, then I ported this widget into Android platform, just the same widget but running in different native platforms. I just enjoy this, and I am looking forward the IOS version of clock widget is my next movement, except a little worried, because my IPhone6’s screen density is so lower compared with my Nexus 5, I guess that’s why the IPhone is much more performance than Android Phone, with a horrible and low-density screen that saves a lot of CPU and memory resources.

OK, let’s go to this post’s topic, How to manipulate pixels in graphic drawing API, actually, there is a term represent the pixels in programming, Bitmap.

The Bitmap is the Linux platform’s language, and also the Android; in Html5 Canvas, it is the ImageData; in IOS, it is a buffer in CGContext.

let imageData = context.createImageData(canvas.width, canvas.height);
let pixelData = imageData.data;

mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);

 let colorSpace = CGColorSpaceCreateDeviceRGB()
 let bytesPerPixel = 4
 let bitsPerComponent = 8
 let bytesPerRow = bytesPerPixel * width
 let bitmapInfo = RGB32.bitmapInfo
        
 if let context = CGContext(data: nil, width: Int(width), height: Int(height),
                                bitsPerComponent: bitsPerComponent,
                                bytesPerRow: bytesPerRow,
                                space: colorSpace,
                                bitmapInfo: bitmapInfo) {
     let pixelBuffer = context.data?.assumingMemoryBound(to: RGB32.self)

}

And, I found a sample to practice the Bitmap manipulation to product an awesome result. The original idea is come from a competition from StackExchange named:

Tweetable Mathematical Art.

Then I implemented 6 of them in Html5 Canvas, Android, and IOS, you will be so crazy about that, so simple mathematical formula in less than 100 characters, and produce so amazing Art. Above is the six screenshot of Android version, next is the IOS screen shots.