How to change a line stroke after its been set?

p5.js Coding Questions
1

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[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

Kind regards

1 Like
2

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

2 Likes
3

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[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

4

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
5

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
6

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

2 Likes