Web

/*

Web by Samuli Ristimäki

​

This project draws generative cubic Bezier curve using Perlin noise.

​

Perlin noise is a random sequence generator producing a more natural ordered, 

harmonic succession of numbers compared to the standard random() function.

​

Bezier curves are commonly used in computer graphics to define gently sloping curves.

*/

​

function setup() {

  // init

  createCanvas(windowWidth, windowHeight)

  background(0)

  vel = 10

  accel = -0.001

  t = 0

  var x, y, x_off, y_off

}

​

function draw() {

  webs = []

  // noise() needs an "offset" argument, tied it to the frame count

  x_off = frameCount * 0.0001

  // y's offset increase at the same rate as x offset + 20

  y_off = x_off + 20

  // start from center

  x = windowWidth

  y = windowHeight

  // noise() the offset, and dimensions to get a "random" position for strokes

  //x = noise(x_off) * windowWidth * 1.5

  //y = noise(y_off) * windowHeight * 1.5

  // add piece of web every second frame

  if (frameCount % 2 == 0) { 

      web = new Web(x, y, x_off, y_off)

      webs.push(web)

  }

  // go through the list of webs and draw them

  webs.forEach(web => web.draw())

  // fade older parts

  fade()

}

​

function fade() {

  // add fade layer every 10 frame

  if (frameCount % 10 == 0) {

      stroke(0, 0)

      fill('rgba(0 ,0, 0, 0.01)')

      rect(0, 0, width, height)

  }

}

​

class Web {

  constructor(x, y, x_off, y_off) {

    // set the initial values for web attributes

    this.x = x

    this.y = y

    this.x_off = x_off

    this.y_off = y_off

  }

  draw() {

    // increment noise offsets

    x_off += 0.0007

    y_off += 0.0007

    // adjust velocity by acceleration

    vel += accel

    // use noise, offsets and velocity to get a new position

    x += noise(x_off) * vel - vel/2

    y += noise(y_off) * vel - vel/2

    // Hue/Saturation/Brightness mode

    colorMode(HSB, 360, 100, 100)

    // noise and the average of the x and y offsets

    var h = noise((x_off+y_off)/2)*360

    var s = 100

    var b = 100

    var a = 0.4

    // set the stroke

    stroke(h, s, b, a)

    // set no fill

    noFill()

    // coordinates for the bezier anchor points

    var x1 = x * noise(t + 15)

    var x2 = x * noise(t + 25)

    var x3 = x * noise(t + 35)

    var x4 = x * noise(t + 45)

    var y1 = y * noise(t + 55)

    var y2 = y * noise(t + 65)

    var y3 = y * noise(t + 75)

    var y4 = y * noise(t + 85)

    // draw a cubic bezier curve

    bezier(x1, y1, x2, y2, x3, y3, x4, y4)

    // increment for movement

    t += 0.005

  }

}