Random radial gradient

Help
#1

Hi

I am new to Wick Editor and JavaScript.

From this post: https://forum.wickeditor.com/t/random-colors-shapes-in-js-in-wick/3960

I am trying to create a random radial gradient. However, it is not working.
This is what I have so far: radialGradient.wick (2.8 KB)

I also had a few questions in the post I pasted.
I would appreciate any suggestions.

#2

I updated the code but still no luck. :four_leaf_clover:

radialGradientUpdate.wick (2.9 KB)

On mouseclick for my button : I did this code:
newColor = function (){
col=’#’+Math.floor(Math.random()*16777215).toString(16);
return col;
};

/* x0, y0: starting circle of gradient
r0: radius of start circle
x1, y1: endign circle of gradient
r2: radius of ending circle */

var gradientCol = createRadialGradient(100, 100, 50, 200, 200, 100);
gradientCol.addColorStop (0, newColor());"
gradientCol.addColorStop (1, “white”);

colorBall.activeFrame._children[0].fillColor=gradientCol;

I get an error message: Unexpected token ILLEGAL on line 11 in script “mouseclick”
I am not sure what this means.

#3

It looks like you put an " at the end of the line by accident

But after you fix that you get an error about createRadialGradient not being defined.
From my understnading you are trying to use this function to create a gradient via HTML which I do not know much about. If you want to add a gradient using the createRadialGradient it looks like you need to do it from some kind of canvas context like how the link above shows.

Another way you could do this is using paper.js (Wick’s renderer)
To access the paper.js object you can use code like the below

CLIP_NAME.activeFrame._children[0].view.item

You can set the fillcolor to a straight color with something like this

CLIP_NAME.activeFrame._children[0].view.item.fillColor = "red";

You can also use an array representing RGB values like [0.8,0.4,0.2] which is the same as something like #cc6638 which also should work (not sure if it was with or without the #)

To make a gradient (radial) you set it to an object like this

CLIP_NAME.activeFrame._children[0].view.item.fillColor = {
    gradient: {
        stops: [ ["blue", 0], ["green",0.3], ["red", 1] ],
        radial: true
    },
    origin: [0,0],
    destination: [50,0]
};

The stops contains the different colors of the gradient with a number (optional) that specifies where along the gradient it should be (from 0 to 1)
origin and destination are where the gradient starts and stops from the position of the path in the clip

Something like this would allow for a random colored gradient

CLIP_NAME.activeFrame._children[0].view.item.fillColor = {
    gradient: {
        stops: [ [[Math.random(),Math.random(),Math.random()]], [[Math.random(),Math.random(),Math.random()]] ],
        radial: true
    },
    origin: [0,0],
    destination: [50,0]
};
#4

Hi SomeoneElse,

Thank you for the tons of information. I really appreciate it. I will try it. I asked this on the other post, but no one replied back.

mycircle.activeFrame._children[0].fillColor=newColor();

Is the following correct?
mycircle = clipName
activeFrame = class that was created
fillColor = action

I think the brackets from .children[0]. is an array. I think the children are the elements that comes from the parent class: activeFrame. Since it is 0, it means it is the first-child. Is that correct?

#5

The line mycircle.activeFrame._children[0].fillColor=newColor();

Starts from the clip named myCircle

activeFrame is the frame that the clip is currently at (since it might go through a series of frame for something like an animation)

._children[0] specifies the first child of the frame that is the activeFrame (I think if you open the outliner ._children[0] is the lowest element and then higher elements are counted up from the bottom)
The value in ._children[0] is a Wick.Path class which holds info about what it should be rendered as, its position along with other things

.fillColor references the fill color of the Wick.Path (which is connected to the paper object fillColor), although for the gradient I’m not sure whether it requires the view.item which is the path to the paper.Path class since sometime Wick has it so that you don’t need to add that other times you have to directly access the paper object

#6

On your code: .view.item:
I don’t see that item under view on this link: http://paperjs.org/reference/view/

On the radial link: http://paperjs.org/reference/gradient/#radial, it shows view.center.

How did you find view.item? Is there a link?

#7

view.item is from a Wick.Path
myPath.view.item is how you can access the paper.Path contained inside of the Wick.Path
The reason why there is no view.item in the paper.js reference is because that code is directly run with paper.js in a way, but in Wick, Wick controls how paper.js works a bit more.

#8

I really appreciate you taking the time to explain this to me.

Is there a tutorial link on view.item from Wick.Path?

#9

No not really, I mostly have looked through the project with console.log(project) to see the different paths and the information that I can here on the forums.