I am also trying to display each angle next to each point of inflexion. In the case of the elbow, I am trying to move the text with the elbow position along with the inflexion point. That works, but I cant find a method to keep the writing horisontal. It rotates with the first segment angle...

here is my function

thanks

void ArmDepiction()

{ ///////////////////////////Base orientation

fill(201, 0, 211); // magenta //text("Y:", LS, spaceDown*3 ); text( (nf(degrees(BaseAngRad), 0, 1)), 630, 1050); //text( "0", 85, 0);

strokeWeight(10); stroke(238,242, 0); noFill ();

// Form: arc(x, y, width, height, start, stop, type); arc(550, 1000, 100, 100, (PI/2), (BaseAngRad+(PI/2)), PIE); //stroke(#71B28F); //arc(100, 1000, 175, 175, 0, 2*PI, 0);

//drawArrow(100,160,50,130);

///////////////////////Arm Depiction strokeWeight(40); stroke(255, 160); strokeCap(ROUND);

float x, y;

x = 550; y = 800;

pushMatrix(); strokeWeight(40); segment(x, y, PI+ShoAngRad); strokeWeight(30); segment1(segLength, 0, PI+ElbowAngRad); // 120 is the starting point segment3(segLength, 0, (2*PI)+ElbowAngRad-0.58); // 100 is the segment length popMatrix();

translate(x, y); strokeWeight(10); strokeJoin(ROUND); beginShape(); vertex(-40, 0);

vertex(-65, segLength); vertex(65, segLength);

vertex(40, 0); endShape(CLOSE);

DisplayElAngle(x, y);

}

void segment(float x, float y, float a) { translate(x, y); fill(201, 0, 211); // magenta //text("Y:", LS, spaceDown*3 ); text( (nf(degrees(ShoAngRad), 0, 1)), 30, 0); //text( "0", 85, 0); noFill ();

rotate(a); line(0, 0, segLength, 0); // 100 is the segment length

}

void DisplayElAngle(float x, float y) { translate(x, y); rotate(2PI); fill(201, 0, 211); // magenta //text("Y:", LS, spaceDown3 ); text( (nf(degrees(ElbowAngRad), 0, 1)), 20, -10); noFill (); //

} void segment1(float x, float y, float a) { translate(x, y); fill(201, 0, 211); // magenta //text("Y:", LS, spaceDown*3 ); text( (nf(degrees(ElbowAngRad), 0, 1)), 20, -10); noFill (); rotate(a); line(0, 0, segLength, 0); // 100 is the segment length // rotate(a);

}

void segment3(float x, float y, float a) { translate(x, y); rotate(a); line(0, 0, (segLength/5), 0); // 100 is the segment length

}

When I press the button again though, the code draws a default stroke weight over the thick pink stoke, without 'erasing' this thick pink stroke, whereas I would like the line to simply go back to: 'white' and 'default thickness of 1'.

Why doesn't the previous colored strokeWeight erase after the mousePressed-event? I'm very thankful for any advice!

Here's the code:

    boolean button = false; 
    int x = 50;
    int y = 50;
    int w = 100;
    int h = 75;

    void setup() {
      size(500,500);

    }

    void draw() {
      if (button) {
        stroke(#E55AD5);        
        strokeWeight(4);
        strokeJoin(ROUND);

    } else {
       stroke(255);
       strokeWeight(1); 

      }

      noFill();               
      rect(x,y,w,h);
    }

    void mousePressed() {
      if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) {
        button = !button;
      }
    }

https://www.openprocessing.org/sketch/426460

Is there any way to stop this from happening? I'm not sure if I'm doing something wrong in my calculations or if using the rect() and triangle() objects are sufficient. Would making my own vector-based shape be a way of rectifying this?

Here is how the text file looks like:
320.859 283.133
313.715 287.457
310.332 295.332
302.996 300.285
296.805 307.137
292.359 297.824
286.586 304.398
.........(with 700 more lines)

And my code:

void setup() {
  size(400, 400);
  background(0);
  stroke(255);
  strokeJoin(ROUND);
  strokeWeight(2);
  String[] dots = loadStrings("design.txt");

  beginShape();
  for (int i = 0; i < dots.length; i+= 1) {
    vertex(float(dots[i]), float(dots[i]));
  }
  endShape(CLOSE);
}

I was surprised by a few things:

When I try to draw a line using a series of point calls, it looks very different than when I use line and neither one always does what I expected. (For example, drawing a simple line segment will look one way in isolation and then the entire line will look different if its drawn so that one of it's ends is adjacent to a different line.)

Can anyone point me to a source where I can learn what's happening on the pixel level with these functions.

Here is my code: void setup () {
size (200,200); }

void draw () { fill(250,249,83); stroke(254,247,244); triangle(100,50,40,120,160,120); stroke(206,172,11,255); line(47,113,153,113); line(54,106,147,106); line(60,99,140,99); line(70,120,70,113); line(145,120,145,113); line(67,113,67,106); line(120,113,120,106); line(63,106,63,99); line(130,106,130,99); line(100,106,100,99); fill(255); stroke(0); ellipse(100,80,35,25); fill(0); ellipse(100,80,5,15); strokeWeight(5); strokeCap(SQUARE); strokeJoin(ROUND); line(65,122,65,150); strokeCap(ROUND); line(65,150,50,150); strokeCap(SQUARE); line(135,122,135,150); strokeCap(ROUND); line(135,150,150,150); strokeCap(SQUARE); line(145,102,180,90); line(55,102,29,90); rect(80,35,40,10); rect(95,10,10,30); triangle(80,101,80,111,100,107); triangle(100,107,120,101,120,111);

}

    PImage img;                    // Declare variable "img" of type PImage

    float xPosition = 100;                    
    float xSpeed = 2.9;             
    float object = 30;
    float top, bottom, left, right; 

    void setup() {
      fullScreen();                          // use fullScreen() instead of size()
      background( 0 );
      img = loadImage("http:" + "//eskipaper.com/images/beach-background-4.jpg");     // Load the image into the program
      imageMode( CENTER );                   // position the center, not upper right, of the image
      colorMode(HSB, 100);                        // hue, sat, brightness color system
    }

    void draw() {

      background( 0 );
      tint(0, 0, 360, 255);                             // Display full opacity no color tint
      image(img, width/2, height/2);                    // Display at full opacity
      xPosition = xPosition + xSpeed;

        if ( xPosition < left ) {             
        xSpeed = xSpeed * -1;
      } else if ( xPosition > right ) {
        xSpeed = xSpeed * -1;
      }

      //Turtle  
      noFill();
      stroke(33, 86, 32);
      strokeWeight(8);
      strokeCap(ROUND);
      strokeJoin(ROUND);
      line(300, 800, 350, 770 );                          //Create right top fin
      noFill();
      stroke(33, 86, 32);
      strokeWeight(8);
      strokeCap(ROUND);
      strokeJoin(ROUND);
      line(300, 800, 350, 830 );                          //Create right bottom fin
      noFill();
      stroke(33, 86, 32);
      strokeWeight(8);
      strokeCap(ROUND);
      strokeJoin(ROUND);
      line(300, 800, 250, 770 );                          //Create left top fin
      noFill();
      stroke(33, 86, 32);
      strokeWeight(8);
      strokeCap(ROUND);
      strokeJoin(ROUND);
      line(300, 800, 250, 830 );                          //Create left bottom fin
      fill(10, 86, 32);
      noStroke();
      ellipse(300, 800, 80, 60);                          //Create brown shell
      fill(33, 86, 32);
      noStroke();
      ellipse(350, 800, 40, 30);                          //Create head
      ellipseMode(RADIUS);
      noStroke();
      fill(100);
      ellipse(350, 807, 3, 3);
      ellipseMode(CENTER);
      stroke(0);
      strokeWeight(2);
      fill(100);
      ellipse(350, 807, 2, 2);                              //Create bottom eye
      ellipseMode(RADIUS);
      noStroke();
      fill(100);                                 
      ellipse(350, 793, 3, 3);
      ellipseMode(CENTER);  
      stroke(0);
      strokeWeight(2);
      fill(100);
      ellipse(350, 793, 2, 2);                              //Create top eye

     //Boat 1
     noStroke();
     fill(70, 50, 80);
     bezier(300, 630, 380, 675, 410, 675, 490, 630);        //Hull
     stroke(0);
     strokeWeight(2);
     fill(100);
     ellipse(370, 645, 8, 8);                               //Create left window
     stroke(0);
     strokeWeight(2);
     fill(100);
     ellipse(395, 645, 8, 8);                               //Create center window
     stroke(0);
     strokeWeight(2);
     fill(100);
     ellipse(420, 645, 8, 8);                               //Create right window
     stroke(0);
     strokeWeight(6);
     line(395, 630, 395, 500);                              //Pole
     noStroke();
     fill(100);
     triangle(400, 540, 400, 500, 455, 520);                //Flag

     //Crab
      stroke(0);
      strokeWeight(3);
      strokeCap(ROUND);
      strokeJoin(ROUND);
      line(460, 800, 450, 830 );                          //Create outter left leg
      stroke(0);
      strokeWeight(3);
      strokeCap(ROUND);
      strokeJoin(ROUND);
      line(470, 800, 460, 830 );                          //Create middle left leg
      stroke(0);
      strokeWeight(3);
      strokeCap(ROUND);
      strokeJoin(ROUND);
      line(480, 800, 470, 830 );                          //Create inner left  leg
      stroke(0);
      strokeWeight(3);
      strokeCap(ROUND);
      strokeJoin(ROUND);
      line(540, 800, 550, 830 );                          //Create outter right  leg
      stroke(0);
      strokeWeight(3);
      strokeCap(ROUND);
      strokeJoin(ROUND);
      line(530, 800, 540, 830 );                          //Create middle right leg
      stroke(0);
      strokeWeight(3);
      strokeCap(ROUND);
      strokeJoin(ROUND);
      line(520, 800, 530, 830 );                          //Create inner right  leg
      fill(0, 100 , 100);
      noStroke();
      ellipse(500, 800, 100, 60);                          //Create red body
      noFill();
      stroke(359, 100, 0);
      strokeWeight(6);
      strokeCap(SQUARE);
      strokeJoin(ROUND);
      bezier(470, 800,  440, 785,  440, 770, 470, 755);      //Create left arm
      fill(0, 100 , 100);
      noStroke();
      ellipse(470, 755, 20, 20);                               //Create left claw
      noFill();
      stroke(359, 100, 0);
      strokeWeight(6);
      strokeCap(SQUARE);
      strokeJoin(ROUND);
      bezier(530, 800,  560, 785,  560, 770, 530, 755);      //Create right arm
      fill(0, 100 , 100);
      noStroke();
      ellipse(530, 755, 20, 20);                               //Create left claw
      ellipseMode(RADIUS);
      noStroke();
      fill(100);
      ellipse(480, 800, 3, 3);
      ellipseMode(CENTER);
      stroke(0);
      strokeWeight(2);
      fill(100);
      ellipse(480, 800, 1, 1);                              //Create left eye
      ellipseMode(RADIUS);
      noStroke();
      fill(100);                                 
      ellipse(520, 800, 3, 3);
      ellipseMode(CENTER); 
      stroke(0);
      fill(100);
      ellipse(520, 800, 1, 1);                              //Create right eye

     //Boat 2
     noStroke();
     fill(90, 30, 30);
     bezier(800, 630, 880, 675, 910, 675, 990, 630);        //Hull
     stroke(0);
     strokeWeight(2);
     fill(100);
     ellipse(870, 645, 8, 8);                               //Create left window
     stroke(0);
     strokeWeight(2);
     fill(100);
     ellipse(895, 645, 8, 8);                               //Create center window
     stroke(0);
     strokeWeight(2);
     fill(100);
     ellipse(920, 645, 8, 8);                               //Create right window
     stroke(0);
     strokeWeight(6);
     line(895, 630, 895, 500);                              //Pole
     noStroke();
     fill(100);
     triangle(900, 540, 900, 500, 955, 520);                //Flag

     //Seagull
     noFill();
     strokeCap(ROUND);
     stroke(0);
     strokeWeight(8);
     line(300, 90, 280, 80);                            //Create top wing
     noStroke();
     fill(100);
     ellipse(300, 100, 50, 30);                            //Create body
     noStroke();
     fill(100);
     ellipse(330, 100, 25, 25);                            //Create head
     noFill();
     strokeCap(ROUND);
     stroke(10, 80, 100);
     line(338, 103, 355, 103);                             //Create beak
     noFill();
     strokeCap(ROUND);
     stroke(0);
     strokeWeight(8);
     line(300, 110, 280, 120);                            //Create bottom wing
     stroke(0);
     strokeWeight(2);
     fill(100);
     ellipse(330, 100, 1, 1);                              //Create eye

     //Dog
     fill(10, 86, 50);
     noStroke();
     ellipse(1000, 800, 175, 225);                          //Create brown head
     fill(0);
     stroke(0);
     strokeWeight(8);
     strokeJoin(ROUND);
     triangle(1000, 875, 970, 835, 1030, 835);              //Create nose
     ellipseMode(RADIUS);
     noStroke();
     fill(100);
     ellipse(975, 775, 15, 20);
     ellipseMode(CENTER);
     stroke(0);
     strokeWeight(2);
     fill(0);
     ellipse(975, 775, 10, 20);                              //Create left eye
     ellipseMode(RADIUS);
     noStroke();
     fill(100);
     ellipse(1025, 775, 15, 20);
     ellipseMode(CENTER);
     stroke(0);
     strokeWeight(2);
     fill(0);
     ellipse(1025, 775, 10, 20);                              //Create right eye
     fill(10, 86, 70);
     stroke(10, 86, 70);
     strokeWeight(8);
     strokeJoin(ROUND);
     triangle(1040, 695, 1092, 830, 1100, 768);              //Create right ear
     fill(10, 86, 70);
     stroke(10, 86, 70);
     strokeWeight(8);
     strokeJoin(ROUND);
     triangle(960, 695, 908, 830, 900, 768);              //Create left ear
    }

Lets use the popular star shape as an example code. Any irregular shape is of interest.

How can I use stroke() so that the stroke is only applied to the inner edge? Or only the outer edge? See picture.

This is a popular tool when using vectors in Illustrator or Photoshop so I thought I might have a chance at communicating this and illustrating the desired outcome.

Thanks for any tips!

// How to make it so stroke is only drawn on one side of edge?

void draw() {
  background(51);
  translate(mouseX, mouseY);
  fill(102);
  stroke(255);
  strokeWeight(2);
  beginShape();
  vertex(0, -50);
  vertex(14, -20);
  vertex(47, -15);
  vertex(23, 7);
  vertex(29, 40);
  vertex(0, 25);
  vertex(-29, 40);
  vertex(-23, 7);
  vertex(-47, -15);
  vertex(-14, -20);
  endShape(CLOSE);
}

Photo Link

In the app that I am writing, I draw numerous curves, each composed of numerous lines. When the number of lines reahes a certain level, the sketch starts lagging terribly. Hence, I decided to swith the renderer and started using P3D. Problem solved - no lags at all. However, new problem:

Lines in P3D only appear in rectangular mode. This means that, at places where the curve turns a lot, which is the case almost evrywhere, you can see holes between the lines, revealing that the curve is actually a set of lines, not a curve on its own, and making the sketch look considerably ugly.

I have trid using beginShape(), vertex() and endShape(), whith no success. The strokeJoin() and strokeCap(), according to the documentation and, as evidenced from this example, do not work with P3D.

Can you think of a way to get around this problem? It seems pretty easy in nature but I cannot solve it and it destroys my entire sketch.

Thanks in advance!