Realbasic: Canvas Tutorial Lesson 8

I had some questions about glowing and reflection. This tutorial will go a little more in depth on this subject.

I also show an alternative way to do the glowing with an inverted mask. This way we can put the glow and reflection mask into one picture.

This is what we going to build:

First let’s analyse our mask picture and explain the different parts:

1. The glow:
As you can see the glow is inverted compared with the glow we used in our previous lessons. The more black a pixel is, the less transparent it will be and thus the white layer will glow more.

2. The CD
Again, here the more black, the less transparent. We want to mimic a plastic case and we want to see our CD cover so we’ll make it completely white (transparent)

3. The reflection
And also so for the reflection. The more black a pixel is, the less we want to see our background through.

This is a complete schematic of all the layers we are going to use:

Click picture to see full size

As you can see, we’ll use some temporary pictures to build the glow part and the reflection part.

Let’s go to the code:

In the LoadReflectPicture() function we’ll build all our layers. I commented the code to show where each part goes.

Sub LoadReflectPicture(tmpBackground as String, tmpImage as string, tmpMask as String, StartReflectMask as integer, Left as integer, Top as integer)
  dim f as FolderItem
  dim bgPic as Picture
  dim imgPic as Picture
  dim mskPic as Picture
  
  ' this picture will hold our flipped an cropped image
  dim flpcropPic as Picture
  
  ' load the pictures
  f = GetFolderItem(tmpBackground)
  bgPic = f.OpenAsPicture
  
  f = GetFolderItem(tmpImage)
  imgPic = f.OpenAsPicture
  
  f = GetFolderItem(tmpMask)
  mskPic = f.OpenAsPicture
  
  ' calculate the Height of the reflection mask
  dim HeightReflectMask as integer
  HeightReflectMask =mskPic.Height - StartReflectMask
  
  ' draw the background
  gBuffer.drawPicture bgPic,0,0
  
  ' Make a temporary picture that will hold our image with the glow and reflection
  dim tmpPic as Picture
  tmpPic = NewPicture(mskPic.Width, mskPic.Height, 32)
  
  ' first the glow, because we want to reflect this also
  ' draw our image
  tmpPic.Graphics.DrawPicture imgPic,0,0
  
  ' to draw our glow, we need another temporary picture
  dim glowPic as Picture
  glowPic = NewPicture(mskPic.Width, StartReflectMask, 32)
  ' a white layer to do the glow
  glowPic.Graphics.ForeColor = &cFFFFFF
  glowPic.Graphics.FillRect 0,0, glowPic.Width, glowPic.Height
  ' the mask
  glowPic.Mask.Graphics.DrawPicture mskPic, 0,0, glowPic.Width, glowPic.Height, 0,0, glowPic.Width, glowPic.Height
  ' and write it to our temporary picture
  tmpPic.Graphics.DrawPicture glowPic,0,0
  
  ' now let's do the cropping and flipping
  flpcropPic = FlipAndCrop(tmpPic, HeightReflectMask)
  ' draw it to our temporary picture
  tmpPic.Graphics.DrawPicture flpcropPic, 0, StartReflectMask
  ' and last our reflection mask
  tmpPic.Mask.Graphics.DrawPicture mskPic, 0, StartReflectMask, flpcropPic.Width, flpcropPic.Height, 0,StartReflectMask,flpcropPic.Width, flpcropPic.Height
  
  ' and write it to our buffer
  gBuffer.DrawPicture tmpPic,Left, Top
End Sub

In the FlipAndCrop() function we do the actual flip and crop. We crop the CD cover to half the height of the original to mimic some perspective.

Function FlipAndCrop(srcPic as picture, HeightReflectMask as integer) As picture
  dim tgtPic as Picture
  
  dim srcRGB as RGBSurface
  dim tgtRGB as RGBSurface
  
  dim x,y as Integer
  dim tmpc as Color
  dim y2 as integer
  
  Dim picWidth as integer
  Dim picHeight as integer
  
  picWidth = srcPic.Width
  picHeight = srcPic.Height - HeightReflectMask ' only the CD, not the part ready for the reflection
  
  tgtPic = NewPicture(picWidth, HeightReflectMask, 32)
  
  srcRGB = srcPic.RGBSurface
  tgtRGB = tgtPic.RGBSurface
  
  ' the part of the original picture we want to reflect and crop
  ' the height = 2 x HeightReflectMask
  
  y2 = HeightReflectMask
  
  for y = picHeight - (HeightReflectMask * 2) to picHeight step 2 ' step 2 so we'll crop
    for x = 0 to picWidth
      tgtRGB.Pixel(x,y2) = srcRGB.Pixel(x,y)
    next
    y2 = y2 - 1 ' we go from bottom to top, so flipping it
  next
  
  Return tgtPic
End Function

I hope this makes things a little bit clearer, but feel free to ask questions.

The source code:
http://www.gorgeousapps.com/Tut8.zip

See ya!

Click here to Donation if you like my work

Advertisements

About Alwaysbusy

My name is Alain Bailleul and I'm the Senior Software Architect/Engineer at One-Two. I like to experiment with new technologies, Computer Vision and A.I. My projects are programmed in B4X , Xojo, C#, java, HTML, CSS and JavaScript. View all posts by Alwaysbusy

3 responses to “Realbasic: Canvas Tutorial Lesson 8

  • Ken Auggie

    This is fantastic! Thanks for sharing your expertise in RealBasic graphic manipulation!

    Now, what I am REALLY looking for is a method for applying a “perspective” effect to an image. Would you have an idea where I should begin or a basic code outline?

    Again, many thanks for this brain dump to the world to share!

  • Alwaysbusy

    @Ken thank you for the kind words! Great idea for a new item on the blog; This could be a nice challenge

  • Xavier

    Wow!! This whole series is awesome. I’m mostly develop information systems but this whole graphics programming has me quite intrigued. I love all of the math that is involved. Your tutorials have made me want to look into learning more about the art/science of graphics programming. I look forward to your future posts.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: