dcsimg
Results 1 to 5 of 5

Thread: Three dimensional text in GDI+ (single point perspective)

  1. #1

    Thread Starter
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    3,104

    Three dimensional text in GDI+ (single point perspective)

    A question on the VB.Net forum about 3D Text set me thinking about a project I have had on the back burner for some time. Itís fairly easy to make a perspective illusion by making an image taper to a point in GDI+. You just apply a ScaleTransform repeatedly to an image. Hereís a simple example with 10 tapering slices. It could go in the Paint event handler of a Form or PictureBox:

    Code:
       For i As Integer = 0 To 9
                e.Graphics.DrawEllipse(Pens.Blue, New Rectangle(100, 100, 200, 200))
                e.Graphics.ScaleTransform(0.9, 0.9)
       Next
    Name:  simplePerspective.jpg
Views: 2727
Size:  23.0 KB

    The result is technically speaking a single vanishing-point perspective. Itís not completely realistic but it can have a nice visual impact. The example above has a vanishing point at 0,0 but itís easy to shift it to any other position like this:

    Code:
      
        For i As Integer = 0 To 9
                e.Graphics.TranslateTransform(vanishingPoint.X, vanishingPoint.Y)
                e.Graphics.ScaleTransform(0.9, 0.9)
                e.Graphics.TranslateTransform(-vanishingPoint.X, -vanishingPoint.Y)
                e.Graphics.DrawEllipse(Pens.Blue, New Rectangle(100, 100, 200, 200))
            Next
    The impression of solidity can be much greater when the ďslicesĒ of the image are closer together. This can be done by using more slices, and by reducing the taper (e.g. by shrinking each successive slice by 0.995). It looks a bit clunky if all the slices are drawn in the same color. Much nicer is to use a series of graded colors which show up the 3D shape nicely. This is still a long way from using 3D rendering with lights, but - hey- it only takes 60 lines of code for the whole program. In principle you could draw any shape this way, but my favorite is to use text with large, showy font.

    In the Demo1 program in the attached file, Iíve used Times New Roman at 100 pixels high to get this result:

    Name:  TextExample.jpg
Views: 1923
Size:  16.3 KB

    The text moves with the mouse like a cursor (I was too lazy to do proper dragging). You can see the perspective changing as it moves, which adds a lot to the depth effect. I have used a Drawing2D.GraphicsPath with AddString instead of Graphics.DrawString because it give much better looking reslts. It is also more flexible. There are several variables to play with. To keep things short I have put them in the variable declarations, but ideally they should be turned into properties and given a proper UI. Hereís a more extravagant example with a font called Bernhard Fashion BT at 150 pixels high.

    Name:  BernhardFashion.jpg
Views: 1810
Size:  16.2 KB

    Finally I made a second much more elaborate program, Demo2 with gradients, reflection, blurring and various other special effects. Itís really rough and ready, with various magic numbers and arbitrary colors. The image moves with the mouse as in Demo1 but itís a bit jerky because a lot of processing is involved. I was interested in getting maximum effect, not efficiency. Whether thatís bearable will depend on your own PC and graphics hardware. The font used is Poster Bodoni BT 100. Hereís a partial pic:

    Name:  eyecandy.jpg
Views: 1882
Size:  49.6 KB

    The fonts I have mentioned can all be downloaded free from the web. Oh yes, Iím sure all this will work much better in WPF (please post your code). The attached Demo1 is a plain TXT file. Just start a form, make it big and copy the text to the form code; then run. There's a limit of 5 attachments, so Demo2 is in the next post.

    BB
    Attached Files Attached Files
    Last edited by boops boops; Oct 26th, 2010 at 03:41 AM. Reason: yet another typo spotted [:(]

  2. #2

    Thread Starter
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    3,104

    Re: Three dimensional text in GDI+ (single point perspective)

    Here's Demo2 in TXT form. I hope you like it. BB
    Attached Files Attached Files

  3. #3
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    22,941

    Re: Three dimensional text in GDI+ (single point perspective)

    demo2 looks like a good job...

  4. #4
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,647

    Re: Three dimensional text in GDI+ (single point perspective)

    Awesomeeee.....

    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  5. #5
    PowerPoster stanav's Avatar
    Join Date
    Jul 2006
    Location
    Providence, RI - USA
    Posts
    9,292

    Re: Three dimensional text in GDI+ (single point perspective)

    Nice job! Rep+
    Let us have faith that right makes might, and in that faith, let us, to the end, dare to do our duty as we understand it.
    - Abraham Lincoln -

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width