Help required in understanding x y values when using RC6 Cairo BindToArray

[tmighty2]

I want to create a coark board pin it from a coark board background image and alpha channel pngs.
The final result should look like this:


Attachment 190833
The alpha channel pngs that look like this:



When I such an image in an image editor, you can see tha tthe image editor automatically drew a line around the contour of the car.



I wonder which mechanism it uses to do that. So I make a pixel transparent pixels and a big hole using a brush a bigger radius and a vignette.
When I zoom in, I see this:



I do not understand the image editor's contour detection algorithm when I take a look at the big whole that I have just created. I expected the contour outline to be placed at the fully opaque pixels. However, they are placed at what I believe is like alpha = 0.5.

Nevertheless, I believe that this is the same algorithm that I need to apply to an alpha channel png in VB6 using RC6 in order to be able to draw a paper-like white border around the all opaque pixels.

The closest code that did some detection on images using RC6 and Cairo surfaces was Edge Detection by Olaf Schmidt, so I try to adapt it to my needs.

For my purposes, I have to get rid of the taxi dropshadow anyway.
The first task I want to use RC6 for is to dilluate fully opaque pixels into order to create something that looks like "cut from paper".
So the first thing I try to do it detect all fully opaque pixels and give them a certain color and to detect all semitransparent pixels and set their alpha to 0 (=fully opaque).
I do not manage to do that, and I do not understand why not.
That is why I am requesting help.

Thank you

I have attached the code and the result which is this:

[jmcilhinney]

Moved from VB6 CodeBank forum, which is for sharing working code samples.

[Schmidt]

For my purposes, I have to get rid of the taxi dropshadow anyway.
...
I have attached the code and the result which is this:

Thanks for the Code-Zip (makes things easier here)...

And yes, the Blurred-Shadow-removal is a necessary first step...
(let's talk about the "contour"-stuff later)...

What characterisitcs does a Blur-Shadow have?
It is just a bunch of semi-transparent Pixels -
which need to be set to "full transparency".

Semi-transparency can be detected, using the Alpha-Byte -
(AlphaByte > 0 And AlphaByte < 255)

Here is an InPlace-Replacement-Routine for a passed Cairo-Surface:
(which allows, to optionally influence the UpperAlpha-Value, where Colors bedome more and more "solid")

Public Sub SemiTransparenciesToFullyTransparent(Srf As cCairoSurface, Optional ByVal UpperAlpha As Byte = 222)
  Dim x As Long, y As Long, B() As Byte
  
  Srf.BindToArray B

  For y = 1 To UBound(B, 2): For x = 0 To UBound(B, 1) Step 4
    If B(x + 3, y) > 0 And B(x + 3, y) < UpperAlpha Then 'when semi-transparent (in a certain range)...
       
       B(x + 0, y) = 0 '...set all 4 components of the whole pixel to fully transparent
       B(x + 1, y) = 0
       B(x + 2, y) = 0
       B(x + 3, y) = 0
    End If
  Next x, y
  
  Srf.ReleaseArray B
End Sub

Here's the adapted "Refresh-Routine" - which integrates the above routine into your fTest.frm:

Private Sub picEdge_Click()
  picEdge.ScaleMode = vbPixels
  With Cairo.CreateSurface(picEdge.ScaleWidth, picEdge.ScaleHeight).CreateContext
    .Paint 1, Cairo.CreateCheckerPattern
    
    Set Src = Cairo.ImageList(cmbImageKeys.Text).CreateSimilar(, , , True)   'get a copy of the original Surface (by ImgKey)
    If DoEdgeDetection Then
       New_c.Timing True 'since we use a small cross-kernel (Roberts), Pre-blurring is recommended
          SemiTransparenciesToFullyTransparent Src 'inplace-removal of all (blurred) semitransparencies

          'do more Surface-manipulations here...

          Set Dst = Src 'make the "inplace-result" available in the Dst-Variable  as well (at the moment just by referencing, without copying it)
       Caption = New_c.Timing
    End If
 
    .RenderSurfaceContent Dst, 0, 0
    Set picEdge.Picture = .Surface.Picture
  End With
  
  DoEdgeDetection = Not DoEdgeDetection
End Sub

HTH

Olaf

[tmighty2]

Thank you for the valueable insights.

A question about the first 2 tests:

May I ask you why - even though I set the alpha value to 0 - there is color visible?

[tmighty2]

Playing with the "UpperAlpha" value, I noticed that setting it to half the maximum value (256 / 2 = 128, which would be alpha 0.5) perfectly reproduces the option "Hide vignettte" that is available in my image editor.
Thank you Olaf for such a valuable insight as well.
Now that we have reproduced such an important function already, I am sure that this is the way to do it.
When I tried this option, I had no idea how it was done in my image editor.
Again, thank you, Olaf.

[SmUX2k]

There's a lot to learn about edge detection, but *generally* most colour detection systems are looking for patterns that change...as an example, they might see a slightly different colour in an adjacent pixel as a continuation of that pixel (a pattern forming, with the colour changing slightly), but when they see a wildly different colour they assume this is the edge between two objects...and this is just talking about RGB, the alpha transparency value isn't even a part of that, we have it way too easy these days (unless we have to work with RGB :-) )

There's numerous different ways to create values for each pixel to compare them to nearby neighbours, from adding the RGB together to calculating the offset between the two pixels (how much more or less R, G and B one has over another) or turning colours into B/W and just checking for gradient differences. There's numerous other methods I haven't even mentioned or don't know, as it isn't something I am particularly good at...it's just one of many things I have played around with in the past. :-)

[Schmidt]

A question about the first 2 tests:

May I ask you why - even though I set the alpha value to 0 - there is color visible?

That's because you're operating on "Pre-multiplied" 32Bit-PixelTuples (BGRA) -
breaking some of the "rules"

And the rules for premultiplying say, that no ColorChannel shall contain (after pre-multiplying) -
a Color-Component-Value - larger than the Value in the Alpha-Component.

Meaning, that only when you have "full Opacity" on a given Pixel (the Alpha-Byte set to 255) -
will the corresponding B, G and R-Components cover the full [0 to 255] range.

And an AlphaByte = 0 means, that all corresponding BGR-Components cannot be larger than 0.

Edit:
As for the white "Paper-Cut-Out"-effect you want to produce underneath -
the simplest way is via the CC.MaskSurface-call like shown in the Function below:

Function CreateWhiteCutOutFrom(Src As cCairoSurface, Optional ByVal ScaleFac# = 1.1) As cCairoSurface
  With Cairo.CreateSurface(Src.Width * ScaleFac, Src.Height * ScaleFac).CreateContext
      .RenderSurfaceContent Src, 0, 0, .Surface.Width, .Surface.Height
      .SetSourceColor vbWhite
      .MaskSurface .Surface
      .RenderSurfaceContent Src, (.Surface.Width - Src.Width) * 0.48, (.Surface.Height - Src.Height) * 0.48
      Set CreateWhiteCutOutFrom = .Surface
  End With
End Function

Here again the slightly adapted pic-click routine, which incorporates this new function:

Private Sub picEdge_Click()
  picEdge.ScaleMode = vbPixels
  With Cairo.CreateSurface(picEdge.ScaleWidth, picEdge.ScaleHeight).CreateContext
    .Paint 1, Cairo.CreateCheckerPattern(, &H888888)
    
    Set Src = Cairo.ImageList(cmbImageKeys.Text).CreateSimilar(, , , True)   'get a copy of the original Surface (by ImgKey)
    If DoEdgeDetection Then
       New_c.Timing True 'since we use a small cross-kernel (Roberts), Pre-blurring is recommended
          SemiTransparenciesToFullyTransparent Src 'inplace-removal of all (blurred) semitransparencies
          
          Set Dst = CreateWhiteCutOutFrom(Src, 1.13)
       Caption = New_c.Timing
    End If
 
    .RenderSurfaceContent Dst, 10, 10
 
    Set picEdge.Picture = .Surface.Picture
  End With
  
  DoEdgeDetection = Not DoEdgeDetection
End Sub

Olaf

[tmighty2]

Thank you very much for the lesson.



This is what I am trying to finally achieve.

It is quite sophisticated and involves manual work:



In this tutorial it is described how the designer should draw such an area where the shadow would give the impression of making the paper stay out, by hand.

I am right to assume that the best way to achieve such a gaussian blur shadow this is to use the same approach you used to create the paper cut?

[tmighty2]

I am having a problem. The quick enlarge solution is great, but there a situations where it almost fails:

Attachment 190892

Can you recommend a solution that would resolve this?

Btw, the harsh edges are because I needed to remove the semitransparent pixels in the enlarged surface as well, else it would look like this:

Attachment 190893

To visualize were these edges originate from, I added a few checkboxes.

Using a checkbox I turn off the whitening of the enlarged image, and I can now see were the grey areas in the "papercut" originate from even thought it made white:
Attachment 190894


I am not sure if that is the only way, but using SemiTransparenciesToFullyTransparent on the enlarged surface fixes the problem:

Attachment 190897

It does results in hard edges of course, but I plan to tackle this problem later somehow.

However, I would like to ask if there is something to "dillute" a pixel because I believe that this enlarging approach is not what I need.

Thank you.

Attachment 190895

[tmighty2]

Can somebody please suggest something to make my paper cut appear more realistic and not almost broken as seen on the left back wheel?

[ColinE66]

Maybe blur the image a number of times, and then remove the opacity from the blurred image.

[tmighty2]

What would be the difference between blurring and rendering the image larger?

[tmighty2]

Edit: Oh wow, yes, that was a good idea!! That gives a rounder shape!

[tmighty2]

This is the best I could achieve:



I will look into shadows later to make it more realistic.

The roundness of the motor area does not look like a paper cut, but I see no way to improve this without totally changing the approach.