» VL: Skia Update
This site relies heavily on Javascript. You should enable it if you want the full experience. Learn more.

VL: Skia Update

Hello,

welcome the first update to our beloved 2D graphics library.
Since this summer's release quite a few things have happened.
The main focus was on covering every single aspect of the Skia's Paint (defines how everything looks like when rendered) and cleaning it up.
We would say it is now complete.

We've also introduced some special gems like Masks, Precompositions, Ellipsis and some more examples.

Never heard of Skia before? Check Skia on Wikipedia.

Read on.

Masking

You already were able to clip layers by rectangles or paths (ClipRect, ClipPath), now you can use any layer as a mask (as you know it from Photoshop), be it an image or very complicated layer pipeline. Welcome the Mask. It comes in two flavors: one uses a layer as a mask, another one just an image. The node has useful helpers which allow you to see how the mask looks like and where it is applied.

Precomposing

While researching for the masks we've stumbled upon Skia's superpower: we call it precomposing. Layers can be precomposed (leaving canvas unchanged) and then applied (grouped) with other layers. It's like having an extra render pass that works like a layer.

So now you've got two options: you can blur every single particle alone (by setting SetMaskFilter > Blur) or prepare all of them (precompose) and then blur the whole scene at once (by setting SetImageFilter > Blur).

In the screeshot above:
Left - every single circle is blurred alone, the background comes into play.
Right - the whole precomposition is blurred.

Ellipsis

Then we have these boring Ellipsis nod... nodes. They clip your text (left, right or center) by the number of letters or the width in units. Like this:

Paint completeness & cleanup

We've cleaned up the Paint a lot and now you can set or get any of its properties. Don't forget to turn on the "Advanced" filter of the NodeBrowser (like in the screenshot or just press TAB-key) to get the full power. SetFakeBoldText anyone?

In the Paint category:

  • Processnodes (having an icon with two dots) are for setting properties (they start with Set)
  • nodes with an empty box are for getting properties
  • Processnodes without Set (like Stroke, Fill or FontAndParagraph) are convenient nodes setting several properties at once.

Examples and Demos

Don't forget to check the /examples folder of the package (your-vvvv-folder/lib/packs/VL.Skia.xxxx/).
There are also some updates to the /examples/demos, like the Slideshow.vl which let's you click through your-very-big-images asynchronously preloading them in the background.

Some more features:

  • ImageEncoder
  • ImageWriter
  • SubpixelText property is on by default
  • Pipet (Experimental)

How to Install

1. Install the latest vvvv_50beta38.1 (older versions are not supported)
2. In vvvv, middleclick > Show VL
3. In VL, go to: Dependencies > Manage Nugets > Commandline and type:

nuget install VL.Skia -prerelease

Versions

  • This latest version works best with beta38.1.
  • Using beta38 or older? make sure to install an older skia version. Type 'nuget install VL.Skia -version 0.93.26-g6c67991fa4' to get a compatible version. You'll miss some of the advertised features though.
robotanton, Friday, Nov 23rd 2018 Digg | Tweet | Delicious 0 comments  
  • 1

anonymous user login

Shoutbox

~1h ago

joreg: PSA: Thursday night starting 11pm CET vvvv.org will move servers. If all goes well we should be back soon after.

~1d ago

joreg: But first: This Friday in Berlin: Join our full day "Getting started with Generative Design Algorithms" workshop https://nodeforum.org/announcements/workshop-getting-started-with-generative-design/

~2d ago

joreg: In #Linz for #ArsElectronica? Join us for a free 2 days #vvvv workshop sponsored by businesses/responsive-spaces-gmbh Apply here: 2-day-gamma-vvvvorkshop-at-responsive-spaces-in-linz

~3d ago

joreg: Need your custom dose of #vvvv training? Join us at our studio in #berlin: vvvv-training-at-the-source

~9d ago

~13d ago

~13d ago

domj: Dev stream: Painting with light with a Vive controller, developing using VL and Schéma. Start at 17:00 https://www.twitch.tv/dominikjancik

~15d ago

joreg: July as it happened: vvvvhat-happened-in-july-2019 #vvvv

~15d ago

levi: @mrboni thanks mrboner. solved it by turning all the lights to strobe mode so framerate drops were actually a relief :P . love