I dont want this line! How to remove it?

Processing Coding Questions
1

I need to draw an electrical circuit using processing… and I am almost done. I need to draw them using some “vertex” codes. But there is a diagonally line that appeared and I can’t remove it. The lines are changing positions after changing the order of the codes…maybe this could help you to find a solution!

void setup ()
{
  size (900, 600);
}

void draw ()
{
  background (255);
stroke (0);
strokeWeight (3);
fill (255);
beginShape();
vertex (400, 450); //left short line
vertex (225, 450); //left short line

vertex (225, 150);// upper line
vertex (675, 150);//upper line

vertex (675, 450); //right short line
vertex (500, 450); //right short line

vertex (225, 300); //middle line
vertex (675, 300); //middle line

endShape ();
1 Like
2

The best way to debug something like this is to comment out all the lines and then slowly add them all back in.

So you start out with something like this:

void draw () {
  background (255);
  stroke (0);
  strokeWeight (3);
  fill (255);
  beginShape();
  
  vertex (400, 450); // left short line
  vertex (225, 450); // left short line

  //vertex (225, 150);// upper line
  //vertex (675, 150);// upper line

  //vertex (675, 450); // right short line
  //vertex (500, 450); // right short line

  //vertex (225, 300); // middle line
  //vertex (675, 300); // middle line

  endShape();
}

You run the program and check if the lines are the way you want them to be. If they are, uncomment the next line and check again. Once you get to the line which causes this behaviour, you can begin thinking about what you actually want to do, and how to do it.

This is also the reason you should never write all your code in one go, but in small pieces which you can check at a time.

Now, using the method I described above, I found that the first six vertexes are fine, and the seventh one is causing you problems:

beginShape();
  
vertex (400, 450); // left short line
vertex (225, 450); // left short line

vertex (225, 150); // upper line
vertex (675, 150); // upper line

vertex (675, 450); // right short line
vertex (500, 450); // right short line

//vertex (225, 300); // <-- this one
//vertex (675, 300); // middle line

endShape();

Now it is your job to figure out what you want to do and how to do it. :wink:

1 Like
3

When using beginShape() and endShape(); you cant create separate lines. For example if I would say

beginShape();
vertex(0, 0);
vertex(100, 0);

vertex(0, 100);
vertex(100, 100);

I would get an hourglass shape not two perpendicular lines.

So either make each line a separate shape or do something like this:

To remove diagonal line:

  beginShape();
  vertex(400, 450);
  vertex(225, 450);

  vertex(225, 300);
  vertex(675, 300);

  vertex(675, 150);
  vertex(225, 150);

  vertex(225, 300);
  vertex(675, 300);

  vertex(675, 450);
  vertex(500, 450);


  endShape();

To turn diagonal line into straight one:

  beginShape();

  vertex(225, 300); //top of left line
  vertex(225, 150); //top of left line

  vertex(675, 150); //top line

  vertex(675, 300); //top of right line

  vertex(225, 300); //middle line

  vertex(225, 450); //botom left line
  
  vertex(675, 450); //bottom line
  
  vertex(675, 300); //bottom right line

  endShape();

I can’t tell you exactly how to do it because I don’t know exactly what you want.

1 Like
4

Hello,

Look here:
https://processing.org/reference/beginShape_.html

I added this to your code:
beginShape(LINES);

And it draws this:

image
image902×627 2.62 KB

Resources:
https://processing.org/
https://processing.org/tutorials/pshape/

:)

1 Like