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

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.

``````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;
currentVertex = leftMost;
hull.push(currentVertex);
nextVertex = points;
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

Kind regards

1 Like

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

2 Likes

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?

``````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;
currentVertex = leftMost;
hull.push(currentVertex);
nextVertex = points;
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;
}
}

}
``````

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

``````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);
}
``````
2 Likes

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?

1 Like

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

2 Likes