​

function setup() {

  createCanvas(400, 400);

  strokeWeight(2);

  // Generate random threads

  for (let i = 0; i < 10; i++) {

    threads.push(new Thread(random(width), random(height), random(width), random(height)));

  }

​

  // Determine which threads go over or under at each intersection and segment them

  checkIntersectionsAndSegment();

}

​

function draw() {

  background(255);

  // Draw threads, considering over/under state

  for (let i = 0; i < threads.length; i++) {

    threads[i].display();

  }

}

​

// Class to store thread information

class Thread {

  constructor(x1, y1, x2, y2) {

    this.segments = [{x1: x1, y1: y1, x2: x2, y2: y2, isOver: false}];

  }

​

  // Display the thread as small rectangles

  display() {

    for (let seg of this.segments) {

      if (seg.isOver) {

        fill(0); // black for over

      } else {

        fill(150); // gray for under

      }

      drawThreadSegmentAsRectangles(seg);

    }

  }

}

​

// Function to draw a thread segment as small rectangles

function drawThreadSegmentAsRectangles(seg) {

  let numRects = 20; // Number of small rectangles per segment

  let dx = (seg.x2 - seg.x1) / numRects;

  let dy = (seg.y2 - seg.y1) / numRects;

  for (let i = 0; i < numRects; i++) {

    rect(seg.x1 + i * dx, seg.y1 + i * dy, 5, 5); // Draw each rectangle

  }

}

​

// Simple intersection detection

function intersects(seg1, seg2) {

  let denominator = (seg1.x1 - seg1.x2) * (seg2.y1 - seg2.y2) - (seg1.y1 - seg1.y2) * (seg2.x1 - seg2.x2);

  if (denominator == 0) return false; // Parallel lines don't intersect

​

  let t = ((seg1.x1 - seg2.x1) * (seg2.y1 - seg2.y2) - (seg1.y1 - seg2.y1) * (seg2.x1 - seg2.x2)) / denominator;

  let u = -((seg1.x1 - seg1.x2) * (seg1.y1 - seg2.y1) - (seg1.y1 - seg1.y2) * (seg1.x1 - seg2.x1)) / denominator;

​

  if (t >= 0 && t <= 1 && u >= 0 && u <= 1) {

    // Calculate intersection point

    let ix = seg1.x1 + t * (seg1.x2 - seg1.x1);

    let iy = seg1.y1 + t * (seg1.y2 - seg1.y1);

    return {ix: ix, iy: iy};

  }

  return false;

}

​

// Check for intersections and segment the threads

function checkIntersectionsAndSegment() {

  for (let i = 0; i < threads.length; i++) {

    for (let j = i + 1; j < threads.length; j++) {

      for (let seg1 of threads[i].segments) {

        for (let seg2 of threads[j].segments) {

          let intersection = intersects(seg1, seg2);

          if (intersection) {

            // Split both threads at the intersection point

            splitSegment(threads[i], seg1, intersection.ix, intersection.iy);

            splitSegment(threads[j], seg2, intersection.ix, intersection.iy);

​

            // Randomly assign over/under

            if (random(1) > 0.5) {

              seg1.isOver = true;

              seg2.isOver = false;

            } else {

              seg1.isOver = false;

              seg2.isOver = true;

            }

          }

        }

      }

    }

  }

}

​

// Function to split a segment at a given point

function splitSegment(thread, segment, ix, iy) {

  let newSegment = {x1: ix, y1: iy, x2: segment.x2, y2: segment.y2, isOver: segment.isOver};

  segment.x2 = ix;

  segment.y2 = iy;

  thread.segments.push(newSegment);

}

​