How to draw shapes with code

[HerbertTheBird]

i need to find out how to draw stuff with code

[Hamzah_Alani]

This might help:

Making a drawing app with WICK!

Here’s a Wick project that contains a clip in the asset library. This clip has functions that will help you draw any type of shape you want by selecting the pivot points and adjusting the color. Here’s the file: My Project4-11-2021_13-32-19.wick (3.3 KB) When you open the file, click the “DrawEngine” asset, and click “add to canvas” [image] You’ll find different functions that you can use from anywhere in your project, here’s how each works:

DrawEngine.Adjust(A_,RGB,show)

This function adjus…

That tutorial is quiet old though, so if you have any questions do let me know

[SomeoneElse]

This is slightly advanced and you would want to know a bit on how to use paper.js to use this well, but this is the basics on how I do this.

The best way I have found is to use addChild like the code shown below

let obj = new paper.Path.Circle([360,240],10);
obj.fillColor = "red";

let wp = new Wick.Path({path:obj,project:project});
project.activeFrame.addChild(wp);

You start by making your paper.js path and then create a Wick.Path with it.

The paper.js path is what your shape will start as when its added, but you can change it later once its added. This is the paper.js path reference which shows how you can create your own shapes/paths.

Then you create the Wick.Path with code like this

let wp = new Wick.Path({path:PATH_REF,project:project});

PATH_REF is replaced by the paper.js path object

Then you can add the Wick.Path as a child of a frame for it to be on the screen. project.activeFrame.addChild(wp); just adds the Wick.Path to the current frame.

This isn’t something I can explain very well, but if you want to use this definitely take a look at the paper.js reference to help.

[HerbertTheBird]

uhhh
i dont understand, can you explain it?
i want to color in the pipes in my game

[Hamzah_Alani]

@HerbertTheBird

i want to color in the pipes in my game

If you would like to change the color of a path object inside of a clip, here are some ways you can do this

Setting color

Refer to the path object and set the fill color to what you need

// Change project with the name of a clip if the path object is inside of a clip
// Change red with what color you want (you can also use rgba(#,#,#,#) )
// Change the 0 with the number of the path object you want
project.activeFrame._children[0].fillColor= 'red';

If you would like to change the color of all path objects inside of a clip, try this:

// Change Clipname with the name of the clip
// Change red with the color you want (rgba(#,#,#,#) also works)
ClipName.activeFrame._children.forEach(function(path){
try{
path.fillColor = 'red'
}catch(err){
// Object isn't classified a path
}
})

---

You can also change “fillColor” with “strokeColor” to change the color of the line that makes the shape instead.
You can also change it to “strokeWidth” and set it equal to a number in order to set the width of the line that makes the shape.

@HerbertTheBird

i dont understand, can you explain it?

The tutorial was originally made to help create a drawing app. If you’d like to draw shapes, I’ll simplify the code a bit to make it more understandable.

---

I’ll split it into steps:

Step 1 - Set

Create a new empty project.

In the default script of the frame, add this code:

Default code

window.Adjust=function(Obj,A_){
    var A={
      "applyMatrix": true,
      "segments": A_,
      "closed": true,
      "fillColor": Obj.fillColor,
      "strokeColor": Obj.strokeColor,
      "strokeCap": "round"
    };
    Obj.json=["Path",A];
};

Same code but with // comments

// Obj is going to be later on used to refer to the path object
// A_ is going to be used to refer to the segments we want to give to the object
window.Adjust=function(Obj , A_){

// Writing down the new data for the shape, you should really look through these, there are a lotta options!
    var A={
      "applyMatrix": true, 
      "segments": A_, 
      "closed": true, // set to false if you DON't want to connect the last and first points
      "fillColor": Obj.fillColor, // Change this with a color you want, "rgba(#,#,#,#)" also works
      "strokeColor": Obj.strokeColor, // Change this with a stroke color you want, "rgba(#,#,#,#)" also works
      "strokeCap": "round"
    };

// now we set the json data of the path object to the data we created
    Obj.json=["Path",A];
};

---

For the next step, pick an option:

Adjusting path that's inside of a clip

Create a new clip, and let’s call it “test”

In the update script, add this:

Adjust(
    test.activeFrame._children[0],
[
    [0,0], // x,y values of point 1
    [mouseX,mouseY], // x,y values of point 2
    [mouseX,0] // x,y values of point 3
   // You can add more points here
]);

Make sure to set both the x & y values of the clip to 0 (for this example)

Now run the code, and move your mouse around!

Expected results:
My Project3-20-2022_11-38-31.wick (3.1 KB)

See the “Setting color” section in this post for changing the color through code.

Step 3

---

Try adding another shape inside of the clip. That shape is now child 1, the other shape you had first is child 0. Change the “_children[0]” from the code to “_children[1]” to adjust that shape instead.

Add more shapes, and try changing the values to see how each path object is separate.

Now start exploring and adding more to the segments ! Every point is defined as a “[x,y]” and are put inside of an array of points for the object (that should explain the double “[]” ).

Now move the clip around and try adjusting the path.

extra

Since your path object is inside of a clip, please note that the x,y points inside of the clip are different than the x,y points outside of the clip. That’s because point (0,0) is the center inside of a clip, while in the project, point (0,0) is the top left corner.

When you use mouseX and mouseY, it refers to the mouseX and mouseY points of the project. If you instead use mouseX+test.x and mouseY+test.y (“test” being the name of the clip) you will be able to find the x and y values of the mouse inside of the clip. You can also replace mouseX and mouseY with the x and y positions of another clip or point.

If you now see how the code works, you should be easily able to implement into a project of your own!
If you find any difficulties in doing so, you could always ask for help on the forums!

---

Adjusting path that's in the project

Draw a shape in the project

In the update script (of the frame), add this:

Adjust(
    project.activeFrame._children[0],
[
    [0,0], // x,y values of point 1
    [mouseX,mouseY], // x,y values of point 2
    [mouseX,0] // x,y values of point 3
   // You can add more points here
]);

Now run the code, and move your mouse around!

Expected results:
My Project3-20-2022_11-37-04.wick (2.9 KB)

See the “Setting color” section in this post for changing the color through code.

Step 3

---

Try adding another shape inside of the project. That shape is now child 1, the other shape you had first is child 0. Change the “_children[0]” from the code to “_children[1]” to adjust that shape instead.

Add more shapes, and try changing the values to see how each path object is seperate.

Now start exploring and adding more to the segments ! Every point is defined as a “[x,y]” and are put inside of an array of points for the object (that should explain the double “[]” ).

If you now see how the code works, you should be easily able to implement into a project of your own!
If you find any difficulties in doing so, you could always ask for help on the forums!

---

(I didn’t take my time with checking through these 3 steps, so do let me know if anything seem’s not right or confusing. This will also be one of the posts that I’ll turn into a wiki, which means that anyone will be able to edit this post to make adjustments or add more info)