Share My Creation Photo to sketch. B4A can do it

This was the result..

 

[AnandGupta]

Maybe I am still newbie in B4X but I am an old member of this community, and I know what to post Sir. It is clear from the title that it is done with b4a and also can be done with b4j and b4i.

Glad to know, but did you read

Even though this thread is called "Share My Creations", I'm surprised that the OP has so far refused to share anything, except some sketch images,

I hope you missed it, so I had to write it specifically. Thanks for your reply.

If you are interested in the code I can give it to you with pleasure. Just DM me.

Why only me ? why not here in the Forum itself ?

 

[jkhazraji]

Thanks for letting me know that you do not want the code. A lot of ideas have been shared here without posting any code. It is not a condition in "Share my Creation" that the OP is committed to publish the code.

 

[jkhazraji]

 

[AnandGupta]

It is not a condition in "Share my Creation" that the OP is committed to publish the code.

Never meant to make you feel wrong.

Let me rephrase myself
@jkhazraji the screen-shots looks great and will be useful to many here in the forum. The more you post the more looks better. Thanks for it.
Can you share the code here too, for benefit of members here ?

 

[Beja]

Hi Anand. Toby already posted a complete and polished code.. thanjs Toby

Sub Globals
    Dim imgView As ImageView ' ImageView to display the photo
    Dim btnSketch As Button ' Button to trigger the sketch effect
    Dim lightFactor As Int = 150 ' Factor to make the sketch lighter
End Sub

Sub Activity_Create(FirstTime As Boolean)
    ' Initialize UI components
    imgView.Initialize("")
    btnSketch.Initialize("btnSketch")

    ' Add UI components to the activity
    Activity.AddView(imgView, 10dip, 10dip, 300dip, 300dip)
    Activity.AddView(btnSketch, 10dip, 320dip, 100dip, 50dip)
    btnSketch.Text = "Sketch"

    ' Load a sample image (replace with your own image path)
    Dim bmp As Bitmap
    bmp.Initialize(File.DirAssets, "girl.png")
    imgView.Bitmap = bmp
End Sub

Sub btnSketch_Click
    Dim originalBmp As Bitmap = imgView.Bitmap
    Dim sketchBmp As Bitmap = ConvertToSketch(originalBmp)
    imgView.Bitmap = sketchBmp
End Sub

Sub ConvertToSketch(originalBmp As Bitmap) As Bitmap
    Dim bc As BitmapCreator
    bc.Initialize(originalBmp.Width, originalBmp.Height)
   
    ' Load the original bitmap into BitmapCreator
    bc.CopyPixelsFromBitmap(originalBmp)

    Dim width As Int = bc.mWidth
    Dim height As Int = bc.mHeight
   
    ' Convert the entire image to grayscale
    Dim grayBC As BitmapCreator
    grayBC.Initialize(width, height)
   
    Dim argb As ARGBColor
    Dim grayMatrix(width, height) As Int
   
    For x = 0 To width - 1
        For y = 0 To height - 1
            bc.GetARGB(x, y, argb)
            ' Convert to grayscale
            Dim gray As Int = (argb.r + argb.g + argb.b) / 3
            grayMatrix(x, y) = gray
            ' Apply grayscale value to grayBC
            argb.r = gray
            argb.g = gray
            argb.b = gray
            grayBC.SetARGB(x, y, argb)
        Next
    Next

    ' Edge detection (Sobel filter)
    Dim edgeBC As BitmapCreator
    edgeBC.Initialize(width, height)

    For x = 1 To width - 2
        For y = 1 To height - 2
            ' Sobel X and Y gradients
            Dim gX As Int = (grayMatrix(x + 1, y - 1) + 2 * grayMatrix(x + 1, y) + grayMatrix(x + 1, y + 1)) - _
                            (grayMatrix(x - 1, y - 1) + 2 * grayMatrix(x - 1, y) + grayMatrix(x - 1, y + 1))
           
            Dim gY As Int = (grayMatrix(x - 1, y + 1) + 2 * grayMatrix(x, y + 1) + grayMatrix(x + 1, y + 1)) - _
                            (grayMatrix(x - 1, y - 1) + 2 * grayMatrix(x, y - 1) + grayMatrix(x + 1, y - 1))
           
            Dim magnitude As Int = Sqrt(gX * gX + gY * gY)
            If magnitude > 255 Then magnitude = 255
           
            ' Invert edges for sketch effect
            Dim invertedMagnitude As Int = 255 - magnitude
           
            ' Apply edge detection result
            argb.a = 255 ' Full opacity
            argb.r = invertedMagnitude
            argb.g = invertedMagnitude
            argb.b = invertedMagnitude
           
            edgeBC.SetARGB(x, y, argb)
        Next
    Next

    ' Blend edges with a lighter background for sketch effect
    Dim sketchBC As BitmapCreator
    sketchBC.Initialize(width, height)

    For x = 0 To width - 1
        For y = 0 To height - 1
            ' Get the edge pixel
            edgeBC.GetARGB(x, y, argb)
           
            ' Blend with white (lighter background)
            Dim sketchRed As Int = Min(255, argb.r + 50)
            Dim sketchGreen As Int = Min(255, argb.g + 50)
            Dim sketchBlue As Int = Min(255, argb.b + 50)
           
            ' Set the sketch pixel
            argb.r = sketchRed
            argb.g = sketchGreen
            argb.b = sketchBlue
            sketchBC.SetARGB(x, y, argb)
        Next
    Next

    ' Return the final sketch Bitmap
    Return sketchBC.Bitmap
End Sub

 

[jkhazraji]

Hi Anand, forget it, he also mentioned that he used Photoshop!!
Toby already posted a wonderful project that can do this perfectly.

Sub Globals
Dim imgView As ImageView ' ImageView to display the photo
Dim btnSketch As Button ' Button to trigger the sketch effect
Dim lightFactor As Int = 150 ' Factor to make the sketch lighter
End Sub

Sub Activity_Create(FirstTime As Boolean)
' Initialize UI components
imgView.Initialize("")
btnSketch.Initialize("btnSketch")

' Add UI components to the activity
Activity.AddView(imgView, 10dip, 10dip, 300dip, 300dip)
Activity.AddView(btnSketch, 10dip, 320dip, 100dip, 50dip)
btnSketch.Text = "Sketch"

' Load a sample image (replace with your own image path)
Dim bmp As Bitmap
bmp.Initialize(File.DirAssets, "girl.png")
imgView.Bitmap = bmp
End Sub

Sub btnSketch_Click
Dim originalBmp As Bitmap = imgView.Bitmap
Dim sketchBmp As Bitmap = ConvertToSketch(originalBmp)
imgView.Bitmap = sketchBmp
End Sub

Sub ConvertToSketch(originalBmp As Bitmap) As Bitmap
Dim bc As BitmapCreator
bc.Initialize(originalBmp.Width, originalBmp.Height)

' Load the original bitmap into BitmapCreator
bc.CopyPixelsFromBitmap(originalBmp)

Dim width As Int = bc.mWidth
Dim height As Int = bc.mHeight

' Convert the entire image to grayscale
Dim grayBC As BitmapCreator
grayBC.Initialize(width, height)

Dim argb As ARGBColor
Dim grayMatrix(width, height) As Int

For x = 0 To width - 1
For y = 0 To height - 1
bc.GetARGB(x, y, argb)
' Convert to grayscale
Dim gray As Int = (argb.r + argb.g + argb.b) / 3
grayMatrix(x, y) = gray
' Apply grayscale value to grayBC
argb.r = gray
argb.g = gray
argb.b = gray
grayBC.SetARGB(x, y, argb)
Next
Next

' Edge detection (Sobel filter)
Dim edgeBC As BitmapCreator
edgeBC.Initialize(width, height)

For x = 1 To width - 2
For y = 1 To height - 2
' Sobel X and Y gradients
Dim gX As Int = (grayMatrix(x + 1, y - 1) + 2 * grayMatrix(x + 1, y) + grayMatrix(x + 1, y + 1)) - _
(grayMatrix(x - 1, y - 1) + 2 * grayMatrix(x - 1, y) + grayMatrix(x - 1, y + 1))

Dim gY As Int = (grayMatrix(x - 1, y + 1) + 2 * grayMatrix(x, y + 1) + grayMatrix(x + 1, y + 1)) - _
(grayMatrix(x - 1, y - 1) + 2 * grayMatrix(x, y - 1) + grayMatrix(x + 1, y - 1))

Dim magnitude As Int = Sqrt(gX * gX + gY * gY)
If magnitude > 255 Then magnitude = 255

' Invert edges for sketch effect
Dim invertedMagnitude As Int = 255 - magnitude

' Apply edge detection result
argb.a = 255 ' Full opacity
argb.r = invertedMagnitude
argb.g = invertedMagnitude
argb.b = invertedMagnitude

edgeBC.SetARGB(x, y, argb)
Next
Next

' Blend edges with a lighter background for sketch effect
Dim sketchBC As BitmapCreator
sketchBC.Initialize(width, height)

For x = 0 To width - 1
For y = 0 To height - 1
' Get the edge pixel
edgeBC.GetARGB(x, y, argb)

' Blend with white (lighter background)
Dim sketchRed As Int = Min(255, argb.r + 50)
Dim sketchGreen As Int = Min(255, argb.g + 50)
Dim sketchBlue As Int = Min(255, argb.b + 50)

' Set the sketch pixel
argb.r = sketchRed
argb.g = sketchGreen
argb.b = sketchBlue
sketchBC.SetARGB(x, y, argb)
Next
Next

' Return the final sketch Bitmap
Return sketchBC.Bitmap
End Sub

I did not mention that I used Photoshop. Mind your language. I mentioned that it is similar to Photoshop way. It is pure b4a. I regret sharing this information with you.

 

[Beja]

You didn't show any code .. the above images are generated by AI not by you. So could you tell us what was your creation?
Remember you posted on (share) (my) creation.

 

[jkhazraji]

View attachment 159397View attachment 159397
You didn't show any code .. the above images are generated by AI not by you. So could you tell us what was your creation?
Remember you posted on (share) (my) creation.

You are here again lying and alleging me with confabulations. The code is for sale for $40. Stay away from me.

 

[Beja]

You are here again lying and alleging me with confabulations. The code is for sale for $40. Stay away from me.

Good luck

 

[AnandGupta]

The code is for sale for $40.

Ahh.. now you say it, after so much coaxing
Better edit the first post and add it there. No more confusion then. Also the title.

Stay away from me.

I humbly request you to edit it. Looks sketchy on you.
Remember we are close friends separated by few google map dots.

 

[TILogistic]

tips:
You need to implement or use existing functions for Gaussian blur and color dodging blending to achieve a pencil sketch effect.

 

[jkhazraji]

tips:
You need to implement or use existing functions for Gaussian blur and color dodging blending to achieve a pencil sketch effect.

You are right. We apply horizontal and vertical box blur algorithm. after the inversion and before the color dodge blend
These are all of the steps: