RGraph gradient applied to the single circle

[Ivan Gasparetto]

Hello,

I am using the RGraph and I need to create circles with a gradients,
so they look to be 3D spheres.
I have created a new node type called blob and I have implemented the
code as follows. However, the gradient is applied to the entire
canvas.
Not sure I could explain it, but is there anyone that can help?

$jit.RGraph.Plot.NodeTypes.implement({
'blob': {
render: function (node, canvas) {
var pos = node.pos.getc(true),
dim = node.getData("dim");

var ctx = canvas.getCtx();
var radgrad = ctx.createRadialGradient(0, 0, dim, 0, 0,
node.getPos().rho);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
ctx.fillStyle = radgrad;

this.nodeHelper.circle.render("fill", pos, dim, canvas)
},
contains: function (node, canvas) {
var pos = node.pos.getc(true),
dim = node.getData("dim");
return this.nodeHelper.circle.contains(pos, canvas, dim)
}
}
});

Many thanks

Ivan

[Ivan Gasparetto]

Hello,

Is it difficult to be done, so I got no reply yet?

Can anyone help?

Thanks

On May 1, 2:59 pm, Ivan Gasparetto <i.gaspare...@valuesoft.com.br>
wrote:

[Hamann]

I willl test It 4 you and maybe i will fixed it for U

Just a moment please

Op donderdag 3 mei 2012 13:34:23 UTC+2 schreef Ivan Gasparetto het volgende:

[Hamann]

Just test your BLOB and it works fine on my RGRAPH

Also thanks for the BLOB node

Op dinsdag 1 mei 2012 15:59:12 UTC+2 schreef Ivan Gasparetto het volgende:

[Ivan Gasparetto]

Hi Hamann,

Thanks for the reply.

It doesn't work but you can notice only if you have many blobs. For
example:
http://ivangasparetto.com/jit-test/

As you can see, the blobs are a sort of window where you can see
through the gradient that is printed in the canvas underneath.

Ivan

>  circle with a gradient.png
> 2KViewDownload

[Ivan Gasparetto]

Hi Hamann,

Did you have a chance to check it?
Any ideas?

Thanks,

Ivan

On May 3, 1:22 pm, Ivan Gasparetto <i.gaspare...@valuesoft.com.br>
wrote:

[Ivan Gasparetto]

Anyone with any good ideas guys?

On May 4, 9:31 am, Ivan Gasparetto <i.gaspare...@valuesoft.com.br>

[Hamann]

no because I do not really understand the problem.
maybe you could give the correct result through an example like JPG (via Fotoshop ) to show for Us.

perhaps this also benefits to the others users

Op zaterdag 5 mei 2012 23:27:27 UTC+2 schreef Ivan Gasparetto het volgende:

[Ivan Gasparetto]

OK,

Please see this image:
http://ivangasparetto.com/jit-test/image.png

Please notice, at the right, that we have a 3D effect on a 2D graph.
On the left you can see that the gradient is not contained within the
single blob, but it starts at the center of the canvas, going out to
where the blobs are. The blobs are painted with the end of the
gradient.

Thanks

Ivan

[Hamann]

OK now We see your problem..

@this moment i'am @work so i will check it after Work OK. ( from the Netherlands 11:20:40 UTC+2 )

see you later 

Op maandag 7 mei 2012 11:14:56 UTC+2 schreef Ivan Gasparetto het volgende:

[Hamann]

Hi Ivan

I have made an example output for U (see attachment)

U see the differents??
the only thing i have change is:

old:

radgrad.addColorStop(1, 'rgba(1,159,98,0)');

fixed with

 radgrad.addColorStop(1, '#BFFF00');

So i hope this will give u an idea 2 fix your problem with gradients

Op maandag 7 mei 2012 11:14:56 UTC+2 schreef Ivan Gasparetto het volgende:

[Hamann]

Forget 2 show u when all nodes are fixed 

Op maandag 7 mei 2012 13:31:53 UTC+2 schreef Hamann het volgende:

[Ivan Gasparetto]

Hamann,

We can see the problem on your example as well.
The red part of the gradient is at the bottom of the top circle, while
it is at the top of the bottom circle. It means that the gradient is
still being applied as both blobs where one single element.
Ivan

>  testcase_1_with_all_fixed_blob.png
> 27KViewDownload

[Hamann]

Huh?

so the  https://javascript-information-visualization-toolkit.googlegroups.com/attach/139d93c92ae94fc2/testcase_1_with_all_fixed_blob.png?view=1&part=4 

is not the result that U want??

Op maandag 7 mei 2012 14:01:20 UTC+2 schreef Ivan Gasparetto het volgende:

[Ivan Gasparetto]

Let me try to explain better.

Please have a look at http://ivangasparetto.com/jit-test/image.png
On the left image, can you see that the gradient is not applied to
every single yellow blob independently? If they were independently
"painted", they would look exactly the same, like the image at the
right.
In your example, we see the same issue as the top blob is a mirror
image of the bottom one.

Does that make sense?

Ivan


On May 7, 1:07 pm, Hamann <stev...@gmail.com> wrote:
> Huh?
>
> so the  https://javascript-information-visualization-toolkit.googlegroups.com...

[Hamann]

if I understand correctly
do you want that each blob has a similar gradient structure from lower left to upper right.

Is this what you want regardless of the position of the node? 

Op maandag 7 mei 2012 14:36:17 UTC+2 schreef Ivan Gasparetto het volgende:

[Ivan Gasparetto]

Correct.

They should be independent.

On May 7, 2:03 pm, Hamann <stev...@gmail.com> wrote:
> if I understand correctly
> do you want that each blob has a similar gradient structure from lower left
> to upper right.
> Is this what you want regardless of the position of the node?
>
> Op maandag 7 mei 2012 14:36:17 UTC+2 schreef Ivan Gasparetto het volgende:
>
>
>
>
>
>
>
>
>
> > Let me try to explain better.
>

> > Please have a look athttp://ivangasparetto.com/jit-test/image.png

[Hamann]

ok I will try to work this out and reply u later 

ps:i see you've already made a change on  http://ivangasparetto.com/jit-test/ 

Op maandag 7 mei 2012 15:27:07 UTC+2 schreef Ivan Gasparetto het volgende:

[Hamann]

Hi Ivan

I just made an example where the gradient remains unchanged.

Also this is not very well worked out but the result is what matters..
Would you be able to test this code on yours:

$jit.RGraph.Plot.NodeTypes.implement( {

'blob': {

render: function (node, canvas) {

var pos = node.pos.getc(true),

dim = node.getData("dim");

var ctx = canvas.getCtx();

var radius=dim+30;

var radgrad = ctx.createRadialGradient(pos.x, pos.y, radius+20, pos.x-radius, pos.y,radius);

radgrad.addColorStop(0, "#C8D633");

radgrad.addColorStop(1, "#004CB3");

ctx.fillStyle = radgrad;

this.nodeHelper.circle.render("fill", pos, dim, canvas)

},

contains: function (node, pos) {

var npos = node.pos.getc(true);

dim = node.getData('dim');

return this.nodeHelper.circle.contains(npos, pos, dim);

}

}

},

{

'blob2': {

render: function (node, canvas) {

var pos = node.pos.getc(true),

dim = node.getData("dim");

var ctx = canvas.getCtx();

var radius=dim+30;

var radgrad = ctx.createRadialGradient(pos.x, pos.y, radius+20, pos.x-radius, pos.y,radius);

radgrad.addColorStop(0, "#2ac9ac");

radgrad.addColorStop(1, "#b1e57e");

ctx.fillStyle = radgrad;

this.nodeHelper.circle.render("fill", pos, dim, canvas)

},

contains: function (node, pos) {

var npos = node.pos.getc(true);

dim = node.getData('dim');

return this.nodeHelper.circle.contains(npos, pos, dim);

}

}

},

{

'blob3': {

render: function (node, canvas) {

var pos = node.pos.getc(true),

dim = node.getData("dim");

var ctx = canvas.getCtx();

var radius=dim+30;

var radgrad = ctx.createRadialGradient(pos.x, pos.y, radius+20, pos.x-radius, pos.y,radius);

radgrad.addColorStop(0, "#ead00e");

radgrad.addColorStop(1, "#ed3c0b");

ctx.fillStyle = radgrad;

this.nodeHelper.circle.render("fill", pos, dim, canvas)

},

contains: function (node, pos) {

var npos = node.pos.getc(true);

dim = node.getData('dim');

return this.nodeHelper.circle.contains(npos, pos, dim);

}

}

})

I hope this is what you need.

See attachtments!!

Op maandag 7 mei 2012 15:27:07 UTC+2 schreef Ivan Gasparetto het volgende:

[Ivan Gasparetto]

Super!

http://ivangasparetto.com/jit-test/

I have added some extras to the gradient. I think it is more realistic
if applied in diagonal instead of left to right.
Also, the label needs to be larger in the larger blobs, and smaller in
the smaller blobs so it gives a more 3D effect.

I am really happy with the result!

Thank you VERY MUCH for the help.

Ivan

>  test_example_4.png
> 35KViewDownload
>
>  test_example_1.png
> 29KViewDownload
>
>  test_example_2.png
> 38KViewDownload
>
>  test_example_3.png
> 25KViewDownload

[Hamann]

Ivan,

I'm glad I was able to help U.

good luck with your blob-project

Op woensdag 9 mei 2012 15:16:09 UTC+2 schreef Ivan Gasparetto het volgende: