CS 467 Generative Art

Source

/*
Bezier Curves

This sketch allows you to draw a sequence of Bezier curve segments. 


Each segment requires two anchors and two control points. 

Click the mouse to place the anchor and control points. After the first four clicks, you will have a curve. The final anchor point is used as the anchor point for the next segment, so you will get a new line segment every three clicks after the first segment is drawn.
*/

const points = [];

function setup() {
  createCanvas(600, 600);
  angleMode(DEGREES);
  colorMode(HSB, 360, 100, 100);
  noFill();
}

function draw() {
  background("#fafafa");
  strokeWeight(7);
  points.forEach((p, i) => {
    if (i % 3) {
      stroke("red");
    } else {
      stroke("black");
    }
    point(p.x, p.y);
  });

  strokeWeight(1);
  stroke("black");

  if (points.length > 3) {
    beginShape();
    vertex(points[0].x, points[0].y);
    for (let i = 3; i < points.length; i += 3) {
      bezierVertex(
        points[i - 2].x,
        points[i - 2].y,
        points[i - 1].x,
        points[i - 1].y,
        points[i].x,
        points[i].y
      );
    }

    endShape();
  }
}

function mouseClicked() {
  points.push(createVector(mouseX, mouseY));
}