Is it possible to trim a curveVertex() shape?

p5.js Coding Questions
1

Hi,

I’m drawing a curveVertex shape by adding a point(x,y) at different intervals of time, this points are stored in an array, the array is use to draw the curve.

When my object goes to the edge of the screen, I render It at the opposite side of the screen. This cause the curveVertex to draw a straight line from one side of the screen to the other.

So I wander if it is possible to trim/cut the curveVertex to avoid the line that goes across the screen? Hope that makes sense.

Any helps will be much appreciated.

2

i think it does not matter if it is a vertex drawing or just a circle,
to do that what you want like

  • leave right side pix by pix
  • move in from left side ( like mirror )

you need for that short time 2 objects.
( like when move right: left object.x = right object.x - width )

3

Hi kll,

Thank you for your time, but you didn’t understood my problem. The issue is not moving the object it self, the problem is that the curveVertex draws a line across the screen the the object travels to the opposite side, hope that makes sense.

Cheers
rS

4

Hi! You don’t need to move some vertices. You need to draw the whole shape twice, one of them displaced to the other side of the screen.

An example

function setup() {
  createCanvas(600, 600);
}
function draw() {
  background(200, 50, 100);

  // the original
  ellipse(mouseX, mouseY, 100, 100);

  // the clone
  if(mouseX > width/2) {
    translate(-width, 0);
  } else {
    translate(width, 0);
  }
  ellipse(mouseX, mouseY, 100, 100);
}
5

I think the issue here is that it’s a series of curveVertex in a long row. Hence a line from right side to left side.

To avoid this either just don’t go over the edge of the screen but just bounce

OR close the curve on the right and start a new one on the left

6

hm.
i think only if you try to do the mapping for the again let’s say x >=width
to x > = 0 inside the one object.

that was the reason why i try to give you the idea with the 2 objects.

7

@Chrisir, yes I think those are my only options as I can’t see the availability of removing a section of the curveVertex

1 Like
8

Are you trying to create a wrap-around object behavior, like Pac Man?

If so, @hamoid has put you on a correct path to a solution. You can define a PShape, detect if your object is overlapping a border, then draw it in two places if that is so.

9

Unfortunately PShape is not implemented in p5js as far as I know

10

As an alternative you can wrap the commands in a function and call it twice.