How do i draw things on the fly using paper.js in wick? also ai is stupid

[monocle_enjoyer]

What Wick Editor Version are you using?
candlestick 1.0.1

Describe the Problem
i want to draw a wick clip on the fly to correspond to a matter.js physics object polygon. i could not figure out a way to do this, so i asked an ai chatbot, who told me to use matter’s built in vertices array, an array of a the coordinates of the vertices of a physics object, and to draw a clip to it using `

   if (window.polygonBody) {
let verts = window.polygonBody.vertices;
let g = this.pixiGraphics;
// 1. Wipe the shape from the previous frame
g.clear();
// 2. Set colors (Pixi uses 0xHex colors)
g.beginFill(0xFF0000, 0.5);  // Red with 50% opacity
g.lineStyle(2, 0x000000, 1); // 2px Black outline with 100% opacity
// 3. Connect the dots
g.moveTo(verts[0].x, verts[0].y);
for (let i = 1; i < verts.length; i++) {
    g.lineTo(verts[i].x, verts[i].y);
}
// 4. Close the shape back to the starting point
g.closePath();
g.endFill();

}

in an update script and

    // Create a native Pixi.js graphics object
this.pixiGraphics = new window.PIXI.Graphics();
// Attach it directly to this clip's visual container
this.view.addChild(this.pixiGraphics);

// Lock this clip to the top-left corner so local coordinates = global coordinates
this.x = 0;
this.y = 0;

in a default script.
What have you tried so far?
it gave me other scripts but they all crashed, this one included.

[noobfield]

So, the first thing is that Wick path creation is possible, and the second thing is Wick doesn’t use Pixi.js. It uses Paper.js, which is more OOP.

Typically, you would want to package your newly create paper path to Wick, so it can correctly handle its showing:

const paper = this.view.paper; // get a copy of the PaperJS API

// Create a red five-point star
const paperPath = new paper.Path.Star({
    center: [project.width / 2, project.height / 2],
    points: 5,
    radius1: 25,
    radius2: 50,
    fillColor: 'red'
});

// Wrap that star in a Wick Path
const wickPath = new Wick.Path({
    path: paperPath
});

// Add it to the active frame.
project.activeFrame.addPath(wickPath);

onEvent('update', function () {
    if(!isMouseDown()) return;
    wickPath.x = mouseX;
    wickPath.y = mouseY;
});

Now, to make a polygon path:

const paper = this.view.paper; // get a copy of the PaperJS API

const paperPath = new paper.Path(),
      matterBody = []; // placeholder, replace with what you want

matterBody.forEach(p => paperPath.add(p)); // You can give: [x: int, y: int], {x: int, y: int}, or `paper.Point`.

// Wrap that path in a Wick Path
const wickPath = new Wick.Path({
    path: paperPath
});

// Add it to the active frame.
project.activeFrame.addPath(wickPath);

/*onEvent('update', function () {
    if(!isMouseDown()) return;
    wickPath.x = mouseX;
    wickPath.y = mouseY;
});*/

[monocle_enjoyer]

thanks a lot! AI can never replace actual people.

[monocle_enjoyer]

however, this is really slow. what was that “worker” thing you talked about?

[monocle_enjoyer]

oop, my bad, i put it in an update script instead of default… i’m still interested in the worker tho

[noobfield]

They just run JS on different threads.

// worker.js
function onmessage(data) {
  postMessage({result: +data.x - +data.y});
}
// index.js
const worker = new Worker('./worker.js');
let result, data = {x: 10, y: 30};

worker.onmessage = function(data) {
  result = data.result;
}

worker.postMessage(data);

[monocle_enjoyer]

i was twiddling around with that script you gave me, for the paperjs polygon creation, but when i made a triangle, it doesn’t match up with the physics body. otherwise, it’s fine, but there’s some areas around it where the object pokes out, as can be seen in this horrifically optimized gif. please advise. car physics.wick (407.8 KB)

[noobfield]

Well, I believe this is because the Paper and Matter worlds are not using the same transforms. You might have to find why this happens.

[monocle_enjoyer]

OMG I FIGURED IT OUT PAPER MATTERJS MAKES IT TRIANGLES SIDEWAYS WHO DOES THAT
red triangle is paper triangle, outline is where i just make paper draw lines between the body’s body.vertices array of vector objects

[monocle_enjoyer]

once again, i apologize for the horrible gifs, they were like 40mb at the start… also ignore the {object Object} chain
heres the code:

const polygonBody = window.polygonBody;
const paper = this.view.paper; // get a copy of the PaperJS API


const vectorPoints = polygonBody.vertices;

const paperPath = new paper.Path(vectorPoints);
paperPath.strokeColor = 'black';
paperPath.fillColor = 'blue';
paperPath.closed = true; 

const wickPath = new Wick.Path({
path: paperPath
});
// Add it to the active frame.
project.activeFrame.addPath(wickPath);
onEvent('update', function () {
 wickPath.x = polygonBody.position.x;   
 wickPath.y = polygonBody.position.y; 
 
});

[monocle_enjoyer]

wait, hold on, how do i make it rotate? i tried wickPath.rotation = polygonBody.angle * (Math.PI / 180), but that doesnt work. i could put it in the update script, but that’d create a new object every tick and slow down everything.

[noobfield]

Wait, are you using Paper constructor paths for matter polygon objects?

[monocle_enjoyer]

i guess? is that bad? i decided to do that because it’s much easier to customize, as in i can make any wonky shape and it’ll match exactly.

[noobfield]

No, I meant like new paper.Path.Circle().

[monocle_enjoyer]

no. im drawing a shape between a matter object’s vertices, of which they have a convenient array that i can just plug into paper. however, wickPath.x and y = whatever doesn’t get me its rotation. and wickPath.rotationdoesn’t work either. is there a way to change the paper path vertices without making a new shape every tick?

[monocle_enjoyer]

@noobfield, i’m actually stumped. i can’t get the wickPath to rotate at all. How do i do it? can i edit the vertices of a paper object in an update script?

[StickmanRed]

Wick.Paths are unable to store rotation, maybe try adding paperPath.rotate(polygonBody.angle); after the paper.Path.closed = true; line? (paperPath.rotate takes angle in degrees)

[noobfield]

As already said by @StickmanRed , Wick Path objects are unable to store rotation, as they don’t contain proper Wick.Transform objects. Setting the X and Y wraps Paper, so you should do rotation by Paper too.

[monocle_enjoyer]

ok, cool! however, i already tried that. i went to the paperjs docs, found path.rotate(), and tried it out. but that didnt work. basically, my code works fine if the matter body is static (doesn’t move). but if i make it dynamic, the paper path follows it around, but doesnt rotate with it. i’d need a way to rotate it every tick, or to change its segments every tick.

[noobfield]

You can use the .points array to change the points. You can use: Point objects (new Point(x, y)), arrays of two ([x, y]), or an object ({x: x, y: y}}).