Gradient Brush

[Samarth-Nasnodkar]

I would like to see a gradient brush in Rainbow-Board. It would be cool to see one. If you are confused about what a gradient brush is , it is a brush which changed its color like a rainbow in a single stroke. Here is an image for example. Thank You.

[vivek-30]

@Cooldude069, @HarshKhandeparkar May be we can use hsl value for the strokeStyle of context of canvas. 😊

[harshkhandeparkar]

Actually, the backend is here

And we don't really use the canvas context directly :stuck_out_tongue:.

[harshkhandeparkar]

I don't really have time right now, but if you want to help, you can do so! :smile:

[vivek-30]

Actually, the backend is here

And we don't really use the canvas context directly 😛.

ok i will look into this for further reference.

[vivek-30]

I don't really have time right now, but if you want to help, you can do so! 😄

oh i can totally understand your situation. BTW @HarshKhandeparkar i am also a little busy but not as busy as you so if possible i will try to contribute to this incredible project 😊

[vivek-30]

Hi @HarshKhandeparkar i have tried this and made a significant progress.but having some trouble with the code could you please help me? firstly i have created a gradient brush in a dummy canvas. see the demo -

https://user-images.githubusercontent.com/75980147/108699096-d787a780-752a-11eb-96f1-9f097665ee2f.mov

and tried to understand your code i did understand some part both of this repo as well as of GPU real renderer but still not getting how to make it happen.

[vivek-30]

Progress i have made in this code -

[vivek-30]

i think i am struggling bcoz i am not familiar with typescript and electron , i know react and materialize csss but GPU real renderer is also becoming a hurdle for me 😅

[vivek-30]

Also if we want to add a new tool like this(gradient brush) we not only have to change code of this repo but also have to make adjustments in GPU real render as well , coz file like tool.ts will be responsible to shift to a new tool right?

[harshkhandeparkar]

Well, you will have to only change gpujs-real-renderer.

[harshkhandeparkar]

Do you understand how gpu.js works? :sweat_smile: You cannot use the canvas API directly for this. Refer to these files: https://github.com/HarshKhandeparkar/gpujs-real-renderer/blob/master/src/renderers/RealDrawBoard/tools/tools.ts https://github.com/HarshKhandeparkar/gpujs-real-renderer/blob/master/src/renderers/RealDrawBoard/tools/brush.ts and https://github.com/HarshKhandeparkar/gpujs-real-renderer/blob/b6332290954861d7f36afe6640a071d52659686b/src/renderers/RealDrawBoard/RealDrawBoard.ts#L102-L169

You will have to add another tool similar to these :)

[harshkhandeparkar]

I will handle the react and electron part of it, the gradient brush is only related to the backend. If there are any changes to the backend, I just make changes to the library gpujs-real-renderer on npm and then just update it here. So to add a gradient brush, this repo is of no use.

[harshkhandeparkar]

Btw, if you want to discuss this further, you can message me on gitter or discord if you use it. (preferably discord)

[vivek-30]

Do you understand how gpu.js works? 😅 You cannot use the canvas API directly for this. Refer to these files: https://github.com/HarshKhandeparkar/gpujs-real-renderer/blob/master/src/renderers/RealDrawBoard/tools/tools.ts https://github.com/HarshKhandeparkar/gpujs-real-renderer/blob/master/src/renderers/RealDrawBoard/tools/brush.ts and https://github.com/HarshKhandeparkar/gpujs-real-renderer/blob/b6332290954861d7f36afe6640a071d52659686b/src/renderers/RealDrawBoard/RealDrawBoard.ts#L102-L169

You will have to add another tool similar to these :)

Honestly speaking i don't know anything about this 😂 but will try to understand it.for now please give me some time to digest this gigantic code😅

[vivek-30]

Btw, if you want to discuss this further, you can message me on gitter or discord if you use it. (preferably discord)

Sure if i will need some help i will ask you through discord

[harshkhandeparkar]

I can make a server and invite you, one minute.

[vivek-30]

Thanku so much for your precious time and help ❤️. Means a lot to me😊

[harshkhandeparkar]

https://discord.gg/6GBeWRrg

[vivek-30]

https://discord.gg/6GBeWRrg

sorry for the late response i got busy with some other stuff . oops it seems that this link has been expired. could you pease share a new one.

[harshkhandeparkar]

https://discord.gg/6GBeWRrg

sorry for the late response i got busy with some other stuff . oops it seems that this link has been expired. could you pease share a new one.

@vivek-30 A new one is in the readme :) click on the badge.

[harshkhandeparkar]

Thanku so much for your precious time and help ❤️. Means a lot to me😊

Thank you!

[vivek-30]

@HarshKhandeparkar still unable to join 😞

[harshkhandeparkar]

Looks like someone deleted the link 😓

https://discord.gg/fxrT2UW8 try this one.