[RESOLVED] Cairo Pattern Meshes, are they what I think they are? [L-Plate Learner Edition]

Hi All,

Another beginner question for the Cairo Squad.
I'm attempting to learn how to build a non-uniform, image stretching-tool with VB sliders as the warp inducer.
With the hopes that I could achieve something like this Photoshoped warp, but programmatically.

Attachment 182615

Is such a thing achievable in Cairo?
I've been trawling through the web, only to find the PyCairo documentation talking about mesh patterns.

Attachment 182616

With their example of:

Attachment 182617

I tried searching through the lists of properties of Cairo 'things' in VB, RC6, patterns, surfaces etc, but I couldn't find anything to compare with the documentation above.

Does that mean we can't do this via Cairo-VB6, or am I barking up the wrong tree altogether?

Coincidentally I was looking at the same topic yesterday. :)
I too landed on pyCairo and MeshPattern
which is not implemented in RC6, I think because it was probably added later (New in version 1.14.)

So, I think that if this is the solution we have to wait for the integration of MeshPattern in RC6.
Or alternatively split the initial image into many squares/rectangles and use
CairoContext.RenderSurfaceWithinCorners.
In this way the curves will be approximated to small straight lines (loss of curvature/quality).

It also seems to me that MeshPatter doesn't use all the content of the initial image but relies solely on the 4 colors of the corners.

>Not implemented yet, ah.


Attachment 182629

This is my result of testing deforming an image using RenderSurfaceWithinCorners
The aglorithm splits the source image into many small rectangles SrfARR()
Then a random deformation is applied to the vertices of the grid representing these rectangles.
The code was created on the fly, quickly, it is not very elegant.

-Put this code in a form and call it fMain

Code:

---

Option Explicit

Private cnt      As Long

Private WithEvents Timer1 As cTimer

Private Sub Form_Activate()
    PIC1.CurrentX = 10
    PIC1.CurrentY = 10
    PIC1.Print "Click Me to Draw / Refresh "
End Sub

Private Sub Form_Load()
    Dim FN$

    Me.ScaleMode = vbPixels
    PIC1.ScaleMode = vbPixels

    pW = PIC1.Width
    pH = PIC1.Height

    Set Srf = Cairo.CreateSurface(pW, pH, ImageSurface)
    Set CC = Srf.CreateContext

    CC.AntiAlias = CAIRO_ANTIALIAS_NONE

    FN = "arny 1.jpg"                            ''''<<<<<<<<<<<<<------- Your Image in App Path

    Cairo.ImageList.AddImage "MAINI", App.Path & "\" & FN, , , , SourceW, SourceH
    Me.Caption = "Source: " & SourceW & " x " & SourceH
    Set SourceSrf = Cairo.CreateSurface(SourceW, SourceH, ImageSurface, App.Path & "\" & FN)

    Set Timer1 = New_c.Timer(40, False)

    InitGridPoints

End Sub

Private Sub PIC1_Click()
    Deform
    DrawPieces DeformedP
End Sub
Private Sub Form_Click()

    CC.RenderSurfaceWithinCorners SourceSrf, 10, 10, 300, 20, 400, 400, 20, 300
    Srf.DrawToDC PIC1.hDC
End Sub

Private Sub Timer1_Timer()
    Dim I&, j&
    Dim P        As Double
    Dim Q        As Double

    cnt = cnt + 1
    If cnt > 10 Then
        cnt = 0
        Deform
    Else
        P = cnt / 10
        Q = 1 - P
        For I = 0 To RowCols
            For j = 0 To RowCols
                CurrentP(I, j).X = CurrentP(I, j).X * Q + DeformedP(I, j).X * P
                CurrentP(I, j).Y = CurrentP(I, j).Y * Q + DeformedP(I, j).Y * P
            Next
        Next
        DrawPieces CurrentP
    End If

End Sub

Private Sub Check1_Click()
    Timer1.Enabled = Check1 = vbChecked
End Sub

---

-in the Form add a PicturreBox (PIC1) and a CheckBox (check1) (that will be used to start an animation.)

-Add this code in a Module

Code:

---

Option Explicit

Public Srf        As cCairoSurface
Public CC        As cCairoContext
Public SourceSrf  As cCairoSurface
Public SourceW&, SourceH&
Public pW&, pH&

Public Type tP
    X            As Long
    Y            As Long
End Type

Public GridP()    As tP
Public DeformedP() As tP
Public CurrentP() As tP

Public SrfARR()  As cCairoSurface

Public Const RowCols As Long = 8

Private TileW    As Long
Private TileH    As Long

Public Sub InitGridPoints()
    Dim I&, j&

    ReDim GridP(RowCols, RowCols)
    ReDim DeformedP(RowCols, RowCols)
    ReDim CurrentP(RowCols, RowCols)

    For I = 0 To RowCols
        For j = 0 To RowCols
            GridP(I, j).X = Round(I / RowCols * pW)
            GridP(I, j).Y = Round(j / RowCols * pH)
        Next
    Next

    ReDim SrfARR(RowCols - 1, RowCols - 1)

    TileW = Int(SourceW / RowCols + 0.5)
    TileH = Int(SourceH / RowCols + 0.5)

    For I = 0 To RowCols - 1
        For j = 0 To RowCols - 1
            Set SrfARR(I, j) = Cairo.CreateSurface( _
                              TileW, TileH, ImageSurface)
            With SrfARR(I, j).CreateContext
                .SetSourceSurface SourceSrf, -I * TileW, -j * TileH
                .Paint
            End With
        Next
    Next

End Sub

Public Sub Deform()
    Dim I&, j&
    For I = 0 To RowCols
        For j = 0 To RowCols
            DeformedP(I, j).X = GridP(I, j).X + (Rnd * 2 - 1) * TileW * 0.25
            DeformedP(I, j).Y = GridP(I, j).Y + (Rnd * 2 - 1) * TileH * 0.25
        Next
    Next
End Sub
Public Sub DrawPieces(Points() As tP)
    Dim I&, j&

    For I = 0 To RowCols - 1
        For j = 0 To RowCols - 1
            CC.RenderSurfaceWithinCorners SrfARR(I, j), _
                                          Points(I, j).X, Points(I, j).Y, _
                                          Points(I + 1, j).X + 1, Points(I + 1, j).Y, _
                                          Points(I + 1, j + 1).X + 1, Points(I + 1, j + 1).Y + 1, _
                                          Points(I, j + 1).X, Points(I, j + 1).Y
        Next
    Next

    Srf.DrawToDC fMain.PIC1.hDC
End Sub

---

-Save your project
-Copy in the project folder an image-file
-Go to this line and put the name of the image in App Path FN = "arny 1.jpg" ''''
I hope I haven't forgotten anything

Sorry for the code quality and for the maybe strange names of the variables/subs.

Attachment 182631

Thank you for the example Reexre.

I suspect, say, if I wanted to create a smooth parabolic transformation using this method, I might quickly end up in a mathematical hellscape of mesh generation. Plus the jagged fragmentation wouldn't do me any favours.

It's a clever approach all the same. Thanks for posting for us plebs to examine. :thumb:

Here is an example of camera lens distortion.
This is used in my Photo Effects program.
Searching the internet you can find some of these....

Code:

---

Private Function Atan2(ByVal X As Double, ByVal Y As Double) As Double
    If X Then
        Atan2 = -3.14159265358979 + Atn(Y / X) - (X > 0#) * 3.14159265358979
    Else
        Atan2 = -1.5707963267949 - (Y > 0#) * 3.14159265358979
    End If
End Function

Public Sub DeformLENS()
    Dim I&, j&
    Dim nX#, nY#                                'Normalized Grid coordinates (range -1 , 1 )
    Dim X#, Y#                                  'New coordinates (range -1 , 1 )
    Dim R#, A#
    Dim strength#

    strength = 0.5                          ' from 0 to 0.5

    For I = 0 To RowCols
        For j = 0 To RowCols
            ' Make grid coordinates in the range -1 to 1
            nX = 2# * GridP(I, j).X / pW - 1#
            nY = 2# * GridP(I, j).Y / pH - 1#
            A = Atan2(nX, nY)
            R = Sqr(nX * nX + nY * nY)

            R = R / (1# + strength * R * R) * (1# + strength)

            X = R * Cos(A)
            Y = R * Sin(A)

            ' Make new coordinates (-1 to 1) to the ranges 0-pW and 0-pH
            DeformedP(I, j).X = ((X + 1#) * 0.5) * pW
            DeformedP(I, j).Y = ((Y + 1#) * 0.5) * pH
        Next
    Next
End Sub

---

Change of course.
Perhaps I rushed too quickly into using RenderSurfaceWithinCorners.
It depends on the transformation you want to achieve and the quality of the output image.
Presumably the RenderSurfaceWithinCorners method is unsuitable for this purpose.
A simpler and probably faster way is to read and write the pixels one by one.
To do this RC6 has Surface.BindToArray /ReleaseArray

Code:

---

Option Explicit

Private Declare Sub CopyMemory Lib "kernel32" Alias "RtlMoveMemory" (ByVal pDest As Long, ByVal pSrc As Long, ByVal ByteLen As Long)

Private Function Atan2(ByVal X As Double, ByVal Y As Double) As Double
    If X Then
        Atan2 = -3.14159265358979 + Atn(Y / X) - (X > 0#) * 3.14159265358979
    Else
        Atan2 = -1.5707963267949 - (Y > 0#) * 3.14159265358979
    End If
End Function

Public Sub DeformByBYTES()
    Dim BytesIN() As Byte
    Dim BytesOUT() As Byte
    Dim X&, Y&
    Dim xGet&, yGet&
    Dim x4&

    Dim nX#, nY#                                ' Normalized output coordinates (range -1 , 1 )
    Dim iX#, iY#                                ' Normalized input coordinates

    Dim R        As Double
    Dim A        As Double

    Const strength As Double = 1

    SourceSrf.BindToArray BytesIN()
    ReDim BytesOUT(UBound(BytesIN, 1), UBound(BytesIN, 2))

    For X = 0 To SourceW - 1
        x4 = X * 4
        For Y = 0 To SourceH - 1
            nX = 2# * X / (SourceW - 1) - 1#
            nY = 2# * Y / (SourceH - 1) - 1#

            R = Sqr(nX * nX + nY * nY)
            A = Atan2(nX, nY)

            R = R * (1# + strength * R * R) / (1 + strength)

            iX = Cos(A) * R
            iY = Sin(A) * R

            If iX >= -1# Then
                If iX <= 1# Then
                    If iY >= -1# Then
                        If iY <= 1# Then
                            xGet = (iX + 1) * 0.5 * (SourceW - 1)
                            yGet = (iY + 1) * 0.5 * (SourceH - 1)

                            BytesOUT(x4 + 0, Y) = BytesIN(xGet * 4 + 0, yGet)    'B
                            BytesOUT(x4 + 1, Y) = BytesIN(xGet * 4 + 1, yGet)    'G
                            BytesOUT(x4 + 2, Y) = BytesIN(xGet * 4 + 2, yGet)    'R
                            BytesOUT(x4 + 3, Y) = BytesIN(xGet * 4 + 3, yGet)    'A

                        End If
                    End If
                End If
            End If
        Next
    Next

    ' Copy BytesOUT to BytesIN
    Dim Size      As Long
    Size = (SourceW * 4) * SourceH          '* LenB(bytesIN(0, 0))
    CopyMemory ByVal VarPtr(BytesIN(0, 0)), ByVal VarPtr(BytesOUT(0, 0)), Size

    SourceSrf.ReleaseArray BytesIN

    '---------------------------------  Original Size
    '    SourceSrf.DrawToDC fMain.PIC1.hDC
    '---------------------------------  Resized to PIC1
    CC.RenderSurfaceContent SourceSrf, 0, 0, pW, pH
    Srf.DrawToDC fMain.PIC1.hDC
    '---------------------------------

End Sub

---

Attachment 182642

Thanks for the posts Reexre. Ah, perhaps I should explain what I wanted to achieve, otherwise this might become far too math oriented to keep it fun. I've created a base-face-maker model thing (semi cartoon, semi-real). It makes a generic face to which; eyes, mouth, eye brows, freckles, eye lashes, eye colours, eye shape, pupil shape, jaw shape, nose shape, lighting levels and shape, shadow levels and shape, hair can be altered. The image rotation question I had resolved thanks to Olaf and JpBro the other day fixed that bit for the eye rotation, absolutely perfectly. I was going to use stretching for sizes (done), and skewing (done), and mirroring (done) for things. The jaw shape, and it's corresponding lighting and darkening layers all need to be distorted equally, but, in various user defined directions. Using Photoshop distortion I can create all manner of face shapes for the jawline easy enough, and trouble is, that's only one instance, and then I have to apply it to the lighting and darkening layers too (as a repeated action). That's where it gets messy and splits feathered gradients (you end up with cutting of shading).

A Cairo based mesh distortion would solve everything in one go. Otherwise, it's way too mathematically over my head. The base game-test I'm doing is to observe Cairo's speed, a land and dungeon based, highly graphically oriented RPG crawler would require a character builder, or more to the point a cartoony-semi-realistic face maker, just for player's connection and the randomized faces for NPC dialogue. So far, the base-face model I've made works brilliantly on Cairo. But the distortion of the jaw/lighting/darks is a crucial aspect to keep the code clean and not have me terrorizing 60+ jaw instances (png's) via Photoshop.
At the moment, the RPG crawler game looks waaaay to fabulous and literally stuns me how good it appears on Cairo. (I do art). I'm up to the monster combat section after making everything run super smooth and 7ms screen updates (wow). BUT. I wanted to have a rest and do the other face making thing for a little bit (while I plan more on the combat side)... Hence my dismay at finding out Cairo can't do mesh distortion. *Sigh*.... And the base face model looks so damn good too (supermodel level good)... I would post it up for others to see, but can't do that until meshes are available for us.

Wow Really very interesting what you are doing.
I didn't quite understand how the face is drawn. By saying "semi-cartoon, semi-real" I assume you are using both images and curves(filled) generated by Cairo.
How is the jaw drawn? (Is it a curve or an image? If it's a curve, things are a lot easier).
Although, as you say it's not complete (but damn good) you could post an example image. I think there is no better way to understand. I am very curious.

Ah Here it is, now, looking at the first image you put I understand better the kind of distortion you want to get, although at the same time I don't know how to "define" it.
I think it's based on some displaceable points: The two in the low corners plus the two at mid-height. (Plus maybe the two at the top corners and the one at bottom center).

Again, if you draw it with the functions in CairoContext it should be pretty easy, otherwise if you want to deform an image you need some expert to find the right mathematical function. (In this case my last code I think would be useful as a starting point)

EDIT:
For those who want to try (I don't think I will succeed)
I found this very interesting Article (+ C# Source code) about an interesting special kind of image warping:
Image Warping using Simplified MLS in C#/WPF
based on this PDF

Attachment 182649

Reexre, I'm only going to post up a shrunken version, the real manipulable version is 600x600. You can rotate her eyes and such, and due to feather gradients, there is no weird dark/light anomalies. As in, skin is dark then a wall of light skin. The face is a 'base' unit, so manipulations are done to it to derive a stack of outcomes. The base face isn't finished either, I need to clean up a crapload of things until it's professional looking and game worthy. (Her nose for instance, shading and nostrils are wrong. Her base skin also needs more definition.) (That's why I'm not posting full size, I don't want to be picked on by 'real' artists yet.) :p (It's all images btw).

Anyway, the big image is 'stacked', she has her base skin on one Cairo layer buffer, eye lash buffer, eye buffer, hair buffer and so on. The skin darkening and lightening are also other layers, so you can change the apparent angles of her face due to that. The jaw is also separate, but the distortion of shading also needs to follow it (if implemented). I'm just glad Cairo has the masking operator (IN) and (ATOP) which makes the shading perfect(!!!)

Anyway, you know how all the RPG's out there give you just a few artist drawn portraits to select from, I always found that stifling. And the online character makers are all single shade presets without much ado. I wanted an in between, artist looking but fully manipulable. Cairo, almost, almost offers that.

Meshes, where for art thou?!

Quote:

---

Originally Posted by -Corso->

Meshes, where for art thou?!

---

FWIW, I've implemented the missing (and now available in the C-sources) -
Mesh-Functionality now within the RC6.cPattern-Class.

A new release (with other enhancements in different areas) will be uploaded the next days.

Not sure though, whether the "Meshes" can fullfill what you want to use them for.
(they are good for "4-differently colored corner-points" - but that's just 4 colors for a "Coons-Patch").

Here is, what the new Mesh-Methods can produce (straight from the Python-examples):
https://www.vbforums.com/images/ieimages/2021/10/31.png

And here, what VB6/RC6-code was needed, to achieve that output:

Code:

---

Option Explicit

Private Sub Form_Load()
  Dim CC As cCairoContext
  Set CC = Cairo.CreateSurface(800, 600).CreateContext
      CC.Paint 1, Cairo.CreateCheckerPattern
     
      PaintCoonsPatch CC, Cairo.CreateMeshPattern
      PaintGouraudTriangle CC, Cairo.CreateMeshPattern
     
  Set Picture = CC.Surface.Picture
End Sub

Sub PaintCoonsPatch(CC As cCairoContext, Mesh As cCairoPattern)
  CC.Save
    CC.TranslateDrawings 40, 40
    Mesh.BeginPatch
        Mesh.MoveTo 0, 0
        Mesh.CurveTo 30, -30, 60, 30, 100, 0
        Mesh.CurveTo 60, 30, 130, 60, 100, 100
        Mesh.CurveTo 60, 70, 30, 130, 0, 100
        Mesh.CurveTo 30, 70, -30, 30, 0, 0
       
        Mesh.SetCornerColor 0, vbRed
        Mesh.SetCornerColor 1, vbGreen
        Mesh.SetCornerColor 2, vbBlue
        Mesh.SetCornerColor 3, vbYellow
    Mesh.EndPatch
 
    CC.Paint 1, Mesh
   
    CC.AppendPath Mesh.GetPatchPath(0) 'optional stroking of the Mesh-Patch-Path
    CC.Stroke , Cairo.CreateSolidPatternLng(vbBlack)
  CC.Restore
End Sub

Sub PaintGouraudTriangle(CC As cCairoContext, Mesh As cCairoPattern)
  CC.Save
    CC.TranslateDrawings 180, 85

    Mesh.BeginPatch
        Mesh.MoveTo 0, 0
        Mesh.LineTo 100, -50
        Mesh.LineTo 80, 60
       
        Mesh.SetCornerColor 0, vbRed
        Mesh.SetCornerColor 1, vbGreen
        Mesh.SetCornerColor 2, vbBlue
    Mesh.EndPatch
 
    CC.Paint 1, Mesh
   
    CC.AppendPath Mesh.GetPatchPath(0) 'optional stroking of the Mesh-Patch-Path
    CC.Stroke , Cairo.CreateSolidPatternLng(vbBlack)
  CC.Restore
End Sub

---

Olaf

Thank you Olaf, but before I get hyper excited. Does this allow image warping? Like what Reexre's done in his example? Or is it only for colours?

Quote:

---

Originally Posted by -Corso->

Thank you Olaf, but before I get hyper excited. Does this allow image warping? Like what Reexre's done in his example? Or is it only for colours?

---

If I'm not mistaken, then it is "only" for Colors.

But looking at your Picture...
In case "the freckles" can be moved (or already are) in a separate Layer-Surface,
the "FaceContour+Skin"-Layer has quite smooth "skin-gradients" (no hard "edges" in the gradients).

Cannot imagine, that it'd be that hard, to cover that FaceContour-layer with - let's say ...
4x3=12 "curved and connected Coons-Patches" ... on one side of the face that is -
the other one will be "just mirrored", even when you edit the Coons-Grids Control-Points on just one side.

I'd like to leave the final experimenting to the real artists though... ;)
(let's see what Reexre has to say - or contribute - once the new version is uploaded).

Olaf

Freckles layer: Only need to supply different png's with varied splatter patterns, user will be able to control darkness level.
Lighting Layer and Darkening Layer: Will provide various png's with different forms. But, it's the jaw layer which receives a copy of the light/dark layer [operator in] it, I would make the jaw layer manipulable via directional control, [control points] on 2 axes. (One to pull the chin/jaw down, one to pull the chin-jaw in/out to the side, then mirrored. That pattern of manipulation would also be copied onto the light/dark layers so as not to damage or pinch the gradients. It would probably need perhaps a separate elongation control too, (middle, all-drag extend) (which coincidentally moves the mouth position by a ratio.)
Well, that's what I'm planning to build. The other lighting on the face parts won't be necessary to distort, unless I want to do manipulation of the eye socket darkness... but that might be workload overkill... Supplying the shaded/lighting png's layers might be sufficient depending.
Anyway, looking forward to the update Olaf. If it's able to manipulate images, that would be awesome!

Attachment 182651

FYI: vbRichClient-version 6.09 was just uploaded (with proper cairo-mesh-support),

So, the example (as posted in #11) will work, after downloading and registering this new lib-version.

Have fun...

Olaf

Attachment 182852

Thank you very much Olaf, I'll jump on it soon and see if it allows distortion, (probably not), but I'll report back regardless.

Thanks Olaf for the update and example, and as you expected, the mesh isn't for image manipulation, it's just a gradient patch. Probably only good for instant colour wheels. (Which is still handy).

I've opted for a compromise between Reexre's mesh test and drawing multiple jaw objects.
I'll split the face into quadrants and only manipulate one corner. That way, it shouldn't pinch or split the gradients.
And by adding in a few different jaw designs, it should look pretty neat. At least the shading is taken care of per each one too.

Attachment 182861

Anyway, on wards for now. (!) :thumb: