Is there a way to edit vectors/strokes with code
I’m using Wick Editor 1.19.4
Yes, look info about paper js
1 Like
what type of code does Wick Editor use?
Yes, that’s possible.
A few months ago, I was actually working on a project where I messed with this type of stuff for weeks.
I’ll try to explain everything below:
So to begin with, for clips you’d use the clips’ names to refer to them from the code.
However, since a vector object isn’t a clip, you’ll need to refer to it from the frame that it’s inside.
How to refer to a vector object
Every frame has an array called “_children” which stores everything inside that frame, including clips and vectors.
To refer to a frame, though, you’d need to refer back to the timeline, then the specific layer of the frame, then get to that frame next.
So to begin with, here’s how to refer to the project’s timeline:
project.timeline
You can replace “project” with the name of a clip to refer to that clip’s timeline instead of the project’s.
Next, to refer to a layer inside of the timeline, you can go through the timeline’s “layers” array:
// layer 0 (top layer) inside of timeline
project.timeline.layers[0]
Next, to refer to frame 0 inside of layer 0:
// frame 0 (first frame) inside layer 0 (top layer) inside of timeline
project.timeline.layers[0].frames[0]
And lastly, to refer to all the objects inside of that frame, you use the array: “_children”
The order of the array is in the same order of the objects in the outline, so _children[0] would refer to the top object (could be a vector or clip).
// object 0 (top object) inside frame 0 (first frame) inside layer 0 (top layer) inside of timeline
project.timeline.layers[0].frames[0]._children[0]
Next, draw a simple vector object inside of frame 0, in layer 0, of the project’s timeline. Let’s create a variable “pathObj” and set it to this object:
var pathObj = project.timeline.layers[0].frames[0]._children[0];
JSON array
Now, if you’ve ever tried downloading a wick file, changing the format to “.zip,” then taking a look inside, you’d notice that this is what the path object looks like in text form:
Notice in the image above, the “json” array includes the main properties of the object, such as segment points, fill/ stroke color, etc.
After creating the pathObj variable, you can access its json array by typing:
pathObj.json
In order to do this, you can assign the json array of the path object to new values:
var pathObj = project.timeline.layers[0].frames[0]._children[0];
var A={
"applyMatrix": true,
"segments": [ // Point segments
[0,0], // XY of first point
[project.width,0], // XY of second point
[mouseX,mouseY] // XY of third point
], // End of segment points array
"closed": true, // If true, connects last point to first point
"fillColor": "rgba(252, 186, 3, 0.5)", // 252 red, 186 green, 3 blue, 0.5 opacity
"strokeColor": "transparent", // Transparent
"strokeCap": "round"
};
pathObj.json=["Path",A];
(The // comments are only here to guide you, feel free to remove them if they get in the way)
And this is how to edit vectors/ strokes with code.
Feel free to test it out.
test.wick (1.6 KB)
3 Likes
I have a few question
Is there a way to change the thickness of the strokes?
How do I make the strokes not transparent: 
What if I want to edit something that is already there?
You can change “transparent” to another color.
You can change it to something as simple as “red” or “green,” or to a hex or an rgba value.
(Don’t forget to add in the “quotation marks” if you change it)
Same for the fill color.
You can also write
pathObj.strokeColor = "red"
To change only the stroke color without changing the JSON value of pathObj.
You can do the same with the fill color, but I’m not sure if you can with the segment points.
2 Likes
Can I change thickness of the strokes too?
Do u also know how to make the segments round off?
is it okay if I ask alot of questions. thers’s alot I want to know
Remember, wick uses paper js
See Paths section.