Curl noise ribbons with three.js

main.js

var THREE = require('three')
var SimplexNoise = require('simplex-noise')

document.documentElement.style.width = '100%'
document.documentElement.style.height = '100%'
document.body.style.width = '100%'
document.body.style.height = '100%'
document.body.style.margin = '0'
document.body.style.overflow = 'hidden'
var canvas = document.createElement('canvas')
canvas.style.width = '100%'
canvas.style.height = '100%'
document.body.insertBefore(canvas, document.body.firstChild)

var renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true
})
renderer.setSize(window.innerWidth, window.innerHeight)

var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 1, 500)
camera.position.set(0, 0, 100)
camera.lookAt(new THREE.Vector3(0, 0, 0))
var camPivot = new THREE.Object3D()
camPivot.add(camera)

var scene = new THREE.Scene()
scene.add(camPivot)

function Whisp (sx, sy, sz, ct, ll, cl) {
  var simplex = new SimplexNoise()
  this.strands = []
  var lineLength = ll
  var walker = { x: sx, y: sy, z: sz }
  var offset = 1
  var tx = 99 * Math.random()
  var ty = 9999 * Math.random()
  var tz = 99999 * Math.random()
  var count = ct

  var material = new THREE.LineBasicMaterial({ color: cl })
  for (var i = 0; i < count; ++i) {
    var geometry = new THREE.Geometry()
    geometry.dynamic = true
    for (var j = 0; j < lineLength; ++j) {
      geometry.vertices.push(
        new THREE.Vector3(walker.x, walker.y + i * offset, walker.z)
      )
    }
    this.strands.push(new THREE.Line(geometry, material))
  }

  var mod = 80
  var step = 0.001

  this.walk = function () {
    walker.x += simplex.noise4D(
      walker.x / mod,
      walker.y / mod,
      walker.z / mod,
      tx
    )

    walker.y += simplex.noise4D(
      walker.x / mod,
      walker.y / mod,
      walker.z / mod,
      ty
    )

    walker.z += simplex.noise4D(
      walker.x / mod,
      walker.y / mod,
      walker.z / mod,
      tz
    )

    tx += step
    ty += step
    tz += step

    for (var i = 0; i < count; ++i) {
      this.strands[i].geometry.vertices.push(
        new THREE.Vector3(walker.x, walker.y + i * offset, walker.z)
      )
      this.strands[i].geometry.vertices.shift()
      this.strands[i].geometry.verticesNeedUpdate = true
    }
  }
}

var colors = [0x4deeea, 0x74ee15, 0xffe700, 0xf000ff, 0x001eff]
var whisps = []
for (var i = 0; i < 15; ++i) {
  var color = colors[Math.floor(Math.random() * colors.length)]
  console.log(Math.floor(Math.random() * colors.length))
  whisps.push(new Whisp(0, 0, 0, 10, 1000, color))
  scene.add(...whisps[i].strands)
}

function animate () {
  window.requestAnimationFrame(animate)

  for (var i = 0; i < whisps.length; ++i) {
    whisps[i].walk()
  }

  renderer.render(scene, camera)
}

animate()

canvas.addEventListener('mousemove', function (evt) {
  var camMod = 0.007
  camPivot.rotation.y = -(window.innerWidth / 2 - evt.clientX) * camMod
  camPivot.rotation.x = -(window.innerHeight / 2 - evt.clientY) * camMod
})