Ink blend modes - any easy tutorial?

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller

Post Reply
sritcp
Posts: 368
Joined: Tue Jun 05, 2012 5:38 pm
Location: Alexandria, Virginia

Ink blend modes - any easy tutorial?

Post by sritcp » Mon Feb 16, 2015 11:30 pm

I see that the ink of an object defaults to srcCopy, but there seems to be a bunch of options, most of which are completely opaque :D to me.

Could someone point me to an accessible tutorial or two?

Thanks,
Sri.

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6684
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Ink blend modes - any easy tutorial?

Post by FourthWorld » Tue Feb 17, 2015 12:06 am

Blend modes can be difficult to describe. Probably the best way to explore them to see which one will fit what you're looking to do is to select the object you're considering changing, open the Inspector to the Blend pane, and arrow-key your way through the list to see how each affects your object.

Did you have a particular effect in mind?
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

sritcp
Posts: 368
Joined: Tue Jun 05, 2012 5:38 pm
Location: Alexandria, Virginia

Re: Ink blend modes - any easy tutorial?

Post by sritcp » Tue Feb 17, 2015 2:39 am

Oh, I was watching the iOS clock lessons on the "Create It With LiveCode" series, where Kevin Miller was matching the icon background with the rest of the background by changing the ink from srcCopy to srcAnd. It wasn't clear if the original icons had alpha areas which is why you had to use srcAnd (i.e., with srcCopy you won't see even what was behind transparent areas of an image?). I know my description is not clear or complete, but the Kevin Miller Express was speeding along :D , and this was what I could pick up!

It occurred to me if there was a tutorial (not necessarily in the LC world) which gave examples of each ink mode, with a few words on where they might find application, it would be a small first step in filling a huge hole in my knowledge of graphics. Given we are in the resolution independence era, use of LC graphics (limited as they are) would be a good way to pretty up the user interface. At least, that was the thinking.

Regards,
Sri.

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6684
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Ink blend modes - any easy tutorial?

Post by FourthWorld » Tue Feb 17, 2015 2:55 am

Trying out my own advice, I made a new stack and added an opaque graphic to it. I double-clicked the graphic to open the Inspector, chose the "Blending" pane in the Inspector, and selected the first line of the options in that list, with the intention of arrow keying my way down until I found something that looked like what you described.

It turns out that the first item there, blendClear, renders the area of the graphic completely clear, allowing me to see the underlying desktop.

Is that what you're looking for?
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

sritcp
Posts: 368
Joined: Tue Jun 05, 2012 5:38 pm
Location: Alexandria, Virginia

Re: Ink blend modes - any easy tutorial?

Post by sritcp » Tue Feb 17, 2015 4:55 am

No, that wasn't it.

When the clock icons were added to the navigation bar, there were white patches around each image (as you would expect), which stood out against the grey background (see the banding in the picture). As Kevin put it, one way is to use an image editor, add an alpha channel, and re-import the images. The other way is to go to the blend property of each image and change it from srcCopy to srcAnd. When he did that, the whites vanished and the entire background became uniformly grey (that of the background graphic rectangle). I was wondering what exactly does srcAnd do? How did it know to take the white out but leave the red image itself in? Unless I know what each blending does exactly, I wouldn't be able to employ it.

More generally, I thought it would be nice to go over a tutorial if one existed.

Regards,
Sri.
Attachments
clock.png
clock.png (13.58 KiB) Viewed 1737 times

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6684
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Ink blend modes - any easy tutorial?

Post by FourthWorld » Tue Feb 17, 2015 6:56 am

The Dictionary entry for srcAnd may be of interest.
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

Klaus
Posts: 11012
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: Ink blend modes - any easy tutorial?

Post by Klaus » Tue Feb 17, 2015 4:02 pm

I've never seen a satisfying tutorial about blendmodes, simply because that is pure mathematics in the end! 8)

Take look here:
http://en.wikipedia.org/wiki/Blend_modes
http://photoblogstop.com/photoshop/phot ... -explained
http://www.slrlounge.com/school/photoshop-blend-modes/

Good luck and have fun! :D

sritcp
Posts: 368
Joined: Tue Jun 05, 2012 5:38 pm
Location: Alexandria, Virginia

Re: Ink blend modes - any easy tutorial?

Post by sritcp » Tue Feb 17, 2015 11:41 pm

Thanks for the links, Klaus!

The dictionary entry under srcAnd gives this example:

backgroundComponent bitAnd objectComponent

The effect is that the lighter an object is, the more transparent it is. White parts of an object are completely transparent, and black parts are completely opaque.

For example, suppose an object's color is 45,0,255, and the color of the pixels under the object is 20,45,100. If the srcAnd transfer mode is used, the object's displayed color is 4,0,100 (the decimal equivalent).


The last two components are explained, but I simply don't understand how 45 and 20 became 4 !!!

Regards,
Sri.

Klaus
Posts: 11012
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: Ink blend modes - any easy tutorial?

Post by Klaus » Tue Feb 17, 2015 11:44 pm

Hi Sri.
sritcp wrote:... but I simply don't understand how 45 and 20 became 4 !!!
welcome to the club, I have also no idea! :D


Best

Klaus

sritcp
Posts: 368
Joined: Tue Jun 05, 2012 5:38 pm
Location: Alexandria, Virginia

Re: Ink blend modes - any easy tutorial?

Post by sritcp » Tue Feb 17, 2015 11:54 pm

Well, after tapping on my calculator a bit, I think it is a typo; it should be 40, I think, not 4.

0 is 100% opacity; 255 is 0% opacity.
45 is 82% opacity.
So, the blending is (0.82 x 45) + (0.18 x 20) = 40.5

Regards,
Sri.

Dougy
Posts: 15
Joined: Sat Jul 01, 2006 7:37 pm
Location: New Zealand

Re: Ink blend modes - any easy tutorial?

Post by Dougy » Sun Apr 05, 2015 7:35 am

Hi Sri

If you don't have this attached example stack on Blend modes, here it is. Sorry, can't remember whose it is (big thanks to whoever it was!) - I found it very worthwhile.

Regards
Doug.
Attachments
BlendExplorer BLEND MODES.rev.zip
(123.17 KiB) Downloaded 48 times
LC 6.6.3, AnimationEngine 5.1
BeatSpeak & EVPoint available for iOS devices on the App Store.

sritcp
Posts: 368
Joined: Tue Jun 05, 2012 5:38 pm
Location: Alexandria, Virginia

Re: Ink blend modes - any easy tutorial?

Post by sritcp » Sat Apr 18, 2015 2:56 pm

Thanks, Doug!

Sri

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”