Cylindrics

var gB, gBRes, cRes;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  imageMode(CENTER);

  gB = createGraphics(gBRes = 1024, gBRes);

  gB.colorMode(HSB, 360);

  background(360);

}

​

function draw() {

  gB.resetMatrix();

  gB.stroke(0, 15);

  gB.noFill();

  gB.strokeWeight(0.25);

  gB.translate(gBRes * 0.5, gBRes * 0.5);

​

  var linePoints = [];

  for (var i = 0; i < 16; i += 1) {

    linePoints.push(noise(i, 24 * sin(frameCount%8)));

  }

​

  gB.curveTightness(-5);

​

  gB.beginShape();

  gB.curveVertex(-0.45 * gBRes, map(linePoints[0], 0, 1, -0.45 * gBRes, 0.45 * gBRes));

  for (var i = 0; i < linePoints.length; i += 1) {

    var xPos = map(i, 0, linePoints.length - 1, -0.45 * gBRes, 0.45 * gBRes);

    var yPos = map(linePoints[i], 0, 1, -0.25 * gBRes, 0.25 * gBRes);

    gB.curveVertex(xPos, yPos);

  }

  gB.curveVertex(0.45 * gBRes, map(linePoints[linePoints.length - 1], 0, 1, -0.45 * gBRes, 0.45 * gBRes));

  gB.endShape();

  displayBuffer(gB);

}

​

function displayBuffer(buffer) {

  image(buffer, windowWidth / 2, windowHeight / 2, min(windowWidth, windowHeight), min(windowWidth, windowHeight));

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}