Color Sampler Swatch: Spark AR Studio Patch Asset Tutorial

1,181 views

0   0

Create a Color Sample Swatch in Spark AR Studio

Download Color Sampler Spark AR v87 Template: https://newcolor.studio/product/color-picker-spark-ar-studio-template/

Hello, this is an updated color sampler patch.

When you select these you can sample at the touch location.

Pretty cool. So, I'll take you through how I did it.

The first thing here's a handy dandy restart button, if you haven't found that yet, that'll basically show you what happens when your effect is opened in the.In the camera.

Create object tab boom left circle object tab. So when that happens.I'm sending a pulse out set to zero set to one set to two when those things happen then the option picker. I can set Boolean values. In this case for zero, if the screen is tapped, I want to.

Send an off value.But if it's on we just send a boolean true and this is the option picker.

Send it to the sender the default is off so if it's off.

It will not send true like this is number two. That's on. So if number two is enabled, we're dragging that around.Sent it to the drag 2D patch.Where we have a default position, which is in the center and then we have.The enabled button, so it's only going to update this position when it's enabled.

It's not enabled it's going to stay the same.

Coming out of this drag 2D patches are UV position.That.A 0 through 1 range pair of numbers.X and Y are U and V, and at the center is 0.5 so that value coming out is the UV position of the drag. And this is the two deep position, which is a Cartesian coordinate that relates to.

This object on the canvas.We can go over that too if you want.I think I made it a little more messy but.It's still useful perhaps.

I added this default to be 2d position by clicking this.

Create input boom and then once you're out of the patch you can.You can name it in the properties.

And this UV position.Sent that out and yep did that and send it out to the UV position there?

All right onto the collar sampling part, so I wanted to make a.An average color of four points sort of like a cross like this, so it's samples at each at the top of the bottom and the so I use the tech texture sampler to I have four times.

I added a little bit to the Y.

Subtracted a little from the Y.The and then same for the X sent it into the UV coordinates mix them on the Y mix them on the X and then mix them again and sent them into here.The range or as like how big the sample is the larger number you add or subtract, it'll get like a little more gray and up here.

So this is a sort of a selector. I have you can see it's a little more sensitive now without that's selected this is the average sample selected.

And that's the value that will change the distance from the center that it's sampling from.Sorry, there's such mess. I hope it's useful.

So that's sort of our mix function and then down here if it's selected.Then I want to change the size of this circle and I want with an SDF circle because they're super cool.This is how I did that circle complement shader derivative.Multiply smooth step output.And yeah, that's that's online if you look up into the documentation there about how to create that circle and make them nice and smooth, so I plugged that circle.

SDF Documentation: https://sparkar.facebook.com/ar-studio/learn/documentation/docs/visual-programming/signed-distance-fields-examples/

Shape into here and it's the alpha coming out of here as a color and that's the alpha that we're changing.Changing the diffuse texture on that so they're texture boom, okay great, so I think that explains just about everything.

Download Color Sampler Spark AR v87 Template: https://newcolor.studio/product/color-picker-spark-ar-studio-template/
View More
Comments

0 Comments