# How to change a line stroke after its been set?

**URL:** <https://discourse.processing.org/t/how-to-change-a-line-stroke-after-its-been-set/22386>\
**Category:** Coding Questions\
**Created:** [July 4, 2020, 5:02pm UTC](https://discourse.processing.org/t/how-to-change-a-line-stroke-after-its-been-set/22386 "2020-07-04T17:02:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![FireMe](https://avatars.discourse-cdn.com/v4/letter/f/bbe5ce/32.png) [@FireMe](https://discourse.processing.org/u/FireMe)\
**Post date:** [July 4, 2020, 5:02pm UTC](https://discourse.processing.org/t/how-to-change-a-line-stroke-after-its-been-set/22386/1 "2020-07-04T17:02:04Z")

</div>

Hi All,

Im completely new here and to code tbh, I followed this tutorial on a gift wrapping algorithm, which of course was fairly easy to follow, problems arise when i want to do something different to the tutorial. The code is bellow.

```auto
const points = [];
const hull = [];

let leftMost;
let currentVertex;
let index = 0;
let nextIndex = -1;
let nextVertex;

function setup() {
  createCanvas(500, 500);
  let buffer = 50;
  for (let i = 0; i < 7; i++) {
    points.push(createVector(random(buffer, width - buffer), random(buffer, height - buffer)));
  }

  points.sort((a, b) => a.x - b.x);
  leftMost = points[0];
  currentVertex = leftMost;
  hull.push(currentVertex);
  nextVertex = points[1];
  index = 2;
}

function draw() {
  background(0);

  stroke(255);
  strokeWeight(8);
  for (let p of points) {
    point(p.x, p.y);
  }

  stroke(3, 198, 252, 95);
  strokeWeight(2);
  fill(3, 198, 252, 60);
  beginShape();
  for (let p of hull) {
    vertex(p.x, p.y);
  }
  endShape(CLOSE);

  stroke(0, 255, 0);
  point(leftMost.x, leftMost.y);

  stroke(0, 0, 255);
  strokeWeight(4);
  point(currentVertex.x, currentVertex.y);

  stroke(255);
  strokeWeight(2);
  line(currentVertex.x, currentVertex.y, nextVertex.x, nextVertex.y);

  let checking = points[index];
  stroke(0, 255, 0);
  line(currentVertex.x, currentVertex.y, checking.x, checking.y);

  const a = p5.Vector.sub(nextVertex, currentVertex);
  const b = p5.Vector.sub(checking, currentVertex);
  const cross = a.cross(b);

  if (cross.z < 0) {
    nextVertex = checking;
    nextIndex = index;
  }
  index = index + 1;
  if (index == points.length) {
    if (nextVertex == leftMost) {
      console.log('done');
      noLoop();
    } else {

      hull.push(nextVertex);
      currentVertex = nextVertex;
      index = 0;
      //points.splice(nextIndex, 1);
      nextVertex = leftMost;
    }
  }

}

```

What I am trying to do is to change the colour of the stroke line for the current line and checking lines, when the hull has completed, so there basically isn’t a green line and a white line once the program completes?

what I am thinking is change the stroke alpha on them line to 0 so they have no opacity? but i cant seem to figure out how change the values from when it is initially set.

My p5sketch link also - [https://editor.p5js.org/FireMe/sketches/N7TUVV6t9](https://editor.p5js.org/FireMe/sketches/N7TUVV6t9)

Kind regards

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 4, 2020, 5:13pm UTC](https://discourse.processing.org/t/how-to-change-a-line-stroke-after-its-been-set/22386/2 "2020-07-04T17:13:22Z")

</div>

rather than passing numbers in `stroke()`, pass variables;

---

<div class="post-metadata">

**Author:** ![FireMe](https://avatars.discourse-cdn.com/v4/letter/f/bbe5ce/32.png) [@FireMe](https://discourse.processing.org/u/FireMe)\
**Post date:** [July 4, 2020, 5:49pm UTC](https://discourse.processing.org/t/how-to-change-a-line-stroke-after-its-been-set/22386/3 "2020-07-04T17:49:19Z")

</div>

Hi paulgoux,

Thanks for the fast reply, I had tried added a variable to the alpha argument for the RGBA, but it doesn’t seem to change it?

```auto
const points = [];
const hull = [];

let leftMost;
let currentVertex;
let index = 0;
let nextIndex = -1;
let nextVertex;

let lineAlpha = 255;

function setup() {
  createCanvas(500, 500);
  let buffer = 50;
  for (let i = 0; i < 7; i++) {
    points.push(createVector(random(buffer, width-buffer), random(buffer, height-buffer)));
  }
  
  points.sort((a,b) => a.x - b.x);
  leftMost = points[0];
  currentVertex = leftMost;
  hull.push(currentVertex);
  nextVertex = points[1];
  index = 2;
}

function draw() {
  background(0);
  
  stroke(255);
  strokeWeight(8);
  for (let p of points) {
    point(p.x,p.y);
  }
  
  stroke(3, 198, 252, 95);
  strokeWeight(2);
  fill(3,198,252,60);
  beginShape();
  for (let p of hull) {
    vertex(p.x, p.y);
  }
  endShape(CLOSE);
  
  stroke(0,255,0);
point(leftMost.x,leftMost.y);
  
  stroke(0, 0, 255);
  strokeWeight(4);
  point(currentVertex.x, currentVertex.y);
  
  
  stroke(255, 255, 255, lineAlpha);
  strokeWeight(2);
  line(currentVertex.x, currentVertex.y, nextVertex.x, nextVertex.y);
  
  let checking = points[index];
  stroke(0, 255, 0, lineAlpha);
  line(currentVertex.x, currentVertex.y, checking.x, checking.y);
  
  const a = p5.Vector.sub(nextVertex, currentVertex);
  const b = p5.Vector.sub(checking, currentVertex);
  const cross = a.cross(b);
  
  if (cross.z < 0) {
    nextVertex = checking;
    nextIndex = index;
  }
  index = index + 1;
  if (index == points.length) {
    if (nextVertex == leftMost){
      console.log('done');
      lineAlpha = 0;
      noLoop();
    } else {
      
    hull.push(nextVertex);
    currentVertex = nextVertex;
 index = 0;
    //points.splice(nextIndex, 1);
    nextVertex = leftMost;
    }
  }
  
}

```

updated p5js link - [https://editor.p5js.org/FireMe/sketches/N7TUVV6t9](https://editor.p5js.org/FireMe/sketches/N7TUVV6t9)

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [July 4, 2020, 6:24pm UTC](https://discourse.processing.org/t/how-to-change-a-line-stroke-after-its-been-set/22386/4 "2020-07-04T18:24:58Z")

</div>

Works if you move the stroke/line calls down to the bottom of draw …

```auto
let checking = points[index];

  const a = p5.Vector.sub(nextVertex, currentVertex);
  const b = p5.Vector.sub(checking, currentVertex);
  const cross = a.cross(b);

  if (cross.z < 0) {
    nextVertex = checking;
    nextIndex = index;
  }
  index = index + 1;
  if (index == points.length) {
    if (nextVertex == leftMost) {
      console.log('done');
      lineAlpha = 0;
      noLoop();
    } else {

      hull.push(nextVertex);
      currentVertex = nextVertex;
      index = 0;
      //points.splice(nextIndex, 1);
      nextVertex = leftMost;
    }
  }
  stroke(255, 255, 255, lineAlpha);
  strokeWeight(2);
  line(currentVertex.x, currentVertex.y, nextVertex.x, nextVertex.y);

  stroke(0, 255, 0, lineAlpha);
  line(currentVertex.x, currentVertex.y, checking.x, checking.y);
}

```

---

<div class="post-metadata">

**Author:** ![FireMe](https://avatars.discourse-cdn.com/v4/letter/f/bbe5ce/32.png) [@FireMe](https://discourse.processing.org/u/FireMe)\
**Post date:** [July 4, 2020, 6:33pm UTC](https://discourse.processing.org/t/how-to-change-a-line-stroke-after-its-been-set/22386/5 "2020-07-04T18:33:27Z")

</div>

ah thanks slow\_izzm,

It may take me a while to fully understand the reason for this, So I guess its due to the code running from top to bottom? would there be a way around this?

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 4, 2020, 6:40pm UTC](https://discourse.processing.org/t/how-to-change-a-line-stroke-after-its-been-set/22386/6 "2020-07-04T18:40:46Z")

</div>

you would have to list functions in the order you want them to be handled in.