// http://tobyschachman.com/Shadershop/

​

function fract(x) { return x - floor(x) }

function rand(x) { return fract(sin(x) * 999) }

function randStep(x) { return rand(floor(x)) }

function smoothstep(x) { return x ** 2 *(1 - 2 * (x - 1)) }

function smoothsaw(x) { return smoothstep(fract(x)) }

function noize(x) { return randStep(x) * smoothsaw(x) + randStep(x - 1) * (1 - smoothsaw(x-1)) }

​

let mode = 0

const Ys = new Array(600).fill(0)

​

function setup() {

  createCanvas(600, 400)

  textAlign(CENTER, CENTER)

  textSize(20)

}

​

function draw() {

  background(255)

  translate(width / 2, height / 2)

  stroke(220)

  line(-width, 0, width, 0)

  line(0, height, 0, -height)

  stroke(200, 200, 250)

  noFill()

  beginShape()

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

    let x = map(i, 0, 600, -width/2,width/2)

    let xx = map(x, -width/2, width/2, -3, 3)

    Ys[i] = lerp(Ys[i], (

      mode === 0 ? 0 :

      mode === 1 ? fract(xx) :

        mode === 2 ? rand(xx) :

        mode === 3 ? randStep(xx) :

      mode === 4 ? smoothstep(xx) :

      mode === 5 ? smoothsaw(xx) :

        noize(xx)),

      0.1)

    let y = map(Ys[i], -3, 3, width/2, -width/2)

    vertex(x, y)

  }

  endShape()

  fill(60)

  noStroke()

  text((

    mode === 0 ? "" :

    mode === 1 ? "fract(x) = x - floor(x)" :

    mode === 2 ? "rand(x) = fract(sin(x) * 999)" :

    mode === 3 ? "randStep(x) = rand(floor(x))" :

    mode === 4 ? "smoothstep(x) = x ** 2 *(1 - 2 * (x - 1))" :

    mode === 5 ? "smoothsaw(x) = \nsmoothstep(fract(x))" :

    "noize(x) = \nrandStep(x) * smoothsaw(x) + \nrandStep(x - 1) * (1 - smoothsaw(x-1))"

  ), 0, 100)

  if(frameCount % 200 === 0) mode = ++ mode % 7

}